feat(theme): outbox

3 files changed, 41 insertions, 1 deletions

diff --git a/assets/css/components/_markdown.scss b/assets/css/components/_markdown.scss
index 76b8d122..7bcd39bd 100644
--- a/assets/css/components/_markdown.scss
+++ b/assets/css/components/_markdown.scss
@@ -100,4 +100,22 @@ $em-text-color: #889E73;
   mark {
       background-color: rgba(255, 235, 0, .5)
   }
+
+  table {
+      border: 1px solid $border-color;
+      max-width: 100%;
+      overflow-x: auto;
+      border-collapse: collapse;
+      th {
+          background-color: $block-background-color
+      }
+      td {
+          padding: .1rem .75rem
+      }
+      tr {
+          & > td:nth-child(even) {
+              background-color: var(--bright-background-color)
+          }
+      }
+  }
 }
diff --git a/assets/css/components/_utility.scss b/assets/css/components/_utility.scss
index 1075d2ad..f247c850 100644
--- a/assets/css/components/_utility.scss
+++ b/assets/css/components/_utility.scss
@@ -27,3 +27,22 @@ figure {
         }
     }
 }
+
+.outbox {
+    display: flex;
+    justify-content: center;
+
+    // Default width
+    width: var(--page-width);
+
+    // Properly interpolate calc() in media queries
+    @media screen and (min-width: 768px) {
+        width: calc(var(--page-width) + 5rem * 2);
+        margin: 0 -5rem;
+    }
+
+    @media screen and (min-width: 1200px) {
+        width: calc(var(--page-width) + 10rem * 2);
+        margin: 0 -10rem;
+    }
+}
diff --git a/assets/css/components/_variables.scss b/assets/css/components/_variables.scss
index ac5c44fc..b2e4cb8d 100644
--- a/assets/css/components/_variables.scss
+++ b/assets/css/components/_variables.scss
@@ -8,6 +8,7 @@
   --text-color: #1D1D1F;
   --secondary-text-color: #6E6E73;
   --link-color: #277BD9;
+  --bright-background-color: #FAFAFA;
 
   /* fonts */
   --mono-font-family: "Courier New", Courier, "Menlo", "Monaco", Consolas, "Liberation Mono", "Lucida Console", monospace;
@@ -23,7 +24,8 @@
   --border-color: rgba(255,255,255,0.2);
   --text-color: #D2CEC9;
   --secondary-text-color: #A1998D;
-  --link-color: #277BD9
+  --link-color: #277BD9;
+  --bright-background-color: #666;
 }
 
 html[lang="en-US"] {
@@ -38,6 +40,7 @@ html[lang="en-US"] {
     --text-color: #D2CEC9;
     --secondary-text-color: #A1998D;
     --link-color: #277BD9;
+    --bright-background-color: #333;
   }
 }