adjust blog index styling

hannahilea · Nov 4, 2024 · 5c85c84 · 5c85c84
1 parent b1e2438
commit 5c85c84
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 12 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -404,16 +404,21 @@ img.home-img {
   .date {
     font-weight: normal;
     font-family: "Jura Regular";
+    text-align: right;
   }
 
   .sort.asc::after {
     content: "▼";
     padding-left: 3px;
+    padding-right: 3px;
+    font-size: small
   }
 
   .sort.desc::after {
     content: "▲";
     padding-left: 3px;
+    padding-right: 3px;
+    font-size: small;
   }
 
   .search {
@@ -451,6 +456,15 @@ img.home-img {
     word-wrap: break-word;
   }
 
+  th {
+    font-weight: normal;
+    margin: 0;
+    font-family: "Jura Bold";
+    padding-bottom: 2px;
+    margin-bottom: 3px;
+    font-size: larger;
+  }
+
   tbody tr:nth-child(even) {
     background-color: #f2f2f2;
   }

diff --git a/blog/__template/index.template.html b/blog/__template/index.template.html
@@ -39,7 +39,6 @@ <h1 class="title">Blog</h1>
         </tbody>
       </table>
     </div>
-    <!-- <script src="table-niceties.js"></script> -->
     <script>
       var options = {
         valueNames: ['date-raw', 'date-pretty', 'title', 'title-raw', 'tags']
@@ -48,6 +47,7 @@ <h1 class="title">Blog</h1>
       var blogList = new List('post-list', options);
     </script>
 
+  <br/>
     <div>
       <a href="/rss.xml" rel="subscribe-rss">
         <!-- Source: https://img.shields.io/badge/rss-F88900?style=for-the-badge&logo=rss&logoColor=white -->

diff --git a/blog/index.html b/blog/index.html
@@ -36,7 +36,7 @@ <h1 class="title">Blog</h1>
         <!-- IMPORTANT, class="list" have to be at tbody -->
         <tbody class="list">
           <tr>
-    <td class="date-pretty">31 Oct 2024</td>
+    <td class="date date-pretty">31 Oct 2024</td>
     <td class="date-raw" hidden>2024-10-31</td>
     <td class="title-raw" hidden>Scurrying seagull: CAD-assisted Fliposcope animation</a></td>
     <td class="title"><a class="blog-url" href="./seagull-fliposcope-animation-with-cuttle">Scurrying seagull: CAD-assisted Fliposcope animation</a>
@@ -45,7 +45,7 @@ <h1 class="title">Blog</h1>
   </tr>
 
 <tr>
-    <td class="date-pretty">18 Oct 2024</td>
+    <td class="date date-pretty">18 Oct 2024</td>
     <td class="date-raw" hidden>2024-10-18</td>
     <td class="title-raw" hidden><strong><em>Clapping Music</em></strong> for one flip-disc display: Byte and variations</a></td>
     <td class="title"><a class="blog-url" href="./clapping-music-2"><strong><em>Clapping Music</em></strong> for one flip-disc display: Byte and variations</a>
@@ -54,7 +54,7 @@ <h1 class="title">Blog</h1>
   </tr>
 
 <tr>
-    <td class="date-pretty">11 Oct 2024</td>
+    <td class="date date-pretty">11 Oct 2024</td>
     <td class="date-raw" hidden>2024-10-11</td>
     <td class="title-raw" hidden>Quick ’n hacky meme making, for fun and no profit</a></td>
     <td class="title"><a class="blog-url" href="./meme-making">Quick ’n hacky meme making, for fun and no profit</a>
@@ -63,7 +63,7 @@ <h1 class="title">Blog</h1>
   </tr>
 
 <tr>
-    <td class="date-pretty">27 Sep 2024</td>
+    <td class="date date-pretty">27 Sep 2024</td>
     <td class="date-raw" hidden>2024-09-27</td>
     <td class="title-raw" hidden>Obsessed with Cuttle: Parametric CAD for prototyping, producing, and procrastinating</a></td>
     <td class="title"><a class="blog-url" href="./cuttle-obsession">Obsessed with Cuttle: Parametric CAD for prototyping, producing, and procrastinating</a>
@@ -72,7 +72,7 @@ <h1 class="title">Blog</h1>
   </tr>
 
 <tr>
-    <td class="date-pretty">21 Sep 2024</td>
+    <td class="date date-pretty">21 Sep 2024</td>
     <td class="date-raw" hidden>2024-09-21</td>
     <td class="title-raw" hidden>First things first: Make a list</a></td>
     <td class="title"><a class="blog-url" href="./make-a-list">First things first: Make a list</a>
@@ -81,7 +81,7 @@ <h1 class="title">Blog</h1>
   </tr>
 
 <tr>
-    <td class="date-pretty">20 Sep 2024</td>
+    <td class="date date-pretty">20 Sep 2024</td>
     <td class="date-raw" hidden>2024-09-20</td>
     <td class="title-raw" hidden>Dopamine-driven development (DDD), spite-driven development (SDD), and other DDs</a></td>
     <td class="title"><a class="blog-url" href="./driven-developments">Dopamine-driven development (DDD), spite-driven development (SDD), and other DDs</a>
@@ -90,7 +90,7 @@ <h1 class="title">Blog</h1>
   </tr>
 
 <tr>
-    <td class="date-pretty">18 Sep 2024</td>
+    <td class="date date-pretty">18 Sep 2024</td>
     <td class="date-raw" hidden>2024-09-18</td>
     <td class="title-raw" hidden>Titles of blog posts I might never write</a></td>
     <td class="title"><a class="blog-url" href="./future-blog-posts">Titles of blog posts I might never write</a>
@@ -99,7 +99,7 @@ <h1 class="title">Blog</h1>
   </tr>
 
 <tr>
-    <td class="date-pretty">14 Sep 2024</td>
+    <td class="date date-pretty">14 Sep 2024</td>
     <td class="date-raw" hidden>2024-09-14</td>
     <td class="title-raw" hidden><strong><em>Clapping Music</em></strong> for two flip-disc displays</a></td>
     <td class="title"><a class="blog-url" href="./clapping-music-for-flip-disc-displays"><strong><em>Clapping Music</em></strong> for two flip-disc displays</a>
@@ -108,7 +108,7 @@ <h1 class="title">Blog</h1>
   </tr>
 
 <tr>
-    <td class="date-pretty">17 May 2024</td>
+    <td class="date date-pretty">17 May 2024</td>
     <td class="date-raw" hidden>2024-05-17</td>
     <td class="title-raw" hidden>This website’s structure: A meta post</a></td>
     <td class="title"><a class="blog-url" href="./site-structure">This website’s structure: A meta post</a>
@@ -119,7 +119,6 @@ <h1 class="title">Blog</h1>
         </tbody>
       </table>
     </div>
-    <!-- <script src="table-niceties.js"></script> -->
     <script>
       var options = {
         valueNames: ['date-raw', 'date-pretty', 'title', 'title-raw', 'tags']
@@ -128,6 +127,7 @@ <h1 class="title">Blog</h1>
       var blogList = new List('post-list', options);
     </script>
 
+  <br/>
     <div>
       <a href="/rss.xml" rel="subscribe-rss">
         <!-- Source: https://img.shields.io/badge/rss-F88900?style=for-the-badge&logo=rss&logoColor=white -->

diff --git a/build-blogs/run.jl b/build-blogs/run.jl
@@ -135,7 +135,7 @@ function generate_blog_index(; overwrite_existing=false, template=blog_index_tem
         tags = replace(m.tags, "," => ", ")
         return """
         <tr>
-            <td class="date-pretty">$(date_pretty)</td>
+            <td class="date date-pretty">$(date_pretty)</td>
             <td class="date-raw" hidden>$(m.date_str)</td>
             <td class="title-raw" hidden>$(m.title)</a></td>
             <td class="title"><a class="blog-url" href="$(m.url)">$(m.title)</a>