From cb3ecd2f7cd3cbec626cad0d1167521d3b6d44cc Mon Sep 17 00:00:00 2001 From: Eugene Serb <46799701+eugene-serb@users.noreply.github.com> Date: Mon, 20 Jun 2022 19:01:16 +0300 Subject: [PATCH] Updated header styles --- about.html | 1 + css/styles.css | 174 +++++++++++++++++++++++++++++++------------------ 2 files changed, 110 insertions(+), 65 deletions(-) diff --git a/about.html b/about.html index a08bb43..9d966a6 100644 --- a/about.html +++ b/about.html @@ -94,6 +94,7 @@
Follow me on Twitter: @eugene_serb +
Mail me: eugene.serb@gmail.com diff --git a/css/styles.css b/css/styles.css index 0e517d3..1cc62d3 100644 --- a/css/styles.css +++ b/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 */ -/* ------ */ - -.banner-container { - min-height: 100vh; - display: flex; -} - -.banner { - margin: auto; - padding: 16px; -} - -/* ------------ */ -/* ITEMS STYLES */ -/* ------------ */ +/* ----------------- */ +/* COMPONENTS STYLES */ +/* ----------------- */ /* ------ */ /* HEADER */ /* ------ */ .header { - border-bottom: 32px solid var(--color-border); - background: var(--color-b); + border-bottom: 32px solid var(--color-header-borderline); + 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); -} - - .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); - } + cursor: default; } .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-logo); - } - - .navigation__item a::selection { - background: var(--color-a); + border-color: var(--color-header-navigation-link-hover); + color: var(--color-header-navigation-link-hover); } @media only screen and (min-width: 720px) { .header-wrapper { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 32px; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + gap: 64px; } .logo-wrapper { - grid-column: 1 / 2; - grid-row: 1 / 2; + width: 50%; 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; +} +