Markdown styling fixes (#268)

* Add table color variables (+ prettier fixes)

* Add details and table styling to .markdown-body

assets/styles/components.scss

@@ -75,9 +75,21 @@
 }
 
 .markdown-body {
+  blockquote,
+  details,
+  dl,
+  ol,
+  p,
+  code,
+  pre,
+  table,
+  ul {
+    margin-top: 0;
+    margin-bottom: 16px;
+  }
+
   p {
     padding: 0;
-    margin: 0;
     line-height: 1.5;
     word-wrap: break-word;
   }
@@ -89,7 +101,6 @@
   }
 
   blockquote {
-    margin: 15px 0;
     padding: 0 1em;
     color: var(--color-text);
     border-left: 0.25em solid var(--color-block-quote);
@@ -105,9 +116,11 @@
   }
 
   pre {
-    padding: 15px 10px;
+    margin-top: 1rem;
+    padding: 14px;
     border-radius: var(--size-rounded-control);
     background-color: var(--color-code-bg);
+    overflow-x: auto;
 
     code {
       font-size: 80%;
@@ -128,6 +141,58 @@
     margin: 20px 0;
     color: var(--color-divider);
   }
+
+  table {
+    display: block;
+    width: max-content;
+    max-width: 100%;
+    overflow: auto;
+    border-collapse: collapse;
+    line-height: 1.5;
+
+    th {
+      font-weight: 600;
+    }
+
+    td,
+    th {
+      padding: 0.4rem 0.85rem;
+      border: 0.1rem solid var(--color-table-border);
+    }
+
+    tr:nth-child(2n) {
+      background-color: var(--color-table-alternate-row);
+    }
+  }
+
+  details {
+    border: 0.15rem solid var(--color-button-bg);
+    border-radius: var(--size-rounded-control);
+    padding: 0.5rem 0.5rem 0;
+
+    summary {
+      font-weight: bold;
+      margin: -0.5rem -0.5rem 0;
+      padding: 0.5rem 0.8rem;
+      cursor: pointer;
+      background-color: var(--color-button-bg);
+      &:hover {
+        background-color: var(--color-button-bg-hover);
+      }
+    }
+
+    &[open] {
+      padding: 0.5rem;
+
+      summary {
+        margin-bottom: 0.5rem;
+      }
+    }
+  }
+
+  > :last-child {
+    margin-bottom: 0 !important;
+  }
 }
 
 .tooltip {

assets/styles/global.scss

@@ -1,8 +1,8 @@
 .light-mode {
   --color-icon: #718096;
-  --color-text:#4A5568;
+  --color-text: #4a5568;
-  --color-text-medium:#2a303d;
+  --color-text-medium: #2a303d;
-  --color-text-dark:#1A202C;
+  --color-text-dark: #1a202c;
   --color-heading: #2c313d;
   --color-heading-light: #777e8d;
   --color-bg: #edf2f7;
@@ -67,12 +67,15 @@
   --color-block-quote: var(--color-tooltip-bg);
   --color-header-underline: var(--color-tooltip-text);
   --color-hr: var(--color-text);
+
+  --color-table-border: #dfe2e5;
+  --color-table-alternate-row: #f6f8fa;
 }
 
 .dark-mode {
   --color-icon: #acacac;
   --color-text: #cecece;
-  --color-text-medium:#e4e4e4;
+  --color-text-medium: #e4e4e4;
   --color-text-dark: #fbf8ec;
   --color-heading: #fbf8ec;
   --color-heading-light: #8a8a8a;
@@ -134,16 +137,20 @@
   --color-badge-yellow-bg: #675027;
   --color-badge-yellow-text: #f6e8c6;
 
-  --color-block-quote:var(--color-code-bg);
+  --color-block-quote: var(--color-code-bg);
   --color-header-underline: var(--color-tooltip-text);
   --color-hr: var(--color-text);
+
+  --color-table-border: #4f5864;
+  --color-table-alternate-row: #262a30;
 }
 
 body {
   // Defaults
   background-color: var(--color-bg);
   color: var(--color-text);
-  --font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  --font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen,
+    Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   font-family: var(--font-standard);
   font-size: 16px;
   font-weight: var(--font-weight-medium);
@@ -170,15 +177,15 @@ body {
   --spacing-card-sm: 0.5rem;
 
   // Font Sizes
-  --font-size-xxs: 0.625rem;    //10px
+  --font-size-xxs: 0.625rem; //10px
-  --font-size-xs: 0.75rem;    //12px
+  --font-size-xs: 0.75rem; //12px
-  --font-size-sm: 0.875rem;   //14px
+  --font-size-sm: 0.875rem; //14px
-  --font-size-nm: 1rem;       //16px
+  --font-size-nm: 1rem; //16px
-  --font-size-md: 1.125rem;   //18px
+  --font-size-md: 1.125rem; //18px
-  --font-size-lg: 1.25rem;    //20px
+  --font-size-lg: 1.25rem; //20px
-  --font-size-xl: 1.5rem;     //24px
+  --font-size-xl: 1.5rem; //24px
-  --font-size-2xl: 2rem;      //32px
+  --font-size-2xl: 2rem; //32px
-  --font-size-3xl: 3rem;      //48px
+  --font-size-3xl: 3rem; //48px
 
   // Font Weights
   --font-weight-regular: 400;
@@ -281,9 +288,8 @@ button {
 
 // @import "vue-select/src/scss/vue-select.scss";
 
-
+@import '~assets/styles/highlightjs.scss';
-@import "~assets/styles/highlightjs.scss";
+@import '~assets/styles/layout.scss';
-@import "~assets/styles/layout.scss";
+@import '~assets/styles/utils.scss';
-@import "~assets/styles/utils.scss";
+@import '~assets/styles/components.scss';
-@import "~assets/styles/components.scss";
+@import '~assets/styles/normalize.scss';
-@import "~assets/styles/normalize.scss";