diff --git a/assets/style.css b/assets/style.css index 9952ca6..235d07f 100644 --- a/assets/style.css +++ b/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 { - margin-left: 1rem; - margin-right: 1rem; +p:last-child { + margin-bottom: 0; } /* Elements */ nav { + margin-bottom: 1rem; + display: flex; flex-wrap: wrap; - padding: 0.5rem; + + border: 4px solid; + border-top: none; - border-bottom: 0.5rem solid gray; + 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 black; - border-right: none; -} - -nav > :last-child { - border: 2px solid black; + border: 2px solid; } 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; } @@ -143,15 +159,18 @@ header .title h1 { display: flex; flex-direction: row; flex-wrap: wrap; + + justify-content: center; - margin: 1rem 2rem; 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 { - margin-bottom: 1rem; +form .row:not(:last-child) { + 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; - height: 1.5rem; + padding: 0 4rem; + height: 1.6rem; - background: white; - border: 2px solid black; + background: 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; + } + + } \ No newline at end of file