From 2d6aab6b71edb68f8b0d39484ed9a8ae601cb7f2 Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Sun, 1 Mar 2020 16:07:38 -0800
Subject: [PATCH] Add special table style and factor out media queries

---
 themes/vanilla/assets/scss/sidenotes.scss | 22 ++++++++++++++++++----
 themes/vanilla/assets/scss/style.scss     | 20 ++++++++++++++++++--
 2 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/themes/vanilla/assets/scss/sidenotes.scss b/themes/vanilla/assets/scss/sidenotes.scss
index 01149cd..b7dd3d2 100644
--- a/themes/vanilla/assets/scss/sidenotes.scss
+++ b/themes/vanilla/assets/scss/sidenotes.scss
@@ -6,6 +6,22 @@ $sidenote-offset: 1.5rem;
 $sidenote-padding: 1rem;
 $sidenote-highlight-border-width: .2rem;
 
+@mixin below-two-sidenotes {
+    @media screen and
+        (max-width: $container-width +
+            2 * ($sidenote-width + 2 * $sidenote-offset)) {
+        @content;
+    }
+}
+
+@mixin below-one-sidenote {
+    @media screen and
+        (max-width: $container-width +
+            ($sidenote-width + 3 * $sidenote-offset)) {
+        @content;
+    }
+}
+
 .sidenote {
     &:hover {
         .sidenote-label {
@@ -64,8 +80,7 @@ $sidenote-highlight-border-width: .2rem;
     }
 }
 
-@media screen and
-(max-width: $container-width + 2 * ($sidenote-width + 2 * $sidenote-offset)) {
+@include below-two-sidenotes {
     .sidenote-content.sidenote-left {
         @include hidden-sidenote;
         margin-left: 0rem;
@@ -77,8 +92,7 @@ $sidenote-highlight-border-width: .2rem;
     }
 }
 
-@media screen and
-(max-width: $container-width + ($sidenote-width + 3 * $sidenote-offset)) {
+@include below-one-sidenote {
     .post-content {
         max-width: 100%;
     }
diff --git a/themes/vanilla/assets/scss/style.scss b/themes/vanilla/assets/scss/style.scss
index 4577ca0..1e5d045 100755
--- a/themes/vanilla/assets/scss/style.scss
+++ b/themes/vanilla/assets/scss/style.scss
@@ -18,6 +18,12 @@ $standard-border: $standard-border-width solid $border-color;
     border-radius: .2rem;
 }
 
+@mixin below-container-width {
+    @media screen and (max-width: $container-width){
+        @content;
+    }
+}
+
 body {
   font-family: $font-body;
   font-size: 1.0rem;
@@ -64,8 +70,8 @@ pre code {
   max-width: $container-width;
   box-sizing: border-box;
 
-  @media screen and (max-width: $container-width){
-    padding: 0rem 1rem 0rem 1rem;
+  @include below-container-width {
+      padding: 0rem 1rem 0rem 1rem;
   }
 }
 
@@ -156,6 +162,16 @@ table {
     padding: 0.5rem;
 }
 
+tr {
+    @include below-container-width {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
 td {
+    @include below-container-width {
+        overflow-x: auto;
+    }
     padding: 0.5rem;
 }