From b8e0e0b4cef495d452e1a3dd5cd44c0730ab1745 Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Fri, 27 Dec 2019 23:12:35 -0800
Subject: [PATCH] Change CSS to use rems

---
 themes/vanilla/assets/scss/sidenotes.scss | 25 +++++++++++---------
 themes/vanilla/assets/scss/style.scss     | 28 +++++++++++++----------
 2 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/themes/vanilla/assets/scss/sidenotes.scss b/themes/vanilla/assets/scss/sidenotes.scss
index b7bbcc8..e972294 100644
--- a/themes/vanilla/assets/scss/sidenotes.scss
+++ b/themes/vanilla/assets/scss/sidenotes.scss
@@ -1,7 +1,9 @@
 @import "style.scss";
 
-$sidenote-width: 350px;
-$sidenote-offset: 15px;
+$sidenote-width: 30rem;
+$sidenote-offset: 1.5rem;
+$sidenote-padding: 1rem;
+$sidenote-highlight-border-width: .2rem;
 
 .sidenote {
     &:hover {
@@ -11,15 +13,16 @@ $sidenote-offset: 15px;
         }
 
         .sidenote-content {
-            border: 2px dashed;
-            padding: 9px;
+            border: $sidenote-highlight-border-width dashed;
+            padding: $sidenote-padding -
+                ($sidenote-highlight-border-width - $standard-border-width);
             border-color: $primary-color;
         }
     }
 }
 
 .sidenote-label {
-    border-bottom: 2px solid $primary-color;
+    border-bottom: .2rem solid $primary-color;
 }
 
 .sidenote-checkbox {
@@ -30,7 +33,7 @@ $sidenote-offset: 15px;
     display: block;
     position: absolute;
     width: $sidenote-width;
-    margin-top: -1.5em;
+    margin-top: -1.5rem;
 
     &.sidenote-right {
         right: 0;
@@ -45,8 +48,8 @@ $sidenote-offset: 15px;
     @media screen and
         (max-width: $container-width + 2 * ($sidenote-width + 2 * $sidenote-offset)) {
         position: static;
-        margin-top: 10px;
-        margin-bottom: 10px;
+        margin-top: 1rem;
+        margin-bottom: 1rem;
         width: 100%;
         display: none;
 
@@ -55,16 +58,16 @@ $sidenote-offset: 15px;
         }
 
         &.sidenote-left {
-            margin-left: 0px;
+            margin-left: 0rem;
         }
 
         &.sidenote-right {
-            margin-right: 0px;
+            margin-right: 0rem;
         }
     }
 
     @include bordered-block;
-    padding: 10px;
+    padding: $sidenote-padding;
     box-sizing: border-box;
     text-align: left;
 }
diff --git a/themes/vanilla/assets/scss/style.scss b/themes/vanilla/assets/scss/style.scss
index 14b9927..6c189e1 100755
--- a/themes/vanilla/assets/scss/style.scss
+++ b/themes/vanilla/assets/scss/style.scss
@@ -1,24 +1,28 @@
-$container-width: 800px;
+$container-width: 50rem;
+$standard-border-width: .075rem;
+
 $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;
+
+$standard-border: $standard-border-width solid $border-color;
 
 @mixin bordered-block {
     border: $standard-border;
-    border-radius: 2px;
+    border-radius: .2rem;
 }
 
 body {
   font-family: $font-body;
-  font-size: 1.0em;
+  font-size: 1.0rem;
   line-height: 1.5;
-  margin-bottom: 1em;
+  margin-bottom: 1rem;
   text-align: justify;
 }
 
@@ -27,8 +31,8 @@ main {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  margin-bottom: .1em;
-  margin-top: .5em;
+  margin-bottom: .1rem;
+  margin-top: .5rem;
   font-family: $font-heading;
   font-weight: normal;
   text-align: left;
@@ -49,7 +53,7 @@ code {
 
 pre code {
     display: block;
-    padding: 0.5em;
+    padding: 0.5rem;
     overflow-x: auto;
     background-color: $code-color;
 }
@@ -61,12 +65,12 @@ pre code {
   box-sizing: border-box;
 
   @media screen and (max-width: $container-width){
-    padding: 0em 1em 0em 1em;
+    padding: 0rem 1rem 0rem 1rem;
   }
 }
 
 .button, input[type="submit"] {
-  padding: 0.5em;
+  padding: 0.5rem;
   background-color: $primary-color;
   border: none;
   color: white;
@@ -87,7 +91,7 @@ pre code {
 nav {
   background-color: $primary-color;
   width: 100%;
-  margin: 1em 0px 1em 0px;
+  margin: 1rem 0rem 1rem 0rem;
 }
 
 nav a {
@@ -110,7 +114,7 @@ nav a {
 }
 
 .post-content {
-  margin-top: .5em;
+  margin-top: .5rem;
 }
 
 h1 {