Improve taxonomy handling

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

assets/sass/details.scss

@@ -0,0 +1,55 @@
+main.with-details {
+  max-width: $width-wide;
+  margin: 0 auto;
+  padding: 2rem;
+
+  > .content {
+    width: 100%;
+    padding: 0;
+  }
+
+  $width-sidebar: ($width-wide - $width-content) / 2 - 2rem;
+  display: grid;
+  grid-template-columns: $width-sidebar $width-content $width-sidebar;
+  column-gap: 2rem;
+
+  .title {
+    font-size: 1.75rem;
+    margin: 0;
+  }
+
+  .length {
+    color: color-mix(in srgb, var(--text) 50%, var(--background));
+    margin: 0.5rem 0 0.5rem 0;
+    font-size: 0.8rem;
+  }
+}
+
+@media (max-width: $width-wide) {
+  main.with-details {
+    display: block;
+    padding: 0;
+
+    > .details {
+      max-width: $width-content;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+
+    > .content {
+      padding: 2rem;
+    }
+  }
+}
+
+@media (max-width: $width-mobile) {
+  main.with-details {
+    > .details {
+      padding: 1rem;
+    }
+
+    > .content {
+      padding: 0 1rem 1rem 1rem;
+    }
+  }
+}

assets/sass/footer.scss

@@ -36,6 +36,7 @@
         list-style: none;
 
         li {
+          margin: 0;
           font-size: 0.85rem;
         }
       }

assets/sass/hero.scss

@@ -7,22 +7,6 @@
     margin: 0;
     font-size: 2.5rem;
   }
-
-  .meta {
-    font-size: 0.8rem;
-
-    .date {
-      color: var(--text-600);
-    }
-
-    .duration {
-      color: color-mix(in srgb, var(--text) 50%, var(--background));
-    }
-  }
-
-  .captioned-image {
-    padding-top: 1.5rem;
-  }
 }
 
 .hero + .content {

assets/sass/list.scss

@@ -1,64 +1,17 @@
-main.with-meta {
-  max-width: $width-wide;
-  margin: 0 auto;
-  padding: 2rem;
-
-  > .content {
-    padding: 0;
-  }
-
-  $width-sidebar: ($width-wide - $width-content) / 2 - 2rem;
-  display: grid;
-  grid-template-columns: $width-sidebar $width-content $width-sidebar;
-  column-gap: 2rem;
-
-  h1 {
-    font-size: 1.75rem;
-  }
-
-  .length {
-    color: color-mix(in srgb, var(--text) 50%, var(--background));
-    margin: 0.25rem 0;
-    font-size: 0.8rem;
-  }
-}
-
-@media (max-width: $width-wide) {
-  main.with-meta {
-    display: block;
-    padding: 0;
-
-    > .meta {
-      max-width: $width-content;
-      margin: 0 auto;
-      padding: 2rem;
-    }
-
-    > .content {
-      padding: 2rem;
-    }
-  }
-}
-
-@media (max-width: $width-mobile) {
-  main.with-meta {
-    > .meta {
-      padding: 1rem;
-    }
-
-    > .content {
-      padding: 0 1rem 1rem 1rem;
-    }
-  }
-}
-
 .list {
   .post {
     display: block;
-    color: inherit;
+
+    >a {
+      color: inherit;
+    }
+
+    >a:hover {
+      color: var(--text-800);
+    }
 
     &:not(:first-child) {
-      margin-top: 4rem;
+      margin: 4rem 0 4rem 0;
     }
 
     .title {
@@ -67,38 +20,20 @@ main.with-meta {
     }
 
     .summary {
-      margin-top: 0.5rem;
-    }
-
-    .meta {
-      margin-top: 1rem;
-      font-size: 0.8rem;
-
-      .date {
-        color: var(--text-600);
-      }
-
-      .duration {
-        color: color-mix(in srgb, var(--text) 50%, var(--background));
-      }
+      margin: 0.5rem 0 0.5rem 0;
     }
 
     .heading-anchor {
       display: none;
     }
   }
-
-  .post:hover .title,
-  .post:hover .summary {
-    color: var(--text-800);
-  }
 }
 
 @media (max-width: $width-mobile) {
   .list {
     .post {
       &:not(:first-child) {
-        margin-top: 2rem;
+        margin: 2rem 0 2rem 0;
       }
 
       .title {

assets/sass/main.scss

@@ -11,7 +11,9 @@ $width-wide: 75rem;
 @import "blockquote";
 @import "code";
 @import "table";
+@import "meta";
 
+@import "details";
 @import "list";
 @import "gallery";
 

assets/sass/meta.scss

@@ -0,0 +1,20 @@
+.meta {
+  margin: 1rem 0 1rem 0;
+  font-size: 0.8rem;
+
+  .tag {
+    color: var(--secondary-600);
+  }
+
+  .tag:hover {
+    color: var(--secondary-800);
+  }
+
+  .date {
+    color: var(--text-600);
+  }
+
+  .duration {
+    color: color-mix(in srgb, var(--text) 50%, var(--background));
+  }
+}