From 4bc7d37022b6f4a9d89f83b1369dc49fd5a86333 Mon Sep 17 00:00:00 2001
From: Mirus <mirusim@gmail.com>
Date: Tue, 30 Jul 2024 18:39:09 +0300
Subject: [PATCH 1/2] feat: migrate to native CSS variables

---
 assets/css/banner.scss       |  2 +-
 assets/css/buttons.scss      | 10 ++++----
 assets/css/code.scss         | 12 ++++-----
 assets/css/color/blue.scss   |  4 ++-
 assets/css/color/green.scss  |  4 ++-
 assets/css/color/orange.scss |  4 ++-
 assets/css/color/pink.scss   |  4 ++-
 assets/css/color/red.scss    |  4 ++-
 assets/css/footer.scss       |  2 +-
 assets/css/form.scss         | 18 ++++++-------
 assets/css/header.scss       |  2 +-
 assets/css/logo.scss         |  2 +-
 assets/css/main.scss         | 50 ++++++++++++++++++------------------
 assets/css/menu.scss         | 20 +++++++--------
 assets/css/pagination.scss   |  6 ++---
 assets/css/post.scss         | 20 +++++++--------
 assets/css/syntax.scss       |  9 ++++---
 assets/css/terms.scss        |  4 +--
 assets/css/variables.scss    | 16 +++++++-----
 19 files changed, 103 insertions(+), 90 deletions(-)

diff --git a/assets/css/banner.scss b/assets/css/banner.scss
index 6955b1e..feb3d80 100644
--- a/assets/css/banner.scss
+++ b/assets/css/banner.scss
@@ -3,7 +3,7 @@
   height: 2rem;
   display: grid;
   grid-template-columns:  1fr auto;
-  background: $accent;
+  background: var(--accent);
 
   & span {
     display: flex;
diff --git a/assets/css/buttons.scss b/assets/css/buttons.scss
index d0b988d..0c119f7 100644
--- a/assets/css/buttons.scss
+++ b/assets/css/buttons.scss
@@ -16,9 +16,9 @@ a.button {
   text-decoration: none;
   text-align: center;
   border-radius: 8;
-  border: 1px solid $accent;
-  background: $accent;
-  color: $background;
+  border: 1px solid var(--accent);
+  background: var(--accent);
+  color: var(--background);
   font: inherit;
   font-weight: bold;
   appearance: none;
@@ -26,7 +26,7 @@ a.button {
   outline: none;
 
   &:hover {
-    background: transparentize($accent, .1);
+    background: rgba(var(--accent), 0.1);
   }
 
   /* variants */
@@ -64,7 +64,7 @@ a.read-more:hover,
 a.read-more:active {
   display: inline-flex;
   border: none;
-  color: $accent;
+  color: var(--accent);
   background: none;
   box-shadow: none;
   padding: 0;
diff --git a/assets/css/code.scss b/assets/css/code.scss
index 9ac2f6b..2414173 100644
--- a/assets/css/code.scss
+++ b/assets/css/code.scss
@@ -1,5 +1,5 @@
 .collapsable-code {
-  $border-color: mix($accent, #999, 90%);
+  --border-color: color-mix(in srgb, var(--accent) 90%, #999 10%);
 
   position: relative;
   width: 100%;
@@ -39,13 +39,13 @@
     min-width: 30px;
     min-height: 30px;
     margin: 0;
-    border-bottom: 1px solid $border-color;
+    border-bottom: 1px solid var(--border-color);
     cursor: pointer;
   }
 
   &__title {
     flex: 1;
-    color: $accent;
+    color: var(--accent);
     padding: 3px 10px;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -53,15 +53,15 @@
   }
 
   &__language {
-    color: $accent;
-    border: 1px solid $border-color;
+    color: var(--accent);
+    border: 1px solid var(--border-color);
     border-bottom: none;
     text-transform: uppercase;
     padding: 3px 10px;
   }
 
   &__toggle {
-    color: $accent;
+    color: var(--accent);
     font-size: 16px;
     padding: 3px 10px;
 
diff --git a/assets/css/color/blue.scss b/assets/css/color/blue.scss
index 5a3b455..55dce5c 100644
--- a/assets/css/color/blue.scss
+++ b/assets/css/color/blue.scss
@@ -1 +1,3 @@
-$accent: #23B0FF;
+:root {
+  --accent: #23B0FF;
+}
\ No newline at end of file
diff --git a/assets/css/color/green.scss b/assets/css/color/green.scss
index efb853a..ca21aaf 100644
--- a/assets/css/color/green.scss
+++ b/assets/css/color/green.scss
@@ -1 +1,3 @@
-$accent: #78E2A0;
+:root {
+  --accent: #78E2A0;
+}
\ No newline at end of file
diff --git a/assets/css/color/orange.scss b/assets/css/color/orange.scss
index 5a6ab3c..93e3a72 100644
--- a/assets/css/color/orange.scss
+++ b/assets/css/color/orange.scss
@@ -1 +1,3 @@
-$accent: #FFA86A;
+:root {
+  --accent: #FFA86A;
+}
\ No newline at end of file
diff --git a/assets/css/color/pink.scss b/assets/css/color/pink.scss
index fce2e73..c2a8b1c 100644
--- a/assets/css/color/pink.scss
+++ b/assets/css/color/pink.scss
@@ -1 +1,3 @@
-$accent: #EE72F1;
+:root {
+  --accent: #EE72F1;
+}
\ No newline at end of file
diff --git a/assets/css/color/red.scss b/assets/css/color/red.scss
index 1f9bd6e..f5b2016 100644
--- a/assets/css/color/red.scss
+++ b/assets/css/color/red.scss
@@ -1 +1,3 @@
-$accent: #FF6266;
+:root {
+  --accent: #FF6266;
+}
\ No newline at end of file
diff --git a/assets/css/footer.scss b/assets/css/footer.scss
index d7297b6..fa33790 100644
--- a/assets/css/footer.scss
+++ b/assets/css/footer.scss
@@ -11,7 +11,7 @@
     width: 760px;
     max-width: 100%;
 
-    @media ($tablet) {
+    @media (var(--tablet)) {
       flex-direction: column;
     }
   }
diff --git a/assets/css/form.scss b/assets/css/form.scss
index 78a1080..613fd51 100644
--- a/assets/css/form.scss
+++ b/assets/css/form.scss
@@ -1,7 +1,7 @@
 input, textarea, select {
   background: transparent;
-  color: $accent;
-  border: 1px solid $accent;
+  color: var(--accent);
+  border: 1px solid var(--accent);
   border-radius: 0;
   padding: 10px;
   margin: 5px 0;
@@ -9,8 +9,8 @@ input, textarea, select {
   appearance: none;
 
   &:focus, :active {
-    border-color: $color;
-    outline: 1px solid $color;
+    border-color: var(--color);
+    outline: 1px solid var(--color);
   }
 
   &:active {
@@ -19,25 +19,25 @@ input, textarea, select {
 }
 
 select {
-  background: $background;
+  background: var(--background);
 
   option {
-    background: $background;
+    background: var(--background);
   }
 }
 
 ::placeholder {
-  color: transparentize($accent, .5);
+  color: rgba(var(--accent), 0.5);
 }
 
 input {
   &[type="checkbox"] {
     vertical-align: middle;
     padding: 10px;
-    box-shadow: inset 0 0 0 3px $background;
+    box-shadow: inset 0 0 0 3px var(--background);
 
     &:checked {
-      background: $accent;
+      background: var(--accent);
     }
   }
 }
diff --git a/assets/css/header.scss b/assets/css/header.scss
index 61c45a8..e8c3d07 100644
--- a/assets/css/header.scss
+++ b/assets/css/header.scss
@@ -19,7 +19,7 @@
 
     &:after {
       content: '';
-      background: repeating-linear-gradient(90deg, $accent, $accent 2px, transparent 0, transparent 10px);
+      background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px);
       display: block;
       width: 100%;
       right: 10px;
diff --git a/assets/css/logo.scss b/assets/css/logo.scss
index 33c7fef..d455cc7 100644
--- a/assets/css/logo.scss
+++ b/assets/css/logo.scss
@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   text-decoration: none;
-  background: $accent;
+  background: var(--accent);
   color: black;
   padding: 5px 10px;
 }
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 7585edd..3e2f581 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -15,8 +15,8 @@ body {
   font-size: 1rem;
   line-height: 1.54;
   letter-spacing: -0.02em;
-  background-color: $background;
-  color: $color;
+  background-color: var(--background);
+  color: var(--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 (var(--phone)) {
     font-size: 1rem;
   }
 }
@@ -61,7 +61,7 @@ a {
 
   /* Waiting for a better times... */
   /* &:has(code) {
-    text-decoration-color: $accent;
+    text-decoration-color: var(--accent);
   } */
 }
 
@@ -109,8 +109,8 @@ figure {
     font-size: 14px;
     padding: 5px 10px;
     margin-top: 5px;
-    background: $accent;
-    color: $background;
+    background: var(--accent);
+    color: var(--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: transparentize($accent, .8);
-  color: $accent;
+  background: rgba(var(--accent), 0.8);
+  color: var(--accent);
   padding: 1px 6px;
   margin: 0 2px;
   font-size: .95rem;
@@ -157,7 +157,7 @@ pre {
     margin-top: -40px;
   }
 
-  @media ($phone) {
+  @media (var(--phone)) {
     white-space: pre-wrap;
     word-wrap: break-word;
   }
@@ -172,12 +172,12 @@ pre {
 }
 
 blockquote {
-  border-top: 1px solid $accent;
-  border-bottom: 1px solid $accent;
+  border-top: 1px solid var(--accent);
+  border-bottom: 1px solid var(--accent);
   margin: 40px 0;
   padding: 25px;
 
-  @media ($phone) {
+  @media (var(--phone)) {
     padding-right: 0;
   }
 
@@ -198,15 +198,15 @@ blockquote {
     display: block;
     position: absolute;
     left: -25px;
-    color: $accent;
+    color: var(--accent);
   }
 
   &.twitter-tweet {
     position: relative;
-    background: transparentize($accent, .9);
+    background: rgba(var(--accent), 0.9);
     font: inherit;
     color: inherit;
-    border: 1px solid $accent;
+    border: 1px solid var(--accent);
     padding-top: 60px;
 
     p:before {
@@ -217,12 +217,12 @@ blockquote {
       content: '> From Twitter:';
       position: absolute;
       top: 20px;
-      color: $accent;
+      color: var(--accent);
       font-weight: bold;
     }
 
     a {
-      color: $accent;
+      color: var(--accent);
     }
   }
 }
@@ -237,12 +237,12 @@ table {
 table,
 th,
 td {
-  border: 1px dashed $accent;
+  border: 1px dashed var(--accent);
   padding: 10px;
 }
 
 th {
-  color: $accent;
+  color: var(--accent);
 }
 
 ul,
@@ -254,7 +254,7 @@ ol {
     position: relative;
   }
 
-  @media ($phone) {
+  @media (var(--phone)) {
     margin-left: 20px;
   }
 }
@@ -270,7 +270,7 @@ ol {
       content: counter(li);
       position: absolute;
       right: calc(100% + 10px);
-      color: $accent;
+      color: var(--accent);
       display: inline-block;
       text-align: right;
     }
@@ -290,8 +290,8 @@ ol {
 }
 
 mark {
-  background: $accent;
-  color: $background;
+  background: var(--accent);
+  color: var(--background);
 }
 
 .container {
@@ -312,7 +312,7 @@ mark {
     max-width: 100%;
   }
 
-  @media ($phone) {
+  @media (var(--phone)) {
     padding: 20px;
   }
 
@@ -333,7 +333,7 @@ mark {
 hr {
   width: 100%;
   border: none;
-  background: $border-color;
+  background: var(--border-color);
   height: 1px;
 }
 
diff --git a/assets/css/menu.scss b/assets/css/menu.scss
index fdd3075..1e08a9d 100644
--- a/assets/css/menu.scss
+++ b/assets/css/menu.scss
@@ -1,10 +1,10 @@
 @mixin menu {
   display: none;
   flex-direction: column;
-  $shadow-color: transparentize($background, .2);
+  $shadow-color: rgba(var(--background), 0.2);
   $shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color;
   position: absolute;
-  background: $background;
+  background: var(--background);
   box-shadow: $shadow;
   color: white;
   border: 2px solid;
@@ -17,7 +17,7 @@
 }
 
 @mixin header-menu-trigger {
-  color: $accent;
+  color: var(--accent);
   border: 2px solid;
   margin-left: 10px;
   height: 100%;
@@ -33,7 +33,7 @@
   justify-content: space-between;
   margin: 20px 1px;
 
-  @media ($phone) {
+  @media (var(--phone)) {
     margin: 0;
   }
 
@@ -55,7 +55,7 @@
       }
     }
 
-    @media ($phone) {
+    @media (var(--phone)) {
       flex-direction: column;
       align-items: flex-start;
       padding: 0;
@@ -82,7 +82,7 @@
 
   &__trigger {
     margin-right: 0 !important;
-    color: $accent;
+    color: var(--accent);
     user-select: none;
     cursor: pointer;
   }
@@ -109,7 +109,7 @@
   }
 
   &--desktop {
-    @media ($phone) {
+    @media (var(--phone)) {
       display: none
     }
   }
@@ -119,13 +119,13 @@
       @include header-menu-trigger;
       display: none;
 
-      @media ($phone) {
+      @media (var(--phone)) {
         display: block;
       }
     }
 
     .menu__dropdown {
-      @media ($phone) {
+      @media (var(--phone)) {
         left: auto;
         right: 0;
       }
@@ -144,7 +144,7 @@
     .menu__trigger {
       @include header-menu-trigger;
 
-      @media ($phone) {
+      @media (var(--phone)) {
         display: none;
       }
     }
diff --git a/assets/css/pagination.scss b/assets/css/pagination.scss
index c65efcb..1eb8f87 100644
--- a/assets/css/pagination.scss
+++ b/assets/css/pagination.scss
@@ -15,8 +15,8 @@
       text-align: center;
       margin: 0 auto;
       padding: 5px 10px;
-      background: $background;
-      color: transparentize($color, .7);
+      background: var(--background);
+      color: rgba(var(--color), 0.7);
       font-size: .8rem;
       text-transform: uppercase;
       text-decoration: none;
@@ -56,7 +56,7 @@
   padding: 0;
   appearance: none;
 
-  @media($phone) {
+  @media(var(--phone)) {
     flex: 1;
   }
 
diff --git a/assets/css/post.scss b/assets/css/post.scss
index 0457ef7..31841da 100644
--- a/assets/css/post.scss
+++ b/assets/css/post.scss
@@ -3,7 +3,7 @@
 }
 
 .framed {
-  border: 1px solid $accent;
+  border: 1px solid var(--accent);
   padding: 20px;
 
   *:first-child {
@@ -26,13 +26,13 @@
   padding: 20px 0;
 
   &:not(:last-of-type) {
-    border-bottom: 1px solid $border-color;
+    border-bottom: 1px solid var(--border-color);
   }
 
   &-meta {
     font-size: 1rem;
     margin-bottom: 10px;
-    color: transparentize($accent, .3);
+    color: rgba(var(--accent), 0.3);
 
     & > *:not(:first-child) {
       &::before {
@@ -44,9 +44,9 @@
   }
 
   &-title {
-    $border: 3px dotted $accent;
+    $border: 3px dotted var(--accent);
     position: relative;
-    color: $accent;
+    color: var(--accent);
     margin: 0 0 15px;
     padding-bottom: 15px;
     border-bottom: $border;
@@ -81,12 +81,12 @@
   }
 
   &-cover {
-    border: 20px solid $accent;
+    border: 20px solid var(--accent);
     background: transparent;
     margin: 40px 0;
     padding: 20px;
 
-    @media ($phone) {
+    @media (var(--phone)) {
       padding: 10px;
       border-width: 10px;
     }
@@ -99,7 +99,7 @@
       content: '-';
       position: absolute;
       left: -20px;
-      color: $accent;
+      color: var(--accent);
     }
   }
 }
@@ -121,7 +121,7 @@
 }
 
 .hanchor {
-  color: transparentize($accent, .1);
+  color: rgba(var(--accent), 0.1);
   text-decoration: none;
   margin-left: 10px;
   visibility: hidden;
@@ -132,5 +132,5 @@ h1:hover a, h2:hover a, h3:hover a, h4:hover a {
 }
 
 .footnotes {
-  color: transparentize($color, .5);
+  color: rgba(var(--color), 0.5);
 }
diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss
index 27aecc7..14a83b2 100644
--- a/assets/css/syntax.scss
+++ b/assets/css/syntax.scss
@@ -17,7 +17,7 @@ code.language-scss,
 .token.number,
 .token.inserted,
 .token.important {
-  color: $accent !important;
+  color: var(--accent) !important;
 }
 
 .token.tag-id,
@@ -34,7 +34,7 @@ code.language-scss,
 .token.class-name,
 .token.constant,
 .token.symbol {
-  color: transparentize($accent, .3) !important;
+  color: rgba(var(--accent), 0.3) !important;
 }
 
 .token.property,
@@ -44,7 +44,7 @@ code.language-scss,
 code.language-javascript,
 code.language-html,
 .command-line-prompt > span:before {
-  color: mix($accent, #999, .9) !important;
+  color: color-mix(in srgb, var(--accent) 90%, #999 10%) !important;
 }
 
 .token.selector,
@@ -75,12 +75,13 @@ pre[class*="language-"] {
 }
 
 .line-highlight {
+  --line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
   position: absolute;
   left: 0;
   right: 0;
   padding: 0;
   margin: 0;
-  background: transparentize(mix($accent, #999, 90%), .92);
+  background: rgba(var(--line-highlight-mix), 0.92);
   pointer-events: none;
   line-height: inherit;
   white-space: pre;
diff --git a/assets/css/terms.scss b/assets/css/terms.scss
index e2fcec9..d2525c2 100644
--- a/assets/css/terms.scss
+++ b/assets/css/terms.scss
@@ -8,7 +8,7 @@
 
     li {
       a {
-        color: $accent;
+        color: var(--accent);
       }
     }
 
@@ -16,7 +16,7 @@
       content: '-';
       position: absolute;
       left: -20px;
-      color: $accent;
+      color: var(--accent);
     }
   }
 }
diff --git a/assets/css/variables.scss b/assets/css/variables.scss
index 459cdad..43fd443 100644
--- a/assets/css/variables.scss
+++ b/assets/css/variables.scss
@@ -1,8 +1,10 @@
-/* COLOR VARIABLES */
-$background: mix($accent, #1D1E28, 2%);
-$color: white;
-$border-color: rgba(255, 255, 255, .1);
+:root {
+  /* COLOR VARIABLES */
+  --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%);
+  --color: white;
+  --border-color: rgba(255, 255, 255, .1);
 
-/* MEDIA QUERIES */
-$phone: "max-width: 684px";
-$tablet: "max-width: 900px";
+  /* MEDIA QUERIES */
+  --phone: "max-width: 684px";
+  --tablet: "max-width: 900px";
+}
\ No newline at end of file

From c592d7c04c7b1b620d2b009b8a081a69e1203b36 Mon Sep 17 00:00:00 2001
From: Mirus <mirusim@gmail.com>
Date: Tue, 30 Jul 2024 18:56:54 +0300
Subject: [PATCH 2/2] feat: migrate rest of scss vars to native css

---
 assets/css/menu.scss   | 6 +++---
 assets/css/post.scss   | 6 +++---
 assets/css/syntax.scss | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/assets/css/menu.scss b/assets/css/menu.scss
index 1e08a9d..e352489 100644
--- a/assets/css/menu.scss
+++ b/assets/css/menu.scss
@@ -1,11 +1,11 @@
 @mixin menu {
+  --shadow-color: rgba(var(--background), 0.2);
   display: none;
   flex-direction: column;
-  $shadow-color: rgba(var(--background), 0.2);
-  $shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color;
+  --shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
   position: absolute;
   background: var(--background);
-  box-shadow: $shadow;
+  box-shadow: var(--shadow);
   color: white;
   border: 2px solid;
   margin: 0;
diff --git a/assets/css/post.scss b/assets/css/post.scss
index 31841da..b3b37d7 100644
--- a/assets/css/post.scss
+++ b/assets/css/post.scss
@@ -44,12 +44,12 @@
   }
 
   &-title {
-    $border: 3px dotted var(--accent);
+    --border: 3px dotted var(--accent);
     position: relative;
     color: var(--accent);
     margin: 0 0 15px;
     padding-bottom: 15px;
-    border-bottom: $border;
+    border-bottom: var(--border);
 
     &:after {
       content: '';
@@ -57,7 +57,7 @@
       bottom: 2px;
       display: block;
       width: 100%;
-      border-bottom: $border;
+      border-bottom: var(--border);
     }
 
     a {
diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss
index 14a83b2..d68dfb5 100644
--- a/assets/css/syntax.scss
+++ b/assets/css/syntax.scss
@@ -117,9 +117,9 @@ pre[class*="language-"] {
 }
 
 .code-toolbar {
-  $code-margin: 40px;
+  --code-margin: 40px;
 	position: relative;
-	margin: $code-margin 0;
+	margin: var(--code-margin) 0;
 	padding: 20px;
 	border: 1px solid rgba(255, 255, 255, .1);
 
@@ -127,7 +127,7 @@ pre[class*="language-"] {
 	+ .highlight,
 	+ .highlight .code-toolbar {
 		border-top: 0;
-		margin-top: calc(-1 * $code-margin);
+		margin-top: calc(-1 * var(--code-margin));
 	}
 
 	pre, code {