From 9d082d045839654e3fc6d565bcc4d6efcbd56b12 Mon Sep 17 00:00:00 2001
From: Vrifox <gitea@vrifox.cc>
Date: Tue, 3 Nov 2020 20:33:16 +0100
Subject: [PATCH] replaced more values with variables

---
 assets/_default/list.scss   | 18 +++++++++---------
 assets/_default/single.scss | 22 +++++++++++-----------
 assets/import/footer.scss   | 10 +++++-----
 assets/import/main.scss     | 14 +++++++-------
 assets/import/nav.scss      | 24 ++++++++++++------------
 assets/import/syntax.scss   | 10 +++++-----
 assets/projects/list.scss   | 16 ++++++++--------
 7 files changed, 57 insertions(+), 57 deletions(-)

diff --git a/assets/_default/list.scss b/assets/_default/list.scss
index 3e0741d..981a485 100644
--- a/assets/_default/list.scss
+++ b/assets/_default/list.scss
@@ -5,7 +5,7 @@
 
 .section.header {
   align-items: center;
-  background: rgb(70, 70, 105);
+  background: $bg70;
   display: flex;
   height: 150px;
   margin: 0 0 40px 0;
@@ -24,24 +24,24 @@
   grid-template-columns: repeat(2, 1fr);
   margin: 20px 0;
   a {
-    color: rgb(255, 255, 255);
+    color: $white-light;
     text-decoration: none;
   }
   article {
-    background: rgb(60, 60, 90);
-    border: 1px solid rgb(60, 60, 90);
+    background: $bg60;
+    border: 1px solid $bg60;
     border-radius: 5px;
-    color: rgb(255, 255, 255);
+    color: $white-light;
     display: flex;
     flex-flow: column;
     height: max-content;
     padding: 20px;
     transition: background .2s;
     &:hover {
-      background: rgb(70, 70, 105);
+      background: $bg70;
     }
     img {
-      background: rgb(80, 80, 120);
+      background: $bg80;
       border-radius: 5px 5px 0px 0px;
       margin: -20px -20px 15px -20px;
       max-height: 250px;
@@ -55,7 +55,7 @@
       margin: 0 0 10px 0;
     }
     a {
-      color: rgb(255, 255, 255);
+      color: $white-light;
       &:hover {
         text-decoration: underline;
       }
@@ -65,7 +65,7 @@
       margin: 0;
     }
     .author {
-      color: rgb(200, 200, 230);
+      color: $white-dark;
       font-style: italic;
     }
   }
diff --git a/assets/_default/single.scss b/assets/_default/single.scss
index da75d93..c691b9d 100644
--- a/assets/_default/single.scss
+++ b/assets/_default/single.scss
@@ -9,26 +9,26 @@
     margin: 80px auto;
     max-width: 720px;
     .meta {
-      color: rgb(215, 215, 235);
+      color: $white-dark;
     }
     .title {
       font-size: 2em;
       margin-top: 20px;
     }
     img {
-      border: 1px solid rgb(60, 60, 90);
+      border: 1px solid $bg60;
       border-radius: 5px;
       margin-bottom: 15px;
       max-width: 100%;
     }
     a {
       border-bottom: 1px solid;
-      color: rgb(245, 245, 255);
+      color: $white;
       margin: -5px;
       padding: 5px;
       transition: border .2s, color .2s;
       &:hover {
-        color: rgb(255, 130, 130);
+        color: $red;
         text-decoration: none;
       }
     }
@@ -44,15 +44,15 @@
         padding: 0;
         li {
           a {
-            background: rgb(60, 60, 90);
+            background: $bg60;
             border: 0;
             border-radius: 5px;
-            color: rgb(215, 215, 225);
+            color: $white-dark;
             margin-left: 15px;
             padding: 10px;
             &:hover {
-              background: rgb(50, 50, 75);
-              color: rgb(255, 255, 255);
+              background: $bg50;
+              color: $white-light;
             }
           }
         }
@@ -69,7 +69,7 @@
   max-width: 720px;
   white-space: nowrap;
   &::after {
-    background: rgb(50, 50, 75);
+    background: $bg50;
     content: '';
     height: 200px;
     left: 0;
@@ -84,11 +84,11 @@
     margin: 20px 0;
     a {
       border-bottom: 1px solid transparent;
-      color: rgb(215, 215, 225);
+      color: $white-dark;
       transition: border .2s, color .2s;
       &:hover {
         border-bottom: 1px solid;
-        color: rgb(255, 130, 130);
+        color: $red;
         text-decoration: none;
       }
     }
diff --git a/assets/import/footer.scss b/assets/import/footer.scss
index 8949682..ae2b880 100644
--- a/assets/import/footer.scss
+++ b/assets/import/footer.scss
@@ -1,12 +1,12 @@
 footer {
-  background: rgb(30, 30, 45);
-  color: rgb(215, 215, 235);
+  background: $bg30;
+  color: $white-dark;
   margin-top: 100px;
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
   &::after {
-    background: rgb(30, 30, 45);
+    background: $bg30;
     content: '';
     height: 10000px;
     overflow: hidden;
@@ -27,12 +27,12 @@ footer {
           margin-left: 30px;
           a {
             border-bottom: 1px solid transparent;
-            color: rgb(215, 215, 235);
+            color: $white-dark;
             padding: 5px 0;
             transition: border .2s, color .2s;
             &:hover {
               border-bottom: 1px solid;
-              color: rgb(255, 130, 130);
+              color: $red;
               text-decoration: none;
             }
           }
diff --git a/assets/import/main.scss b/assets/import/main.scss
index d3ce109..44fd59d 100644
--- a/assets/import/main.scss
+++ b/assets/import/main.scss
@@ -1,13 +1,13 @@
 * {
   box-sizing: border-box;
-  scrollbar-color: rgb(255, 130, 130) rgb(60, 60, 90);
+  scrollbar-color: $red $bg60;
   scrollbar-width: thin;
   &::-webkit-scrollbar {
-    background: rgb(60, 60, 90);
+    background: $bg60;
     width: 6px;
   }
   &::-webkit-scrollbar-thumb {
-    background: rgb(255, 130, 130);
+    background: $red;
   }
 }
 html {
@@ -15,15 +15,15 @@ html {
   overflow-y: scroll;
 }
 body {
-  background: rgb(40, 40, 60);
-  color: rgb(245, 245, 255);
+  background: $bg40;
+  color: $white;
   display: grid;
   font-family: 'Lucida Console', monospace;
   line-height: 1.8;
   margin: 0;
 }
 a {
-  color: rgb(255, 130, 130);
+  color: $red;
   text-decoration: none;
   &:hover {
     text-decoration: underline;
@@ -42,7 +42,7 @@ h4 {
   font-size: .9em;
 }
 hr {
-  color: rgb(60, 60, 90);
+  color: $bg60;
   margin: 50px 20px;
 }
 
diff --git a/assets/import/nav.scss b/assets/import/nav.scss
index 00f3c09..d84142d 100644
--- a/assets/import/nav.scss
+++ b/assets/import/nav.scss
@@ -1,5 +1,5 @@
 nav {
-  background: rgb(60, 60, 90);
+  background: $bg60;
   overflow-x: auto;
   overflow-y: hidden;
   position: sticky;
@@ -11,16 +11,16 @@ nav {
     height: 64px;
     .website-name {
        a {
-        color: rgb(245, 245, 245);
+        color: $white;
         display: block;
         padding: 20px 30px;
         text-decoration: none;
         transition: background .2s;
         &:hover {
-          background: rgb(50, 50, 75);
+          background: $bg50;
         }
         &.active {
-          border-bottom: 2px solid rgb(215,215,225);
+          border-bottom: 2px solid $white-dark;
           border-top: 2px solid transparent;
           padding: 16px 30px;
         }
@@ -39,18 +39,18 @@ nav {
         li {
           list-style-type: none;
           &.active a {
-            border-bottom: 2px solid rgb(215,215,225);
+            border-bottom: 2px solid $white-dark;
             border-top: 4px solid transparent;
             padding: 16px 30px;
           }
           a {
-            color: rgb(245, 245, 245);
+            color: $white;
             display: block;
             text-decoration: none;
             transition: background .2s;
             padding: 20px 30px;
             &:hover {
-              background: rgb(50, 50, 75);
+              background: $bg50;
             }
           }
         }
@@ -65,13 +65,13 @@ nav {
         li {
           list-style-type: none;
           a {
-            color: rgb(245, 245, 255);
+            color: $white;
             display: block;
             text-decoration: none;
             transition: background .2s;
             padding: 20px 30px;
             &:hover {
-              background: rgb(50, 50, 75);
+              background: $bg50;
             }
           }
           .seperator {
@@ -98,10 +98,10 @@ nav {
         ul {
           li {
             a {
-              background: rgb(50, 50, 75);
-              color: rgb(215, 215, 225);
+              background: $bg50;
+              color: $white-dark;
               &:hover {
-                background: rgb(40, 40, 60);
+                background: $bg40;
               }
             }
             .seperator {
diff --git a/assets/import/syntax.scss b/assets/import/syntax.scss
index 915d5a9..e5d0f0b 100644
--- a/assets/import/syntax.scss
+++ b/assets/import/syntax.scss
@@ -1,7 +1,7 @@
  .chroma { // background
-  background: rgb(30, 30, 45);
+  background: $bg30;
   border-radius: 5px;
-  color: rgb(245, 245, 255);
+  color: $white;
   .x { // other
     
   }
@@ -29,12 +29,12 @@
     width: 100%;
   }
   .lnt { // lineNumbersTable
-    color: rgb(215, 215, 225);
+    color: $white-dark;
     margin-right: 0.4em;
     padding: 0 0.4em 0 0.4em;
   }
   .ln { // lineNumbers
-    color: rgb(215, 215, 225);
+    color: $white-dark;
     margin-right: 0.4em;
     padding: 0 0.4em 0 0.4em;
   }
@@ -108,7 +108,7 @@
     
   }
   .nt { // nameTag
-    color: rgb(255, 255, 255);
+    color: $white-light;
   }
   .nv { // nameVariable
     color: #8be9fd;
diff --git a/assets/projects/list.scss b/assets/projects/list.scss
index d2266f7..c45337c 100644
--- a/assets/projects/list.scss
+++ b/assets/projects/list.scss
@@ -5,7 +5,7 @@
 
 .section.header {
   align-items: center;
-  background: rgb(70, 70, 105);
+  background: $bg70;
   display: flex;
   height: 150px;
   margin: 0 0 40px 0;
@@ -24,14 +24,14 @@
   grid-template-columns: repeat(2, 1fr);
   margin: 20px 0;
   a {
-    color: rgb(255, 255, 255);
+    color: $white-light;
     text-decoration: none;
   }
   article {
-    background: rgb(60, 60, 90);
-    border: 1px solid rgb(60, 60, 90);
+    background: $bg60;
+    border: 1px solid $bg60;
     border-radius: 5px;
-    color: rgb(255, 255, 255);
+    color: $white-light;
     display: flex;
     flex-flow: column;
     height: max-content;
@@ -39,10 +39,10 @@
     padding: 20px;
     transition: background .2s;
     &:hover {
-        background: rgb(70, 70, 105);
+        background: $bg70;
     }
     img {
-      background: rgb(80, 80, 120);
+      background: $bg80;
       border-radius: 5px 5px 0px 0px;
       margin: -20px -20px 15px -20px;
       max-height: 250px;
@@ -60,7 +60,7 @@
       margin: 0;
     }
     .status {
-      color: rgb(215, 215, 245);
+      color: $white-dark;
       font-style: italic;
     }
   }