Add special table style and factor out media queries

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%;
     }

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;
 }