1 files changed, 104 insertions, 26 deletions

diff --git a/static/sass/main.scss b/static/sass/main.scss
index 6981424..db7ecef 100644
--- a/static/sass/main.scss
+++ b/static/sass/main.scss
@@ -23,6 +23,7 @@ $link-color: #35317A;
 $link-hover-color: #0C00E0;
 $primary-color: #292933;
 $muted-color: #5e5e5e;
+$tinted-background-color: #efefef;
 
 $tag-background-color: #CBE6FA;
 $tag-background-hover-color: #CC3948;
@@ -139,6 +140,30 @@ h3 {
     hyphens: auto;
   }
 
+  .content table {
+    margin: auto;
+    border-top: 2px solid $primary-color;
+    border-bottom: 2px solid $primary-color;
+    border-left: none;
+    border-right: none;
+    border-collapse: collapse;
+
+    thead {
+      border-bottom: 1px solid $primary-color;
+    }
+
+    th {
+      border: none;
+      padding: 0.2em 0.6em;
+      background-color: $tinted-background-color;
+    }
+
+    td {
+      border: none;
+      padding: 0.2em 0.6em;
+    }
+  }
+
   code, tt {
     font-weight: 350;
   }
@@ -220,6 +245,18 @@ blockquote {
   hyphens: auto;
 }
 
+/* Footnotes and their references */
+.footnote-reference {
+  vertical-align: super;
+  font-size: 70%;
+}
+.footnote-reference, .fn-backref {
+  font-style: normal;
+}
+.footnote {
+  font-size: 80%;
+}
+
 /* Side menu styling */
 #sideBanner {
   #mainLogo img {
@@ -291,6 +328,9 @@ img.social-icon {
 
 /* Main layout for big screens */
 @media (min-width: $breakpoint) {
+  #sideMenuToggle {
+    display: none;
+  }
   #openSideBanner {
     display: none;
   }
@@ -312,39 +352,77 @@ img.social-icon {
 
 /* Style for small screens */
 @media (max-width: $breakpoint) {
-  #mainLogo {
+  #sideMenuToggle {
     display: none;
-  }
-  #openSideBanner {
-    position: absolute;
-    top: 0;
-    width: 95%;
-    margin: 0 auto;
-    img {
-      position: absolute;
-      top: calc($spacing / 2);
-      right: calc($spacing / 2);
+
+    &:checked + .sideMenuBtn > span {
+      transform: translateY(12px) rotate(45deg);
+    }
+    &:checked + .sideMenuBtn > span::before {
+      top: 0px;
+      transform: rotate(0deg);
+    }
+    &:checked + .sideMenuBtn > span::after {
+      top: 0px;
+      transform: rotate(90deg);
     }
   }
-  #sideBanner {
-    position: absolute;
-    text-align: center;
-    background-color: white;
-    width: 95%;
-    margin: 0 auto;
-    z-index: 100;
-    transform: translateY(-100%);
-    transition: transform 0.2s ease;
-    top: 0;
-    &:target {
-      transform: translateY(0);
+
+  .sideMenuBtn {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    width: 26px;
+    height: 26px;
+    cursor: pointer;
+    z-index: 1;
+
+    & > span {
+      transform: translateY(12px);
     }
-    #hideMenu {
+
+    & > span, & > span::before, & > span::after {
+      display: block;
       position: absolute;
-      top: calc($spacing / 2);
-      right: calc($spacing /2);
+      width: 100%;
+      height: 2px;
+      background-color: #616161;
+      transition-duration: .25s;
     }
   }
+
+  .sideMenuBtn > span::before {
+    content: '';
+    top: -8px;
+  }
+
+  .sideMenuBtn > span::after {
+    content: '';
+    top: 8px;
+  }
+
+  #sideMenuToggle:checked ~ header {
+    left: 0 !important;
+  }
+
+  #sideBanner header {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: calc(-1 * (442px + 2 * $spacing));
+    width: 442px;
+    height: 100%;
+    margin: 0;
+    padding: $spacing $spacing;
+    background-color: #ECEFF1;
+    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
+    transition-duration: .25s;
+  }
+
+  #mainLogo {
+    display: none;
+  }
+
   #mainArea {
     max-width: 35em;
   }