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



+13 -29
+9 -26
css/index.css
··· 118 118 align-items: center; 119 119 justify-content: center; 120 120 gap: 8px; 121 - padding: 8px; 121 + padding: 8px 14px; /* keep expanded size by default */ 122 122 border-radius: 999px; 123 123 background: rgba(255,255,255,0.04); 124 124 color: var(--bsky-text-color); 125 125 text-decoration: none; 126 126 border: 1px solid var(--bsky-border); 127 127 font-size: 0.95rem; 128 - transition: padding 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease; 128 + /* hover/transition effects removed to make buttons static */ 129 129 flex: 0 0 auto; /* don't stretch; allow pushing */ 130 130 min-width: 44px; 131 131 } ··· 139 139 /* label hidden by default, revealed on hover */ 140 140 .social-btn .label { 141 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; 142 + /* always visible (no hover reveal) */ 143 + opacity: 1; 144 + transform: translateX(0); 145 + margin-left: 8px; 146 146 white-space: nowrap; 147 - pointer-events: none; 148 147 color: inherit; 149 148 font-weight: 600; 150 149 font-size: 0.95rem; 151 - max-width: 0; 150 + max-width: 180px; 152 151 overflow: hidden; 153 152 vertical-align: middle; 154 153 } 155 154 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 - } 155 + /* hover styles removed - buttons are static */ 168 156 169 157 /* brand color variables per button */ 170 158 .btn-bluesky { --btn-bg: #0077ff; --btn-border: rgba(0,119,255,0.6); } ··· 173 161 .btn-threads { --btn-bg: #000000; --btn-border: rgba(17,24,39,0.4); } 174 162 .btn-mastodon { --btn-bg: #6364FF; --btn-border: rgba(48,136,212,0.4); } 175 163 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; } 164 + /* brand hover rules removed to disable hover color changes */ 182 165 183 166 /* Screen-reader only text (keep for accessibility) */ 184 167 .sr-only {
+4 -3
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>Daniel Morrisey - nadebydanny.uk</title> 6 + <title>Daniel Morrisey  - nadebydanny.uk</title> 7 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"> ··· 14 14 <link rel="stylesheet" href="/css/index.css"> 15 15 </head> 16 16 <body> 17 - <h1>Hi, I'm Daniel Morrisey</h1> 17 + <h1>Hi, I'm Daniel Morrisey </h1> 18 18 <p>I like to listen to Music <i>(Mainly Tate McRae and Taylor Swift)</i>, and post on Bluesky</p> 19 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> 20 20 <div id="music-status-card"> ··· 68 68 </a> 69 69 </div> 70 70 <hr> 71 - <p>&copy; 2024-2026 Daniel Morrisey by <a href="/followonbsky.html?did=did:plc:l37td5yhxl2irrzrgvei4qay">@madebydanny.uk</a></p> 71 + <p>&copy; 2024-26 Daniel Morrisey by <a href="/followonbsky.html?did=did:plc:l37td5yhxl2irrzrgvei4qay">@madebydanny.uk</a> - hosted on <a href="https://wisp.place" target="_blank">wisp.place</a></p> 72 + <p></p> 72 73 73 74 <script> 74 75 const BLUESKY_DID = 'did:plc:4qjpcixqrc3b2qmbce76sm7k';