Better handling of the blog list on small screens

.vscode/tasks.json

@@ -10,6 +10,19 @@
             "options": {
                 "cwd": "${workspaceFolder}"
             },
+            "args": [
+                "compose",
+                "up"
+            ],
+            "problemMatcher": []
+        },
+        {
+            "label": "Launch development webserver (with build) (ewpratten.com)",
+            "type": "shell",
+            "command": "docker",
+            "options": {
+                "cwd": "${workspaceFolder}"
+            },
             "args": [
                 "compose",
                 "up",

src/_sass/default.scss

@@ -154,3 +154,29 @@ body {
     text-align: center;
   }
 }
+
+// Mobile-friendly dynamic formatting for the blog post list
+ul#blog-post-list {
+  li {
+    span::after {
+      content: ":";
+    }
+  }
+  @media screen and (max-width: 535px) {
+    padding: 0 0.5em;
+    list-style: none;
+
+    li {
+      span {
+        display: block;
+        &::after {
+          content: "";
+        }
+      }
+      a {
+        display: block;
+        margin-bottom: 1em;
+      }
+    }
+  }
+}

src/blog.html

@@ -9,10 +9,10 @@ title: Blog
 
 {% for group in grouped_posts %}
 <h2>{{ group.name }}</h2>
-<ul>
+<ul id="blog-post-list">
     {% for post in group.items %}
     <li>
-        <span style="color: gray;">{{ post.date | date: "%Y-%m-%d" }}:</span>
+        <span style="color: gray;">{{ post.date | date: "%Y-%m-%d" }}</span>
         <a href="{{ post.url | downcase }}">{{ post.title }}</a>
     </li>
     {% endfor %}