From cc7a6146e9be5b82d1c2594090ca20305f25a073 Mon Sep 17 00:00:00 2001
From: Zachary Vance <za3k@za3k.com>
Date: Fri, 18 Nov 2022 22:49:45 -0500
Subject: [PATCH] Improve hidden display of links

---
 hackaday.css  |  19 +++++++++-
 hackaday.html | 102 +++++++++++++++++++++++++-------------------------
 2 files changed, 69 insertions(+), 52 deletions(-)

diff --git a/hackaday.css b/hackaday.css
index 78a688d..a31f0ec 100644
--- a/hackaday.css
+++ b/hackaday.css
@@ -92,6 +92,23 @@
     */
 }
 
-a.blog, a.demo, a.source { /* Display source links only if demos break */
+.links a {
+    font-size: x-small;
+    text-decoration: none;
+}
+a.demo {
+    display: none;
+}
+a.blog, a.demo, a.source { /* Display source, blog links only if demos break */
     display: none;
 }
+
+a.demo::before {
+    content: "demo";
+}
+a.source::before {
+    content: "code";
+}
+a.blog::before {
+    content: "blog";
+}
diff --git a/hackaday.html b/hackaday.html
index 4290fd5..1759603 100644
--- a/hackaday.html
+++ b/hackaday.html
@@ -13,9 +13,9 @@
             <span class="name">Hack-A-Blog</span>
             <span class="date">03</span>
             <span class="links">
-                <a class="demo" href="https://tilde.za3k.com/hackaday/blog">demo</a>
-                <a class="source" href="https://github.com/za3k/day03_blog">source</a>
-                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-blog/">blog</a>
+                <a class="demo" href="https://tilde.za3k.com/hackaday/blog"></a>
+                <a class="source" href="https://github.com/za3k/day03_blog"></a>
+                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-blog/"></a>
             </span>
             <span class="description">a blog for anyone</span>
         </div>
@@ -24,9 +24,9 @@
             <span class="name">Hack-A-Chat</span>
             <span class="date">04</span>
             <span class="links">
-                <a class="demo" href="https://tilde.za3k.com/hackaday/chat">demo</a>
-                <a class="source" href="https://github.com/za3k/day04_chat">source</a>
-                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-chat/">blog</a>
+                <a class="demo" href="https://tilde.za3k.com/hackaday/chat"></a>
+                <a class="source" href="https://github.com/za3k/day04_chat"></a>
+                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-chat/"></a>
             </span>
             <span class="description">an online chatroom</span>
         </div>
@@ -35,9 +35,9 @@
             <span class="name">Hack-A-Paste</span>
             <span class="date">05</span>
             <span class="links">
-                <a class="demo" href="https://tilde.za3k.com/hackaday/paste">demo</a>
-                <a class="source" href="https://github.com/za3k/day05_paste">source</a>
-                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-paste/">blog</a>
+                <a class="demo" href="https://tilde.za3k.com/hackaday/paste"></a>
+                <a class="source" href="https://github.com/za3k/day05_paste"></a>
+                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-paste/"></a>
             </span>
             <span class="description">a pastebin</span>
         </div>
@@ -46,9 +46,9 @@
             <span class="name">Hack-A-Link</span>
             <span class="date">05</span>
             <span class="links">
-                <a class="demo" href="https://tilde.za3k.com/hackaday/link">demo</a>
-                <a class="source" href="https://github.com/za3k/day02_link">source</a>
-                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-link/">blog</a>
+                <a class="demo" href="https://tilde.za3k.com/hackaday/link"></a>
+                <a class="source" href="https://github.com/za3k/day02_link"></a>
+                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-link/"></a>
             </span>
             <span class="description">a link shortener</span>
         </div>
@@ -57,9 +57,9 @@
             <span class="name">Hack-A-Homepage</span>
             <span class="date">05</span>
             <span class="links">
-                <a class="demo" href="https://tilde.za3k.com/hackaday/homepage">demo</a>
-                <a class="source" href="https://github.com/za3k/day01_homepage">source</a>
-                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-homepage/">blog</a>
+                <a class="demo" href="https://tilde.za3k.com/hackaday/homepage"></a>
+                <a class="source" href="https://github.com/za3k/day01_homepage"></a>
+                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-homepage/"></a>
             </span>
             <span class="description">make your own homepage</span>
         </div>
@@ -68,9 +68,9 @@
             <span class="name">Hack-An-Icecube</span>
             <span class="date">06</span>
             <span class="links">
-                <a class="demo" href="https://tilde.za3k.com/hackaday/icecube">demo</a>
-                <a class="source" href="https://github.com/za3k/day06_icecube">source</a>
-                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-an-icecube/">blog</a>
+                <a class="demo" href="https://tilde.za3k.com/hackaday/icecube"></a>
+                <a class="source" href="https://github.com/za3k/day06_icecube"></a>
+                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-an-icecube/"></a>
             </span>
             <span class="description">icecubes fall</span>
         </div>
@@ -79,9 +79,9 @@
             <span class="name">Hack-An-Asteroid</span>
             <span class="date">07</span>
             <span class="links">
-                <a class="demo" href="https://tilde.za3k.com/hackaday/asteroid">demo</a>
-                <a class="source" href="https://github.com/za3k/day07_asteroid">source</a>
-                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-an-asteroid/">blog</a>
+                <a class="demo" href="https://tilde.za3k.com/hackaday/asteroid"></a>
+                <a class="source" href="https://github.com/za3k/day07_asteroid"></a>
+                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-an-asteroid/"></a>
             </span>
             <span class="description">asteroids clone</span>
         </div>
@@ -90,9 +90,9 @@
             <span class="name">Hack-A-Dictionary</span>
             <span class="date">08</span>
             <span class="links">
-                <a class="demo" href="https://tilde.za3k.com/hackaday/dictionary">demo</a>
-                <a class="source" href="https://github.com/za3k/day08_dictionary">source</a>
-                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-dictionary/">blog</a>
+                <a class="demo" href="https://tilde.za3k.com/hackaday/dictionary"></a>
+                <a class="source" href="https://github.com/za3k/day08_dictionary"></a>
+                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-dictionary/"></a>
             </span>
             <span class="description">look up words</span>
         </div>
@@ -101,9 +101,9 @@
             <span class="name">Hack-A-Mandelbrot</span>
             <span class="date">09</span>
             <span class="links">
-                <a class="demo" href="https://tilde.za3k.com/hackaday/mandelbrot">demo</a>
-                <a class="source" href="https://github.com/za3k/day09_mandelbrot">source</a>
-                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-mandelbrot/">blog</a>
+                <a class="demo" href="https://tilde.za3k.com/hackaday/mandelbrot"></a>
+                <a class="source" href="https://github.com/za3k/day09_mandelbrot"></a>
+                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-mandelbrot/"></a>
             </span>
             <span class="description">explore fractals</span>
         </div>
@@ -112,9 +112,9 @@
             <span class="name">Hack-A-Machine</span>
             <span class="date">10</span>
             <span class="links">
-                <a class="demo" href="https://tilde.za3k.com/hackaday/machine">demo</a>
-                <a class="source" href="https://github.com/za3k/day10_machine">source</a>
-                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-machine/">blog</a>
+                <a class="demo" href="https://tilde.za3k.com/hackaday/machine"></a>
+                <a class="source" href="https://github.com/za3k/day10_machine"></a>
+                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-machine/"></a>
             </span>
             <span class="description">goofy machine with assembly</span>
         </div>
@@ -123,9 +123,9 @@
             <span class="name">Hack-A-Tile</span>
             <span class="date">11</span>
             <span class="links">
-                <a class="demo" href="https://tilde.za3k.com/hackaday/tile">demo</a>
-                <a class="source" href="https://github.com/za3k/day11_tile">source</a>
-                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-tile/">blog</a>
+                <a class="demo" href="https://tilde.za3k.com/hackaday/tile"></a>
+                <a class="source" href="https://github.com/za3k/day11_tile"></a>
+                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-tile/"></a>
             </span>
             <span class="description">arrange matching tiles</span>
         </div>
@@ -142,9 +142,9 @@
             <span class="name">Hack-A-Line</span>
             <span class="date">13</span>
             <span class="links">
-                <a class="demo" href="https://tilde.za3k.com/hackaday/line">demo</a>
-                <a class="source" href="https://github.com/za3k/day13_line">source</a>
-                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-line/">blog</a>
+                <a class="demo" href="https://tilde.za3k.com/hackaday/line"></a>
+                <a class="source" href="https://github.com/za3k/day13_line"></a>
+                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-line/"></a>
             </span>
             <span class="description">play 5-in-a-row with a friend</span>
         </div>
@@ -153,9 +153,9 @@
             <span class="name">Hack-A-Stats</span>
             <span class="date">14</span>
             <span class="links">
-                <a class="demo" href="https://tilde.za3k.com/hackaday/stats">demo</a>
-                <a class="source" href="https://github.com/za3k/day14_stats">source</a>
-                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-stats/">blog</a>
+                <a class="demo" href="https://tilde.za3k.com/hackaday/stats"></a>
+                <a class="source" href="https://github.com/za3k/day14_stats"></a>
+                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-stats/"></a>
             </span>
             <span class="description">see how hack-a-day is doing</span>
         </div>
@@ -164,9 +164,9 @@
             <span class="name">Hack-A-Sound</span>
             <span class="date">15</span>
             <span class="links">
-                <a class="demo" href="https://tilde.za3k.com/hackaday/sound">demo</a>
-                <a class="source" href="https://github.com/za3k/day15_sound">source</a>
-                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-sound/">blog</a>
+                <a class="demo" href="https://tilde.za3k.com/hackaday/sound"></a>
+                <a class="source" href="https://github.com/za3k/day15_sound"></a>
+                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-sound/"></a>
             </span>
             <span class="description">play sounds and make tracks</span>
         </div>
@@ -175,9 +175,9 @@
             <span class="name">Hack-A-Song</span>
             <span class="date">16</span>
             <span class="links">
-                <a class="demo" href="https://tilde.za3k.com/hackaday/song">demo</a>
-                <a class="source" href="https://github.com/za3k/day16_song">source</a>
-                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-song/">blog</a>
+                <a class="demo" href="https://tilde.za3k.com/hackaday/song"></a>
+                <a class="source" href="https://github.com/za3k/day16_song"></a>
+                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-song/"></a>
             </span>
             <span class="description">listen to 'greensleeves'</span>
         </div>
@@ -186,9 +186,9 @@
             <span class="name">Hack-A-Tank</span>
             <span class="date">17</span>
             <span class="links">
-                <a class="demo" href="https://tilde.za3k.com/hackaday/tank">demo</a>
-                <a class="source" href="https://github.com/za3k/day17_tank">source</a>
-                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-tank/">blog</a>
+                <a class="demo" href="https://tilde.za3k.com/hackaday/tank"></a>
+                <a class="source" href="https://github.com/za3k/day17_tank"></a>
+                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-tank/"></a>
             </span>
             <span class="description">relax and play with fish</span>
         </div>
@@ -197,9 +197,9 @@
             <span class="name">Hack-A-Crop</span>
             <span class="date">18</span>
             <span class="links">
-                <a class="demo" href="https://tilde.za3k.com/hackaday/crop">demo</a>
-                <a class="source" href="https://github.com/za3k/day18_crop">source</a>
-                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-crop/">blog</a>
+                <a class="demo" href="https://tilde.za3k.com/hackaday/crop"></a>
+                <a class="source" href="https://github.com/za3k/day18_crop"></a>
+                <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-crop/"></a>
             </span>
             <span class="description">crop images</span>
         </div>
-- 
2.47.3