2 files changed, 65 insertions, 27 deletions
diff --git a/docs/style/badge.scss b/docs/style/badge.scss
new file mode 100644
index 00000000..8082f6c7
--- /dev/null
+++ b/docs/style/badge.scss
@@ -0,0 +1,18 @@
+.badge {
+  color: #fff;
+  background-color: #6c757d;
+  display: inline-block;
+  padding: .25em .4em;
+  font-size: 75%;
+  font-weight: 1;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 0.25rem;
+
+  // Empty badges collapse automatically
+  &:empty {
+    display: none;
+  }
+}
diff --git a/docs/style/style.scss b/docs/style/style.scss
index 2c66a4c9..b404dc42 100644
--- a/docs/style/style.scss
+++ b/docs/style/style.scss
@@ -1,4 +1,5 @@
 @import "./syntax";
+@import "./badge";
 
 $primary: #C93312;
 $warning-invert: #FFFFFF;
@@ -10,10 +11,20 @@ $family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Ox
 @import "../node_modules/bulma/sass/components/_all";
 @import "../node_modules/bulma/sass/layout/_all";
 
-.sidebody {
-    height: 100vh;
-    overflow-x: hidden;
-    overflow-y: scroll;
+#sidebar {
+    background-color: #eee;
+    border-right: 1px solid #c1c1c1;
+    box-shadow: 0 0 20px rgba(50, 50, 50, .2) inset;
+    padding: $column-gap + 1rem;
+
+    .brand {
+        padding: 1rem 0;
+        text-align: center;
+    }
+}
+
+#main {
+    padding: 3rem;
 }
 
 .example {
@@ -28,30 +39,10 @@ $family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Ox
     margin-bottom: 1em;
 }
 
-
-.sidebar {
-    .version {
-        padding: 1em;
-    }
-    .brand {
-        background-color: #303030;
-        color: #c0c0c0;
-        padding: 1em;
-        top: 0;
-    }
-    .menu {
-        padding: 1em;
-    }
-}
-
-.mainbody {
-  padding: 3em;
-}
-
 code {
-  color: #1a9f1a;
-  font-size: 0.875em;
-  font-weight: normal;
+    color: #1a9f1a;
+    font-size: 0.875em;
+    font-weight: normal;
 }
 
 .content {
@@ -60,3 +51,32 @@ code {
         border-top: 1px solid #c0c0c0;
     }
 }
+
+h1, h2, h3, h4, h5, h6 {
+    .anchor {
+        display: inline-block;
+        width: 0;
+        margin-left: -1.5rem;
+        margin-right: 1.5rem;
+        transition: all 100ms ease-in-out;
+        opacity: 0;
+    }
+    &:hover .anchor {
+        opacity: 1;
+    }
+    &:target {
+        color: $primary;
+        .anchor {
+            opacity: 1;
+            color: $primary
+        }
+    }
+}
+
+.footnotes p {
+    display: inline;
+}
+
+figure.has-border img {
+    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
+}