Minima responsività e ombra al logo

assets/style.css

@@ -24,29 +24,6 @@
     --shadow-1: 0 0 16px 0 #00000018;
 }
 
-body.dark-mode {
-    --bg: #282828;
-    --fg: #6eac4d;
-
-    --bg-dark: hsl(10, 10%, 20%);
-    --bg-darker: hsl(10, 10%, 17%);
-    --bg-darker-2: #1d2021;
-
-    --accent-1: #154d24;
-    --accent-1-fg: #278542;
-
-    --card-date: #928374;
-    --card-content: #d4be98;
-
-    --font-sf: 'Inter', sans-serif;
-    --font-weight-light: 300;
-    --font-weight-normal: 400;
-    --font-weight-medium: 500;
-    --font-weight-bold: 700;
-
-    --shadow-1: 0 0 16px 0 #16182077;
-}
-
 * {
             box-sizing: border-box;
 }
@@ -85,11 +62,12 @@ body {
 nav {
     margin: 1rem 0;
 
-    display: grid;
-    grid-template-columns: auto 1fr;
+    display: flex;
+    flex-wrap: wrap;
     gap: 1rem;
 
     align-items: center;
+    justify-content: center;
     font-weight: var(--font-weight-medium);
 
     color: var(--accent-1-fg);
@@ -131,6 +109,7 @@ nav .nav-logo {
 
 nav .nav-logo img {
     width: 150px;
+    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
 }
 
 nav .nav-main {
@@ -354,3 +333,8 @@ a:hover {
     text-decoration: underline;
 }
 
+/* Responsiveness */
+
+@media screen and (max-width: 950px) {
+    
+}

assets/theme-dark.css

@@ -0,0 +1,27 @@
+
+body.dark-mode {
+    --bg: #282828;
+    --fg: #6eac4d;
+
+    --bg-dark: hsl(10, 10%, 20%);
+    --bg-darker: hsl(10, 10%, 17%);
+    --bg-darker-2: #1d2021;
+
+    --accent-1: #154d24;
+    --accent-1-fg: #278542;
+
+    --card-date: #928374;
+    --card-content: #d4be98;
+
+    --font-sf: 'Inter', sans-serif;
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+
+    --shadow-1: 0 0 16px 0 #16182077;
+}
+
+.dark-mode nav .nav-logo img {
+    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
+}

views/base.html

@@ -58,8 +58,8 @@
         });
     </script>
 
-
     <link rel="stylesheet" href="/assets/style.css">
+    <link rel="stylesheet" href="/assets/theme-dark.css">
 </head>
 
 <body>

views/utenti.html

@@ -3,7 +3,6 @@
 {{define "title"}}PHC • Utenti • phc.dm.xxxxx.xx{{end}}
 
 {{define "body"}}
-
 <section>
     <h2>
         <img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/find-user-male.png" />
@@ -24,7 +23,6 @@
         <!-- Dummy data -->
     </div>
 </section>
-
 <script>
     document.addEventListener('DOMContentLoaded', ({ }) => {
         const $userList = document.querySelector('.user-list');