Update timeline to contain more info

content/blog/2022-12-07-gamels.md

@@ -1,13 +1,13 @@
 ---
 layout: page
-title: "I re-implemented `ls` to query the Steam API" 
+title: "I re-implemented ls to query the Steam API" 
 description: "gamels: never be confused about Steam appid direcroties again"
 date: 2022-12-07
 tags: project
 draft: false
 extra:
   auto_center_images: true
-  excerpt: "`gamels` will list all files in a directory in the style of `ls -la`, but will also show the name of any Steam game found in the listing. This utility was made to help me explore the filesystem of the Steam Deck."
+  excerpt: "gamels will list all files in a directory in the style of 'ls -la', but will also show the name of any Steam game found in the listing. This utility was made to help me explore the filesystem of the Steam Deck."
 ---
 
 Today, I released a new command-line tool called [`gamels`](https://github.com/ewpratten/gamels).

sass/styles/components/site-timeline.scss

@@ -1,14 +1,26 @@
-.timeline-item {
+.timeline-list {
-  .timeline-datestamp {
+  @media screen and (max-width: 700px) {
-    display: inline-block;
+    padding-left: 1em !important;
   }
 
-  .mobile-linebreak {
+  .timeline-item {
-    @media screen and (max-width: 450px) {
+    .timeline-datestamp {
-      display: block !important;
+      display: inline-block;
+    }
+
+    .mobile-linebreak {
+      @media screen and (max-width: 450px) {
+        display: block !important;
+      }
+    }
+
+    .timeline-title {
+    }
+
+    .timeline-description {
+      padding-left: 0.5em;
+      padding-right: 0.5em;
+      margin-left: 0.25em;
     }
   }
-
-  .timeline-title {
-  }
 }

sass/styles/layout.scss

@@ -2,6 +2,8 @@
   & > .container {
     max-width: 800px;
     margin: auto !important;
+    padding-left: 1em;
+    padding-right: 1em;
   }
 }
 

templates/components/site-timeline.html

@@ -32,7 +32,7 @@
 {% set pages = map[year] %}
 {# Per-year heading #}
 <h2>{{year}}</h2>
-<ul>
+<ul class="timeline-list">
     {% for page in pages %}
     {% if not page.draft %}
     <li class="timeline-item">
@@ -52,6 +52,13 @@
         {# Title #}
         <br class="mobile-linebreak" style="display: none;">
         <a href="{{page.path}}" class="timeline-title">{{page.title}}</a>
+        <br>
+        
+        {# Additonal info #}
+        {% if page.extra.excerpt %}
+        <blockquote class="timeline-description">{{page.extra.excerpt}}</blockquote>
+        {% endif %}
+        {# <hr> #}
     </li>
     {% endif %}
     {% endfor %}