Migliorati bottoni per pagina di login

public/style.css

@@ -7,7 +7,9 @@
 
     --bg-dark: hsl(220, 5%, 93%);
     --bg-darker: hsl(220, 5%, 90%);
-    --bg-darker-2: #dadada;
+    --bg-darker-2: #d5d5d5;
+    --bg-darker-2-1: #c8c8c8;
+    --bg-darker-3: #c0c0c0;
 
     --accent-1: #278542;
     --accent-1-fg: #154d24;
@@ -22,6 +24,14 @@
     --font-weight-bold: 700;
 
     --shadow-1: 0 0 16px 0 #00000018;
+
+    --text-input-bg: #fff;
+
+    --bg-darker-2-1: #c8c8c8;
+    --accent-2-lighter: #5cc969;
+    --accent-2: #4eaa59;
+    --accent-2-darker: #2e974c;
+    --accent-2-darkest: #002d0d;
 }
 
 * {
@@ -352,49 +362,43 @@ a:hover {
 /* Buttons */
 
 button, .button {
-  font-family: var(--font-sf);
+    font-family: var(--font-sf);
-  font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
-  font-size: 17px;
+    font-size: 17px;
-
+    
-  background: #278542;
+    /* gray variant #b3b3b3 */
-  border: none;
+    border: 1px solid var(--bg-darker-3);
-  height: 2rem;
+    /* gray variant #bfbfbf */
-  padding: 0 1rem;
+    background: var(--bg-darker-2);
-  
+    /* gray variant #333333 */
-  border-right: 5px solid #ecc333;
+    color: var(--fg);
-  position: relative;
+
-  
+    height: 2rem;
-  z-index: 2;
+
-  color: #111;
+    border-radius: 4px;
-  transition: all 100ms ease-in-out;
+
-  box-shadow: 0 0 0 0 transparent;
+    padding: 0 1rem;
-  cursor: pointer;
+
-}
+    transition: all 100ms ease-in-out;
-
+    
-button::before, .button::before {
+    box-shadow: 0 4px 8px 0 #00000022;
-  position: absolute;
+
-  content: "";
+    cursor: pointer;
-  top: -5px;
+}
-  bottom: -5px;
+
-  background: #278542;
+button:hover, .button:hover {
-  width: 100%;
+    background: var(--bg-darker-2-1);
-  left: 0;
+    box-shadow: 0 4px 8px 0 #00000033;
-  z-index: -1;
+}
-  border-radius: 2px;
+
-  transition: all 100ms ease-in-out;
+button.primary {
-  -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at top right, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom right, transparent 0, transparent 5px, black 6px);
+    border: 1px solid var(--accent-2-darker);
-  -webkit-mask-position: top left, top right, bottom left, bottom right;
+    background: var(--accent-2);
-  -webkit-mask-repeat: no-repeat;
+    color: var(--accent-2-darkest);
-  -webkit-mask-size: 50% 50%;
+}
-  mask-image: radial-gradient(circle at top left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at top right, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom right, transparent 0, transparent 5px, black 6px);
+
-  mask-position: top left, top right, bottom left, bottom right;
+button.primary:hover {
-  mask-repeat: no-repeat;
+    background: var(--accent-2-lighter);
-  mask-size: 50% 50%;
-}
-
-button:hover, input[type=submit]:hover, .button:hover {
-  color: #f22;
-  box-shadow: 0 4px 13px 0 #00000044;
 }
 
 /* Text Fields */
@@ -408,7 +412,9 @@ input[type=text], input[type=password] {
 
     font-size: 17px;
 
-    background: #fff;
+    background: var(--text-input-bg);
+    color: var(--fg);
+
     border-radius: 4px;
     border: 1px solid var(--bg-darker-2);
     box-shadow: 0 0 8px 0 #00000020;
@@ -424,30 +430,32 @@ input[type=password] {
 
 /* Forms */
 
-.field-set {
+form .field {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+form .field-set {
     display: grid;
-    grid-template-columns: 1fr 2fr;
+    grid-template-columns: auto 1fr;
     grid-auto-rows: auto;
 
-    gap: 0.5rem;
+    gap: 0.5rem 1rem;
     padding: 1rem;
 }
 
-.field-set label {
+form .field-set label {
     grid-column: 1 / 2;
+    align-self: center;
+    justify-self: end;
 }
 
-.field-set input {
+form .field-set input {
     grid-column: 2 / 3;
 }
 
-.field-set .alone {
-    grid-column: 1 / 3;
-    place-self: center;
-
-    margin-top: 1rem;
-}
-
 /* Pages */
 
 .page-home {

public/theme-dark.css

@@ -1,11 +1,13 @@
 
 body.dark-mode {
     --bg: #282828;
-    --fg: #6eac4d;
+    --fg: #a6cc92;
+    /* --fg: #6eac4d; */
 
     --bg-dark: hsl(10, 10%, 20%);
     --bg-darker: hsl(10, 10%, 17%);
     --bg-darker-2: #1d2021;
+    --bg-darker-3: #101111;
 
     --accent-1: #154d24;
     --accent-1-fg: #278542;
@@ -20,6 +22,34 @@ body.dark-mode {
     --font-weight-bold: 700;
 
     --shadow-1: 0 0 16px 0 #16182077;
+    
+    --text-input-bg: var(--bg-darker);
+
+    --bg-darker-2-1: #c8c8c8;
+    --accent-2-lighter: #5cc969;
+    --accent-2: #4eaa59;
+    --accent-2-darker: #2e974c;
+    --accent-2-darkest: #002d0d;
+}
+
+.dark-mode button {
+    border: 1px solid var(--bg-darker-2);
+    background: var(--bg-darker);
+    color: #afafaf;
+}
+
+.dark-mode button:hover {
+    background: var(--bg-dark);
+}
+
+.dark-mode button.primary {
+    border: 1px solid #113a1c;
+    background: #1e6732;
+    color: #b7e3c3;
+}
+
+.dark-mode button.primary:hover {
+    background: #23773a;
 }
 
 .dark-mode nav .nav-logo img {

views/home.html

@@ -8,7 +8,7 @@
 <!-- Non avevo molta fantasia per il nome di questa classe -->
 <section class="super">
     <div class="block image">
-        <img src="assets/images/logo-circuit-board.svg" alt="phc-logo">
+        <img src="/public/images/logo-circuit-board.svg" alt="phc-logo">
     </div>
     <div class="block text">
         <h1>
@@ -98,5 +98,5 @@
     </div>
 </section>
 
-<script src="/assets/home.js"></script>
+<script src="/public/home.js"></script>
 {{end}}

views/login.html

@@ -20,9 +20,10 @@
                 <input type="text" name="username" id="login-username">
                 
                 <label for="login-password">Password:</label>
-                <input type="password" name="password" id="login-password">
+                <input type="password" name="password" id="login-password">    
-                
+            </div>
-                <button class="alone">Accedi</button>
+            <div class="field">
+                <button class="primary">Accedi</button>
             </div>
         </form>
     </div>
@@ -35,7 +36,7 @@
         email all'indirizzo <a href="mailto:{{ .Config.Email }}">{{ .Config.Email }}</a>.
     </p>
     <p>
-        * In realtà ancora non esiste il modulo
+        *In realtà il modulo ancora non esiste
     </p>
 </section>