Mod pages base

assets/styles/components.scss

@@ -54,3 +54,56 @@
     color: #675027;
   }
 }
+
+.markdown-body {
+  p {
+    padding: 0;
+    margin: 0;
+    line-height: 1.5;
+    word-wrap: break-word;
+  }
+
+  h1, h2 {
+    padding: 10px 0 5px;
+    border-bottom: 1px solid var(--color-grey-3);
+  }
+
+  blockquote {
+    margin: 15px 0;
+    padding: 0 1em;
+    color: var(--color-grey-5);
+    border-left: .25em solid var(--color-grey-3);
+  }
+
+  a {
+    color: var(--color-link);
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  pre {
+    padding: 15px 10px;
+    border-radius: var(--size-rounded-sm);
+    background-color: var(--color-grey-1);
+
+    code {
+      font-size: 80%;
+      padding: 0;
+      border-radius: 0;
+    }
+  }
+
+  code {
+    padding: .2em .4em;
+    font-size: 60%;
+    border-radius: var(--size-rounded-sm);
+    background-color: var(--color-grey-1)
+  }
+
+  hr {
+    margin: 20px 0;
+    color: var(--color-grey-2);
+  }
+}

assets/styles/global.scss

@@ -15,6 +15,8 @@
   --color-grey-5: #718096;
   --color-grey-6: #4a5568;
   --color-grey-7: #2d3748;
+
+  --color-link: #2089ff;
 }
 
 .dark-mode {
@@ -29,11 +31,13 @@
   --color-grey-7: #f7faf0;
   --color-grey-6: #f7f2eb;
   --color-grey-5: #ede9e4;
-  --color-grey-4: #dadcd5;
+  --color-grey-4: #b3b3b3;
   --color-grey-3: #797b76;
   --color-grey-2: #3b3937;
   --color-grey-1: #3a3b38;
   --color-grey-0: #1d1e1b;
+
+  --color-link: #4793d9;
 }
 
 body {