Updated header styles

about.html

@@ -94,6 +94,7 @@
                 <br />
                 <span>Follow me on Twitter: </span>
                 <a href="https://twitter.com/eugene_serb" target="_blank">@eugene_serb</a>
+                <br />
                 <span>Mail me: </span>
                 <a href="mailto:eugene.serb@gmail.com" target="_blank">eugene.serb@gmail.com</a>
             </div>

css/styles.css

@@ -26,20 +26,36 @@
     --color-e: #B3DEE2;
 }
 
+:root {
+    /* Base numbers */
+    --number-border-radius: 8px;
+    --number-border-size: 2px;
+}
+
 @media (prefers-color-scheme: light) {
     :root {
+        --color-border: var(--color-a);
         --color-background: var(--color-white);
-        --color-content-background: var(--color-milk);
-        --color-logo: var(--color-white);
-        --color-header: var(--color-coal);
         --color-text: var(--color-coal);
+        --color-text-header: var(--color-coal);
         --color-link: var(--color-b);
         --color-link-hover: var(--color-a);
-        --color-border: var(--color-a);
         --color-selection: var(--color-b);
+        --color-fieldset-border: var(--color-c);
         --color-table-header-background: var(--color-b);
         --color-table-header-text: var(--color-white);
         --color-table-item: var(--color-c);
+        /**/
+        --color-header-background: var(--color-b);
+        --color-header-borderline: var(--color-a);
+        --color-header-selection: var(--color-a);
+        --color-header-logo: var(--color-white);
+        --color-header-navigation-link: var(--color-white);
+        --color-header-navigation-link-hover: var(--color-white);
+        /**/
+        --color-content-background: var(--color-milk);
+        --color-logo: var(--color-white);
+        --color-header: var(--color-coal);
         --color-anotation: var(--color-coal);
         --color-pattern-button: var(--color-c);
         --color-pattern-text: var(--color-white);
@@ -48,18 +64,28 @@
 
 @media (prefers-color-scheme: dark) {
     :root {
+        --color-border: var(--color-a);
         --color-background: var(--color-coal);
-        --color-content-background: var(--color-c);
-        --color-logo: var(--color-white);
-        --color-header: var(--color-coal);
         --color-text: var(--color-coal);
+        --color-text-header: var(--color-coal);
         --color-link: var(--color-b);
         --color-link-hover: var(--color-a);
-        --color-border: var(--color-a);
         --color-selection: var(--color-b);
+        --color-fieldset-border: var(--color-c);
         --color-table-header-background: var(--color-b);
         --color-table-header-text: var(--color-white);
         --color-table-item: var(--color-c);
+        /**/
+        --color-header-background: var(--color-a);
+        --color-header-borderline: var(--color-b);
+        --color-header-selection: var(--color-b);
+        --color-header-logo: var(--color-white);
+        --color-header-navigation-link: var(--color-white);
+        --color-header-navigation-link-hover: var(--color-white);
+        /**/
+        --color-content-background: var(--color-c);
+        --color-logo: var(--color-white);
+        --color-header: var(--color-coal);
         --color-anotation: var(--color-milk);
         --color-pattern-button: var(--color-milk);
         --color-pattern-text: var(--color-black);
@@ -85,12 +111,17 @@ body {
     background: var(--color-selection);
 }
 
+:focus {
+    border-bottom: 2px solid var(--color-selection);
+}
+
 :focus-visible {
     outline: 2px solid var(--color-selection);
+    border-color: transparent;
 }
 
 h1, h2, h3, h4, h5, h6 {
-    color: var(--color-header);
+    color: var(--color-text-header);
     font-weight: 500;
     margin-block-start: 0.382em;
     margin-block-end: 0.618em;
@@ -140,9 +171,21 @@ hr {
     margin-block-end: 0.5em;
 }
 
+legend {
+    padding: 2px 4px;
+    text-align: left;
+}
+
+fieldset {
+    border: 2px solid var(--color-border-alpha);
+    border-radius: 4px;
+    padding: 8px;
+}
+
 button, input, textarea, select {
     padding: 4px 8px;
     border: 2px solid var(--color-link);
+    border-radius: var(--number-border-radius);
     background: var(--color-milk);
     color: var(--color-text);
     font-size: 16px;
@@ -168,17 +211,6 @@ option {
         color: var(--color-white);
     }
 
-fieldset {
-    border: 2px solid var(--color-border-alpha);
-    border-radius: 4px;
-    padding: 8px;
-}
-
-legend {
-    padding: 2px 4px;
-    text-align: left;
-}
-
 /* ------ */
 /* TABLES */
 /* ------ */
@@ -242,33 +274,32 @@ table, th, td {
     padding-right: 16px;
 }
 
-/* ------ */
+/* ----------------- */
-/* BANNER */
+/* COMPONENTS STYLES */
-/* ------ */
+/* ----------------- */
-
-.banner-container {
-    min-height: 100vh;
-    display: flex;
-}
-
-.banner {
-    margin: auto;
-    padding: 16px;
-}
-
-/* ------------ */
-/* ITEMS STYLES */
-/* ------------ */
 
 /* ------ */
 /* HEADER */
 /* ------ */
 
 .header {
-    border-bottom: 32px solid var(--color-border);
+    border-bottom: 32px solid var(--color-header-borderline);
-    background: var(--color-b);
+    background: var(--color-header-background);
 }
 
+    .header ::selection {
+        background: var(--color-header-selection);
+    }
+
+    .header :focus {
+        border-bottom: 2px solid var(--color-header-navigation-link-hover);
+    }
+
+    .header :focus-visible {
+        outline: 2px solid var(--color-header-navigation-link-hover);
+        border-color: transparent;
+    }
+
 .header-wrapper {
     padding-top: 64px;
     padding-bottom: 16px;
@@ -282,18 +313,7 @@ table, th, td {
     font-size: 48px;
     font-weight: 500;
     color: var(--color-logo);
-}
+    cursor: default;
-
-    .logo-wrapper__logo::selection {
-        background-color: var(--color-a);
-    }
-
-@media only screen and (min-width: 540px) {
-    .logo-wrapper__logo {
-        font-size: 64px;
-        font-weight: 500;
-        color: var(--color-logo);
-    }
 }
 
 .menu-wrapper {
@@ -305,7 +325,10 @@ table, th, td {
     padding: 0;
     list-style-type: none;
     display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
     justify-content: space-between;
+    gap: 8px;
 }
 
 .navigation__item {
@@ -314,39 +337,42 @@ table, th, td {
 }
 
     .navigation__item a {
-        color: var(--color-logo);
+        border-color: transparent;
+        color: var(--color-header-navigation-link);
     }
 
         .navigation__item a:hover {
-            color: var(--color-logo);
+            border-color: var(--color-header-navigation-link-hover);
-            border-color: var(--color-logo);
+            color: var(--color-header-navigation-link-hover);
-        }
-
-        .navigation__item a::selection {
-            background: var(--color-a);
         }
 
 @media only screen and (min-width: 720px) {
     .header-wrapper {
-        display: grid;
+        display: flex;
-        grid-template-columns: 1fr 1fr;
+        flex-direction: row;
-        gap: 32px;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        gap: 64px;
     }
 
     .logo-wrapper {
-        grid-column: 1 / 2;
+        width: 50%;
-        grid-row: 1 / 2;
         text-align: left;
     }
 
     .menu-wrapper {
+        width: 50%;
         margin-top: 0px;
-        grid-column: 2 / 3;
-        grid-row: 1 / 2;
         align-self: flex-end;
     }
 }
 
+@media only screen and (min-width: 1024px) {
+    .logo-wrapper__logo {
+        font-size: 64px;
+    }
+}
+
 /* ----------------------------------- */
 /* MAIN, PAGE FLOW AND CONTENT SECTION */
 /* ----------------------------------- */
@@ -510,3 +536,21 @@ table, th, td {
     word-break: break-all;
 }
 
+/* ----- */
+/* PAGES */
+/* ----- */
+
+/* ------ */
+/* BANNER */
+/* ------ */
+
+.banner-container {
+    min-height: 100vh;
+    display: flex;
+}
+
+.banner {
+    margin: auto;
+    padding: 16px;
+}
+