From 8a48a110ffcffacbfc32d225fda960253e456e2a Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Sun, 8 Mar 2020 00:35:11 -0800
Subject: [PATCH] Avoid duplicating generated CSS by splitting SASS into
 separate files

---
 assets/scss/gmachine.scss                 |  3 ++-
 assets/scss/stack.scss                    |  3 ++-
 themes/vanilla/assets/scss/mixins.scss    | 13 +++++++++++
 themes/vanilla/assets/scss/sidenotes.scss |  3 ++-
 themes/vanilla/assets/scss/style.scss     | 27 ++---------------------
 themes/vanilla/assets/scss/variables.scss | 14 ++++++++++++
 6 files changed, 35 insertions(+), 28 deletions(-)
 create mode 100644 themes/vanilla/assets/scss/mixins.scss
 create mode 100644 themes/vanilla/assets/scss/variables.scss

diff --git a/assets/scss/gmachine.scss b/assets/scss/gmachine.scss
index a04d8fd..dd34f40 100644
--- a/assets/scss/gmachine.scss
+++ b/assets/scss/gmachine.scss
@@ -1,4 +1,5 @@
-@import "style.scss";
+@import "variables.scss";
+@import "mixins.scss";
 
 .gmachine-instruction {
     display: flex;
diff --git a/assets/scss/stack.scss b/assets/scss/stack.scss
index 0f5241f..19d0f49 100644
--- a/assets/scss/stack.scss
+++ b/assets/scss/stack.scss
@@ -1,4 +1,5 @@
-@import "style.scss";
+@import "variables.scss";
+@import "mixins.scss";
 
 .stack {
     display: flex;
diff --git a/themes/vanilla/assets/scss/mixins.scss b/themes/vanilla/assets/scss/mixins.scss
new file mode 100644
index 0000000..43f355a
--- /dev/null
+++ b/themes/vanilla/assets/scss/mixins.scss
@@ -0,0 +1,13 @@
+@import "variables.scss";
+
+@mixin bordered-block {
+    border: $standard-border;
+    border-radius: .2rem;
+}
+
+@mixin below-container-width {
+    @media screen and (max-width: $container-width){
+        @content;
+    }
+}
+
diff --git a/themes/vanilla/assets/scss/sidenotes.scss b/themes/vanilla/assets/scss/sidenotes.scss
index 7a6512c..3ccb66a 100644
--- a/themes/vanilla/assets/scss/sidenotes.scss
+++ b/themes/vanilla/assets/scss/sidenotes.scss
@@ -1,4 +1,5 @@
-@import "style.scss";
+@import "variables.scss";
+@import "mixins.scss";
 
 $sidenote-accommodate-shrink: 10rem;
 $sidenote-width: 30rem;
diff --git a/themes/vanilla/assets/scss/style.scss b/themes/vanilla/assets/scss/style.scss
index 4e60edf..ece9aa3 100755
--- a/themes/vanilla/assets/scss/style.scss
+++ b/themes/vanilla/assets/scss/style.scss
@@ -1,28 +1,5 @@
-$container-width: 45rem;
-$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: $standard-border-width solid $border-color;
-
-@mixin bordered-block {
-    border: $standard-border;
-    border-radius: .2rem;
-}
-
-@mixin below-container-width {
-    @media screen and (max-width: $container-width){
-        @content;
-    }
-}
+@import "variables.scss";
+@import "mixins.scss";
 
 body {
   font-family: $font-body;
diff --git a/themes/vanilla/assets/scss/variables.scss b/themes/vanilla/assets/scss/variables.scss
new file mode 100644
index 0000000..32b5920
--- /dev/null
+++ b/themes/vanilla/assets/scss/variables.scss
@@ -0,0 +1,14 @@
+$container-width: 45rem;
+$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: $standard-border-width solid $border-color;