From b0529a9124a2e87d54ce20f73ede21bb1d25b208 Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Fri, 6 Dec 2019 00:10:26 -0800
Subject: [PATCH] Add initial implementation of sidenotes

---
 assets/scss/gmachine.scss                  |  9 ++---
 themes/vanilla/assets/scss/sidenotes.scss  | 45 ++++++++++++++++++++++
 themes/vanilla/assets/scss/style.scss      | 11 ++++++
 themes/vanilla/layouts/partials/head.html  |  2 +
 themes/vanilla/layouts/shortcodes/sidenote |  6 +++
 5 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 themes/vanilla/assets/scss/sidenotes.scss
 create mode 100644 themes/vanilla/layouts/shortcodes/sidenote

diff --git a/assets/scss/gmachine.scss b/assets/scss/gmachine.scss
index a0c0d23..1d02400 100644
--- a/assets/scss/gmachine.scss
+++ b/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 {
diff --git a/themes/vanilla/assets/scss/sidenotes.scss b/themes/vanilla/assets/scss/sidenotes.scss
new file mode 100644
index 0000000..1a57352
--- /dev/null
+++ b/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;
+}
diff --git a/themes/vanilla/assets/scss/style.scss b/themes/vanilla/assets/scss/style.scss
index 21ef270..14b9927 100755
--- a/themes/vanilla/assets/scss/style.scss
+++ b/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;
diff --git a/themes/vanilla/layouts/partials/head.html b/themes/vanilla/layouts/partials/head.html
index 2a42139..380fa86 100644
--- a/themes/vanilla/layouts/partials/head.html
+++ b/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" . }}
diff --git a/themes/vanilla/layouts/shortcodes/sidenote b/themes/vanilla/layouts/shortcodes/sidenote
new file mode 100644
index 0000000..9fe4b50
--- /dev/null
+++ b/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>