From f00d93890d56e69eb3937f230adb5d6c96d72721 Mon Sep 17 00:00:00 2001
From: Gabriel Arazas <foo.dogsquared@gmail.com>
Date: Sun, 1 May 2022 20:38:07 +0800
Subject: [PATCH] Refactor CSS files

---
 assets/scss/base.scss   | 16 ++++++++--------
 assets/scss/layout.scss | 23 ++++++++++++-----------
 assets/scss/main.scss   |  9 ++++++---
 3 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/assets/scss/base.scss b/assets/scss/base.scss
index 052d514..bb07a8d 100644
--- a/assets/scss/base.scss
+++ b/assets/scss/base.scss
@@ -5,14 +5,14 @@
 }
 
 @keyframes target-fade {
-  0% { background: var(--base0C); }
+  0% { background: var(--accent-color); }
   100% { background: unset; }
 }
 
 
 ::selection {
-  background: var(--base05);
-  color: var(--base00);
+  background: var(--foreground);
+  color: var(--background);
 }
 
 body {
@@ -45,7 +45,7 @@ h4, h5, h6 {
 }
 
 a {
-  color: var(--base0C);
+  color: var(--accent-color);
   text-decoration: none;
 
   &:hover {
@@ -116,8 +116,8 @@ pre[class*=language-] ::selection {
 }
 
 mark {
-  background: var(--base05);
-  color: var(--base00);
+  background: var(--foreground);
+  color: var(--background);
 
   &::selection {
     color: var(--base06);
@@ -125,7 +125,7 @@ mark {
 }
 
 hr {
-  border-color: var(--base0C);
+  border-color: var(--accent-color);
   margin: 1em 0;
 }
 
@@ -150,7 +150,7 @@ thead, tbody {
 
 thead {
   background: var(--base07);
-  color: var(--base00);
+  color: var(--background);
 }
 
 th, td {
diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss
index 900f52c..2141305 100644
--- a/assets/scss/layout.scss
+++ b/assets/scss/layout.scss
@@ -63,7 +63,7 @@ footer[aria-label="Site footer"] {
 }
 
 .site__theme-btn {
-  background: var(--base00);
+  background: var(--background);
   padding: 0.5em;
   position: relative;
   float: right;
@@ -76,12 +76,13 @@ footer[aria-label="Site footer"] {
 }
 
 .site__theme-dropdown {
-  background: var(--base00);
+  background: var(--background);
   border: var(--border-style);
   display: none;
   padding: 0.5em;
   position: absolute;
   right: 0;
+  top: 1.5em;
   width: max-content;
 }
 
@@ -98,8 +99,8 @@ footer[aria-label="Site footer"] {
   &[data-theme-system] { order: -2; }
 
   .site__theme-dropdown &:hover {
-    background: var(--base0C);
-    color: var(--base00);
+    background: var(--accent-color);
+    color: var(--background);
     cursor: pointer;
   }
 }
@@ -120,21 +121,21 @@ footer[aria-label="Site footer"] {
 
 .page-link {
   background: var(--base01);
-  color: var(--base0C);
+  color: var(--accent-color);
   text-decoration: none;
   padding: 0.5em;
 
   &:hover {
     background: var(--base0B);
-    color: var(--base00);
+    color: var(--background);
     text-decoration: none;
   }
 }
 
 .page-link--active {
   @extend .page-link;
-  background: var(--base05);
-  color: var(--base00);
+  background: var(--foreground);
+  color: var(--background);
   font-weight: bolder;
   padding: 0.5em;
 }
@@ -154,7 +155,7 @@ footer[aria-label="Site footer"] {
 }
 
 .post__meta {
-  color: var(--base05);
+  color: var(--foreground);
   font-size: 0.9em;
   margin-top: 0.5em;
 
@@ -165,7 +166,7 @@ footer[aria-label="Site footer"] {
 
   .post--single & {
     background: var(--base01);
-    color: var(--base05);
+    color: var(--foreground);
     font-size: 0.9em;
     padding: 0 0.5em;
   }
@@ -173,7 +174,7 @@ footer[aria-label="Site footer"] {
 
 .post__meta--single {
   background: var(--base01);
-  color: var(--base05);
+  color: var(--foreground);
   font-size: 0.9em;
   margin: 0.5em auto;
   padding: 0.5em 1em;
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 979fe55..ba52285 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -11,6 +11,9 @@
   --content-width: 750px;
 
   --border-style: var(--base06) solid 1px;
+  --background: var(--base00);
+  --foreground: var(--base05);
+  --accent-color: var(--base0C);
 }
 
 $mobile-breakpoint: 600px;
@@ -19,8 +22,8 @@ $tablet-breakpoint: 860px;
 :root {
   font-family: var(--body-family);
   font-size: var(--font-size);
-  background: var(--base00);
-  color: var(--base05);
+  background: var(--background);
+  color: var(--foreground);
   line-height: var(--vertical-rhythm);
   margin: 0;
   padding: 0;
@@ -28,7 +31,7 @@ $tablet-breakpoint: 860px;
 
 @mixin header-link-hover-style {
   > *:hover {
-    color: var(--base0C);
+    color: var(--accent-color);
     text-decoration: none;
   }
 }