From 16f7dbd235835405e2c28fdf25562c0dba6c3e0e Mon Sep 17 00:00:00 2001 From: Kristofers Solo Date: Tue, 17 Jan 2023 23:22:07 +0200 Subject: [PATCH] Remade navigation bar --- static/karbs/css/karbs.css | 17 +- static/main/css/index.css | 50 ++--- static/main/css/layout.css | 202 +++++++++++++----- static/main/img/icons/icon-close.svg | 63 ++++++ static/main/img/icons/icon-hamburger-menu.svg | 67 ++++++ static/main/img/{ => icons}/logo.svg | 0 static/main/js/navigation.js | 13 ++ templates/layout.html | 49 +++-- templates/main/index.html | 16 +- 9 files changed, 361 insertions(+), 116 deletions(-) create mode 100644 static/main/img/icons/icon-close.svg create mode 100644 static/main/img/icons/icon-hamburger-menu.svg rename static/main/img/{ => icons}/logo.svg (100%) create mode 100644 static/main/js/navigation.js diff --git a/static/karbs/css/karbs.css b/static/karbs/css/karbs.css index 95a84a6..9b86b2e 100644 --- a/static/karbs/css/karbs.css +++ b/static/karbs/css/karbs.css @@ -1,13 +1,14 @@ main { - border: 1px solid #30363d; + border: var(--border); + border-radius: var(--border-radius); max-width: 700px; - color: #f0f6fc; + color: var(--text-color); padding: 50px; margin: 100px auto 100px auto; } hr { - color: #30363d; + color: var(--hr-color); } h1 { @@ -30,7 +31,7 @@ p { a { text-decoration: none; font-weight: bold; - color: #58a6ff; + color: var(--link-text-color); } a:hover { @@ -39,14 +40,14 @@ a:hover { code { font-family: Consolas, "courier new"; - color: #f0f6fc; - background-color: #393f48; - border-radius: 8px; + color: var(--text-color); + background-color: var(--code-bg-color); + border-radius: var(--border-radius); padding: 3px; } pre code { - background-color: #161b22; + background-color: var(--bg); display: block; padding: 20px; } diff --git a/static/main/css/index.css b/static/main/css/index.css index 39a789f..d81e257 100644 --- a/static/main/css/index.css +++ b/static/main/css/index.css @@ -1,25 +1,25 @@ -p { - color: #f0f6fc; - font-size: 20px; - text-align: center; - margin-top: 10px; -} - -a { - text-decoration: none; - font-weight: bold; - color: #58a6ff; -} - -a:hover { - text-decoration: underline; -} - -.center { - margin: 0; - position: absolute; - top: 50%; - left: 50%; - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); -} +/* h1, */ +/* p { */ +/* color: var(--text-color); */ +/* font-size: 20px; */ +/* text-align: center; */ +/* margin-top: 10px; */ +/* } */ +/**/ +/* a { */ +/* text-decoration: none; */ +/* color: var(--link-text-color); */ +/* } */ +/**/ +/* a:hover { */ +/* text-decoration: underline; */ +/* } */ +/**/ +/* .center { */ +/* margin: 0; */ +/* position: absolute; */ +/* top: 50%; */ +/* left: 50%; */ +/* -ms-transform: translate(-50%, -50%); */ +/* transform: translate(-50%, -50%); */ +/* } */ diff --git a/static/main/css/layout.css b/static/main/css/layout.css index 63261fa..10bbc20 100644 --- a/static/main/css/layout.css +++ b/static/main/css/layout.css @@ -1,68 +1,158 @@ +:root { + --bg: #0d1117; + --bg-accent: #1a1e25; + --border-radius: 8px; + --border: 1px solid #30363d; + --hover-text-color: #b9bbbd; + --hr-color: #30363d; + --link-text-color: #58a6ff; + --nav-size: 60px; + --speed: 500ms; + --text-color: #f0f6fc; + --code-bg-color: #393f48; + --ff-sans-normal: "Roboto", sans-serif; + --fs-16: 16px; + --fs-20: 20px; +} + html, body { - font-family: "Roboto", sans-serif; - background: #0d1117; + font-family: var(--ff-sans-normal); + color: var(--text-color); + background-color: var(--bg); + line-height: 1.5; + min-height: 100vh; + min-width: 300px; + + display: grid; + grid-template-rows: min-content 1fr; + + overflow-x: hidden; } main { min-height: 100%; } -/* HEADER */ - -header ul { - width: 100%; - list-style-type: none; - overflow: hidden; - background-color: #161b22; - position: sticky; - top: 0; -} - -header li { - text-align: center; - font-weight: bold; - font-size: 24px; - float: left; - width: calc(100% / 2); -} - -header li a { - display: inline-block; - color: #f0f6fc; - padding: 14px 16px; - text-decoration: none; -} - -header li a:hover { - text-decoration: none; - color: #b9bbbd; -} - -/* FOOTER */ - -.page-container { - position: relative; - min-height: 100vh; -} - -.content-wrap { - padding-bottom: 2.5rem; -} - -footer { - position: absolute; - bottom: 0; - width: 100%; - height: auto; - background-color: #161b22; - color: #f0f6fc; - flex-wrap: wrap; +/* Utility classes */ +.flex { display: flex; - justify-content: space-around; + gap: var(--gap, 1rem); } -footer p { - font-size: 16px; - margin: 10px 0; +.uppercase { + text-transform: uppercase; +} + +.bold { + font-weight: 700; +} + +.sr-only { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */ + -webkit-clip-path: inset(50%) !important; + clip-path: inset(50%) !important; /* 2 */ + height: 1px !important; + margin: -1px !important; + overflow: hidden !important; + padding: 0 !important; + position: absolute !important; + width: 1px !important; + white-space: nowrap !important; /* 3 */ +} + +/* Navigation bar */ + +.logo { + margin: 2rem; + width: 2rem; + aspect-ratio: 1; +} + +.primary-header { + align-items: center; + justify-content: space-between; +} + +.mobile-nav-toggle { + display: none; +} + +.primary-navigation { + background: #161b22e6; +} + +@supports (backdrop-filter: blur(2rem)) { + .primary-navigation { + background: #161b2280; + backdrop-filter: blur(2rem); + } +} + +.primary-navigation a { + color: var(--text-color); + text-decoration: none; +} +.primary-navigation a:hover { + color: var(--hover-text-color); +} + +.primary-navigation a > [aria-hidden="true"] { + font-weight: 700; + margin-inline-end: 0.75rem; +} + +@media (max-width: 35em) { + .primary-navigation { + --gap: 3rem; + + position: fixed; + z-index: 1000; + inset: 0 0 0 10%; + + flex-direction: column; + padding: min(30vh, 10rem) 2rem; + + transform: translateX(100%); + transition: transform 350ms ease-out; + } + + .primary-navigation[data-visible="true"] { + transform: translateX(0%); + } + + .mobile-nav-toggle { + display: block; + position: absolute; + z-index: 9999; + background-color: transparent; + background-image: url("../img/icons/icon-hamburger-menu.svg"); + background-repeat: no-repeat; + width: 3rem; + border: 0; + aspect-ratio: 1; + top: 2rem; + right: 2rem; + } + + .mobile-nav-toggle[aria-expanded="true"] { + background-color: transparent; + background-image: url("../img/icons/icon-close.svg"); + background-repeat: no-repeat; + } +} + +@media (min-width: 35em) and (max-width: 55em) { + .primary-navigation a > [aria-hidden="true"] { + display: none; + } +} + +@media (min-width: 35em) { + .primary-navigation { + --gap: clamp(1.5rem, 5vw, 3rem); + padding-block: 16px; + padding-inline: clamp(3rem, 8vw, 10rem); + } } diff --git a/static/main/img/icons/icon-close.svg b/static/main/img/icons/icon-close.svg new file mode 100644 index 0000000..40bf5f6 --- /dev/null +++ b/static/main/img/icons/icon-close.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + diff --git a/static/main/img/icons/icon-hamburger-menu.svg b/static/main/img/icons/icon-hamburger-menu.svg new file mode 100644 index 0000000..e091bfc --- /dev/null +++ b/static/main/img/icons/icon-hamburger-menu.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + diff --git a/static/main/img/logo.svg b/static/main/img/icons/logo.svg similarity index 100% rename from static/main/img/logo.svg rename to static/main/img/icons/logo.svg diff --git a/static/main/js/navigation.js b/static/main/js/navigation.js new file mode 100644 index 0000000..a1cbda8 --- /dev/null +++ b/static/main/js/navigation.js @@ -0,0 +1,13 @@ +const PRIMARY_NAV = document.querySelector(".primary-navigation") +const NAV_TOGGLE = document.querySelector(".mobile-nav-toggle") + +NAV_TOGGLE.addEventListener("click", () => { + const visibility = PRIMARY_NAV.getAttribute("data-visible") === "false" + if (visibility) { + PRIMARY_NAV.setAttribute("data-visible", true) + NAV_TOGGLE.setAttribute("aria-expanded", true) + } else { + PRIMARY_NAV.setAttribute("data-visible", false) + NAV_TOGGLE.setAttribute("aria-expanded", false) + } +}) diff --git a/templates/layout.html b/templates/layout.html index d8e62e7..bdc4e52 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -3,9 +3,7 @@ - - + {% block title %}{% endblock %} @@ -16,26 +14,35 @@ type="text/css" href="{% static 'main/css/layout.css' %}"/> {% block meta %}{% endblock %} + -
-
-
-
- -
-
-
- {% block content %}{% endblock %} -
+
+
+ + +
-
+ + + +
+ {% block content %}{% endblock %} +
diff --git a/templates/main/index.html b/templates/main/index.html index 661523d..891f23b 100644 --- a/templates/main/index.html +++ b/templates/main/index.html @@ -7,10 +7,14 @@ href="{% static 'main/css/index.css' %}"/> {% endblock %} {% block content %} -
-

At the moment this website is under construction.

-

- For now you can check out KARBS. -

-
+ + + + + + + + + + {% endblock %}