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;
+    display: flex;
-    grid-template-columns: repeat(5, 1fr) 2fr 1fr;
+    /* 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 {
+nav .nav-item.filler {
-    padding: 0.75rem 1rem;
+    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;
 }
+

views/base.html

@@ -10,7 +10,6 @@
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
         integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
 
-
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
         integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
     <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js"
@@ -30,19 +29,33 @@
                 ]
             });
         });
-	<!-- [> WIP: Dark Mode <]
+
-	   - document.documentElement.classList.toggle(
+        document.addEventListener('DOMContentLoaded', () => {
-	   -   'dark',
+            const $toggle = document.querySelector('#toggle-dark-mode');
-	   -   localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
+            const $toggleIcon = document.querySelector('#toggle-dark-mode i');            
-	   - );
+
-	   - document.addEventListener('DOMContentLoaded', () =>
+            // Loads prefered dark from from localStorage or default to media query.
-	   -   document.querySelectorAll('[toggle-dark-mode]').forEach((item) =>
+            let prefersDarkMode = localStorage.getItem('theme') === 'dark'
-	   -     item.addEventListener('click', () => {
+                || window.matchMedia('(prefers-color-scheme: dark)').matches;
-	   -       localStorage.setItem('theme', localStorage.theme == 'dark' ? 'light' : 'dark');
+            
-	   -       document.documentElement.classList.toggle('dark');
+            function storePrefersDarkMode(mode) {
-	   -     })
+                prefersDarkMode = mode;
-	   -   )
+                localStorage.setItem('theme', mode ? 'dark' : 'light');
-           - );  -->
+            }
+
+            function displayToggle() {
+                document.body.classList.toggle('dark-mode', prefersDarkMode);
+                $toggleIcon.classList.toggle('fa-moon', prefersDarkMode);
+                $toggleIcon.classList.toggle('fa-sun', !prefersDarkMode);
+            }
+
+            $toggle.addEventListener('click', () => {
+                storePrefersDarkMode(!prefersDarkMode);
+                displayToggle();
+            });
+
+            displayToggle();
+        });
     </script>
 
 
@@ -53,57 +66,67 @@
     <nav>
         <!-- Site -->
         <div class="nav-logo">
-            <a href="/">
+            <a class="nav-element" href="/">
-                <img src="assets/images/logo-circuit-board@100w.png" alt="phc-logo">
+                <img src="assets/images/logo-circuit-board.svg" alt="phc-logo">
             </a>
         </div>
         <div class="nav-main">
             <div class="nav-item">
-                <a href="/utenti">Utenti</a>
+                <a class="nav-element" href="/utenti">Utenti</a>
             </div>
             <div class="nav-item">
-                <a href="/news">News</a>
+                <a class="nav-element" href="/news">News</a>
             </div>
             <div class="nav-item dropdown">
                 <div class="name">
-                    <a href="/progetti">
+                    <a class="nav-element" href="/progetti">
-                        Progetti
+                        <div class="icon">
+                            <i class="fas fa-chevron-down"></i>
+                        </div>
+                        <div class="label">
+                            Progetti
+                        </div>
                     </a>
                 </div>
                 <div class="nav-items">
                     <div class="nav-item">
-                        <a href="{{ .Config.GitUrl }}">Gitea</a>
+                        <a class="nav-element" href="{{ .Config.GitUrl }}">Gitea</a>
                     </div>
                     <div class="nav-item">
-                        <a href="{{ .Config.ForumUrl }}">Zulip</a>
+                        <a class="nav-element" href="{{ .Config.ForumUrl }}">Zulip</a>
                     </div>
                     <div class="nav-item">
-                        <a href="/guide">Guide</a>
+                        <a class="nav-element" href="/guide">Guide</a>
                     </div>
                     <div class="nav-item">
-                        <a href="/seminari">Seminari</a>
+                        <a class="nav-element" href="/seminari">Seminari</a>
                     </div>
                 </div>
             </div>
             <div class="nav-item">
-                <a href="/storia">Storia</a>
+                <a class="nav-element" href="/storia">Storia</a>
             </div>
             <div class="nav-item">
-                <a href="/about">About</a>
+                <a class="nav-element" href="/about">About</a>
+            </div>
+
+            <div class="nav-item filler"></div>
+
+            <!-- User Related -->
+            <div class="nav-item">
+                <div id="toggle-dark-mode" class="nav-button">
+                    <i class="fas fa-moon"></i>
+                </div>
             </div>
-            <!-- User -->
             {{if .User}}
             <div class="nav-item">
-                <a href="/profile">@{{ .User }}</a>
+                <a class="nav-element" href="/profile">@{{ .User }}</a>
             </div>
             {{else}}
             <div class="nav-item">
-                <a href="/login">Accedi</a>
+                <a class="nav-element" href="/login">Accedi</a>
             </div>
             {{end}}
-            <div class="nav-item toggle-dark-mode">
-                <a href=""><i class="fa-moon"></i></a>
-            </div>
         </div>
     </nav>