From: Zachary Vance Date: Thu, 7 Dec 2023 15:41:12 +0000 (-0500) Subject: Hackaday is tabbed X-Git-Url: https://git.za3k.com/?a=commitdiff_plain;h=4da1b35d77e7420621e7646594e4eb1f9c42ca21;p=za3k.git Hackaday is tabbed --- diff --git a/hackaday.css b/hackaday.css index 823abec..e8d7149 100644 --- a/hackaday.css +++ b/hackaday.css @@ -14,6 +14,7 @@ height: 1.5em; /*border: 1px solid;*/ text-align: center; + margin-bottom: 20px; } .hack-links a { font-size: 14pt; @@ -26,7 +27,7 @@ h2 { font-size: 20pt; } -.hacks { +.tabs { width: max(242px, 60%); /* 242px is the fixed-size element including margins */ margin: 0 auto; display: flex; @@ -34,6 +35,63 @@ h2 { flex-wrap: wrap; flex: 1 1 auto; } +.tabs > input[type="radio"] { + position: absolute; + left: -200vw; + +} +.tabs > label { + position: relative; + padding: 15px 15px 25px; + border: 1px solid transparent; + border-bottom: 0; + cursor: pointer; + font-weight: 600; + min-width: 4em; + font-size: 24pt; + text-align: center; +} +.tabs > input:checked + label { + border-color: #ccc; + 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; +} + +.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; + border-top: 1px solid #ccc; +} + +.tabs > input[value="2023"]:checked ~ .tab-panels > section.year-2023 , +.tabs > input[value="2022"]:checked ~ .tab-panels > section.year-2022 { + display: block; +} + .hack { display: inline-block; width: 202px; diff --git a/hackaday.html b/hackaday.html index 709f8bf..c385cac 100644 --- a/hackaday.html +++ b/hackaday.html @@ -13,536 +13,540 @@ Blog posts -

2023 Projects

-
-
- - Music of the Spheres - 30 - - - - - - experience scales, watch orbits +
+ + +
+
+
+ + Music of the Spheres + 30 + + + + + + experience scales, watch orbits +
+
+ + Speed Reading + 29 + + + + + + read uncomfortably fast +
+
+ + Pint-Sized + 28 + + + + + + intro to a fake 90s sitcom +
+
+ + stuff.md + 24 + + + + text database of physical stuff +
+
+ + Timelapse + 23 + + + + + timelapse of house move +
+
+ + Homemade Circuitboards + 22 + + + + + circuitboards at home +
+
+ + Hillsfar Spritesheet + 20 + + + + + sprites from a minigame +
+
+ + AI Grabbag + 18 + + + + + install instructions for a.i. tools +
+
+ + Tower of Choices + 17 + + + + + a pen and paper RPG +
+
+ + Bytebeat Synth + 14 + + + + + + bytebeat fun +
+
+ + Blueprint Maker + 13 + + + + + + draw house blueprints +
+
+ + Screensaver + 12 + + + + + + a silly screensaver +
+
+ + Raytracer: Rain + 11 + + + + + + a simple screensaver video +
+
+ + Typewriter + 10 + + + + + + clicky clacky +
+
+ + Receipt + 08 + + + + + + a silly little zine +
+
+ + Doodle-moji Alchemy + 07 + + + + + + combine elements +
+
+ + CUDA Raytracing + 06 + + + + + + speed up graphics with GPU +
+
+ + Lashed Furniture + 04 + + + + a lashed bamboo table +
+
+ + Raytracing + 02 + + + + + + pretty 3d graphics drawing +
+
+ + Perquackey + 01 + + + + + + a 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 +
+
-
- - Speed Reading - 29 - - - - - - read uncomfortably fast -
-
- - Pint-Sized - 28 - - - - - - intro to a fake 90s sitcom -
-
- - stuff.md - 24 - - - - text database of physical stuff -
-
- - Timelapse - 23 - - - - - timelapse of house move -
-
- - Homemade Circuitboards - 22 - - - - - circuitboards at home -
-
- - Hillsfar Spritesheet - 20 - - - - - sprites from a minigame -
-
- - AI Grabbag - 18 - - - - - install instructions for a.i. tools -
-
- - Tower of Choices - 17 - - - - - a pen and paper RPG -
-
- - Bytebeat Synth - 14 - - - - - - bytebeat fun -
-
- - Blueprint Maker - 13 - - - - - - draw house blueprints -
-
- - Screensaver - 12 - - - - - - a silly screensaver -
-
- - Raytracer: Rain - 11 - - - - - - a simple screensaver video -
-
- - Typewriter - 10 - - - - - - clicky clacky -
-
- - Receipt - 08 - - - - - - a silly little zine -
-
- - Doodle-moji Alchemy - 07 - - - - - - combine elements -
-
- - CUDA Raytracing - 06 - - - - - - speed up graphics with GPU -
-
- - Lashed Furniture - 04 - - - - a lashed bamboo table -
-
- - Raytracing - 02 - - - - - - pretty 3d graphics drawing -
-
- - Perquackey - 01 - - - - - - a word game from 1953 -
- -
-

2022 Projects

-
-
- - 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 -
-
+ diff --git a/html-css-cheatsheet.html b/html-css-cheatsheet.html index 7dd1c4c..9ff9ec3 100644 --- a/html-css-cheatsheet.html +++ b/html-css-cheatsheet.html @@ -1,5 +1,10 @@ + +<-- TODOs: + - Localstorage + - Include jquery (specifically) +-->