diff --git a/assets/css/buttons.css b/assets/css/buttons.scss
similarity index 91%
rename from assets/css/buttons.css
rename to assets/css/buttons.scss
index b619481..4ca08c8 100644
--- a/assets/css/buttons.css
+++ b/assets/css/buttons.scss
@@ -16,8 +16,8 @@ a.button {
   text-decoration: none;
   text-align: center;
   border-radius: 0;
-  border: 1px solid var(--accent);
-  background: var(--accent);
+  border: 1px solid $accent;
+  background: $accent;
   font: inherit;
   font-weight: bold;
   appearance: none;
@@ -25,7 +25,7 @@ a.button {
   outline: none;
 
   &:hover {
-    background: color-mod(var(--accent) a(90%));
+    background: opacify($accent, .9);
   }
 
   /* variants */
@@ -63,7 +63,7 @@ a.read-more:hover,
 a.read-more:active {
   display: inline-flex;
   border: none;
-  color: var(--accent);
+  color: $accent;
   background: none;
   box-shadow: none;
   padding: 0;
diff --git a/assets/css/code.css b/assets/css/code.scss
similarity index 83%
rename from assets/css/code.css
rename to assets/css/code.scss
index 8405fa9..9ac2f6b 100644
--- a/assets/css/code.css
+++ b/assets/css/code.scss
@@ -1,5 +1,5 @@
 .collapsable-code {
-  --border-color: color-mod(var(--accent) blend(#999 90%));
+  $border-color: mix($accent, #999, 90%);
 
   position: relative;
   width: 100%;
@@ -39,13 +39,13 @@
     min-width: 30px;
     min-height: 30px;
     margin: 0;
-    border-bottom: 1px solid var(--border-color);
+    border-bottom: 1px solid $border-color;
     cursor: pointer;
   }
 
   &__title {
     flex: 1;
-    color: var(--accent);
+    color: $accent;
     padding: 3px 10px;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -53,15 +53,15 @@
   }
 
   &__language {
-    color: var(--accent);
-    border: 1px solid var(--border-color);
+    color: $accent;
+    border: 1px solid $border-color;
     border-bottom: none;
     text-transform: uppercase;
     padding: 3px 10px;
   }
 
   &__toggle {
-    color: var(--accent);
+    color: $accent;
     font-size: 16px;
     padding: 3px 10px;
 
diff --git a/assets/css/color/blue.css b/assets/css/color/blue.css
deleted file mode 100644
index ddc44f6..0000000
--- a/assets/css/color/blue.css
+++ /dev/null
@@ -1,13 +0,0 @@
-:root {
-  --accent: #23B0FF;
-  --background: color-mod(var(--accent) blend(#1D1E28 98%));
-  --color: white;
-  --border-color: rgba(255, 255, 255, .1);
-
-  /* variables for js, must be the same as these in @custom-media queries */
-  --phoneWidth: (max-width: 684px);
-  --tabletWidth: (max-width: 900px);
-}
-
-@custom-media --phone (max-width: 684px);
-@custom-media --tablet (max-width: 900px);
diff --git a/assets/css/color/blue.scss b/assets/css/color/blue.scss
new file mode 100644
index 0000000..5a3b455
--- /dev/null
+++ b/assets/css/color/blue.scss
@@ -0,0 +1 @@
+$accent: #23B0FF;
diff --git a/assets/css/color/green.css b/assets/css/color/green.css
deleted file mode 100644
index 389dc37..0000000
--- a/assets/css/color/green.css
+++ /dev/null
@@ -1,13 +0,0 @@
-:root {
-  --accent: #78E2A0;
-  --background: color-mod(var(--accent) blend(#1D1E28 98%));
-  --color: white;
-  --border-color: rgba(255, 255, 255, .1);
-
-  /* variables for js, must be the same as these in @custom-media queries */
-  --phoneWidth: (max-width: 684px);
-  --tabletWidth: (max-width: 900px);
-}
-
-@custom-media --phone (max-width: 684px);
-@custom-media --tablet (max-width: 900px);
diff --git a/assets/css/color/green.scss b/assets/css/color/green.scss
new file mode 100644
index 0000000..efb853a
--- /dev/null
+++ b/assets/css/color/green.scss
@@ -0,0 +1 @@
+$accent: #78E2A0;
diff --git a/assets/css/color/orange.css b/assets/css/color/orange.css
deleted file mode 100644
index 33fd8d8..0000000
--- a/assets/css/color/orange.css
+++ /dev/null
@@ -1,13 +0,0 @@
-:root {
-  --accent: #FFA86A;
-  --background: color-mod(var(--accent) blend(#1D1E28 98%));
-  --color: white;
-  --border-color: rgba(255, 255, 255, .1);
-
-  /* variables for js, must be the same as these in @custom-media queries */
-  --phoneWidth: (max-width: 684px);
-  --tabletWidth: (max-width: 900px);
-}
-
-@custom-media --phone (max-width: 684px);
-@custom-media --tablet (max-width: 900px);
diff --git a/assets/css/color/orange.scss b/assets/css/color/orange.scss
new file mode 100644
index 0000000..5a6ab3c
--- /dev/null
+++ b/assets/css/color/orange.scss
@@ -0,0 +1 @@
+$accent: #FFA86A;
diff --git a/assets/css/color/pink.css b/assets/css/color/pink.css
deleted file mode 100644
index d09d434..0000000
--- a/assets/css/color/pink.css
+++ /dev/null
@@ -1,13 +0,0 @@
-:root {
-  --accent: #EE72F1;
-  --background: color-mod(var(--accent) blend(#1D1E28 98%));
-  --color: white;
-  --border-color: rgba(255, 255, 255, .1);
-
-  /* variables for js, must be the same as these in @custom-media queries */
-  --phoneWidth: (max-width: 684px);
-  --tabletWidth: (max-width: 900px);
-}
-
-@custom-media --phone (max-width: 684px);
-@custom-media --tablet (max-width: 900px);
diff --git a/assets/css/color/pink.scss b/assets/css/color/pink.scss
new file mode 100644
index 0000000..fce2e73
--- /dev/null
+++ b/assets/css/color/pink.scss
@@ -0,0 +1 @@
+$accent: #EE72F1;
diff --git a/assets/css/color/red.css b/assets/css/color/red.css
deleted file mode 100644
index 756435d..0000000
--- a/assets/css/color/red.css
+++ /dev/null
@@ -1,13 +0,0 @@
-:root {
-  --accent: #FF6266;
-  --background: color-mod(var(--accent) blend(#1D1E28 98%));
-  --color: white;
-  --border-color: rgba(255, 255, 255, .1);
-
-  /* variables for js, must be the same as these in @custom-media queries */
-  --phoneWidth: (max-width: 684px);
-  --tabletWidth: (max-width: 900px);
-}
-
-@custom-media --phone (max-width: 684px);
-@custom-media --tablet (max-width: 900px);
diff --git a/assets/css/color/red.scss b/assets/css/color/red.scss
new file mode 100644
index 0000000..1f9bd6e
--- /dev/null
+++ b/assets/css/color/red.scss
@@ -0,0 +1 @@
+$accent: #FF6266;
diff --git a/assets/css/font.css b/assets/css/font.scss
similarity index 100%
rename from assets/css/font.css
rename to assets/css/font.scss
diff --git a/assets/css/footer.css b/assets/css/footer.scss
similarity index 85%
rename from assets/css/footer.css
rename to assets/css/footer.scss
index bac4ec0..7079663 100644
--- a/assets/css/footer.css
+++ b/assets/css/footer.scss
@@ -11,7 +11,7 @@
     width: 760px;
     max-width: 100%;
 
-    @media (--tablet) {
+    @media ($tablet) {
       flex-direction: column;
     }
   }
@@ -25,7 +25,6 @@
     flex-direction: row;
     align-items: center;
     font-size: 1rem;
-    color: var(--light-color-secondary);
 
     &--user {
       margin: auto;
@@ -35,14 +34,14 @@
     & > *:first-child:not(:only-child) {
       margin-right: 10px;
 
-       @media (--tablet) {
+       @media ($tablet) {
         border: none;
         padding: 0;
         margin: 0;
       }
     }
 
-    @media (--tablet) {
+    @media ($tablet) {
       flex-direction: column;
       margin-top: 10px;
     }
diff --git a/assets/css/form.css b/assets/css/form.scss
similarity index 50%
rename from assets/css/form.css
rename to assets/css/form.scss
index 5ff4738..13132c9 100644
--- a/assets/css/form.css
+++ b/assets/css/form.scss
@@ -1,15 +1,15 @@
 input, textarea, select {
   background: transparent;
-  color: var(--accent);
-  border: 1px solid var(--accent);
+  color: $accent;
+  border: 1px solid $accent;
   border-radius: 0;
   padding: 10px;
   font: inherit;
   appearance: none;
 
   &:focus, :active {
-    border-color: var(--color);
-    outline: 1px solid var(--color);
+    border-color: $color;
+    outline: 1px solid $color;
   }
 
   &:active {
@@ -18,13 +18,13 @@ input, textarea, select {
 }
 
 select {
-  background: var(--background);
+  background: $background;
 
   option {
-    background: var(--background);
+    background: $background;
   }
 }
 
 ::placeholder {
-  color: color-mod(var(--accent) a(50%));
+  color: color-mod($accent) a(50%);
 }
diff --git a/assets/css/gist.css b/assets/css/gist.scss
similarity index 100%
rename from assets/css/gist.css
rename to assets/css/gist.scss
diff --git a/assets/css/header.css b/assets/css/header.scss
similarity index 76%
rename from assets/css/header.css
rename to assets/css/header.scss
index e8f9da3..87d02d9 100644
--- a/assets/css/header.css
+++ b/assets/css/header.scss
@@ -1,7 +1,9 @@
-@define-mixin menu {
+@mixin menu {
+  $shadow-color: opacify($background, .8);
+  $shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color;
   position: absolute;
-  background: var(--background);
-  box-shadow: var(--shadow);
+  background: $background;
+  box-shadow: $shadow;
   color: white;
   border: 2px solid;
   margin: 0;
@@ -31,7 +33,7 @@
 
     &:after {
       content: '';
-      background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px);
+      background: repeating-linear-gradient(90deg, $accent, $accent 2px, transparent 0, transparent 10px);
       display: block;
       width: 100%;
       right: 10px;
@@ -45,14 +47,16 @@
   }
 
   .menu {
-    --shadow-color: color-mod(var(--background) a(80%));
-    --shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
     margin: 20px 1px;
 
-    @media (--phone) {
-      @mixin menu;
+    @media ($phone) {
+      @include menu;
       top: 50px;
       right: 0;
+
+      &.hidden-on-mobile {
+        display: none;
+      }
     }
 
     &__inner {
@@ -63,7 +67,7 @@
       padding: 0;
 
       &--desktop {
-        @media (--phone) {
+        @media ($phone) {
           display: none;
         }
       }
@@ -71,7 +75,7 @@
       &--mobile {
         display: none;
 
-        @media (--phone) {
+        @media ($phone) {
           display: block;
         }
       }
@@ -84,7 +88,7 @@
         }
       }
 
-      @media (--phone) {
+      @media ($phone) {
         flex-direction: column;
         align-items: flex-start;
         padding: 0;
@@ -107,12 +111,12 @@
       }
 
       &-more {
-        @mixin menu;
+        @include menu;
         top: 35px;
         left: 0;
 
         &-trigger {
-          color: var(--accent);
+          color: $accent;
           user-select: none;
           cursor: pointer;
         }
@@ -138,26 +142,31 @@
         list-style-type: none;
         display: flex;
         flex-direction: row;
-        color: var(--accent);
+        color: $accent;
         cursor: pointer;
         margin: 0;
       }
 
       &__more {
-        @mixin menu;
+        @include menu;
         top: 35px;
         right: 0;
       }
     }
 
     &-trigger {
-      color: var(--accent);
+      display: none;
+      color: $accent;
       border: 2px solid;
       margin-left: 10px;
       height: 100%;
       padding: 3px 8px;
       position: relative;
       cursor: pointer;
+
+      @media ($phone) {
+        display: block;
+      }
     }
   }
 }
diff --git a/assets/css/logo.css b/assets/css/logo.scss
similarity index 79%
rename from assets/css/logo.css
rename to assets/css/logo.scss
index d455cc7..33c7fef 100644
--- a/assets/css/logo.css
+++ b/assets/css/logo.scss
@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   text-decoration: none;
-  background: var(--accent);
+  background: $accent;
   color: black;
   padding: 5px 10px;
 }
diff --git a/assets/css/main.css b/assets/css/main.scss
similarity index 83%
rename from assets/css/main.css
rename to assets/css/main.scss
index 8929ea1..56ab5be 100644
--- a/assets/css/main.css
+++ b/assets/css/main.scss
@@ -15,8 +15,8 @@ body {
   font-size: 1rem;
   line-height: 1.54;
   letter-spacing: -0.02em;
-  background-color: color-mod(var(--accent) blend(#1D1E28 98%));
-  color: var(--color);
+  background-color: $background;
+  color: $color;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   font-feature-settings: "liga", "tnum", "zero", "ss01", "locl";
@@ -24,7 +24,7 @@ body {
   -webkit-overflow-scrolling: touch;
   -webkit-text-size-adjust: 100%;
 
-  @media (--phone) {
+  @media ($phone) {
     font-size: 1rem;
   }
 }
@@ -61,7 +61,7 @@ a {
 
   /* Waiting for a better times... */
   /* &:has(code) {
-    text-decoration-color: var(--accent);
+    text-decoration-color: $accent;
   } */
 }
 
@@ -109,8 +109,8 @@ figure {
     font-size: 14px;
     padding: 5px 10px;
     margin-top: 5px;
-    background: var(--accent);
-    color: var(--background);
+    background: $accent;
+    color: $background;
     /* opacity: .8; */
 
     &.left {
@@ -130,8 +130,8 @@ figure {
 code, kbd {
   font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important;
   font-feature-settings: normal;
-  background: color-mod(var(--accent) a(20%));
-  color: var(--accent);
+  background: color-mod($accent) a(20%);
+  color: $accent;
   padding: 1px 6px;
   margin: 0 2px;
   font-size: .95rem;
@@ -157,7 +157,7 @@ pre {
     margin-top: -40px;
   }
 
-  @media (--phone) {
+  @media ($phone) {
     white-space: pre-wrap;
     word-wrap: break-word;
   }
@@ -172,12 +172,12 @@ pre {
 }
 
 blockquote {
-  border-top: 1px solid var(--accent);
-  border-bottom: 1px solid var(--accent);
+  border-top: 1px solid $accent;
+  border-bottom: 1px solid $accent;
   margin: 40px 0;
   padding: 25px;
 
-  @media (--phone) {
+  @media ($phone) {
     padding-right: 0;
   }
 
@@ -198,15 +198,15 @@ blockquote {
     display: block;
     position: absolute;
     left: -25px;
-    color: var(--accent);
+    color: $accent;
   }
 
   &.twitter-tweet {
     position: relative;
-    background: color-mod(var(--accent) a(10%));
+    background: color-mod($accent) a(10%);
     font: inherit;
     color: inherit;
-    border: 1px solid var(--accent);
+    border: 1px solid $accent;
     padding-top: 60px;
 
     p:before {
@@ -217,12 +217,12 @@ blockquote {
       content: '> From Twitter:';
       position: absolute;
       top: 20px;
-      color: var(--accent);
+      color: $accent;
       font-weight: bold;
     }
 
     a {
-      color: var(--accent);
+      color: $accent;
     }
   }
 }
@@ -237,12 +237,12 @@ table {
 table,
 th,
 td {
-  border: 1px dashed var(--accent);
+  border: 1px dashed $accent;
   padding: 10px;
 }
 
 th {
-  color: var(--accent);
+  color: $accent;
 }
 
 ul,
@@ -254,7 +254,7 @@ ol {
     position: relative;
   }
 
-  @media (--phone) {
+  @media ($phone) {
     margin-left: 20px;
   }
 }
@@ -271,7 +271,7 @@ ol {
     content: counter(li);
     position: absolute;
     right: calc(100% + 10px);
-    color: var(--accent);
+    color: $accent;
     display: inline-block;
     text-align: right;
   }
@@ -290,8 +290,8 @@ ol {
 }
 
 mark {
-  background: var(--accent);
-  color: var(--background);
+  background: $accent;
+  color: $background;
 }
 
 .container {
@@ -312,7 +312,7 @@ mark {
     max-width: 100%;
   }
 
-  @media (--phone) {
+  @media ($phone) {
     padding: 20px;
   }
 
@@ -333,7 +333,7 @@ mark {
 hr {
   width: 100%;
   border: none;
-  background: var(--border-color);
+  background: $border-color;
   height: 1px;
 }
 
diff --git a/assets/css/pagination.css b/assets/css/pagination.scss
similarity index 95%
rename from assets/css/pagination.css
rename to assets/css/pagination.scss
index 30dbadc..11f77ac 100644
--- a/assets/css/pagination.css
+++ b/assets/css/pagination.scss
@@ -15,7 +15,7 @@
       text-align: center;
       margin: 0 auto;
       padding: 5px 10px;
-      background: color-mod(var(--accent) blend(#1D1E28 98%));
+      background: mix($accent, #1D1E28, 98%);
       font-size: .8rem;
       text-transform: uppercase;
       text-decoration: none;
diff --git a/assets/css/post.css b/assets/css/post.scss
similarity index 74%
rename from assets/css/post.css
rename to assets/css/post.scss
index 37155bc..106fa21 100644
--- a/assets/css/post.css
+++ b/assets/css/post.scss
@@ -3,7 +3,7 @@
 }
 
 .framed {
-  border: 1px solid var(--accent);
+  border: 1px solid $accent;
   padding: 20px;
 
   *:first-child {
@@ -25,27 +25,23 @@
   margin: 20px auto;
   padding: 20px 0;
 
-  @media (--tablet) {
-    max-width: 660px;
-  }
-
   &:not(:last-of-type) {
-    border-bottom: 1px solid var(--border-color);
+    border-bottom: 1px solid $border-color;
   }
 
   &-meta {
     font-size: 1rem;
     margin-bottom: 10px;
-    color: color-mod(var(--accent) a(70%));
+    color: opcift($accent, 70%);
   }
 
   &-title {
-    --border: 3px dotted var(--accent);
+    $border: 3px dotted $accent;
     position: relative;
-    color: var(--accent);
+    color: $accent;
     margin: 0 0 15px;
     padding-bottom: 15px;
-    border-bottom: var(--border);
+    border-bottom: $border;
 
     &:after {
       content: '';
@@ -53,7 +49,7 @@
       bottom: 2px;
       display: block;
       width: 100%;
-      border-bottom: var(--border);
+      border-bottom: $border;
     }
 
     a {
@@ -77,12 +73,12 @@
   }
 
   &-cover {
-    border: 20px solid var(--accent);
+    border: 20px solid $accent;
     background: transparent;
     margin: 40px 0;
     padding: 20px;
 
-    @media (--phone) {
+    @media ($phone) {
       padding: 10px;
       border-width: 10px;
     }
@@ -95,7 +91,7 @@
       content: '-';
       position: absolute;
       left: -20px;
-      color: var(--accent);
+      color: $accent;
     }
   }
 }
@@ -117,7 +113,7 @@
 }
 
 .hanchor {
-  color: color-mod(var(--accent) alpha(90%));
+  color: opacify($accent, .9);
   text-decoration: none;
   margin-left: 10px;
   visibility: hidden;
@@ -128,5 +124,5 @@ h1:hover a, h2:hover a, h3:hover a, h4:hover a {
 }
 
 .footnotes {
-  color: color-mod(var(--color) alpha(50%));
+  color: opacify($color, .5);
 }
diff --git a/assets/css/prism.css b/assets/css/prism.scss
similarity index 100%
rename from assets/css/prism.css
rename to assets/css/prism.scss
diff --git a/assets/css/style.css b/assets/css/style.css
deleted file mode 100644
index 240cde0..0000000
--- a/assets/css/style.css
+++ /dev/null
@@ -1,16 +0,0 @@
-@import 'font.css';
-@import 'buttons.css';
-@import 'form.css';
-
-@import 'header.css';
-@import 'logo.css';
-@import 'main.css';
-@import 'post.css';
-@import 'pagination.css';
-@import 'footer.css';
-
-@import 'prism.css';
-@import 'syntax.css';
-@import 'code.css';
-@import 'terms.css';
-@import 'gist.css';
diff --git a/assets/css/style.scss b/assets/css/style.scss
new file mode 100644
index 0000000..ccdb8a8
--- /dev/null
+++ b/assets/css/style.scss
@@ -0,0 +1,18 @@
+@import "variables";
+
+@import "font";
+@import "buttons";
+@import "form";
+
+@import "header";
+@import "logo";
+@import "main";
+@import "post";
+@import "pagination";
+@import "footer";
+
+@import "prism";
+@import "syntax";
+@import "code";
+@import "terms";
+@import "gist";
diff --git a/assets/css/syntax.css b/assets/css/syntax.scss
similarity index 88%
rename from assets/css/syntax.css
rename to assets/css/syntax.scss
index 95604ef..f5576e8 100644
--- a/assets/css/syntax.css
+++ b/assets/css/syntax.scss
@@ -17,7 +17,7 @@ code.language-scss,
 .token.number,
 .token.inserted,
 .token.important {
-  color: var(--accent) !important;
+  color: $accent !important;
 }
 
 .token.tag-id,
@@ -34,7 +34,7 @@ code.language-scss,
 .token.class-name,
 .token.constant,
 .token.symbol {
-  color: color-mod(var(--accent) a(70%)) !important;
+  color: opacify($accent, .7) !important;
 }
 
 .token.property,
@@ -44,7 +44,7 @@ code.language-scss,
 code.language-javascript,
 code.language-html,
 .command-line-prompt > span:before {
-  color: color-mod(var(--accent) blend(#999 90%)) !important;
+  color: mix($accent, #999, .9) !important;
 }
 
 .token.selector,
@@ -80,7 +80,7 @@ pre[class*="language-"] {
   right: 0;
   padding: 0;
   margin: 0;
-  background: color-mod(var(--accent) blend(#999 90%) a(8%));
+  background: opacify(mix($accent, #999, 90%), .08);
   pointer-events: none;
   line-height: inherit;
   white-space: pre;
@@ -116,9 +116,9 @@ pre[class*="language-"] {
 }
 
 .code-toolbar {
-  --code-margin: 40px;
+  $code-margin: 40px;
 	position: relative;
-	margin: var(--code-margin) 0;
+	margin: $code-margin 0;
 	padding: 20px;
 	border: 1px solid rgba(255, 255, 255, .1);
 
@@ -126,7 +126,7 @@ pre[class*="language-"] {
 	+ .highlight,
 	+ .highlight .code-toolbar {
 		border-top: 0;
-		margin-top: calc(-1 * var(--code-margin));
+		margin-top: calc(-1 * $code-margin);
 	}
 
 	pre, code {
diff --git a/assets/css/terms.css b/assets/css/terms.scss
similarity index 69%
rename from assets/css/terms.css
rename to assets/css/terms.scss
index 794e2fa..0c9a61b 100644
--- a/assets/css/terms.css
+++ b/assets/css/terms.scss
@@ -1,6 +1,6 @@
 .terms {
   h1 {
-    color: var(--accent);
+    color: $accent;
   }
 
   h3 {
diff --git a/assets/css/variables.scss b/assets/css/variables.scss
new file mode 100644
index 0000000..6c2c35e
--- /dev/null
+++ b/assets/css/variables.scss
@@ -0,0 +1,14 @@
+/* COLOR VARIABLES */
+$background: mix($accent, #1D1E28, 2%);
+$color: white;
+$border-color: rgba(255, 255, 255, .1);
+
+/* MEDIA QUERIES */
+$phone: (max-width: 684px);
+$tablet: (max-width: 900px);
+
+/* variables for js, must be the same as these in @custom-media queries */
+:root {
+  --phoneWidth: (max-width: 684px);
+  --tabletWidth: (max-width: 900px);
+}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 3b4efd4..5596edb 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -8,25 +8,25 @@
 {{ template "_internal/google_analytics.html" . }}
 
 <!-- Local Theme Variables -->
-{{ $defaultStyles := resources.Get "css/style.css" }}
+{{ $defaultStyles := resources.Get "css/style.scss" }}
 
 {{ if (isset .Params "color") }}
-  {{ $localColorCss := resources.Get (printf "css/color/%s.css" .Params.color) }}
-  {{ $localCss := slice $defaultStyles $localColorCss | resources.Concat (printf "css/%s-local.css" .Params.color) }}
-  {{ $localColorStyles := $localCss | resources.ToCSS | resources.PostCSS }}
+  {{ $localColorCss := resources.Get (printf "css/color/%s.scss" .Params.color) }}
+  {{ $localCss := slice $localColorCss $defaultStyles | resources.Concat (printf "css/%s-local.scss" .Params.color) }}
+  {{ $localColorStyles := $localCss | resources.ToCSS }}
   <link rel="stylesheet" href="{{ $localColorStyles.RelPermalink }}">
 {{ else }}
   <!-- Theme Variables -->
-  {{ $colorCss := resources.Get (printf "css/color/%s.css" ($.Site.Params.ThemeColor | default "orange")) }}
-  {{ $css := slice $defaultStyles $colorCss | resources.Concat "css/base.css" }}
+  {{ $colorCss := resources.Get (printf "css/color/%s.scss" ($.Site.Params.ThemeColor | default "orange")) }}
+  {{ $css := slice $colorCss $defaultStyles | resources.Concat "css/base.scss" }}
   {{ $options := (dict "targetPath" "style.css" "outputStyle" "compressed" "enableSourceMap" true "precision" 6 "includePaths" (slice "node_modules")) }}
-  {{ $styles := $css | resources.ToCSS $options | resources.PostCSS }}
+  {{ $styles := $css | resources.ToCSS $options }}
   <link rel="stylesheet" href="{{ $styles.RelPermalink }}">
 {{ end }}
 
-<!-- Custom CSS to override theme properties (/static/style.css) -->
-{{ if (fileExists "static/style.css") -}}
-  <link rel="stylesheet" href="{{ "style.css" | absURL }}">
+<!-- Custom CSS to override theme properties (/static/style.scss) -->
+{{ if (fileExists "static/style.scss") -}}
+  <link rel="stylesheet" href="{{ "style.scss" | absURL }}">
 {{- end }}
 
 <!-- Icons -->