Remove v-if prop anti-pattern, clean up, add reader mode

assets/styles/main.scss

@@ -61,6 +61,10 @@ body {
 }
 
 // Helper classes that don't exist in Bootstrap.
+.mh-0 {
+  max-height: 100% !important;
+}
+
 .nobr {
   white-space: nowrap;
 }
@@ -112,6 +116,14 @@ body {
   word-break: keep-all;
 }
 
+.h-animated {
+  transition: max-height 0.3s ease;
+}
+
+.p-animated {
+  transition: padding 0.3s ease;
+}
+
 // Query-overridable classes.
 .background {
   background-color: rgb(0 0 0 / 50%);
@@ -122,6 +134,10 @@ body {
   min-height: 100%;
 }
 
+.separator {
+  color: white;
+}
+
 .dialog {
   display: grid;
 
@@ -257,6 +273,10 @@ body {
     }
   }
 
+  .separator {
+    color: black;
+  }
+
   .radial-gradient {
     background: radial-gradient(
       circle at left,
@@ -300,8 +320,6 @@ body {
     bottom: 0;
     right: 0;
 
-    padding: 0.5rem;
-
     text-transform: uppercase;
     background-color: rgb(153 153 255 / 10%);
 
@@ -313,20 +331,32 @@ body {
   }
 
   &-thumb {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
     height: 100%;
 
     > img {
       width: 100%;
-      height: 280px;
+      height: 100%;
+      max-height: 280px;
       object-fit: cover;
       border-radius: 4px;
     }
   }
 
+  &-tags {
+    > span {
+      padding: 0.35em 0.65em;
+      font-size: 0.85em;
+
+      background-color: rgb(153 153 255 / 10%);
+
+      border: 1px solid rgb(153 153 255 / 60%);
+      border-radius: 1rem;
+    }
+  }
+
+  &-details {
+  }
+
   &-preamble {
     &-thumb {
       max-width: 800px;
@@ -334,12 +364,18 @@ body {
   }
 
   &-content {
+    :is(h1, h2, h3, h4, h5, h6) {
+      font-family: Alexandria, sans-serif;
+      font-weight: 700;
+    }
+
     a {
       @extend %link;
 
+    }
 
-      padding-left: 0.5rem;
-
+    img {
+      max-height: 400px;
     }
   }
 }
@@ -390,10 +426,10 @@ body {
 
     &-thumb {
       min-width: 352px;
+      max-height: 198px;
 
       > img {
         max-width: 352px;
-        height: 198px;
       }
     }