Add initial implementation of sidenotes

themes/vanilla/assets/scss/sidenotes.scss

@@ -0,0 +1,45 @@
+@import "style.scss";
+
+$sidenote-width: 350px;
+$sidenote-offset: 15px;
+
+.sidenote {
+    &.right .sidenote-content {
+        right: 0;
+        margin-right: -($sidenote-width + $sidenote-offset);
+    }
+
+    &.left .sidenote-content {
+        left: 0;
+        margin-left: -($sidenote-width + $sidenote-offset);
+    }
+
+    &:hover {
+        .sidenote-label {
+            background-color: $primary-color;
+            color: white;
+        }
+
+        .sidenote-content {
+            border: 2px dashed;
+            padding: 9px;
+            border-color: $primary-color;
+        }
+    }
+}
+
+.sidenote-label {
+    border-bottom: 2px solid $primary-color;
+}
+
+.sidenote-content {
+    display: block;
+    position: absolute;
+    width: $sidenote-width;
+    margin-top: -1.5em;
+
+    @include bordered-block;
+    padding: 10px;
+    box-sizing: border-box;
+    text-align: left;
+}

themes/vanilla/assets/scss/style.scss

@@ -3,9 +3,16 @@ $primary-color: #36e281;
 $primary-color-dark: darken($primary-color, 10%);
 $code-color: #f0f0f0;
 $code-color-dark: darken($code-color, 10%);
+$border-color: #bfbfbf;
 $font-heading: "Lora", serif;
 $font-body: "Raleway", serif;
 $font-code: "Inconsolata", monospace;
+$standard-border: 1px solid $border-color;
+
+@mixin bordered-block {
+    border: $standard-border;
+    border-radius: 2px;
+}
 
 body {
   font-family: $font-body;
@@ -15,6 +22,10 @@ body {
   text-align: justify;
 }
 
+main {
+    position: relative;
+}
+
 h1, h2, h3, h4, h5, h6 {
   margin-bottom: .1em;
   margin-top: .5em;