Distribute all the main.css styles to their own stylesheets and remove main.css

content/blog/blog.css

@@ -1,6 +1,3 @@
-@import url(/styles/reset.css);
-@import url(/styles/root.css);
-
 :root {
     --post-item-highlight-color: #efefef;
 
@@ -42,6 +39,7 @@
     border-radius: 6px;
     display: grid;
     gap: 1em;
+    padding: 0.1em;
     transition: background-color 0.25s;
 }
 @supports not (display: subgrid) {
@@ -66,15 +64,6 @@
     text-align: end;
 }
 
-.post-list b {
-    background-color: #ddd;
-    display: block;
-    grid-area: thing;
-    height: 100%;
-    text-align: end;
-    width: 100%;
-}
-
 .post-list li h1 {
     font-family: var(--font-family-body);
     grid-area: title;
@@ -96,11 +85,54 @@
     color: inherit;
 }
 
+.post-list a:hover {
+    text-decoration: none;
+}
+
+.post-nav {
+    align-items: baseline;
+    display: flex;
+    margin-top: 3.5rem;
+}
+
+.post-nav .next {
+    margin-left: auto;
+}
+
+.post-single footer {
+    margin-block-start: 3.5rem;
+}
+
+.post-title {
+    align-items: baseline;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0 4rem;
+    margin-bottom: var(--body-item-spacing);
+}
+
+.post-title h1 {
+    flex-grow: 1;
+    margin-block: 0;
+    padding-bottom: 0;
+}
+
+.post-title > .post-date {
+    color: var(--light-dim);
+    display: inline-block;
+    font-size: 1.75rem;
+    inline-size: min-content;
+    letter-spacing: 1px;
+    margin-block-start: 0.5rem;
+    white-space: nowrap;
+}
+
 .blog footer .tags {
     display: flex;
     padding-inline-start: 0;
 }
 
+
 .blog footer .tags li {
     background-color: var(--tag-background-color);
     border-radius: 4px;