cookie's home on the internet (wip)

add sembreak countdown

README.md public/README.md
fonts/MapleMono-Woff2/LICENSE.txt public/fonts/MapleMono-Woff2/LICENSE.txt
fonts/MapleMono-Woff2/MapleMono-Bold.ttf.woff2 public/fonts/MapleMono-Woff2/MapleMono-Bold.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-BoldItalic.ttf.woff2 public/fonts/MapleMono-Woff2/MapleMono-BoldItalic.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-ExtraBold.ttf.woff2 public/fonts/MapleMono-Woff2/MapleMono-ExtraBold.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-ExtraBoldItalic.ttf.woff2 public/fonts/MapleMono-Woff2/MapleMono-ExtraBoldItalic.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-ExtraLight.ttf.woff2 public/fonts/MapleMono-Woff2/MapleMono-ExtraLight.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-ExtraLightItalic.ttf.woff2 public/fonts/MapleMono-Woff2/MapleMono-ExtraLightItalic.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-Italic.ttf.woff2 public/fonts/MapleMono-Woff2/MapleMono-Italic.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-Light.ttf.woff2 public/fonts/MapleMono-Woff2/MapleMono-Light.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-LightItalic.ttf.woff2 public/fonts/MapleMono-Woff2/MapleMono-LightItalic.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-Medium.ttf.woff2 public/fonts/MapleMono-Woff2/MapleMono-Medium.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-MediumItalic.ttf.woff2 public/fonts/MapleMono-Woff2/MapleMono-MediumItalic.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-Regular.ttf.woff2 public/fonts/MapleMono-Woff2/MapleMono-Regular.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-SemiBold.ttf.woff2 public/fonts/MapleMono-Woff2/MapleMono-SemiBold.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-SemiBoldItalic.ttf.woff2 public/fonts/MapleMono-Woff2/MapleMono-SemiBoldItalic.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-Thin.ttf.woff2 public/fonts/MapleMono-Woff2/MapleMono-Thin.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-ThinItalic.ttf.woff2 public/fonts/MapleMono-Woff2/MapleMono-ThinItalic.ttf.woff2
fonts/MapleMono-Woff2/config.json public/fonts/MapleMono-Woff2/config.json
img/bsky-logo.svg public/img/bsky-logo.svg
-21
index.html
··· 1 - <!DOCTYPE html> 2 - <html> 3 - <head> 4 - <link rel="stylesheet" href="styles.css"/> 5 - <title>cookie's site</title> 6 - </head> 7 - <body> 8 - <h1>cookie's home on the web</h1> 9 - <p>welcome to my humble abode :)</p> 10 - <p>i like to tinker with the web and low-level programming. i'm perpetually unsatisfied and mildly suffer from impostor syndrome.</p> 11 - <p>this site is a perpetual work in progress. thank you for visiting!</p> 12 - <section> 13 - <h2>socials</h2> 14 - <p> 15 - <img class="link-logo" src="img/bsky-logo.svg" alt="bluesky logo"/> 16 - <a href="bsky.app/profile/did:plc:pyzvvyrh6eudle55nhqe62tv/" style="color: #2776f5">bluesky</a> 17 - </p> 18 - </section> 19 - </body> 20 - </html> 21 - <script src="snow.js"/>
public/.styles.css.swp

This is a binary file and will not be displayed.

+70
public/index.html
··· 1 + <!DOCTYPE html> 2 + <html> 3 + <head> 4 + <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 + <link rel="stylesheet" href="styles.css"/> 6 + <title>cookie's site</title> 7 + </head> 8 + <body> 9 + <h1>cookie's home on the web</h1> 10 + <p>welcome to my humble abode!</p> 11 + <p>i like to tinker with the web and low-level programming, although i don't have much to show for it, yet. i mildly suffer from impostor syndrome.</p> 12 + <p>just like me, this site is a perpetual work in progress. </p> 13 + <p>thank you for visiting. :)</p> 14 + <section class="sembreak-countdown"> 15 + <h2>is it sem break yet?</h2> 16 + <div class="countdown"> 17 + <span class="time-numerals" id="days">00</span><span class="unit-of-time">D</span> 18 + <span class="time-numerals" id="hours">00</span><span class="unit-of-time">H</span> 19 + <span class="time-numerals" id="minutes">00</span><span class="unit-of-time">M</span> 20 + <span class="time-numerals" id="seconds">00</span><span class="unit-of-time">S</span> 21 + </div> 22 + <p>... to go.</p> 23 + </section> 24 + <section> 25 + <h2>socials</h2> 26 + <p> 27 + <img class="link-logo" src="img/bsky-logo.svg" alt="bluesky logo"/> 28 + <a href="https://bsky.app/profile/did:plc:pyzvvyrh6eudle55nhqe62tv/" style="color: #2776f5">bluesky</a> 29 + </p> 30 + </section> 31 + </body> 32 + </html> 33 + <script> 34 + const daysEl = document.getElementById("days"); 35 + const hoursEl = document.getElementById("hours"); 36 + const minutesEl = document.getElementById("minutes"); 37 + const secondsEl = document.getElementById("seconds"); 38 + 39 + const now = Date.now(); 40 + const semBreakTimestamp = new Date("2026-01-05T03:00:00Z"); // time is in UTC 41 + let timeDiffMs = semBreakTimestamp.getTime() - now; 42 + console.log(timeDiffMs); 43 + 44 + function divmod(a, b) { 45 + const quotient = Math.floor(a / b); 46 + const remainder = a % b; 47 + return [quotient, remainder]; 48 + } 49 + 50 + function updateCountdown() { 51 + const [days, r1] = divmod(timeDiffMs, 1000*60*60*24); 52 + console.log(days, r1); 53 + const [hours, r2] = divmod(r1, 1000*60*60); 54 + console.log(hours, r2); 55 + const [mins, r3] = divmod(r2, 1000*60); 56 + console.log(mins, r3); 57 + const [secs, r4] = divmod(r3, 1000); 58 + console.log(secs, r4); 59 + 60 + daysEl.innerText = days; 61 + hoursEl.innerText = hours; 62 + minutesEl.innerText = mins; 63 + secondsEl.innerText = secs; 64 + 65 + timeDiffMs -= 1000; 66 + } 67 + 68 + 69 + const intervalId = setInterval(() => { updateCountdown(); if (timeDiffMs===0) clearInterval(intervalId); }, 1000); // 1000ms = 1s 70 + </script>
+11
styles.css public/styles.css
··· 42 42 text-decoration: underline dotted var(--color-dark-primary); 43 43 } 44 44 45 + h2 { 46 + color: #aaa; 47 + } 48 + 45 49 section { 46 50 margin: 2em 0; 47 51 } ··· 56 60 vertical-align: middle; 57 61 margin-right: 1em; 58 62 } 63 + 64 + .countdown { 65 + font-size: 3rem; 66 + } 67 + 68 + .unit-of-time { 69 + font-size: 0.4em;