madebydanny.uk written in html, css, and a lot of JavaScript I don't understand madeydanny.uk
html css javascript

added stuff

+249 -185
+1
.well-known/atproto-did
··· 1 + did:plc:l37td5yhxl2irrzrgvei4qay
-26
.well-known/did.json
··· 1 - { 2 - "@context": [ 3 - "https://www.w3.org/ns/did/v1", 4 - "https://w3id.org/security/multikey/v1", 5 - "https://w3id.org/security/suites/secp256k1-2019/v1" 6 - ], 7 - "id": "did:web:madebyda", 8 - "alsoKnownAs": [ 9 - "at://danielweb.pds.madebydanny.uk" 10 - ], 11 - "verificationMethod": [ 12 - { 13 - "id": "did:web:madebyda#atproto", 14 - "type": "Multikey", 15 - "controller": "did:web:madebydanny.uk", 16 - "publicKeyMultibase": "zQ3shvTiQkygYvBcUGPxBF2SuZ7VURddsFr6exLHfZg8c3EWV" 17 - } 18 - ], 19 - "service": [ 20 - { 21 - "id": "#atproto_pds", 22 - "type": "AtprotoPersonalDataServer", 23 - "serviceEndpoint": "https://pds.madebydanny.uk" 24 - } 25 - ] 26 - }
+190
css/index.css
··· 1 + /* --- THEME VARIABLES --- */ 2 + :root { 3 + --bsky-card-bg: #4a2b32; 4 + --bsky-post-bg: #1e1e1e; 5 + --bsky-text-color: #ffffff; 6 + --bsky-subtext-color: #dcbaba; 7 + --bsky-link-color: #ffcccc; 8 + --bsky-border: rgba(255,255,255,0.1); 9 + } 10 + 11 + body { 12 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 13 + background-color: #121212; 14 + color: white; 15 + padding: 20px; 16 + line-height: 1.5; 17 + margin: auto; 18 + text-align: center; 19 + max-width: 600px; 20 + } 21 + 22 + /* --- CARD STYLING --- */ 23 + #music-status-card, #latest-post-card { 24 + background-color: var(--bsky-card-bg); 25 + color: var(--bsky-text-color); 26 + border-radius: 12px; 27 + padding: 16px; 28 + margin: 20px auto; 29 + display: none; 30 + box-shadow: 0 4px 6px rgba(0,0,0,0.3); 31 + max-width: 500px; 32 + border: 1px solid var(--bsky-border); 33 + text-align: center; 34 + } 35 + 36 + .bsky-header { 37 + font-size: 0.75rem; 38 + text-transform: uppercase; 39 + letter-spacing: 0.05em; 40 + color: var(--bsky-subtext-color); 41 + margin-bottom: 12px; 42 + display: flex; 43 + justify-content: center; 44 + align-items: center; 45 + gap: 8px; 46 + } 47 + 48 + .bsky-header a { 49 + color: var(--bsky-subtext-color); 50 + text-decoration: none; 51 + } 52 + 53 + .bsky-content-body { 54 + margin-bottom: 12px; 55 + word-wrap: break-word; 56 + text-align: center; 57 + } 58 + 59 + /* --- POST IMAGE STYLING --- */ 60 + .post-image { 61 + width: 100%; 62 + border-radius: 8px; 63 + margin: 10px auto 0 auto; 64 + border: 1px solid var(--bsky-border); 65 + display: block; 66 + } 67 + 68 + .bsky-trackname { 69 + font-weight: 700; 70 + font-size: 1.1rem; 71 + display: block; 72 + color: var(--bsky-text-color); 73 + text-decoration: none; 74 + margin-bottom: 2px; 75 + } 76 + 77 + .bsky-artist { 78 + color: var(--bsky-subtext-color); 79 + font-size: 0.95rem; 80 + } 81 + 82 + .bsky-footer { 83 + border-top: 1px solid var(--bsky-border); 84 + padding-top: 10px; 85 + margin-top: 12px; 86 + font-size: 0.8rem; 87 + color: var(--bsky-subtext-color); 88 + display: flex; 89 + align-items: center; 90 + justify-content: center; 91 + gap: 8px; 92 + } 93 + 94 + a { color: var(--bsky-link-color); } 95 + 96 + .error-msg { 97 + color: #ff6b6b; 98 + font-size: 0.9rem; 99 + } 100 + 101 + hr { 102 + border: none; 103 + border-top: 1px solid var(--bsky-border); 104 + margin: 20px 0; 105 + } 106 + 107 + /* Social button row */ 108 + .social-row { 109 + display: flex; 110 + gap: 10px; 111 + flex-wrap: wrap; 112 + margin: 12px 0 20px 0; 113 + justify-content: center; 114 + } 115 + 116 + .social-btn { 117 + display: inline-flex; 118 + align-items: center; 119 + justify-content: center; 120 + gap: 8px; 121 + padding: 8px; 122 + border-radius: 999px; 123 + background: rgba(255,255,255,0.04); 124 + color: var(--bsky-text-color); 125 + text-decoration: none; 126 + border: 1px solid var(--bsky-border); 127 + font-size: 0.95rem; 128 + transition: padding 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease; 129 + flex: 0 0 auto; /* don't stretch; allow pushing */ 130 + min-width: 44px; 131 + } 132 + 133 + .social-btn i { 134 + width: 1.1em; 135 + text-align: center; 136 + font-size: 1.05em; 137 + } 138 + 139 + /* label hidden by default, revealed on hover */ 140 + .social-btn .label { 141 + display: inline-block; 142 + opacity: 0; 143 + transform: translateX(-6px); 144 + transition: opacity 160ms ease, transform 160ms ease, max-width 180ms ease, margin-left 160ms ease; 145 + margin-left: 0; 146 + white-space: nowrap; 147 + pointer-events: none; 148 + color: inherit; 149 + font-weight: 600; 150 + font-size: 0.95rem; 151 + max-width: 0; 152 + overflow: hidden; 153 + vertical-align: middle; 154 + } 155 + 156 + /* expand on hover: show label and add brand color */ 157 + .social-btn:hover { 158 + padding: 8px 14px; 159 + transform: translateZ(0); 160 + } 161 + 162 + .social-btn:hover .label { 163 + opacity: 1; 164 + transform: translateX(0); 165 + margin-left: 8px; 166 + max-width: 180px; 167 + } 168 + 169 + /* brand color variables per button */ 170 + .btn-bluesky { --btn-bg: #0077ff; --btn-border: rgba(0,119,255,0.6); } 171 + .btn-instagram { --btn-bg: #E1306C; --btn-border: rgba(225,48,108,0.5); } 172 + .btn-tangled { --btn-bg: #000000; --btn-border: rgba(107,114,128,0.4); } 173 + .btn-threads { --btn-bg: #000000; --btn-border: rgba(17,24,39,0.4); } 174 + .btn-mastodon { --btn-bg: #6364FF; --btn-border: rgba(48,136,212,0.4); } 175 + 176 + /* apply brand color on hover */ 177 + .btn-bluesky:hover { background: var(--btn-bg); border-color: var(--btn-border); color: #fff; } 178 + .btn-instagram:hover { background: var(--btn-bg); border-color: var(--btn-border); color: #fff; } 179 + .btn-tangled:hover { background: var(--btn-bg); border-color: var(--btn-border); color: #fff; } 180 + .btn-threads:hover { background: var(--btn-bg); border-color: var(--btn-border); color: #fff; } 181 + .btn-mastodon:hover { background: var(--btn-bg); border-color: var(--btn-border); color: #fff; } 182 + 183 + /* Screen-reader only text (keep for accessibility) */ 184 + .sr-only { 185 + position: absolute !important; 186 + height: 1px; width: 1px; 187 + overflow: hidden; 188 + clip: rect(1px, 1px, 1px, 1px); 189 + white-space: nowrap; 190 + }
-49
css/style.css
··· 1 - /* Base Styles */ 2 - body { 3 - background-color: #1a1a1a; 4 - color: #ffffff; 5 - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 6 - font-size: 16px; 7 - margin: 0; 8 - padding: 40px 20px; 9 - line-height: 1.6; 10 - max-width: 500px; 11 - margin: auto; 12 - } 13 - 14 - /* Headings */ 15 - h1 { 16 - font-size: 28px; 17 - margin: 0 0 20px 0; 18 - color: #ffffff; 19 - } 20 - 21 - /* Paragraphs */ 22 - p { 23 - margin: 10px 0; 24 - color: #ffffff; 25 - } 26 - 27 - /* Emphasis */ 28 - i { 29 - color: #f4871b; 30 - } 31 - 32 - a { 33 - color: #ff9933; 34 - text-decoration: none; 35 - } 36 - b { 37 - font-weight: bold; 38 - color: #ffffff; 39 - } 40 - a:hover { 41 - text-decoration: underline; 42 - color: white; 43 - } 44 - hr { 45 - border: 0; 46 - height: 1px; 47 - background: #333333; 48 - margin: 20px 0; 49 - }
+32 -110
index.html
··· 3 3 <head> 4 4 <meta charset="UTF-8"> 5 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 - <title>madebydanny.uk</title> 7 - <link rel="icon" id="favicon" href="https://imrs.madebydanny.uk/?url=https://cloudflareisawesome.madebydanny.uk/madebydanny.uk/seo/favicon.webp"> 6 + <title>Daniel Morrisey - nadebydanny.uk</title> 7 + <script src="https://kit.fontawesome.com/0ca27f8db1.js" crossorigin="anonymous"></script> <link rel="icon" id="favicon" href="https://imrs.madebydanny.uk/?url=https://cloudflareisawesome.madebydanny.uk/madebydanny.uk/seo/favicon.webp"> 8 8 <meta name="description" id="meta-description" content="Posting everything into the endless jet stream of posts"> 9 9 <meta property="og:title" content="madebydanny.uk"> 10 10 <meta property="og:description" id="og-description" content="Posting everything into the endless jet stream of posts"> 11 11 <meta property="og:type" content="website"> 12 12 <meta property="og:url" content="https://madebydanny.uk/"> 13 13 <meta property="og:image" id="og-image" content="/media/ogimg.png"> 14 - <style> 15 - /* --- THEME VARIABLES --- */ 16 - :root { 17 - --bsky-card-bg: #4a2b32; 18 - --bsky-post-bg: #1e1e1e; 19 - --bsky-text-color: #ffffff; 20 - --bsky-subtext-color: #dcbaba; 21 - --bsky-link-color: #ffcccc; 22 - --bsky-border: rgba(255,255,255,0.1); 23 - } 24 - 25 - body { 26 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 27 - background-color: #121212; 28 - color: white; 29 - padding: 20px; 30 - line-height: 1.5; 31 - } 32 - 33 - /* --- CARD STYLING --- */ 34 - #music-status-card, #latest-post-card { 35 - background-color: var(--bsky-card-bg); 36 - color: var(--bsky-text-color); 37 - border-radius: 12px; 38 - padding: 16px; 39 - margin: 20px 0; 40 - display: none; 41 - box-shadow: 0 4px 6px rgba(0,0,0,0.3); 42 - max-width: 500px; 43 - border: 1px solid var(--bsky-border); 44 - } 45 - 46 - .bsky-header { 47 - font-size: 0.75rem; 48 - text-transform: uppercase; 49 - letter-spacing: 0.05em; 50 - color: var(--bsky-subtext-color); 51 - margin-bottom: 12px; 52 - display: flex; 53 - justify-content: space-between; 54 - align-items: center; 55 - } 56 - 57 - .bsky-header a { 58 - color: var(--bsky-subtext-color); 59 - text-decoration: none; 60 - } 61 - 62 - .bsky-content-body { 63 - margin-bottom: 12px; 64 - word-wrap: break-word; 65 - } 66 - 67 - /* --- POST IMAGE STYLING --- */ 68 - .post-image { 69 - width: 100%; 70 - border-radius: 8px; 71 - margin-top: 10px; 72 - border: 1px solid var(--bsky-border); 73 - display: block; 74 - } 75 - 76 - .bsky-trackname { 77 - font-weight: 700; 78 - font-size: 1.1rem; 79 - display: block; 80 - color: var(--bsky-text-color); 81 - text-decoration: none; 82 - margin-bottom: 2px; 83 - } 84 - 85 - .bsky-artist { 86 - color: var(--bsky-subtext-color); 87 - font-size: 0.95rem; 88 - } 89 - 90 - .bsky-footer { 91 - border-top: 1px solid var(--bsky-border); 92 - padding-top: 10px; 93 - margin-top: 12px; 94 - font-size: 0.8rem; 95 - color: var(--bsky-subtext-color); 96 - display: flex; 97 - align-items: center; 98 - } 99 - 100 - a { color: var(--bsky-link-color); } 101 - 102 - .error-msg { 103 - color: #ff6b6b; 104 - font-size: 0.9rem; 105 - } 106 - 107 - hr { 108 - border: none; 109 - border-top: 1px solid var(--bsky-border); 110 - margin: 20px 0; 111 - } 112 - </style> 14 + <link rel="stylesheet" href="/css/index.css"> 113 15 </head> 114 16 <body> 115 17 <h1>Hi, I'm Daniel Morrisey</h1> 116 - <p>I like to listen to Music <i>(Mainly Tate McRae and Taylor Swift)</i>, and post on Bluesky.</p> 18 + <p>I like to listen to Music <i>(Mainly Tate McRae and Taylor Swift)</i>, and post on Bluesky</p> 19 + <p>I'm also on <a>Threads</a> and <a>Mastodon</a>, but active on <a>Bluesky</a>, becuase it's the best social media platform</p> 117 20 <div id="music-status-card"> 118 21 <div class="bsky-header"> 119 22 <span>Recently played</span> ··· 138 41 </div> 139 42 <hr> 140 43 <p><b>Social Links:</b></p> 141 - <ul> 142 - <li><a href="/followonbsky.html?did=madebydanny.uk">Bluesky</a></li> 143 - <li><a href="https://instagram.com/madebydanny.uk" target="_blank">Instagram</a></li> 144 - <li><a href="https://tangled.org/madebydannyuk" target="_blank">Tangled</a></li> 145 - <li><a href="https://threads.net/@madebydanny.uk" target="_blank">Threads</a></li> 146 - <li><a href="https://mastodon.social/@danielmorrisey" target="_blank">Mastodon</a></li> 147 - </ul> 44 + <div class="social-row" role="list"> 45 + <a class="social-btn btn-bluesky" role="listitem" href="/followonbsky.html?did=did:plc:l37td5yhxl2irrzrgvei4qay" aria-label="Bluesky"> 46 + <i class="fa-brands fa-bluesky"></i> 47 + <span class="label">Bluesky</span> 48 + </a> 49 + 50 + <a class="social-btn btn-instagram" role="listitem" href="https://instagram.com/madebydanny.uk" target="_blank" rel="noopener noreferrer" aria-label="Instagram"> 51 + <i class="fa-brands fa-instagram"></i> 52 + <span class="label">Instagram</span> 53 + </a> 54 + 55 + <a class="social-btn btn-tangled" role="listitem" href="https://tangled.org/madebydannyuk" target="_blank" rel="noopener noreferrer" aria-label="Tangled"> 56 + <i class="fa-brands fa-git-alt"></i> 57 + <span class="label">Tangled</span> 58 + </a> 59 + 60 + <a class="social-btn btn-threads" role="listitem" href="https://threads.net/@madebydanny.uk" target="_blank" rel="noopener noreferrer" aria-label="Threads"> 61 + <i class="fa-brands fa-threads"></i> 62 + <span class="label">Threads</span> 63 + </a> 64 + 65 + <a class="social-btn btn-mastodon" role="listitem" href="https://mastodon.social/@danielmorrisey" target="_blank" rel="noopener noreferrer" aria-label="Mastodon"> 66 + <i class="fa-brands fa-mastodon"></i> 67 + <span class="label">Mastodon</span> 68 + </a> 69 + </div> 148 70 <hr> 149 - <p>&copy; 2024-2026 Daniel Morrisey by <a href="/followonbsky.html?did=madebydanny.uk">@madebydanny.uk</a></p> 71 + <p>&copy; 2024-2026 Daniel Morrisey by <a href="/followonbsky.html?did=did:plc:l37td5yhxl2irrzrgvei4qay">@madebydanny.uk</a></p> 150 72 151 73 <script> 152 74 const BLUESKY_DID = 'did:plc:4qjpcixqrc3b2qmbce76sm7k';
+26
lexicons/uk.madebydanny.my.accounts.json
··· 1 + { 2 + "lexicon": 1, 3 + "id": "uk.madebydanny.my.accounts", 4 + "defs": { 5 + "main": { 6 + "type": "record", 7 + "description": "A list of associated AT Protocol accounts owned by the user.", 8 + "record": { 9 + "type": "object", 10 + "required": ["accounts"], 11 + "properties": { 12 + "accounts": { 13 + "type": "array", 14 + "items": { "type": "string", "format": "did" }, 15 + "description": "A list of DIDs belonging to the same user." 16 + }, 17 + "description": { 18 + "type": "string", 19 + "maxGraphemes": 300, 20 + "description": "A brief explanation of these account links." 21 + } 22 + } 23 + } 24 + } 25 + } 26 + }
media/ogimg.png

This is a binary file and will not be displayed.