From 61e0f827c4d0fa35af418e0b61572ea5a42f9c5c Mon Sep 17 00:00:00 2001 From: Zachary Vance Date: Sat, 16 Aug 2025 11:45:42 -0400 Subject: [PATCH] Goodbye, beautiful tabs :( --- hackaday.css | 51 +- hackaday.html | 1546 ++++++++++++++++++++++++------------------------- 2 files changed, 784 insertions(+), 813 deletions(-) diff --git a/hackaday.css b/hackaday.css index 9be3f54..1657606 100644 --- a/hackaday.css +++ b/hackaday.css @@ -27,7 +27,7 @@ margin: 10px; } -.tabs { +.years { width: max(242px, 60%); /* 242px is the fixed-size element including margins */ margin: 0 auto; display: flex; @@ -35,61 +35,31 @@ flex-wrap: wrap; flex: 1 1 auto; } -.tabs > input[type="radio"] { +.years > input[type="radio"] { position: absolute; left: -200vw; } -.tabs > label { +.years > label { position: relative; padding: 15px 15px 25px; - border: 1px solid transparent; - border-bottom: 0; + border: 1px solid #ccc; cursor: pointer; font-weight: 600; min-width: 4em; font-size: 24pt; text-align: center; -} -.tabs > input:checked + label { - border-color: #ccc; + display: block; + width: min-content; border-bottom: 1px solid #fff; margin-bottom: -1px; } -.tabs > label:hover, -.tabs > input:focus + label, -.tabs > input:checked + label { - /*color: #06c;*/ -} -input:focus-visible + label { /* Keyboard nav */ - outline: 2px solid rgba(0,102,204,1); - border-radius: 3px; +.years > label:nth-child(n+2) { + margin-top: 2rem; } -.tabs > label:hover::after, -.tabs > input:focus + label::after, -.tabs > input:checked + label::after { - content: ""; - position: absolute; - left: 15px; - right: 15px; - bottom: 10px; - height: 4px; - background: #8d8d8d; -} -.tabs > input:not(:checked) + label:hover::after, -.tabs > input:not(:checked):focus + label::after { - opacity: 0.2; -} - -.tabs .tab-panels > * { - display: none; +.years section { border-top: 1px solid #ccc; -} - -.tabs > input[value="2024"]:checked ~ .tab-panels > section.year-2024 , -.tabs > input[value="2023"]:checked ~ .tab-panels > section.year-2023 , -.tabs > input[value="2022"]:checked ~ .tab-panels > section.year-2022 { display: block; } @@ -167,6 +137,9 @@ input:focus-visible + label { /* Keyboard nav */ .hacks.year-2023 .date::after { content: ", 2023"; } +.hacks.year-2024 .date::after { + content: ", 2024"; +} .hack .description { margin-top: 10px; diff --git a/hackaday.html b/hackaday.html index c738795..b43c0a7 100644 --- a/hackaday.html +++ b/hackaday.html @@ -16,780 +16,778 @@ Blog posts -
- - - -
-
- -
- - LED Fireplace - 30 - - - - flickering fireplace -
-
- - ESP32 Docs - 29 - - - - - - set up and pinout -
-
- - Minecraft Mod - 27 - - - - - - dirt slab -
-
- - No Room for Error - 26 - - - - - - one attempt coding -
-
- - Go Screensaver - 25 - - - - - - watch game replays -
-
- - Little Herbalist - 23 - - - - - - unfinished brewing game -
-
- - AI Friend - 22 - - - - make a custom friend -
-
- - 2p Library - 20 - - - - - - add online multiplayer -
-
- - RPG Campaign - 19 - - - - a short d&d campaign -
-
- - Android App - 17 - - - - - learn to tie a tie -
-
- - Go - 16 - - - - - - strategy game -
-
- - Can't Stop - 14 - - - - - - dice game -
-
- - Pixel Kitchen - 13 - - - - - - craft foods, serve customers -
-
- - To-Do List - 12 - - - - magnetic to-do whiteboard -
-
- - Uploader - 11 - - - - - send me files -
-
- - Color Sort - 08 - - - - - - relax and sort colors -
-
- - When Sun? - 07 - - - - - - countdown to summer -
-
- - Milled Puzzle - 05 - - - - aluminium soma cube -
-
- - Lembas - 04 - - - - edible crackers -
-
- - Cut Acrylic Puzzle - 02 - - - - acrylic soma cube -
-
- - IRC Puzzles - 01 - - - - - - solve a puzzle hunt -
-
-
-
- - Celestial Music - 30 - - - - - - experience scales, watch orbits -
-
- - Speed Reading - 29 - - - - - - read uncomfortably fast -
-
- - 90s Sitcom - 28 - - - - - - fake sitcom intro -
-
- - stuff.md - 24 - - - - text database of physical stuff -
-
- - Timelapse - 23 - - - - - timelapse of house move -
-
- - Circuit Boards - 22 - - - - - make circuitboards at home -
-
- - Lockpicking - 20 - - - - - pick a lock -
-
- - Hillsfar Spritesheet - 20 - - - - - sprites from a minigame -
-
- - AI Grab Bag - 18 - - - - - install instructions for a.i. tools -
-
- - Tower of Choices - 17 - - - - - pen and paper RPG -
-
- - Bytebeat Synth - 14 - - - - - - bytebeat fun -
-
- - Blueprint Maker - 13 - - - - - - draw house blueprints -
-
- - Screensaver - 12 - - - - - - silly screensaver -
-
- - Raytracer: Rain - 11 - - - - - - screensaver video -
-
- - Typewriter - 10 - - - - - - clicky clacky -
-
- - Receipt - 08 - - - - - - silly little zine -
-
- - Alchemy - 07 - - - - - - combine elements -
-
- - GPU Raytracing - 06 - - - - - - speed up graphics with CUDA -
-
- - Lashed Furniture - 04 - - - - bamboo table -
-
- - Raytracing - 02 - - - - - - pretty 3d graphics drawing -
-
- - Perquackey - 01 - - - - - - word game from 1953 -
-
-
-
- - Doodle RPG - 30 - - - - - - draw the world with friends -
-
- - Hack-An-Adventure - 29 - - - - - - draw cute adventures -
-
- - Hack-A-Farm - 27 - - - - - - plant crops -
-
- - Hack-A-Snake - 27 - - - - - - snake -
-
- - Hack-A-Minigame - 26 - - - - - - save scumming snake -
-
- - Hack-An-Experiment - 25 - - - - - - experimental algorithm analysis -
-
- - Hack-A-Clock - 24 - - - - - - decimal time clock -
-
- - Hack-A-Link 2 - 23 - - - - - - link directory -
-
- - Hack-A-Hell - 22 - - - - - - bullet hell music visualizer -
-
- - Hack-A-Battle - 21 - - - - - - two music visualizers battle -
-
- - Hack-A-Hang - 19 - - - - - - hang with friends -
-
- - Hack-A-Crop - 18 - - - - - - crop images -
-
- - Hack-A-Tank - 17 - - - - - - relax and play with fish -
-
- - Hack-A-Song - 16 - - - - - - listen to 'greensleeves' -
-
- - Hack-A-Sound - 15 - - - - - - play sounds and make tracks -
-
- - Hack-A-Stats - 14 - - - - - - see how hack-a-day is doing -
-
- - Hack-A-Line - 13 - - - - - - play 5-in-a-row with a friend -
-
- - Day 12 - 12 -
-
- - Hack-A-Tile - 11 - - - - - - arrange matching tiles -
-
- - Hack-A-Machine - 10 - - - - - - goofy machine with assembly -
-
- - Hack-A-Mandelbrot - 09 - - - - - - explore fractals -
-
- - Hack-A-Dictionary - 08 - - - - - - look up words -
-
- - Hack-An-Asteroid - 07 - - - - - - asteroids clone -
-
- - Hack-An-Icecube - 06 - - - - - - icecubes fall -
-
- - Hack-A-Homepage - 05 - - - - - - make your own homepage -
-
- - Hack-A-Link - 05 - - - - - - a link shortener -
-
- - Hack-A-Paste - 05 - - - - - - a pastebin -
-
- - Hack-A-Chat - 04 - - - - - - an online chatroom -
-
- - Hack-A-Blog - 03 - - - - - - a blog for anyone -
-
-
+
+ +
+ +
+ + LED Fireplace + 30 + + + + flickering fireplace +
+
+ + ESP32 Docs + 29 + + + + + + set up and pinout +
+
+ + Minecraft Mod + 27 + + + + + + dirt slab +
+
+ + No Room for Error + 26 + + + + + + one attempt coding +
+
+ + Go Screensaver + 25 + + + + + + watch game replays +
+
+ + Little Herbalist + 23 + + + + + + unfinished brewing game +
+
+ + AI Friend + 22 + + + + make a custom friend +
+
+ + 2p Library + 20 + + + + + + add online multiplayer +
+
+ + RPG Campaign + 19 + + + + a short d&d campaign +
+
+ + Android App + 17 + + + + + learn to tie a tie +
+
+ + Go + 16 + + + + + + strategy game +
+
+ + Can't Stop + 14 + + + + + + dice game +
+
+ + Pixel Kitchen + 13 + + + + + + craft foods, serve customers +
+
+ + To-Do List + 12 + + + + magnetic to-do whiteboard +
+
+ + Uploader + 11 + + + + + send me files +
+
+ + Color Sort + 08 + + + + + + relax and sort colors +
+
+ + When Sun? + 07 + + + + + + countdown to summer +
+
+ + Milled Puzzle + 05 + + + + aluminium soma cube +
+
+ + Lembas + 04 + + + + edible crackers +
+
+ + Cut Acrylic Puzzle + 02 + + + + acrylic soma cube +
+
+ + IRC Puzzles + 01 + + + + + + solve a puzzle hunt +
+
+ +
+
+ + Celestial Music + 30 + + + + + + experience scales, watch orbits +
+
+ + Speed Reading + 29 + + + + + + read uncomfortably fast +
+
+ + 90s Sitcom + 28 + + + + + + fake sitcom intro +
+
+ + stuff.md + 24 + + + + text database of physical stuff +
+
+ + Timelapse + 23 + + + + + timelapse of house move +
+
+ + Circuit Boards + 22 + + + + + make circuitboards at home +
+
+ + Lockpicking + 20 + + + + + pick a lock +
+
+ + Hillsfar Spritesheet + 20 + + + + + sprites from a minigame +
+
+ + AI Grab Bag + 18 + + + + + install instructions for a.i. tools +
+
+ + Tower of Choices + 17 + + + + + pen and paper RPG +
+
+ + Bytebeat Synth + 14 + + + + + + bytebeat fun +
+
+ + Blueprint Maker + 13 + + + + + + draw house blueprints +
+
+ + Screensaver + 12 + + + + + + silly screensaver +
+
+ + Raytracer: Rain + 11 + + + + + + screensaver video +
+
+ + Typewriter + 10 + + + + + + clicky clacky +
+
+ + Receipt + 08 + + + + + + silly little zine +
+
+ + Alchemy + 07 + + + + + + combine elements +
+
+ + GPU Raytracing + 06 + + + + + + speed up graphics with CUDA +
+
+ + Lashed Furniture + 04 + + + + bamboo table +
+
+ + Raytracing + 02 + + + + + + pretty 3d graphics drawing +
+
+ + Perquackey + 01 + + + + + + word game from 1953 +
+
+ +
+
+ + Doodle RPG + 30 + + + + + + draw the world with friends +
+
+ + Hack-An-Adventure + 29 + + + + + + draw cute adventures +
+
+ + Hack-A-Farm + 27 + + + + + + plant crops +
+
+ + Hack-A-Snake + 27 + + + + + + snake +
+
+ + Hack-A-Minigame + 26 + + + + + + save scumming snake +
+
+ + Hack-An-Experiment + 25 + + + + + + experimental algorithm analysis +
+
+ + Hack-A-Clock + 24 + + + + + + decimal time clock +
+
+ + Hack-A-Link 2 + 23 + + + + + + link directory +
+
+ + Hack-A-Hell + 22 + + + + + + bullet hell music visualizer +
+
+ + Hack-A-Battle + 21 + + + + + + two music visualizers battle +
+
+ + Hack-A-Hang + 19 + + + + + + hang with friends +
+
+ + Hack-A-Crop + 18 + + + + + + crop images +
+
+ + Hack-A-Tank + 17 + + + + + + relax and play with fish +
+
+ + Hack-A-Song + 16 + + + + + + listen to 'greensleeves' +
+
+ + Hack-A-Sound + 15 + + + + + + play sounds and make tracks +
+
+ + Hack-A-Stats + 14 + + + + + + see how hack-a-day is doing +
+
+ + Hack-A-Line + 13 + + + + + + play 5-in-a-row with a friend +
+
+ + Day 12 + 12 +
+
+ + Hack-A-Tile + 11 + + + + + + arrange matching tiles +
+
+ + Hack-A-Machine + 10 + + + + + + goofy machine with assembly +
+
+ + Hack-A-Mandelbrot + 09 + + + + + + explore fractals +
+
+ + Hack-A-Dictionary + 08 + + + + + + look up words +
+
+ + Hack-An-Asteroid + 07 + + + + + + asteroids clone +
+
+ + Hack-An-Icecube + 06 + + + + + + icecubes fall +
+
+ + Hack-A-Homepage + 05 + + + + + + make your own homepage +
+
+ + Hack-A-Link + 05 + + + + + + a link shortener +
+
+ + Hack-A-Paste + 05 + + + + + + a pastebin +
+
+ + Hack-A-Chat + 04 + + + + + + an online chatroom +
+
+ + Hack-A-Blog + 03 + + + + + + a blog for anyone +
+
-- 2.47.3