fix table formatting

hannahilea · Nov 4, 2024 · 77b5dc2 · 77b5dc2
1 parent 0a9b5e8
commit 77b5dc2
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 22 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -77,11 +77,6 @@ body {
   font-family: "Jura Bold";
 }
 
-.blog-date {
-  font-weight: normal;
-  font-family: "Jura Regular";
-}
-
 .blog-url {
   font-weight: bolder;
 }
@@ -404,7 +399,13 @@ img.home-img {
   font-family: "Jura Bold";
 }
 
+/* For blog, project index pages */ 
 .index-page {
+  .date {
+    font-weight: normal;
+    font-family: "Jura Regular";
+  }
+
   .sort.asc::after {
     content: "▼";
     padding-left: 3px;
@@ -442,5 +443,16 @@ img.home-img {
     }
   }
 
+  td,
+  th {
+    padding: 6px;
+    text-align: left;
+    vertical-align: top;
+    word-wrap: break-word;
+  }
 
+  tbody tr:nth-child(even) {
+    background-color: #f2f2f2;
+  }
+
 }
diff --git a/blog/__template/index.template.html b/blog/__template/index.template.html
@@ -9,12 +9,9 @@
   <meta name="author" content="Hannah Robertson" />
   <link rel="shortcut icon" type="image/png" href="../assets/img/favicon.png" />
   <link rel="stylesheet" type="text/css" href="../assets/css/main.css" />
-    <!-- TODO: move to assets -->
   <script src="../assets/scripts/list.min.js"></script>
 
   <title>@hannahilea: blog</title>
-  <!-- TODO: move to css -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
 </head>
 
 <body>

diff --git a/blog/index.html b/blog/index.html
@@ -1,4 +1,4 @@
-<!--Auto-generated! Make changes in index.html.template, not this file-->
+<!--Auto-generated! Make changes in index.template.html, not this file-->
 <!doctype html>
 <html lang="en">
   <head>
@@ -8,12 +8,9 @@
     <meta name="author" content="Hannah Robertson" />
     <link rel="shortcut icon" type="image/png" href="../assets/img/favicon.png" />
     <link rel="stylesheet" type="text/css" href="../assets/css/main.css" />
-    <!-- TODO: move to assets -->
     <script src="../assets/scripts/list.min.js"></script>
 
     <title>@hannahilea: blog</title>
-    <!-- TODO: move to css -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css" />
   </head>
 
   <body>
@@ -36,7 +33,7 @@ <h1 class="title">Blog</h1>
           <!-- IMPORTANT, class="list" have to be at tbody -->
           <tbody class="list">
             <tr>
-              <td>31 Oct 2024</td>
+              <td class="date">31 Oct 2024</td>
               <td class="date" hidden>2024-10-31</td>
               <td class="title">
                 <a class="blog-url" href="./seagull-fliposcope-animation-with-cuttle">Scurrying seagull: CAD-assisted Fliposcope animation</a>
@@ -45,7 +42,7 @@ <h1 class="title">Blog</h1>
             </tr>
 
             <tr>
-              <td>18 Oct 2024</td>
+              <td class="date">18 Oct 2024</td>
               <td class="date" hidden>2024-10-18</td>
               <td class="title">
                 <a class="blog-url" href="./clapping-music-2"
@@ -56,7 +53,7 @@ <h1 class="title">Blog</h1>
             </tr>
 
             <tr>
-              <td>11 Oct 2024</td>
+              <td class="date">11 Oct 2024</td>
               <td class="date" hidden>2024-10-11</td>
               <td class="title">
                 <a class="blog-url" href="./meme-making">Quick ’n hacky meme making, for fun and no profit</a>
@@ -65,7 +62,7 @@ <h1 class="title">Blog</h1>
             </tr>
 
             <tr>
-              <td>27 Sep 2024</td>
+              <td class="date">27 Sep 2024</td>
               <td class="date" hidden>2024-09-27</td>
               <td class="title">
                 <a class="blog-url" href="./cuttle-obsession">Obsessed with Cuttle: Parametric CAD for prototyping, producing, and procrastinating</a>
@@ -74,7 +71,7 @@ <h1 class="title">Blog</h1>
             </tr>
 
             <tr>
-              <td>21 Sep 2024</td>
+              <td class="date">21 Sep 2024</td>
               <td class="date" hidden>2024-09-21</td>
               <td class="title">
                 <a class="blog-url" href="./make-a-list">First things first: Make a list</a>
@@ -83,7 +80,7 @@ <h1 class="title">Blog</h1>
             </tr>
 
             <tr>
-              <td>20 Sep 2024</td>
+              <td class="date">20 Sep 2024</td>
               <td class="date" hidden>2024-09-20</td>
               <td class="title">
                 <a class="blog-url" href="./driven-developments">Dopamine-driven development (DDD), spite-driven development (SDD), and other DDs</a>
@@ -92,7 +89,7 @@ <h1 class="title">Blog</h1>
             </tr>
 
             <tr>
-              <td>18 Sep 2024</td>
+              <td class="date">18 Sep 2024</td>
               <td class="date" hidden>2024-09-18</td>
               <td class="title">
                 <a class="blog-url" href="./future-blog-posts">Titles of blog posts I might never write</a>
@@ -101,7 +98,7 @@ <h1 class="title">Blog</h1>
             </tr>
 
             <tr>
-              <td>14 Sep 2024</td>
+              <td class="date">14 Sep 2024</td>
               <td class="date" hidden>2024-09-14</td>
               <td class="title">
                 <a class="blog-url" href="./clapping-music-for-flip-disc-displays"
@@ -112,7 +109,7 @@ <h1 class="title">Blog</h1>
             </tr>
 
             <tr>
-              <td>17 May 2024</td>
+              <td class="date">17 May 2024</td>
               <td class="date" hidden>2024-05-17</td>
               <td class="title">
                 <a class="blog-url" href="./site-structure">This website’s structure: A meta post</a>

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