update

app/blog/DjBlogMain.tsx

@@ -5,14 +5,21 @@ import { RouterLink } from "vue-router";
 import { addCSS, css } from "@/util.ts";
 
 const style = css`
-.entry {
+.dj-blog-main {
-    display: flex;
+    .entry {
-    flex-direction: row;
+        display: flex;
-    gap: 4px;
+        flex-direction: row;
-}
+        gap: 4px;
+    }
 
-h2 {
+    em {
-    margin-top: 0;
+        color: gray;
+    }
+
+
+    h2 {
+        margin-top: 0;
+    }
 }
 `;
 
@@ -26,16 +33,17 @@ export default defineComponent({
         await blogEntries.done;
 
         return () => <>
-            <main>
+            <main class="dj-blog-main">
                 <h2>Entries</h2>
                 <ul>
                     {blogEntries.result.value?.map(_ => (
                         <li key={_.slug}>
                             <div class="entry">
-                                <time datetime={ _.createdAt }>{ new Date(_.createdAt).toLocaleDateString() }</time>
-                                <span>-</span>
                                 <RouterLink to={{ name: 'DjBlogEntry', params: { slug: _.slug }}}>{ _.title }</RouterLink>
                             </div>
+                            <div>
+                                <em>first published <time datetime={ _.createdAt }>{ new Date(_.createdAt).toLocaleDateString() }</time></em>
+                            </div>
                         </li>
                     )) ?? <li>Blog posts loading...</li>}
                 </ul>

app/blog/DjBlogRoot.tsx

@@ -49,7 +49,7 @@ body {
     }
 
     footer {
-        width: 800px;
+        width: 100%;
         font-style: italic;
         margin-left: 10px;
         margin-bottom: 25px;
@@ -65,6 +65,14 @@ body {
         }
     }
 
+    ul {
+        padding-left: 30px;
+    }
+
+    li {
+        list-style: disclosure-closed;
+    }
+
     nav {
         width: 100%;
         font-size: 40px;
@@ -79,11 +87,8 @@ body {
     }
 
     @media only screen and (max-width: 1024px) {
-        width: 100%;
+        width: calc(100% - 20px);
-
+        padding: 10px;
-        .container {
-            padding: 10px;
-        }
 
         .dj-title {
             margin-right: 30px;