articles: parse body as markdown

static/style.css

@@ -148,6 +148,7 @@ table {
 }
 
 @keyframes woopwoop {
+
   0%,
   100% {
     transform: translateY(0) rotate(-2deg);
@@ -181,6 +182,7 @@ table {
 }
 
 @keyframes boing {
+
   0%,
   100% {
     transform: translateY(-25%);
@@ -221,7 +223,7 @@ body {
   width: 100lvw;
   overflow: auto;
   font-family: "DotGothic16", sans-serif;
-  font-size: 1rem;
+  font-size: 1.1rem;
 
   &:has(#content home-content) {
     background-image: url(assets/images/tiledbgpink.webp);
@@ -292,11 +294,9 @@ crt {
   }
 
   &::before {
-    background: linear-gradient(
-      to bottom,
-      transparent 50%,
-      rgba(0, 0, 0, 0.2) 51%
-    );
+    background: linear-gradient(to bottom,
+        transparent 50%,
+        rgba(0, 0, 0, 0.2) 51%);
     background-size: 100% 4px;
     animation: scanlines 1s steps(60) infinite;
   }
@@ -487,7 +487,7 @@ home-content {
         display: flex;
         gap: 1rem;
 
-        > socials-header {
+        >socials-header {
           color: var(--darkerer-pink);
         }
 
@@ -543,7 +543,7 @@ home-content {
           justify-content: center;
           gap: 0.6rem;
 
-          & > img {
+          &>img {
             margin: auto;
           }
         }
@@ -559,6 +559,14 @@ home-content {
             font-weight: bold;
           }
 
+          a {
+            color: var(--darkerer-pink);
+
+            &:hover {
+              color: var(--lavender)
+            }
+          }
+
           article-body {
             padding-bottom: 1rem;
           }
@@ -583,11 +591,11 @@ home-content {
         flex-wrap: wrap;
         gap: 1rem;
 
-        > img {
+        >img {
           flex: 1 1 auto;
         }
 
-        > img:nth-last-child(-n + 3) {
+        >img:nth-last-child(-n + 3) {
           flex: 1 1 30%;
         }
       }
@@ -623,16 +631,14 @@ home-content {
 
   woopwoop span {
     display: inline-block;
-    background: linear-gradient(
-      90deg,
-      var(--blue),
-      var(--darker-pink),
-      var(--darkerer-pink),
-      var(--lavender),
-      var(--light-blue),
-      var(--light-pink),
-      var(--pink)
-    );
+    background: linear-gradient(90deg,
+        var(--blue),
+        var(--darker-pink),
+        var(--darkerer-pink),
+        var(--lavender),
+        var(--light-blue),
+        var(--light-pink),
+        var(--pink));
     background-size: 200% auto;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
@@ -709,7 +715,7 @@ music {
     padding: 1rem;
   }
 
-  > cute-container {
+  >cute-container {
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
@@ -1053,4 +1059,4 @@ helo {
       width: 5svw;
     }
   }
-}
+}