Feature: Bottone per dark mode, logo svg ed altre modifiche alla nav

assets/style.css

@@ -24,9 +24,9 @@
     --shadow-1: 0 0 16px 0 #00000018;
 }
 
-html.dark{
+body.dark-mode {
     --bg: #282828;
-    --fg: #579f31;
+    --fg: #6eac4d;
 
     --bg-dark: hsl(10, 10%, 20%);
     --bg-darker: hsl(10, 10%, 17%);
@@ -48,7 +48,7 @@ html.dark{
 }
 
 * {
-    box-sizing: border-box;
+            box-sizing: border-box;
 }
 
 html, body {
@@ -98,7 +98,7 @@ nav {
 }
 
 /* Tutti i link dentro la navbar sono speciali e non sembrano link */
-nav a {
+nav .nav-element {
     display: flex;
     width: 100%;
     height: 100%;
@@ -108,6 +108,8 @@ nav a {
 
     text-decoration: none;
     color: inherit;
+
+    gap: 0.5rem;
 }
 
 nav a:hover {
@@ -116,12 +118,10 @@ nav a:hover {
 }
 
 nav .nav-logo {
-    /* height: 3.5rem; */
-
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0.5rem;
+    padding: 0.25rem 0;
 
     background: var(--bg-dark);
     border-radius: 4px;
@@ -129,21 +129,49 @@ nav .nav-logo {
     box-shadow: var(--shadow-1);
 }
 
+nav .nav-logo img {
+    width: 150px;
+}
+
 nav .nav-main {
-    display: grid;
-    grid-template-columns: repeat(5, 1fr) 2fr 1fr;
+    display: flex;
+    /* grid-template-columns: repeat(5, 1fr) 1fr auto 1fr; */
 
     background: var(--bg-dark);
     border-radius: 4px;
     border: 1px solid var(--bg-darker-2);
     box-shadow: var(--shadow-1);
 
-
     z-index: -1;
 }
 
-nav .nav-main a {
-    padding: 0.75rem 1rem;
+nav .nav-item.filler {
+    width: 6rem;
+}
+
+nav .nav-main .nav-element {
+    padding: 1rem 1.25rem;
+    cursor: pointer;
+}
+
+nav .nav-main .nav-button {
+    margin: 0 0.5rem;
+    /* padding: 0.5rem; */
+
+    aspect-ratio: 1;
+    width: 2rem;
+    height: 2rem;
+
+    /* background: var(--bg-darker-2); */
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border: 1px solid var(--bg-darker-2);
+    border-radius: 1rem;
+
+    cursor: pointer;
 }
 
 nav .nav-main .nav-item {
@@ -154,19 +182,14 @@ nav .nav-main .nav-item {
     background: var(--bg-dark);
 
     user-select: none;
-    cursor: pointer;
 
     z-index: 2;
 }
 
-nav .nav-main .nav-item:hover {
+nav .nav-main .nav-element:hover, nav .nav-main .nav-button:hover {
     background: var(--bg-darker);
 }
 
-nav .nav-main .nav-item:last-child {
-    grid-column: 7 / 8;
-}
-
 nav .nav-main .nav-item.dropdown {
     position: relative;
 
@@ -330,3 +353,4 @@ a:hover {
     color: var(--accent-1);
     text-decoration: underline;
 }
+