From 81c4d8cdb6379b89bc42abe2a36653629ed1447d Mon Sep 17 00:00:00 2001
From: Jonas Leder <jonas@jonasled.de>
Date: Sat, 29 Jan 2022 00:05:02 +0100
Subject: [PATCH] get scss to build

---
 src/scss/error.scss             |  4 ++--
 src/scss/lib/_colorMixer.scss   |  9 ++++----
 src/scss/lib/_comments.scss     | 20 ++++++++---------
 src/scss/lib/_content.scss      | 16 +++++++-------
 src/scss/lib/_cookieinfo.scss   | 18 ++++++++--------
 src/scss/lib/_footer.scss       | 18 ++++++++--------
 src/scss/lib/_general.scss      | 24 ++++++++++-----------
 src/scss/lib/_header.scss       |  8 +++----
 src/scss/lib/_home.scss         |  6 +++---
 src/scss/lib/_menu.scss         | 22 +++++++++----------
 src/scss/lib/_menuMobile.scss   | 10 ++++-----
 src/scss/lib/_mobile.scss       |  6 +++---
 src/scss/lib/_mobileSmall.scss  |  6 +++---
 src/scss/lib/_ntp.scss          |  8 +++----
 src/scss/lib/_prism.scss        |  5 ++++-
 src/scss/lib/_pwgen.scss        |  4 ++--
 src/scss/lib/_sellingTable.scss |  6 +++---
 src/scss/lib/_skills.scss       |  4 ++--
 src/scss/lib/_var.scss          |  4 ++--
 src/scss/style.scss             | 38 ++++++++++++++++-----------------
 20 files changed, 120 insertions(+), 116 deletions(-)

diff --git a/src/scss/error.scss b/src/scss/error.scss
index 66d63f8..85ca219 100644
--- a/src/scss/error.scss
+++ b/src/scss/error.scss
@@ -1,7 +1,7 @@
-@import "lib/_var";
+@use "lib/var" as var;
 
 body {
-    background: $back-color;
+    background: var.$back-color;
     overflow: hidden;
 }
 
diff --git a/src/scss/lib/_colorMixer.scss b/src/scss/lib/_colorMixer.scss
index d019b60..ee7f49f 100644
--- a/src/scss/lib/_colorMixer.scss
+++ b/src/scss/lib/_colorMixer.scss
@@ -1,5 +1,6 @@
-@use "lib/_var";
+@use "var";
+@use "sass:color";
 
-$back-color-2: darken($back-color, $darker-color);
-$back-color-3: darken($back-color, $darker-color-2);
-$accent-color-2: darken($accent-color, $darker-color);
\ No newline at end of file
+$back-color-2: color.adjust(var.$back-color, $lightness: - var.$darker-color);
+$back-color-3: color.adjust(var.$back-color, $lightness: - var.$darker-color-2);
+$accent-color-2: color.adjust(var.$accent-color, $lightness: - var.$darker-color);
\ No newline at end of file
diff --git a/src/scss/lib/_comments.scss b/src/scss/lib/_comments.scss
index a75528a..4504ecc 100644
--- a/src/scss/lib/_comments.scss
+++ b/src/scss/lib/_comments.scss
@@ -1,13 +1,13 @@
-@use "lib/_var";
-@use "lib/_colorMixer";
+@use "var";
+@use "colorMixer";
 
 #newComment {
   form {
     input, textarea{
       width: 100%;
-      background-color: $back-color;
-      color: $text-color;
-      border: solid $back-color-2;
+      background-color: var.$back-color;
+      color: var.$text-color;
+      border: solid colorMixer.$back-color-2;
       border-radius: 5px;
       padding: 5px;
     }
@@ -21,7 +21,7 @@
     }
 
     input[type=submit]{
-      background-color: $accent-color;
+      background-color: var.$accent-color;
       color: #000;
       text-transform: uppercase;
       padding: 15px;
@@ -29,10 +29,10 @@
       cursor: pointer;
       outline: 0;
       border: 0;
-      transition: background-color $link-hover-animation-time linear;
+      transition: background-color var.$link-hover-animation-time linear;
 
       &:HOVER{
-        background-color: $accent-color-2;
+        background-color: colorMixer.$accent-color-2;
       }
     }
   }
@@ -69,7 +69,7 @@
 }
 
 .bigButton {
-  background-color: $accent-color;
+  background-color: var.$accent-color;
   color: #000;
   text-transform: uppercase;
   padding: 15px;
@@ -77,7 +77,7 @@
   cursor: pointer;
   outline: 0;
   border: 0;
-  transition: background-color $link-hover-animation-time linear;
+  transition: background-color var.$link-hover-animation-time linear;
   width: 100%;
   margin-top: 10px;
 }
diff --git a/src/scss/lib/_content.scss b/src/scss/lib/_content.scss
index 03a9555..75279c0 100644
--- a/src/scss/lib/_content.scss
+++ b/src/scss/lib/_content.scss
@@ -1,8 +1,8 @@
-@use "lib/_var";
-@use "lib/_colorMixer";
+@use "var";
+@use "colorMixer";
 
 #content{
-  background-color: $back-color;
+  background-color: var.$back-color;
   padding: 20px 20%;
   img {
     max-width: 40%;
@@ -10,7 +10,7 @@
 }
 
 article{
-  border: 2px solid $accent-color;
+  border: 2px solid var.$accent-color;
   border-radius: 20px;
   padding: 10px;
   margin-right: 10px;
@@ -42,13 +42,13 @@ article{
 }
 
 .clickSpan{
-  color: $accent-color;
+  color: var.$accent-color;
   text-decoration: underline;
-  transition: background-color $link-hover-animation-time linear;
+  transition: background-color var.$link-hover-animation-time linear;
   cursor: pointer;
 
   &:hover{
-    color: $accent-color-2;
+    color: colorMixer.$accent-color-2;
   }
 }
 
@@ -56,5 +56,5 @@ article{
   border: 0;
   height: 200px;
   width: 600px;
-  background-color: $text-color;
+  background-color: var.$text-color;
 }
\ No newline at end of file
diff --git a/src/scss/lib/_cookieinfo.scss b/src/scss/lib/_cookieinfo.scss
index 322ce65..aefbfbc 100644
--- a/src/scss/lib/_cookieinfo.scss
+++ b/src/scss/lib/_cookieinfo.scss
@@ -1,5 +1,5 @@
-@use "lib/_var";
-@use "lib/_colorMixer";
+@use "var";
+@use "colorMixer";
 
 .cookieinfo{
   position: fixed;
@@ -15,9 +15,9 @@
   text-align: center;
   bottom: 0;
   opacity: 1;
-  background-color: $back-color-3;
-  color: $text-color;
-  border: 1px solid $accent-color;
+  background-color: colorMixer.$back-color-3;
+  color: var.$text-color;
+  border: 1px solid var.$accent-color;
 
 }
 
@@ -29,12 +29,12 @@
   margin-left: 5px;
   border-radius: 5px;
   cursor: pointer;
-  background-color: $accent-color;
+  background-color: var.$accent-color;
   color: #000;
   text-align: center;
 
   &:HOVER{
-    background-color: $accent-color-2;
+    background-color: colorMixer.$accent-color-2;
   }
 }
 
@@ -45,9 +45,9 @@
 
 .cookieinfo-link{
   text-decoration: none;
-  color: $accent-color;
+  color: var.$accent-color;
 
   &:HOVER{
-    color: $accent-color-2;
+    color: colorMixer.$accent-color-2;
   }
 }
diff --git a/src/scss/lib/_footer.scss b/src/scss/lib/_footer.scss
index f33d9f2..eb115f4 100644
--- a/src/scss/lib/_footer.scss
+++ b/src/scss/lib/_footer.scss
@@ -1,5 +1,5 @@
-@use "lib/_var";
-@use "lib/_colorMixer";
+@use "var";
+@use "colorMixer";
 
 footer{
   display: flex;
@@ -31,23 +31,23 @@ footer{
     }
 
     a{
-      color: $text-color;
-      transition: color $link-hover-animation-time;
+      color: var.$text-color;
+      transition: color var.$link-hover-animation-time;
 
       &:hover{
-        color: $accent-color;
+        color: var.$accent-color;
       }
     }
 
     a svg {
-      fill: $text-color;
+      fill: var.$text-color;
       max-width: 30px;
-      transition: fill $link-hover-animation-time;
+      transition: fill var.$link-hover-animation-time;
       margin-left: 10px;
       display: inline;
 
       &:hover{
-        fill: $accent-color;
+        fill: var.$accent-color;
       }
     }
   }
@@ -56,7 +56,7 @@ footer{
 #blueBar{
   height: 5px;
   width: 100%;
-  background-color: $content-footer-div-color;
+  background-color: var.$content-footer-div-color;
 }
 
 #newestPost{
diff --git a/src/scss/lib/_general.scss b/src/scss/lib/_general.scss
index 187ad75..d38bb12 100644
--- a/src/scss/lib/_general.scss
+++ b/src/scss/lib/_general.scss
@@ -1,5 +1,5 @@
-@use "lib/_var";
-@use "lib/_colorMixer";
+@use "var";
+@use "colorMixer";
 
 html {
     scroll-behavior: smooth;
@@ -7,26 +7,26 @@ html {
 
 body {
     margin: 0;
-    background-color: $back-color-2;
-    color: $text-color;
+    background-color: colorMixer.$back-color-2;
+    color: var.$text-color;
     font-family: 'Source Sans Pro', sans-serif;
     width: calc(100% - 1px);
     height: 100%;
 }
 
 button {
-    background-color: $accent-color;
+    background-color: var.$accent-color;
     color: #000;
     text-transform: uppercase;
     border: 0;
     padding: 5px;
     cursor: pointer;
     border-radius: 5px;
-    transition: background-color $link-hover-animation-time linear;
+    transition: background-color var.$link-hover-animation-time linear;
     &:hover,
     &:active,
     &:focus {
-        background-color: $accent-color-2;
+        background-color: colorMixer.$accent-color-2;
         outline: none;
     }
 }
@@ -37,11 +37,11 @@ button {
 
 a {
     padding: 0;
-    color: $accent-color;
+    color: var.$accent-color;
     text-decoration: underline;
-    transition: color $link-hover-animation-time;
+    transition: color var.$link-hover-animation-time;
     &:HOVER {
-        color: $accent-color-2;
+        color: colorMixer.$accent-color-2;
     }
 }
 
@@ -50,7 +50,7 @@ a {
 }
 
 h1 {
-    color: $title-color;
+    color: var.$title-color;
     text-transform: uppercase;
 }
 
@@ -79,7 +79,7 @@ h1 {
 }
 
 img {
-    border-radius: $border-radius-image;
+    border-radius: var.$border-radius-image;
     &.no-corner {
         border-radius: 0;
     }
diff --git a/src/scss/lib/_header.scss b/src/scss/lib/_header.scss
index a67d19c..d6fb497 100644
--- a/src/scss/lib/_header.scss
+++ b/src/scss/lib/_header.scss
@@ -1,11 +1,11 @@
-@use "lib/_var";
-@use "lib/_colorMixer";
+@use "var";
+@use "colorMixer";
 
 .header-wrapper *:before {
     box-sizing: border-box;
 }
 .header-homepage {
-  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)), url(/API/getFile.php?filename=img/bannerHomeCrop.webp);
+  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)), url("../assets/img/bannerHomeCrop.webp");
   background-size: cover;
   position: relative;
   color: #fff;
@@ -29,7 +29,7 @@
   svg { display: block;
     width: calc(100% + 1.3px);
     height: 90px;
-    fill: $back-color;
+    fill: var.$back-color;
   }
 }
 
diff --git a/src/scss/lib/_home.scss b/src/scss/lib/_home.scss
index b302654..09c4316 100644
--- a/src/scss/lib/_home.scss
+++ b/src/scss/lib/_home.scss
@@ -1,5 +1,5 @@
-@use "lib/_var";
-@use "lib/_colorMixer";
+@use "var";
+@use "colorMixer";
 
 .abuseIpImg{
   width: 391px;
@@ -14,5 +14,5 @@
 #homeImage{
   float: left;
   margin-right: 20px;
-  box-shadow: 7px 7px $back-color-2;
+  box-shadow: 7px 7px colorMixer.$back-color-2;
 }
\ No newline at end of file
diff --git a/src/scss/lib/_menu.scss b/src/scss/lib/_menu.scss
index fdabffa..e6e8455 100644
--- a/src/scss/lib/_menu.scss
+++ b/src/scss/lib/_menu.scss
@@ -1,5 +1,5 @@
-@use "lib/_var";
-@use "lib/_colorMixer";
+@use "var";
+@use "colorMixer";
 
 #mainmenu {
     position: absolute;
@@ -30,22 +30,22 @@
     left: 50%;
     transform: translateX(-50%);
     a {
-        background-color: $back-color-3;
-        border-bottom: $back-color-2 solid 2px;
+        background-color: colorMixer.$back-color-3;
+        border-bottom: colorMixer.$back-color-2 solid 2px;
         width: 100%;
-        color: $text-color;
-        transition: background-color $link-hover-animation-time linear;
+        color: var.$text-color;
+        transition: background-color var.$link-hover-animation-time linear;
         &:first-of-type {
-            border-top-left-radius: $border-radius-sub-nav;
-            border-top-right-radius: $border-radius-sub-nav;
+            border-top-left-radius: var.$border-radius-sub-nav;
+            border-top-right-radius: var.$border-radius-sub-nav;
         }
         &:last-of-type {
             border-bottom: none;
-            border-bottom-left-radius: $border-radius-sub-nav;
-            border-bottom-right-radius: $border-radius-sub-nav;
+            border-bottom-left-radius: var.$border-radius-sub-nav;
+            border-bottom-right-radius: var.$border-radius-sub-nav;
         }
         &:hover {
-            background-color: $back-color-2;
+            background-color: colorMixer.$back-color-2;
         }
     }
 }
diff --git a/src/scss/lib/_menuMobile.scss b/src/scss/lib/_menuMobile.scss
index 03372e5..6090268 100644
--- a/src/scss/lib/_menuMobile.scss
+++ b/src/scss/lib/_menuMobile.scss
@@ -1,5 +1,5 @@
-@use "lib/_var";
-@use "lib/_colorMixer";
+@use "var";
+@use "colorMixer";
 
 #burgermenu {
   position: absolute;
@@ -11,7 +11,7 @@
   .bar1, .bar2, .bar3 {
     width: 35px;
     height: 5px;
-    background-color: $text-color;
+    background-color: var.$text-color;
     margin: 6px 0;
     transition: 0.4s;
   }
@@ -28,7 +28,7 @@
   }
 }
 
-@media only screen and (max-width: $mobile-max-width) {
+@media only screen and (max-width: var.$mobile-max-width) {
   #burgermenu{
     display: inline-block;
   }
@@ -41,7 +41,7 @@
     display: none;
 
     text-align: left !important;
-    background-color: $back-color-3;
+    background-color: colorMixer.$back-color-3;
     width: 100% !important;
 
     a {
diff --git a/src/scss/lib/_mobile.scss b/src/scss/lib/_mobile.scss
index 04f90e5..59cb5d5 100644
--- a/src/scss/lib/_mobile.scss
+++ b/src/scss/lib/_mobile.scss
@@ -1,7 +1,7 @@
-@use "lib/_var";
-@use "lib/_colorMixer";
+@use "var";
+@use "colorMixer";
 
-@media only screen and (max-width: $mobile-max-width) {
+@media only screen and (max-width: var.$mobile-max-width) {
   #homeImage{
     float: none;
   }
diff --git a/src/scss/lib/_mobileSmall.scss b/src/scss/lib/_mobileSmall.scss
index a0789a3..5072226 100644
--- a/src/scss/lib/_mobileSmall.scss
+++ b/src/scss/lib/_mobileSmall.scss
@@ -1,7 +1,7 @@
-@use "lib/_var";
-@use "lib/_colorMixer";
+@use "var";
+@use "colorMixer";
 
-@media only screen and (max-width: $small-mobile-max-width) {
+@media only screen and (max-width: var.$small-mobile-max-width) {
   #footerContent{
     flex-direction: column;
     div {
diff --git a/src/scss/lib/_ntp.scss b/src/scss/lib/_ntp.scss
index 826e879..a54e9c4 100644
--- a/src/scss/lib/_ntp.scss
+++ b/src/scss/lib/_ntp.scss
@@ -1,5 +1,5 @@
-@use "lib/_var";
-@use "lib/_colorMixer";
+@use "var";
+@use "colorMixer";
 
 .js-plotly-plot {
     margin-bottom: 10px;
@@ -10,7 +10,7 @@
     display: block;
     width: 100%;
     padding: 10px;
-    background-color: $back-color-3;
+    background-color: colorMixer.$back-color-3;
     cursor: pointer;
 }
 
@@ -18,7 +18,7 @@
     width: 100%;
     padding: 10px;
     display: none;
-    background-color: $back-color-3;
+    background-color: colorMixer.$back-color-3;
 }
 
 .visible {
diff --git a/src/scss/lib/_prism.scss b/src/scss/lib/_prism.scss
index 14b60a8..d4f8c09 100644
--- a/src/scss/lib/_prism.scss
+++ b/src/scss/lib/_prism.scss
@@ -1,3 +1,6 @@
+@use "var";
+@use "colorMixer";
+
 /* PrismJS 1.24.1
 https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+apacheconf+arduino+aspnet+bash+batch+c+csharp+cpp+cmake+docker+gcode+git+go+ignore+java+json+json5+makefile+markdown+markup-templating+php+powershell+properties+python+jsx+tsx+sas+sass+scss+sql+typescript+typoscript+yaml&plugins=line-numbers+autolinker */
 /**
@@ -9,7 +12,7 @@ https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+cli
  code[class*="language-"],
  pre[class*="language-"] {
 	 color: #ccc;
-	 background: $back-color-2;
+	 background: colorMixer.$back-color-2;
 	 font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 	 font-size: 1em;
 	 text-align: left;
diff --git a/src/scss/lib/_pwgen.scss b/src/scss/lib/_pwgen.scss
index 20cea82..7f9b4a8 100644
--- a/src/scss/lib/_pwgen.scss
+++ b/src/scss/lib/_pwgen.scss
@@ -1,5 +1,5 @@
-@use "lib/_var";
-@use "lib/_colorMixer";
+@use "var";
+@use "colorMixer";
 
 jl-pwgen {
     input[type="text"] {
diff --git a/src/scss/lib/_sellingTable.scss b/src/scss/lib/_sellingTable.scss
index 4914411..9cfe528 100644
--- a/src/scss/lib/_sellingTable.scss
+++ b/src/scss/lib/_sellingTable.scss
@@ -1,5 +1,5 @@
-@use "lib/_var";
-@use "lib/_colorMixer";
+@use "var";
+@use "colorMixer";
 
 jl-selling-table {
     table {
@@ -13,6 +13,6 @@ jl-selling-table {
       }
       
       tr:nth-child(even) {
-        background-color: $back-color-2;
+        background-color: colorMixer.$back-color-2;
       }
 }
\ No newline at end of file
diff --git a/src/scss/lib/_skills.scss b/src/scss/lib/_skills.scss
index a64e14e..9a4c4f1 100644
--- a/src/scss/lib/_skills.scss
+++ b/src/scss/lib/_skills.scss
@@ -1,5 +1,5 @@
-@use "lib/_var";
-@use "lib/_colorMixer";
+@use "var";
+@use "colorMixer";
 
 .skills {
     max-height: 80px;
diff --git a/src/scss/lib/_var.scss b/src/scss/lib/_var.scss
index 1fa03fe..3925ddf 100644
--- a/src/scss/lib/_var.scss
+++ b/src/scss/lib/_var.scss
@@ -4,8 +4,8 @@ $title-color: #fff;
 $accent-color: #20c5ad;
 $content-footer-div-color: #03A8F4;
 
-$darker-color: 5;
-$darker-color-2: 2;
+$darker-color: 5%;
+$darker-color-2: 2%;
 
 $border-radius-sub-nav: 10px;
 $border-radius-image: 5px;
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 72285e4..5aa8493 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -1,20 +1,20 @@
-@use "lib/_var";
-@use "lib/_colorMixer";
-@use "lib/_general";
-@use "lib/_menu";
-@use "lib/_normalize";
-@use "lib/_ntp";
-@use "lib/_header";
-@use "lib/_cookieinfo";
-@use "lib/_comments";
-@use "lib/_footer";
-@use "lib/_content";
-@use "lib/_mobile";
-@use "lib/_menuMobile";
-@use "lib/_mobileSmall";
-@use "lib/_home";
-@use "lib/_prism";
-@use "lib/_sellingTable";
-@use "lib/_skills";
-@use "lib/_pwgen";
+@use "lib/var";
+@use "lib/colorMixer";
+@use "lib/general";
+@use "lib/menu";
+@use "lib/normalize";
+@use "lib/ntp";
+@use "lib/header";
+@use "lib/cookieinfo";
+@use "lib/comments";
+@use "lib/footer";
+@use "lib/content";
+@use "lib/mobile";
+@use "lib/menuMobile";
+@use "lib/mobileSmall";
+@use "lib/home";
+@use "lib/prism";
+@use "lib/sellingTable";
+@use "lib/skills";
+@use "lib/pwgen";
 @use "npm:basiclightbox/src/styles/main.scss"
\ No newline at end of file