From a89ed38280197bc6777848ca511c256a06ecec1d Mon Sep 17 00:00:00 2001
From: samuel-p <codes@samuel-philipp.de>
Date: Sat, 10 Apr 2021 22:20:57 +0200
Subject: [PATCH] added experimental light mode

---
 src/scss/main.scss | 107 ++++++++++++++++++++++++++++++++++-----------
 1 file changed, 81 insertions(+), 26 deletions(-)

diff --git a/src/scss/main.scss b/src/scss/main.scss
index ebbac55..ddaae5d 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -17,6 +17,9 @@ $fa-font-path: "../font";
 $flag-icon-rect-path: '';
 @import "node_modules/flag-icon-css/sass/flag-icon";
 
+$primary: #fea500;
+$primary_dark: #e5a52e;
+
 html, body {
   height: 100%;
   display: flex;
@@ -26,6 +29,7 @@ html, body {
 body {
   background-image: url("../img/bg.png");
   color: #fff;
+  font-weight: 300;
   min-height: 100vh;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
@@ -40,14 +44,18 @@ ul {
 }
 
 .highlight {
-  color: #fea500;
+  color: $primary;
+}
+
+.text-foreground {
+  color: #fff;
 }
 
 a {
-  color: #fea500;
+  color: $primary;
 
   &:hover {
-    color: #d78c00;
+    color: $primary_dark;
   }
 }
 
@@ -155,7 +163,7 @@ a {
 }
 
 .card {
-  background-color: #222;
+  background-color: #111;
   border: 1px solid #fff;
   padding: 1rem;
 }
@@ -183,10 +191,10 @@ a {
     top: 0;
     bottom: 0;
     right: 0;
-    color: #fea500 !important;
+    color: $primary !important;
 
     &[href]:hover {
-      color: #d78c00 !important;
+      color: $primary_dark !important;
     }
   }
 
@@ -195,8 +203,8 @@ a {
     top: 0;
     right: -1rem;
     font-weight: bold;
-    background-color: #fea500;
-    color: #000000;
+    background-color: $primary;
+    color: #000;
     padding: .5rem 1rem;
     border-radius: 10px;
     transform: rotate(20deg);
@@ -220,10 +228,10 @@ a {
   }
 
   &.flat {
-    color: #fea500 !important;
+    color: $primary !important;
 
     &:hover {
-      color: #d78c00 !important;
+      color: $primary_dark !important;
     }
 
     .inner {
@@ -242,19 +250,19 @@ a {
 }
 
 .contact-links a {
-  color: #ffffff !important;
+  color: #fff !important;
 }
 
 code {
-  background-color: #fea500;
-  color: #000000;
+  background-color: $primary;
+  color: #000;
   padding: 1px 3px;
   border-radius: 4px;
 }
 
 pre {
-  background-color: #fea500;
-  color: #000000;
+  background-color: $primary;
+  color: #000;
   padding: 1px 3px;
   border-radius: 4px;
 
@@ -275,16 +283,63 @@ pre {
   }
 }
 
-.svg-icon {
-  margin: 0 8px;
-  width: 4em;
-  height: 4em;
-}
+@media screen and (prefers-color-scheme: light) {
+  $primary: #0059fe;
+  $primary_dark: #2e6ee5;
 
-@media (max-width: 767.98px) {
-  .svg-icon {
-    margin: 0 4px;
-    width: 2em;
-    height: 2em;
+  body {
+    background-image: url("../img/bg-light.png");
+    color: #000;
   }
-}
\ No newline at end of file
+  .border-top, .border-bottom {
+    border-color: #000;
+  }
+  .heading a, .menu a, .contact-links a, .service.flat .inner a, .text-foreground {
+    color: #000 !important;
+  }
+  .card {
+    background-color: #eee;
+    border-color: #000;
+  }
+  .service {
+    .link {
+      color: $primary !important;
+
+      &[href]:hover {
+        color: $primary_dark !important;
+      }
+    }
+
+    .beta {
+      background-color: $primary;
+      box-shadow: -1px 8px 5px rgba(127, 127, 127, 0.3);
+      color: #fff;
+    }
+
+    &.flat {
+      color: $primary !important;
+
+      &:hover {
+        color: $primary_dark !important;
+      }
+    }
+  }
+  .highlight {
+    color: $primary;
+  }
+  a {
+    color: $primary;
+
+    &:hover {
+      color: $primary_dark;
+    }
+  }
+  code {
+    background-color: $primary;
+    color: #fff;
+  }
+  pre {
+    background-color: $primary;
+    color: #fff;
+  }
+}