style.css: Migliorato stile, v2

assets/style.css

@@ -21,6 +21,9 @@ body {
     margin: 0;
     min-height: 100%;
 
+    width: 100vw;
+    overflow-x: hidden;
+
     font-family: var(--font-text);
     font-weight: 300;
     font-size: 17px;
@@ -28,7 +31,7 @@ body {
 }
 
 html {
-    background: gray;
+    background: white;
 
     height: 100%;
     min-height: 100%;
@@ -54,49 +57,57 @@ h1, h2, h3, h4 {
 }
 
 p {
-    margin: 0.5rem 0 0 0;
+    margin: 0.75rem 0;
 }
 
-body > h1, body > h2, body > h3, body > h4, body > p {
+p:last-child {
-    margin-left: 1rem;
+    margin-bottom: 0;
-    margin-right: 1rem;
 }
 
 /* Elements */
 
 nav {
+    margin-bottom: 1rem;
+
     display: flex;
     flex-wrap: wrap;
-    padding: 0.5rem;
     
-    border-bottom: 0.5rem solid gray;
+    border: 4px solid;
+    border-top: none;
+
+    gap: 2px;
+    /* border-bottom: 1rem solid black; */
 }
 
 .nav-item {
+    flex-grow: 1;
+
     display: flex;
     align-items: center;
     justify-content: center;
+
     height: 2.5rem;
 
-    padding: 0 0.5rem;
+    padding: 0 0.75rem;
+    margin: -2px;
 
     font-size: 130%;
     font-weight: bold;
-}
 
-nav > * {
+    border: 2px solid;
-    border: 2px solid black;
-    border-right: none;
-}
-
-nav > :last-child {
-    border: 2px solid black;
 }
 
 nav a {
     text-decoration: none;
 }
 
+section {
+    border: 4px solid;
+
+    padding: 1rem;
+    margin-bottom: 1rem;
+}
+
 header {
     display: flex;
     width: 100%;
@@ -106,10 +117,16 @@ header {
 }
 
 header .logo {
+    flex-grow: 1;
+    
     margin-right: 1rem;
+    object-fit: contain;
+    object-position: right;
 }
 
 header .title {
+    flex-grow: 1;
+
     display: flex;
     flex-direction: column;
     justify-content: space-around;
@@ -125,7 +142,6 @@ header .title h1 {
     display: flex;
     flex-wrap: wrap;
 
-    margin: 1rem;
     gap: 0.5rem;
 }
 
@@ -144,14 +160,17 @@ header .title h1 {
     flex-direction: row;
     flex-wrap: wrap;
 
-    margin: 1rem 2rem;
+    justify-content: center;
+    
     gap: 0.25rem;
 }
 
 .user {
     display: flex;
+    flex-grow: 1;
 
     width: calc(50% - 0.25rem / 2);
+    min-width: 250px;
 
     align-items: center;
     justify-content: space-between;
@@ -191,7 +210,10 @@ footer {
     align-items: center;
     justify-content: center;
 
-    border-top: 0.5rem solid gray;
+    background: black;
+    color: white;
+
+    border-bottom: none;
 }
 
 .footer-item {
@@ -204,7 +226,7 @@ footer {
     align-items: center;
 
     max-width: 27rem;
-    margin: 1rem auto;
+    margin: 1.5rem auto;
     
     border: 2px solid black;
 }
@@ -232,6 +254,10 @@ footer {
 
 /* Common */
 
+img {
+    display: block;
+}
+
 a, a:visited {
     color: black;
 }
@@ -242,12 +268,12 @@ a:hover {
 
 hr {
     width: 100%;
-    height: 0.5rem;
+    height: 1rem;
     
     margin: 1rem 0;
     padding: 0;
     
-    background: gray;
+    background: black;
     border: none;
 }
 
@@ -260,22 +286,20 @@ li {
 }
 
 form {
-    margin: 1rem auto;
+    margin: 3rem auto;
     padding: 0.75rem;
 
     max-width: 30rem;
-    border: 2px solid black;
+    border: 4px solid black;
 }
 
 form .row {
     display: flex;
     width: 100%;
-
-    margin-bottom: 0.5rem;
 }
 
-form p {
+form .row:not(:last-child) {
-    margin-bottom: 1rem;
+    margin-bottom: 0.5rem;
 }
 
 form label {
@@ -286,6 +310,10 @@ form input[type=text], form input[type=password] {
     flex-grow: 1;
 }
 
+form button, form input[type=submit] {
+    margin-top: 0.5rem;
+}
+
 input[type=text], input[type=password] {
     font-size: 15px;
 
@@ -303,20 +331,25 @@ input[type=text]:focus, input[type=password]:focus {
 }
 
 button, input[type=submit] {
+    outline: none;
+    
     font-size: 17px;
     font-family: var(--font-title);
 
-    padding: 0 2rem;
+    padding: 0 4rem;
-    height: 1.5rem;
+    height: 1.6rem;
 
-    background: white;
+    background: black;
-    border: 2px solid black;
+    color: white;
+
+    border: none;
+    /* border: 2px solid black; */
 
     cursor: pointer;
 }
 
 button:hover, input[type=submit]:hover {
-    background: #e0e0e0;
+    background: #444;
 }
 
 /* Utils */
@@ -334,5 +367,21 @@ h2 .icons8 {
 }
 
 .hfill {
-    flex-grow: 1;
+    flex-grow: 1000;
+}
+
+@media screen and (max-width: 850px) {
+    section, nav {
+        border-left: none;
+        border-right: none;
+    }
+}
+
+@media screen and (max-width: 30rem) {
+    form {
+        border-left: none;
+        border-right: none;
+    }
+
+
 }