From 1d5261f0581bc8b22091ab5b744a45d949098bb7 Mon Sep 17 00:00:00 2001
From: Kevin Kandlbinder <kevin@kevink.dev>
Date: Wed, 23 Jun 2021 18:04:09 +0200
Subject: [PATCH] Update design

---
 src/App.module.scss                   |  6 +++++
 src/_common.scss                      |  1 +
 src/components/LinkBox.module.scss    | 34 ++++++++++++++++++++-------
 src/components/Navigation.module.scss |  4 ++--
 4 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/App.module.scss b/src/App.module.scss
index 8a1bd6f..ee780e0 100644
--- a/src/App.module.scss
+++ b/src/App.module.scss
@@ -13,6 +13,12 @@
 
     > div, > main {
         flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+
+        > * {
+            flex-shrink: 0;
+        }
     }
 }
 
diff --git a/src/_common.scss b/src/_common.scss
index e4bce0e..2d3aaab 100644
--- a/src/_common.scss
+++ b/src/_common.scss
@@ -1,6 +1,7 @@
 $fontFamily: 'Open Sans', sans-serif;
 
 $colorAccent: #f58428;
+$colorBackground: #0c0c0c;
 
 $layoutWidth: 1200px;
 $layoutPadding: 20px;
diff --git a/src/components/LinkBox.module.scss b/src/components/LinkBox.module.scss
index bcce739..e17af45 100644
--- a/src/components/LinkBox.module.scss
+++ b/src/components/LinkBox.module.scss
@@ -4,20 +4,34 @@
     @include boxStyle;
 
     padding: 30px;
-    color: $colorAccent;
     width: 300px;
 
     margin: $layoutPadding;
+
+    background-color: transparent;
+    box-shadow: none;
     
     @media(prefers-color-scheme: dark) {
-        background: rgba(255, 255, 255, .05);
+        //background: rgba(5, 4, 4, 0.05);
+
+        background-color: transparent;
     }
 
     .lbIcon {
+        width: 60px;
+        height: 60px;
+
+
         svg {
-            width: 50px;
-            height: 50px;
+            width: 40px;
+            height: 40px;
+            margin: 10px;
         }
+        color: $colorAccent;
+
+        border-radius: 100%;
+
+        background-color: rgba(grey, .07);
 
         margin-bottom: 10px;
     }
@@ -28,8 +42,9 @@
     }
 
     &.highlight {
-        background-color: $colorAccent;
-        color: white;
+        /*background-color: $colorAccent;*/
+        color: $colorAccent;
+        /*color: white;*/
     }
 
     &.small {
@@ -42,10 +57,11 @@
 
         .lbIcon {
             height: 25px;
+            width: 25px;
             svg {
-                width: 20px;
-                height: 20px;
-                margin: 2.5px;
+                width: 15px;
+                height: 15px;
+                margin: 5px;
             }
 
             margin-bottom: 0;
diff --git a/src/components/Navigation.module.scss b/src/components/Navigation.module.scss
index 0b23ca7..7f0f7fc 100644
--- a/src/components/Navigation.module.scss
+++ b/src/components/Navigation.module.scss
@@ -7,11 +7,11 @@
     left: 0;
     width: 100%;
     height: $layoutNavigationHeight;
-    background-color: #1c1c1c;
+    background-color: $colorBackground;
     z-index: 100;
 
     @supports(backdrop-filter: blur(5px)) {
-        background-color: #000000e0;
+        background-color: rgba($colorBackground, .8);
         backdrop-filter: blur(5px);
     }