sidebar rework (part1) /home gomb javítandó, hogy úgy működjön, mint a többi/

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 ? (

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;

src/pages/index.module.css

@@ -45,7 +45,7 @@
 }
 
 .title {
-  color: #9999ff;
+  color: #F2CB05;
   font-size: 30px;
   text-align: center;
 }