From 63d40fd39ed19ecc2efedac59c2d4b978c8d1945 Mon Sep 17 00:00:00 2001 From: vlados31 Date: Sun, 18 Sep 2022 21:26:32 +0300 Subject: [PATCH] Top bar in site. Work od desktop and mobiles, missing account icon --- static/css/style.css | 119 ++++++++++++++++++++++++++++++------------- templates/base.html | 37 ++++++++++---- 2 files changed, 110 insertions(+), 46 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 8ef1acb..0b54b43 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,16 +1,20 @@ /* ========== THEME ========== */ body { - --text-color: #222; + --text-color: #111; + --brand-color: #231765; --bkg-color: #fff; - --bkg-color2: #bbb; + --bkg-color2: #ccc; + --bkg-color3: #aaa; } @media (prefers-color-scheme: dark) { /* defaults to dark theme */ body { --text-color: #eee; + --brand-color: #654dea; --bkg-color: #121212; - --bkg-color2: #303030; + --bkg-color2: #202020; + --bkg-color3: #353435; } } @@ -32,55 +36,98 @@ h1, p { /* ========== MAIN STYLES ========== */ -header, #logo-container, header nav { +#header-wrapper { + display: flex; + margin: 3em 0; +} + +#header-wrapper * { + color: var(--brand-color); + font-weight: bold; +} + +header { display: flex; - flex-wrap: nowrap; flex-direction: row; -} - -header, header nav { - align-content: center; - border: 1px solid green; -} - -#logo-container { align-content: baseline; - margin: 0.5em; -} - -#logo-container span { - margin: auto 0; - font-size: 32px; -} - -nav { - display: flex; - flex-direction: row; - - background: var(--bkg-color2); + flex-wrap: nowrap; margin: 0 auto; } -nav * { - margin: auto 0.5em; +header > * { + margin: auto 1em; text-decoration: none; font-size: medium; - border: 1px solid red; } -.header-wrapper { - display: flex; - flex-direction: row; - justify-content: center; - margin: 1em; +#logo-text { + font-size: 32px; } -header img { - margin-right: 2em; +#logo-image { width: 50px; height: 50px; } +/* ========== Dropdown menu ========== */ +.dropdown-button { + padding: 16px; + font-size: 16px; + border: none; +} + +.dropdown { + position: relative; + display: inline-block; +} + +.dropdown-content { + display: none; + position: absolute; + background-color: var(--bkg-color2); + min-width: 160px; + z-index: 1; +} + +.dropdown-content a { + padding: 12px 16px; + text-decoration: none; + display: block; +} + +.dropdown-content a:hover { + background-color: var(--bkg-color3); +} + +.dropdown-wrapper:hover .dropdown-content { + display: block; +} + +.dropdown-wrapper:hover .dropdown-button { + background-color: var(--bkg-color3); +} + +#dropdown-in-header { + display: none; +} + +@media screen and (max-width: 900px) { + #header-wrapper { + display: block; + } + + header { + justify-content: space-between; + } + + #dropdown-in-header { + display: block; + } + + header > a { + display: none; + } +} h1 { text-align: center; diff --git a/templates/base.html b/templates/base.html index b12589a..cd785e1 100644 --- a/templates/base.html +++ b/templates/base.html @@ -7,17 +7,34 @@ {% load static %} + + + + {% block styles %} {% endblock %} -
-
- logo image - АРКА -
+ +
+ - {% if user.is_authenticated %} Добро пожаловать, {{ user.name }} {{ user.surname }}