Add initial implementation of sidenotes

assets/scss/gmachine.scss

@@ -1,14 +1,13 @@
-$basic-border: 1px solid #bfbfbf;
+@import "style.scss";
 
 .gmachine-instruction {
     display: flex;
-    border: $basic-border;
-    border-radius: 2px;
+    @include bordered-block;
 }
 
 .gmachine-instruction-name {
     padding: 10px;
-    border-right: $basic-border;
+    border-right: $standard-border;
     flex-grow: 1;
     flex-basis: 20%;
     text-align: center;
@@ -20,7 +19,7 @@ $basic-border: 1px solid #bfbfbf;
 }
 
 .gmachine-inner {
-    border-bottom: $basic-border;
+    border-bottom: $standard-border;
     width: 100%;
 
     &:last-child {

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;

themes/vanilla/layouts/partials/head.html

@@ -6,7 +6,9 @@
     <link href="https://fonts.googleapis.com/css?family=Inconsolata|Lora|Raleway" rel="stylesheet">
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
     {{ $style := resources.Get "scss/style.scss" | resources.ToCSS | resources.Minify }}
+    {{ $sidenotes:= resources.Get "scss/sidenotes.scss" | resources.ToCSS | resources.Minify }}
     <link rel="stylesheet" href="{{ $style.Permalink }}">
+    <link rel="stylesheet" href="{{ $sidenotes.Permalink }}">
 
     <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script>
     {{ template "_internal/google_analytics.html" . }}

themes/vanilla/layouts/shortcodes/sidenote

@@ -0,0 +1,6 @@
+<span class="sidenote {{ .Get 0 }}">
+<label class="sidenote-label">{{ .Get 2 }}</label>
+<span class="sidenote-content">
+{{ .Inner }}
+</span>
+</span>