From 58db2e3d2405a28210481f42d0153d28c9a5ad9b Mon Sep 17 00:00:00 2001
From: ndaniel1102 <ndani2276@gmail.com>
Date: Wed, 24 Feb 2021 01:27:25 +0100
Subject: [PATCH] =?UTF-8?q?sidebar=20rework=20(part1)=20=20=20/home=20gomb?=
 =?UTF-8?q?=20jav=C3=ADtand=C3=B3,=20hogy=20=C3=BAgy=20m=C5=B1k=C3=B6dj?=
 =?UTF-8?q?=C3=B6n,=20mint=20a=20t=C3=B6bbi/?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 npm run dev.txt            |  0
 src/components/layout.js   |  4 +--
 src/defaultStyles.css      | 53 +++++++++++++++++++++++++-------------
 src/pages/index.module.css |  2 +-
 4 files changed, 38 insertions(+), 21 deletions(-)
 create mode 100644 npm run dev.txt

diff --git a/npm run dev.txt b/npm run dev.txt
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/layout.js b/src/components/layout.js
index cecb0e7..46adb59 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -80,11 +80,11 @@ export default function Layout({
             <div />
           </span>
           <div className="sidebarheader">
-            <img
+            <a href="/"><img
               style={{ maxWidth: '100%' }}
               src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
               alt="Frylabs"
-            />
+            /></a>
           </div>
         </div>
         {sidebarOpen ? (
diff --git a/src/defaultStyles.css b/src/defaultStyles.css
index 660fdc7..19d2430 100644
--- a/src/defaultStyles.css
+++ b/src/defaultStyles.css
@@ -1,13 +1,16 @@
 :root {
-  --text-color: #9999ff;
+  --text-color: #F2CB05;
   --bright-color: #f2f2f2;
   --background-color: #222426;
   --hoover-color: #202020;
 }
 
+@import url('https://fonts.googleapis.com/css2?family=Kameron&family=Overpass+Mono:wght@300;400&display=swap');
+
 body {
-  font: normal 14px Verdana;
-  color: #999999;
+    font-family: 'Kameron', serif;
+    font-family: 'Overpass Mono', monospace;
+    color: #999999;
 }
 
 a {
@@ -43,21 +46,34 @@ a {
 }
 
 .sidebarLinks a {
-  display: block;
-  color: black;
-  padding: 16px;
-  text-decoration: none;
-  color: var(--bright-color);
+    display: block;
+    text-align: center;
+    color: black;
+    font-size: 108%;
+    padding: 14px;
+    margin-top: 4px;
+    margin-bottom: 4px;
+    text-decoration: none;
+    color: var(--bright-color);
 }
 
-.sidebarLinks a.active {
-  background-color: var(--text-color);
-  color: black;
+.sidebarLinks a:hover {
+    transition: width 0.5s, height 0.5s, ease-out 0.5s;
+}
+
+.sidebarLinks a.active{
+  border: 0.5px solid var(--text-color);
+  color: white;
+  text-shadow: 2px 2px 8px black;
+  font-weight: bold;
 }
 
 .sidebarLinks a:hover:not(.active) {
-  background-color: #555;
-  color: white;
+  background-color: var(--text-color);
+  color: black;
+  font-weight: bold;
+  text-shadow: 2px 2px 8px black;
+  transition: width 0.5s, height 0.5s, ease-out 0.5s;
 }
 
 .menuicon div {
@@ -81,7 +97,11 @@ a {
   align-items: center;
   flex-wrap: nowrap;
   position: relative;
-  margin: 10px;
+  overflow: hidden;
+  padding-top: 15px;
+  padding-bottom: 17px;
+  padding-right: 2px;
+  padding-left: 2px;
 }
 
 @media screen and (max-width: 700px) {
@@ -121,6 +141,7 @@ a {
     position: absolute;
     left: 50%;
     top: 50%;
+    padding-top: 20px;
     transform: translateX(-50%) translateY(-50%);
   }
 
@@ -209,10 +230,6 @@ a {
   color: white;
 }
 
-.donate {
-  background-color: #222a26;
-}
-
 .rtfmImage {
   justify-content: center;
   margin: 0px 10px;
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index e29b3ae..cb910d1 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -45,7 +45,7 @@
 }
 
 .title {
-  color: #9999ff;
+  color: #F2CB05;
   font-size: 30px;
   text-align: center;
 }