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

Configure Feed

Select the types of activity you want to include in your feed.

removed photos

+3 -408
.DS_Store

This is a binary file and will not be displayed.

-286
css/photos.css
··· 1 - * { 2 - margin: 0; 3 - padding: 0; 4 - box-sizing: border-box; 5 - } 6 - 7 - body { 8 - background-image: url("https://mbdio.uk/xrpc/com.atproto.sync.getBlob?did=did:plc:l37td5yhxl2irrzrgvei4qay&cid=bafkreiaacpwadofsbjvqhwta4asrsf4cqw72rtbmrnrxafr3xd5j3hu7ke"); 9 - background-repeat: no-repeat; 10 - background-position: center center; 11 - background-size: cover; 12 - background-attachment: fixed; 13 - color: white; 14 - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; 15 - line-height: 1.6; 16 - } 17 - 18 - .header { 19 - text-align: center; 20 - padding: 60px 20px 40px; 21 - background: linear-gradient(180deg, rgba(153, 153, 255, 0.1) 0%, transparent 100%); 22 - } 23 - 24 - .header h1 { 25 - font-size: 3em; 26 - margin-bottom: 10px; 27 - font-weight: 700; 28 - letter-spacing: -1px; 29 - } 30 - 31 - .header p { 32 - font-size: 1.2em; 33 - color: #b3b3ff; 34 - margin-bottom: 30px; 35 - } 36 - 37 - .nav-links { 38 - display: flex; 39 - justify-content: center; 40 - gap: 15px; 41 - flex-wrap: wrap; 42 - } 43 - 44 - .nav-links a { 45 - color: #ffffff; 46 - text-decoration: none; 47 - padding: 10px 20px; 48 - border-radius: 6px; 49 - background-color: hsla(240, 100%, 80%, 0.2); 50 - border: 1px solid rgba(153, 153, 255, 0.4); 51 - transition: all 0.3s ease; 52 - } 53 - 54 - .nav-links a:hover { 55 - background-color: rgba(153, 153, 255, 0.4); 56 - transform: translateY(-2px); 57 - } 58 - 59 - .container { 60 - max-width: 1400px; 61 - margin: 0 auto; 62 - padding: 20px; 63 - } 64 - 65 - .gallery-section { 66 - margin-bottom: 80px; 67 - } 68 - 69 - .section-header { 70 - margin-bottom: 30px; 71 - padding-bottom: 15px; 72 - border-bottom: 2px solid hsla(240, 100%, 80%, 0.2); 73 - } 74 - 75 - .section-header h2 { 76 - font-size: 2.2em; 77 - color: #ffffff; 78 - margin-bottom: 10px; 79 - } 80 - 81 - .section-header p { 82 - color: #b3b3ff; 83 - font-size: 1.1em; 84 - } 85 - 86 - .gallery-grid { 87 - display: grid; 88 - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 89 - gap: 20px; 90 - } 91 - 92 - .gallery-item { 93 - position: relative; 94 - overflow: hidden; 95 - border-radius: 12px; 96 - aspect-ratio: 1; 97 - cursor: pointer; 98 - background: rgba(153, 153, 255, 0.05); 99 - } 100 - 101 - .gallery-item img { 102 - width: 100%; 103 - height: 100%; 104 - object-fit: cover; 105 - transition: transform 0.5s ease; 106 - } 107 - 108 - .gallery-item:hover img { 109 - transform: scale(1.1); 110 - } 111 - 112 - .gallery-item::after { 113 - content: ''; 114 - position: absolute; 115 - inset: 0; 116 - background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%); 117 - opacity: 0; 118 - transition: opacity 0.3s ease; 119 - } 120 - 121 - .gallery-item:hover::after { 122 - opacity: 1; 123 - } 124 - 125 - /* Lightbox */ 126 - .lightbox { 127 - display: none; 128 - position: fixed; 129 - z-index: 1000; 130 - inset: 0; 131 - background-color: rgba(0, 0, 0, 0.95); 132 - align-items: center; 133 - justify-content: center; 134 - } 135 - 136 - .lightbox.active { 137 - display: flex; 138 - } 139 - 140 - .lightbox-content { 141 - max-width: 90%; 142 - max-height: 90%; 143 - position: relative; 144 - } 145 - 146 - .lightbox-content img { 147 - max-width: 100%; 148 - max-height: 90vh; 149 - border-radius: 8px; 150 - box-shadow: 0 0 50px rgba(153, 153, 255, 0.3); 151 - } 152 - 153 - .lightbox-close { 154 - position: absolute; 155 - top: 20px; 156 - right: 20px; 157 - font-size: 40px; 158 - color: white; 159 - cursor: pointer; 160 - background: rgba(0, 0, 0, 0.5); 161 - width: 50px; 162 - height: 50px; 163 - border-radius: 50%; 164 - display: flex; 165 - align-items: center; 166 - justify-content: center; 167 - transition: all 0.3s ease; 168 - z-index: 1001; 169 - } 170 - 171 - .lightbox-close:hover { 172 - background: rgba(153, 153, 255, 0.5); 173 - transform: rotate(90deg); 174 - } 175 - 176 - .lightbox-nav { 177 - position: absolute; 178 - top: 50%; 179 - transform: translateY(-50%); 180 - font-size: 40px; 181 - color: white; 182 - cursor: pointer; 183 - background: rgba(0, 0, 0, 0.5); 184 - width: 50px; 185 - height: 50px; 186 - border-radius: 50%; 187 - display: flex; 188 - align-items: center; 189 - justify-content: center; 190 - transition: all 0.3s ease; 191 - user-select: none; 192 - } 193 - 194 - .lightbox-nav:hover { 195 - background: rgba(153, 153, 255, 0.5); 196 - } 197 - 198 - .lightbox-prev { 199 - left: 20px; 200 - } 201 - 202 - .lightbox-next { 203 - right: 20px; 204 - } 205 - 206 - .footer { 207 - text-align: center; 208 - padding: 40px 20px; 209 - background: linear-gradient(0deg, rgba(153, 153, 255, 0.1) 0%, transparent 100%); 210 - margin-top: 60px; 211 - } 212 - 213 - .footer p { 214 - color: #b3b3ff; 215 - margin-bottom: 15px; 216 - } 217 - 218 - .footer a { 219 - color: #9999ff; 220 - text-decoration: none; 221 - margin: 0 10px; 222 - } 223 - 224 - .footer a:hover { 225 - color: #b3b3ff; 226 - text-decoration: underline; 227 - } 228 - 229 - .scroll-top { 230 - display: none; 231 - position: fixed; 232 - bottom: 20px; 233 - right: 20px; 234 - background-color: #9999ff; 235 - color: white; 236 - border: none; 237 - padding: 15px; 238 - border-radius: 50%; 239 - cursor: pointer; 240 - font-size: 18px; 241 - width: 50px; 242 - height: 50px; 243 - box-shadow: 0 4px 12px rgba(153, 153, 255, 0.4); 244 - transition: all 0.3s ease; 245 - z-index: 999; 246 - } 247 - 248 - a { 249 - color: #9999ff; 250 - text-decoration: none; 251 - } 252 - 253 - a:hover { 254 - color: #b3b3ff 255 - } 256 - .scroll-top:hover { 257 - background-color: #b3b3ff; 258 - transform: translateY(-5px); 259 - } 260 - 261 - @media (max-width: 768px) { 262 - .header h1 { 263 - font-size: 2em; 264 - } 265 - 266 - .gallery-grid { 267 - grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 268 - gap: 10px; 269 - } 270 - 271 - .section-header h2 { 272 - font-size: 1.8em; 273 - } 274 - 275 - .lightbox-nav { 276 - width: 40px; 277 - height: 40px; 278 - font-size: 30px; 279 - } 280 - 281 - .lightbox-close { 282 - width: 40px; 283 - height: 40px; 284 - font-size: 30px; 285 - } 286 - }
-16
followonbsky/index.html
··· 1 - <!doctype html> 2 - <html lang="en"> 3 - <head> 4 - <meta charset="utf-8"> 5 - <title>Redirecting…</title> 6 - <!-- Replace the URL below with your destination --> 7 - <meta http-equiv="refresh" content="0;url=/followonbsky.html"> 8 - <script> 9 - // JS fallback that doesn't create a history entry 10 - location.replace("/followonbsky.html"); 11 - </script> 12 - </head> 13 - <body> 14 - Redirecting to <a href="/followonbsky.html">/followonbsky.html</a> 15 - </body> 16 - </html>
+3 -4
index.html
··· 5 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 6 7 7 <title>Daniel Morrisey - Home</title> 8 - <meta name="description" id="meta-description" content="Loading..."> 8 + <meta name="description" id="meta-description" content="Posting everything into the endless jet stream of posts"> 9 9 10 10 <!-- ✅ SEO Keywords --> 11 11 <meta name="keywords" content="Daniel Morrisey, developer, writer, blog, projects, Bluesky, web development, creative work"> ··· 33 33 <meta name="twitter:card" content="summary_large_image"> 34 34 <meta name="twitter:title" content="Daniel Morrisey - Home"> 35 35 <meta name="twitter:description" content="Posting everything into the endless jet stream of posts"> 36 - <meta name="twitter:image" content="https://imrs.madebydanny.uk/?url=https%3A%2F%2Fcdn.madebydanny.uk%2Fuser-content%2F2025-11-06%2F1762389146761_bafkreichle4gy3xvjsygacml7ab3m6pf3bwzjmlqdpxjolo4bvv23qro2m.jpg"> 36 + <meta name="twitter:image" content="https://mbdio.uk/xrpc/com.atproto.sync.getBlob?did=did:plc:l37td5yhxl2irrzrgvei4qay&cid=bafkreicehnxcease3yatg5zr4h7jlwmlklodiwasynkz6td5yaw65p5gki"> 37 37 38 38 <!-- ✅ Theme Colors (Mobile optimization) --> 39 39 <meta name="theme-color" content="#000000"> ··· 94 94 <div class="content-section"> 95 95 <div id="rss" class="white-card"></div> 96 96 <section id="simple-photo-gallery"> 97 - <h2><i class="fa-solid fa-images"></i> Photo Gallery</h2> 97 + <h2><i class="fa-solid fa-images"></i> Pined Photos</h2> 98 98 <div class="gallery"> 99 99 <img src="https://mbdio.uk/xrpc/com.atproto.sync.getBlob?did=did:plc:l37td5yhxl2irrzrgvei4qay&cid=bafkreifjsdoqxidmlge6emrwvfgkpb64xctatabw5w32nkjyqxgdlhlqsa" alt="Placeholder Image 1" class="gallery-item"> 100 100 <img src="https://mbdio.uk/xrpc/com.atproto.sync.getBlob?did=did:plc:l37td5yhxl2irrzrgvei4qay&cid=bafkreicgrzxiiuzryfmob5m2zz5mips3suokqny735xfqgfqqba7miqnzu" alt="Placeholder Image 2" class="gallery-item"> ··· 113 113 <img src="https://mbdio.uk/xrpc/com.atproto.sync.getBlob?did=did:plc:l37td5yhxl2irrzrgvei4qay&cid=bafkreidddgd7tlelokd5qhtjiyzgirjeyqajg6gqwlu5to6fdvnb27t36m" alt="Placeholder Image 8" class="gallery-item"> 114 114 <img src="https://mbdio.uk/xrpc/com.atproto.sync.getBlob?did=did:plc:l37td5yhxl2irrzrgvei4qay&cid=bafkreih7bc7zbg5dtbq6gfzag4clf2vz35rb4zxga6w7ycdhuc7cjpayxe" alt="Placeholder Image 6" class="gallery-item"> 115 115 </div> 116 - <button class="btn"><a href="photos.html">View More</a></button> 117 116 </section> 118 117 </div> 119 118 <div id="footer" class="white-card"></div>
-102
js/photos.js
··· 1 - // JavaScript for handling the footer 2 - async function fetchFooter() { 3 - const footerElement = document.querySelector('#footer'); 4 - const apiUrl = 'https://altq.net/xrpc/com.atproto.repo.getRecord?repo=did:plc:l37td5yhxl2irrzrgvei4qay&collection=uk.madebydanny.footer&rkey=3m534asvjl52b'; 5 - 6 - try { 7 - const response = await fetch(apiUrl); 8 - if (!response.ok) throw new Error('Failed to fetch footer content'); 9 - 10 - const data = await response.json(); 11 - if (data.value && data.value.content) { 12 - footerElement.innerHTML = data.value.content; 13 - } else { 14 - footerElement.textContent = 'No footer content available'; 15 - } 16 - } catch (error) { 17 - console.error('Error fetching footer content:', error); 18 - footerElement.textContent = 'Error loading footer content'; 19 - } 20 - } 21 - 22 - fetchFooter(); 23 - 24 - // JavaScript for handling the lightbox functionality 25 - let currentImageIndex = 0; 26 - let currentGallery = []; 27 - 28 - document.querySelectorAll('.gallery-item').forEach((item, index) => { 29 - item.addEventListener('click', function() { 30 - const gallery = this.closest('.gallery-grid'); 31 - currentGallery = Array.from(gallery.querySelectorAll('.gallery-item img')); 32 - currentImageIndex = Array.from(gallery.querySelectorAll('.gallery-item')).indexOf(this); 33 - openLightbox(this.querySelector('img').src); 34 - }); 35 - }); 36 - 37 - function openLightbox(src) { 38 - document.getElementById('lightbox').classList.add('active'); 39 - document.getElementById('lightbox-img').src = src; 40 - document.body.style.overflow = 'hidden'; 41 - } 42 - 43 - function closeLightbox() { 44 - document.getElementById('lightbox').classList.remove('active'); 45 - document.body.style.overflow = ''; 46 - } 47 - 48 - function changeImage(direction) { 49 - currentImageIndex += direction; 50 - 51 - if (currentImageIndex < 0) { 52 - currentImageIndex = currentGallery.length - 1; 53 - } else if (currentImageIndex >= currentGallery.length) { 54 - currentImageIndex = 0; 55 - } 56 - 57 - document.getElementById('lightbox-img').src = currentGallery[currentImageIndex].src; 58 - } 59 - 60 - document.addEventListener('keydown', function(e) { 61 - if (document.getElementById('lightbox').classList.contains('active')) { 62 - if (e.key === 'Escape') closeLightbox(); 63 - if (e.key === 'ArrowLeft') changeImage(-1); 64 - if (e.key === 'ArrowRight') changeImage(1); 65 - } 66 - }); 67 - 68 - document.getElementById('lightbox').addEventListener('click', function(e) { 69 - if (e.target === this) { 70 - closeLightbox(); 71 - } 72 - }); 73 - 74 - // JavaScript for scroll-to-top functionality 75 - window.onscroll = function() { 76 - const scrollTop = document.getElementById('scrollTop'); 77 - if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) { 78 - scrollTop.style.display = 'block'; 79 - } else { 80 - scrollTop.style.display = 'none'; 81 - } 82 - }; 83 - 84 - function scrollToTop() { 85 - window.scrollTo({ 86 - top: 0, 87 - behavior: 'smooth' 88 - }); 89 - } 90 - 91 - document.querySelectorAll('a[href^="#"]').forEach(anchor => { 92 - anchor.addEventListener('click', function (e) { 93 - e.preventDefault(); 94 - const target = document.querySelector(this.getAttribute('href')); 95 - if (target) { 96 - target.scrollIntoView({ 97 - behavior: 'smooth', 98 - block: 'start' 99 - }); 100 - } 101 - }); 102 - });