diff --git a/cdn.html b/cdn.html index c201576..f5eefa9 100644 --- a/cdn.html +++ b/cdn.html @@ -1,2 +1,351 @@ -The MBD CDN is a network of servers located around the world powered by the Cloudflare global network. It's designed to deliver media (images, videos, live broadcasts, etc) at extremely fast speeds with 100% uptime -If you wish to use the MBD CDN please email cdn@danielmorrisey.com \ No newline at end of file + + + + + + MBD CDN - madebydanny.uk + + + + + + + + + + + +

MBD CDN

+

+ The MBD CDN is a network of servers located around the world powered by the Cloudflare global network. +
+ It's designed to deliver media (images, videos, live broadcasts, etc) at extremely fast speeds with 100% uptime +

+ +
+ + + + +
+ +
+ Public URL: +
+ +
+
+ +
+

Social Links:

+ +
+ + + + + + \ No newline at end of file diff --git a/css/cdn.css b/css/cdn.css index 4b19063..93b004b 100644 --- a/css/cdn.css +++ b/css/cdn.css @@ -1,210 +1,178 @@ -:root { - --bg: #121212; - --panel: #1e1e1e; - --muted: #888; - --text: #e0e0e0; - --accent: #f71900; - --radius: 12px; - --gap: 20px; -} - -body { - font-family: 'Fira Code', monospace; - background-color: var(--bg); - color: var(--text); - margin: 40px; - line-height: 1.6; -} - -.center { - max-width: 800px; - margin: 0 auto; -} - -h1 { - text-align: center; - margin-bottom: 10px; -} - -p { - text-align: center; - color: var(--muted); -} - -ul, ol { - color: var(--text); - padding-left: 20px; -} - -li { - margin-bottom: 6px; -} - -a { - color: var(--accent); - text-decoration: none; -} -/* Card */ -.card { - background-color: var(--panel); - padding: 22px; - border-radius: var(--radius); - margin-top: 20px; - box-shadow: 0 4px 8px rgba(0,0,0,0.2); - transition: transform 0.3s ease, box-shadow 0.3s ease; -} -.card:hover { - transform: translateY(-4px); - box-shadow: 0 8px 16px rgba(0,0,0,0.25); -} - -.heading { - font-size: 18px; - margin-bottom: 14px; - font-weight: 600; -} - -/* Drop Zone */ -.drop-zone { - background-color: #2a2a2a; - border: 2px dashed #444; - border-radius: var(--radius); - padding: 30px; - text-align: center; - margin-bottom: 18px; - cursor: pointer; - transition: border-color 0.3s ease, background-color 0.3s ease; -} -.drop-zone.drag-over { - border-color: var(--accent); - background-color: #1b1b1b; -} -.drop-zone p { - margin: 0; - color: var(--muted); -} - -/* Checkbox + Button */ -.checkbox-label { - display: flex; - align-items: center; - gap: 8px; - color: var(--text); - font-size: 14px; - margin-bottom: 16px; -} - -.btn { - background: var(--accent); - color: white; - border: none; - border-radius: 8px; - padding: 10px 16px; - font-family: 'Fira Code', monospace; - cursor: pointer; - transition: background 0.2s ease, transform 0.2s ease, filter 0.2s ease; - display: flex; - align-items: center; - justify-content: center; - gap: 6px; - width: 100%; -} -.btn:hover { - filter: brightness(1.15); - transform: translateY(-2px); -} - -.result { - margin-top: 16px; - text-align: center; - word-break: break-all; -} -.result a { - color: var(--accent); -} - -/* Stats Section */ -.stats { - margin-top: 10px; - display: flex; - justify-content: center; - gap: 1rem; - flex-wrap: wrap; - margin-bottom: 1rem; -} -.stat-box { - background: var(--panel); - border-radius: 10px; - padding: 0.8rem 1.2rem; - text-align: center; - min-width: calc(33% - 3rem); -} -.stat-box p { - margin: 0; - font-size: 13px; - color: var(--muted); -} -.stat-box h1 { - margin: 4px 0 0 0; - color: var(--accent); - font-weight: 600; - font-size: 20px; -} - -/* Features / Docs Section */ -.features-card ul, -.docs-card ol { - margin: 0; - padding-left: 20px; -} -.features-card li, -.docs-card li { - margin-bottom: 8px; -} - -/* Footer */ -footer { - text-align: center; - margin-top: 40px; -} -hr { - border: 0; - height: 1px; - background: #333; - margin: 30px 0; -} - -/* Optional responsive tweaks */ -@media (max-width: 600px) { - body { - margin: 20px; - } - .stats { - flex-direction: column; - align-items: center; - } - .stat-box { - min-width: unset; - width: 80%; - } -} -header2 { - display: flex; - justify-content: space-between; - align-items: center; - max-width: 900px; - margin: 0 auto 1.5rem; -} -header2 h1 { - font-size: 1.2rem; - margin: 0; - color: var(--accent); -} -nav a { - color: #eaeaea; - text-decoration: none; - margin-left: 1rem; -} -nav a:hover { - color: var(--accent); -} \ No newline at end of file + /* --- THEME VARIABLES --- */ + :root { + --bsky-card-bg: #4a2b32; + --bsky-post-bg: #1e1e1e; + --bsky-text-color: #ffffff; + --bsky-subtext-color: #dcbaba; + --bsky-link-color: #ffcccc; + --bsky-border: rgba(255,255,255,0.1); + } + + body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + background-color: #121212; + color: white; + padding: 20px; + line-height: 1.5; + margin: auto; + text-align: center; + max-width: 600px; + } + + /* --- CARD STYLING --- */ + #music-status-card, #latest-post-card { + background-color: var(--bsky-card-bg); + color: var(--bsky-text-color); + border-radius: 12px; + padding: 16px; + margin: 20px auto; + display: none; + box-shadow: 0 4px 6px rgba(0,0,0,0.3); + max-width: 500px; + border: 1px solid var(--bsky-border); + text-align: center; + } + + .bsky-header { + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--bsky-subtext-color); + margin-bottom: 12px; + display: flex; + justify-content: center; + align-items: center; + gap: 8px; + } + + .bsky-header a { + color: var(--bsky-subtext-color); + text-decoration: none; + } + + .bsky-content-body { + margin-bottom: 12px; + word-wrap: break-word; + text-align: center; + } + + /* --- POST IMAGE STYLING --- */ + .post-image { + width: 100%; + border-radius: 8px; + margin: 10px auto 0 auto; + border: 1px solid var(--bsky-border); + display: block; + } + + .bsky-trackname { + font-weight: 700; + font-size: 1.1rem; + display: block; + color: var(--bsky-text-color); + text-decoration: none; + margin-bottom: 2px; + } + + .bsky-artist { + color: var(--bsky-subtext-color); + font-size: 0.95rem; + } + + .bsky-footer { + border-top: 1px solid var(--bsky-border); + padding-top: 10px; + margin-top: 12px; + font-size: 0.8rem; + color: var(--bsky-subtext-color); + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + } + + a { color: var(--bsky-link-color); } + + .error-msg { + color: #ff6b6b; + font-size: 0.9rem; + } + + hr { + border: none; + border-top: 1px solid var(--bsky-border); + margin: 20px 0; + } + + /* Social button row */ + .social-row { + display: flex; + gap: 10px; + flex-wrap: wrap; + margin: 12px 0 20px 0; + justify-content: center; + } + + .social-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 8px 14px; /* keep expanded size by default */ + border-radius: 999px; + background: rgba(255,255,255,0.04); + color: var(--bsky-text-color); + text-decoration: none; + border: 1px solid var(--bsky-border); + font-size: 0.95rem; + flex: 0 0 auto; /* don't stretch; allow pushing */ + min-width: 44px; + transition: all 0.2s ease; + } + + .social-btn:hover { + background: var(--btn-bg); + border-color: var(--btn-border); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0,0,0,0.3); + } + + .social-btn i { + width: 1.1em; + text-align: center; + font-size: 1.05em; + } + + /* label hidden by default, revealed on hover */ + .social-btn .label { + display: inline-block; + /* always visible (no hover reveal) */ + opacity: 1; + transform: translateX(0); + margin-left: 8px; + white-space: nowrap; + color: inherit; + font-weight: 600; + font-size: 0.95rem; + max-width: 180px; + overflow: hidden; + vertical-align: middle; + } + + /* hover styles removed - buttons are static */ + + /* brand color variables per button */ + .btn-bluesky { --btn-bg: #0077ff; --btn-border: rgba(0,119,255,0.6); } + .btn-instagram { --btn-bg: #E1306C; --btn-border: rgba(225,48,108,0.5); } + .btn-tangled { --btn-bg: #000000; --btn-border: rgba(107,114,128,0.4); } + .btn-threads { --btn-bg: #000000; --btn-border: rgba(17,24,39,0.4); } + .btn-mastodon { --btn-bg: #6364FF; --btn-border: rgba(48,136,212,0.4); } + + /* Screen-reader only text (keep for accessibility) */ + .sr-only { + position: absolute !important; + height: 1px; width: 1px; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + white-space: nowrap; + } \ No newline at end of file