various docs improvements

- add clickable anchors for headers
- add "outdated" warning for archived docs
- add "edit on github" button
- beautify template

1 files changed, 54 insertions, 38 deletions

diff --git a/docs/style/style.scss b/docs/style/style.scss
index 2db14100..2b0d2993 100644
--- a/docs/style/style.scss
+++ b/docs/style/style.scss
@@ -10,56 +10,72 @@ $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 {
-  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;
 
-.example {
-  .highlight {
-    margin: 0;
-  }
-  .path {
-    font-style: italic;
-    width: 100%;
-    text-align: right;
-  }
-  margin-bottom: 1em;
+    .brand {
+        padding: 1rem 0;
+        text-align: center;
+    }
 }
 
-.sidebar {
-  background-color: #F1F1F1;
-  .version {
-    padding: 1em;
-  }
-  .brand {
-    background-color: #303030;
-    color: #c0c0c0;
-    padding: 1em;
-    top: 0;
-  }
-  .menu {
-    padding: 1em;
-  }
+#main {
+    padding: 3rem;
 }
 
-.mainbody {
-  padding: 3em;
+.example {
+    .highlight {
+        margin: 0;
+    }
+    .path {
+        font-style: italic;
+        width: 100%;
+        text-align: right;
+    }
+    margin-bottom: 1em;
 }
 
 code {
-  color: #1a9f1a;
-  font-size: 0.875em;
-  font-weight: normal;
+    color: #1a9f1a;
+    font-size: 0.875em;
+    font-weight: normal;
 }
 
 .content {
-  h2 {
-    padding-top: 1em;
-    border-top: 1px solid #c0c0c0;
-  }
+    h2 {
+        padding-top: 1em;
+        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);
+    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
 }