Reverse order so display is from newest to oldest

diff --git a/hackaday.css b/hackaday.css
index 56817c0e8e4a6462b725bd6c1f383d5b5699a174..c0473c2e3fd24620a013c7d88aed352cf6762ac4 100644 (file)
--- a/hackaday.css
+++ b/hackaday.css
@@ -17,12 +17,12 @@
     display: block;
 }
 .hack.cool {
-    order: -1;
-}
-.hack:last-child {
     order: -2;
 }
-.hack.cool > *:first-child::before, .hack:last-child > *:first-child::before {
+.hack:first-child {
+    order: -1;
+}
+.hack.cool > *:first-child::before, .hack:first-child > *:first-child::before {
     content: '';
     position: absolute;
     background:url("img/star.svg");
@@ -38,7 +38,7 @@
     background-color: rgba(255, 255, 255, 0.9);
     border-radius: 100%;
 }
-.hack:last-child > *:first-child::before {
+.hack:first-child > *:first-child::before {
     transform: scale(0.5) translate(-5px, -5px);
     filter: hue-rotate(180deg);
 }

diff --git a/hackaday.html b/hackaday.html
index 1ffebd40203305570a66f6ef15535c505ddd5796..7157835bd241f2445e07d4cb2722a268597931c1 100644 (file)
--- a/hackaday.html
+++ b/hackaday.html
@@ -9,92 +9,97 @@
     <div class="nav"><a href="/">za3k</a> &gt; <a href="/software">software</a> &gt; hack-a-day</div>
     <section class="hacks">
         <div class="hack">
-            <a href="https://tilde.za3k.com/hackaday/blog"><img src="img/hackaday03.png"></a>
-            <span class="name">Hack-A-Blog</span>
-            <span class="date">03</span>
+            <a href="https://tilde.za3k.com/hackaday/crop"><img src="img/hackaday18.png"></a>
+            <span class="name">Hack-A-Crop</span>
+            <span class="date">18</span>
             <span class="links">
-                <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>
+                <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">a blog for anyone</span>
+            <span class="description">crop images</span>
         </div>
-        <div class="hack">
-            <a href="https://tilde.za3k.com/hackaday/chat/"><img src="img/hackaday04.png"></a>
-            <span class="name">Hack-A-Chat</span>
-            <span class="date">04</span>
+        <div class="hack cool">
+            <a href="https://tilde.za3k.com/hackaday/tank"><img src="img/hackaday17.png"></a>
+            <span class="name">Hack-A-Tank</span>
+            <span class="date">17</span>
             <span class="links">
-                <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>
+                <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">an online chatroom</span>
+            <span class="description">relax and play with fish</span>
         </div>
         <div class="hack">
-            <a href="https://tilde.za3k.com/hackaday/paste"><img src="img/hackaday05.png"></a>
-            <span class="name">Hack-A-Paste</span>
-            <span class="date">05</span>
+            <a href="https://tilde.za3k.com/hackaday/song"><img src="img/hackaday16.png"></a>
+            <span class="name">Hack-A-Song</span>
+            <span class="date">16</span>
             <span class="links">
-                <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>
+                <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">a pastebin</span>
+            <span class="description">listen to 'greensleeves'</span>
         </div>
-        <div class="hack">
-            <a href="https://tilde.za3k.com/hackaday/link"><img src="img/hackaday02.png"></a>
-            <span class="name">Hack-A-Link</span>
-            <span class="date">05</span>
+        <div class="hack cool">
+            <a href="https://tilde.za3k.com/hackaday/sound"><img src="img/hackaday15.png"></a>
+            <span class="name">Hack-A-Sound</span>
+            <span class="date">15</span>
             <span class="links">
-                <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>
+                <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">a link shortener</span>
+            <span class="description">play sounds and make tracks</span>
         </div>
         <div class="hack">
-            <a href="https://tilde.za3k.com/hackaday/homepage"><img src="img/hackaday01.png"></a>
-            <span class="name">Hack-A-Homepage</span>
-            <span class="date">05</span>
+            <a href="https://tilde.za3k.com/hackaday/stats"><img src="img/hackaday14.png"></a>
+            <span class="name">Hack-A-Stats</span>
+            <span class="date">14</span>
             <span class="links">
-                <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>
+                <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">make your own homepage</span>
+            <span class="description">see how hack-a-day is doing</span>
         </div>
-        <div class="hack fail">
-            <a href="https://tilde.za3k.com/hackaday/icecube"><img src="img/hackaday06.png"></a>
-            <span class="name">Hack-An-Icecube</span>
-            <span class="date">06</span>
+        <div class="hack">
+            <a href="https://tilde.za3k.com/hackaday/line"><img src="img/hackaday13.png"></a>
+            <span class="name">Hack-A-Line</span>
+            <span class="date">13</span>
             <span class="links">
-                <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>
+                <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">icecubes fall</span>
+            <span class="description">play 5-in-a-row with a friend</span>
+        </div>
+        <div class="hack skipped">
+            <a href=""><img></a>
+            <span class="name">Day 12</span>
+            <span class="date">12</span>
         </div>
         <div class="hack cool">
-            <a href="https://tilde.za3k.com/hackaday/asteroid"><img src="img/hackaday07.png"></a>
-            <span class="name">Hack-An-Asteroid</span>
-            <span class="date">07</span>
+            <a href="https://tilde.za3k.com/hackaday/tile"><img src="img/hackaday11.png"></a>
+            <span class="name">Hack-A-Tile</span>
+            <span class="date">11</span>
             <span class="links">
-                <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>
+                <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">asteroids clone</span>
+            <span class="description">arrange matching tiles</span>
         </div>
         <div class="hack">
-            <a href="https://tilde.za3k.com/hackaday/dictionary"><img src="img/hackaday08.png"></a>
-            <span class="name">Hack-A-Dictionary</span>
-            <span class="date">08</span>
+            <a href="https://tilde.za3k.com/hackaday/machine"><img src="img/hackaday10.png"></a>
+            <span class="name">Hack-A-Machine</span>
+            <span class="date">10</span>
             <span class="links">
-                <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>
+                <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">look up words</span>
+            <span class="description">goofy machine with assembly</span>
         </div>
         <div class="hack">
             <a href="https://tilde.za3k.com/hackaday/mandelbrot"><img src="img/hackaday09.png"></a>
@@ -108,97 +113,92 @@
             <span class="description">explore fractals</span>
         </div>
         <div class="hack">
-            <a href="https://tilde.za3k.com/hackaday/machine"><img src="img/hackaday10.png"></a>
-            <span class="name">Hack-A-Machine</span>
-            <span class="date">10</span>
+            <a href="https://tilde.za3k.com/hackaday/dictionary"><img src="img/hackaday08.png"></a>
+            <span class="name">Hack-A-Dictionary</span>
+            <span class="date">08</span>
             <span class="links">
-                <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>
+                <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">goofy machine with assembly</span>
+            <span class="description">look up words</span>
         </div>
         <div class="hack cool">
-            <a href="https://tilde.za3k.com/hackaday/tile"><img src="img/hackaday11.png"></a>
-            <span class="name">Hack-A-Tile</span>
-            <span class="date">11</span>
+            <a href="https://tilde.za3k.com/hackaday/asteroid"><img src="img/hackaday07.png"></a>
+            <span class="name">Hack-An-Asteroid</span>
+            <span class="date">07</span>
             <span class="links">
-                <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>
+                <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">arrange matching tiles</span>
-        </div>
-        <div class="hack skipped">
-            <a href=""><img></a>
-            <span class="name">Day 12</span>
-            <span class="date">12</span>
+            <span class="description">asteroids clone</span>
         </div>
-        <div class="hack">
-            <a href="https://tilde.za3k.com/hackaday/line"><img src="img/hackaday13.png"></a>
-            <span class="name">Hack-A-Line</span>
-            <span class="date">13</span>
+        <div class="hack fail">
+            <a href="https://tilde.za3k.com/hackaday/icecube"><img src="img/hackaday06.png"></a>
+            <span class="name">Hack-An-Icecube</span>
+            <span class="date">06</span>
             <span class="links">
-                <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>
+                <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">play 5-in-a-row with a friend</span>
+            <span class="description">icecubes fall</span>
         </div>
         <div class="hack">
-            <a href="https://tilde.za3k.com/hackaday/stats"><img src="img/hackaday14.png"></a>
-            <span class="name">Hack-A-Stats</span>
-            <span class="date">14</span>
+            <a href="https://tilde.za3k.com/hackaday/homepage"><img src="img/hackaday01.png"></a>
+            <span class="name">Hack-A-Homepage</span>
+            <span class="date">05</span>
             <span class="links">
-                <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>
+                <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">see how hack-a-day is doing</span>
+            <span class="description">make your own homepage</span>
         </div>
-        <div class="hack cool">
-            <a href="https://tilde.za3k.com/hackaday/sound"><img src="img/hackaday15.png"></a>
-            <span class="name">Hack-A-Sound</span>
-            <span class="date">15</span>
+        <div class="hack">
+            <a href="https://tilde.za3k.com/hackaday/link"><img src="img/hackaday02.png"></a>
+            <span class="name">Hack-A-Link</span>
+            <span class="date">05</span>
             <span class="links">
-                <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>
+                <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">play sounds and make tracks</span>
+            <span class="description">a link shortener</span>
         </div>
         <div class="hack">
-            <a href="https://tilde.za3k.com/hackaday/song"><img src="img/hackaday16.png"></a>
-            <span class="name">Hack-A-Song</span>
-            <span class="date">16</span>
+            <a href="https://tilde.za3k.com/hackaday/paste"><img src="img/hackaday05.png"></a>
+            <span class="name">Hack-A-Paste</span>
+            <span class="date">05</span>
             <span class="links">
-                <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>
+                <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">listen to 'greensleeves'</span>
+            <span class="description">a pastebin</span>
         </div>
-        <div class="hack cool">
-            <a href="https://tilde.za3k.com/hackaday/tank"><img src="img/hackaday17.png"></a>
-            <span class="name">Hack-A-Tank</span>
-            <span class="date">17</span>
+        <div class="hack">
+            <a href="https://tilde.za3k.com/hackaday/chat/"><img src="img/hackaday04.png"></a>
+            <span class="name">Hack-A-Chat</span>
+            <span class="date">04</span>
             <span class="links">
-                <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>
+                <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">relax and play with fish</span>
+            <span class="description">an online chatroom</span>
         </div>
         <div class="hack">
-            <a href="https://tilde.za3k.com/hackaday/crop"><img src="img/hackaday18.png"></a>
-            <span class="name">Hack-A-Crop</span>
-            <span class="date">18</span>
+            <a href="https://tilde.za3k.com/hackaday/blog"><img src="img/hackaday03.png"></a>
+            <span class="name">Hack-A-Blog</span>
+            <span class="date">03</span>
             <span class="links">
-                <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>
+                <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">crop images</span>
+            <span class="description">a blog for anyone</span>
         </div>
     </section>
 </body>