From eaf0a7d8ab4d9ca715fd566eb09ead8aa242d5a4 Mon Sep 17 00:00:00 2001 From: Kristofers Solo Date: Thu, 19 Jan 2023 18:15:44 +0200 Subject: [PATCH] Added navigation menu animation --- static/main/css/colors.css | 64 +++++++++++ static/main/css/layout.css | 107 +----------------- static/main/css/navigation_button.css | 63 +++++++++++ static/main/img/icons/icon-close.svg | 63 ----------- static/main/img/icons/icon-hamburger-menu.svg | 67 ----------- static/main/js/navigation.js | 10 +- templates/layout.html | 16 ++- 7 files changed, 147 insertions(+), 243 deletions(-) create mode 100644 static/main/css/colors.css create mode 100644 static/main/css/navigation_button.css delete mode 100644 static/main/img/icons/icon-close.svg delete mode 100644 static/main/img/icons/icon-hamburger-menu.svg diff --git a/static/main/css/colors.css b/static/main/css/colors.css new file mode 100644 index 0000000..5d10809 --- /dev/null +++ b/static/main/css/colors.css @@ -0,0 +1,64 @@ +:root { + --color-scale-black: #010409; + --color-scale-white: #ffffff; + + --color-scale-white-transparent-7: #ffffffbc; + + --color-scale-gray-0: #f0f6fc; + --color-scale-gray-1: #c9d1d9; + --color-scale-gray-2: #b1bac4; + --color-scale-gray-3: #8b949e; + --color-scale-gray-4: #6e7681; + --color-scale-gray-5: #484f58; + --color-scale-gray-6: #30363d; + --color-scale-gray-7: #21262d; + --color-scale-gray-8: #161b22; + --color-scale-gray-9: #0d1117; + + --color-scale-gray-0-transparent-10: #f0f6fc1a; + --color-scale-gray-8-transparent-50: #161b2280; + --color-scale-gray-9-transparent-0: #0d111700; + + --color-scale-purple-0: #eddeff; + --color-scale-purple-1: #e2c5ff; + --color-scale-purple-2: #d2a8ff; + --color-scale-purple-3: #bc8cff; + --color-scale-purple-4: #a371f7; + --color-scale-purple-5: #8957e5; + --color-scale-purple-6: #6e40c9; + --color-scale-purple-7: #553098; + --color-scale-purple-8: #3c1e70; + --color-scale-purple-9: #271052; + + --color-scale-purple-4-transparent-06: #a371f70f; + + --color-canvas-default: var(--color-scale-gray-9); + --color-canvas-default-transparent: var(--color-scale-gray-9-transparent-0); + --color-canvas-subtle: var(--color-scale-gray-8); + + --color-border-default: var(--color-scale-gray-6); + + --color-header-bg-default: var(--color-scale-gray-8); + --color-header-bg-transparent: var(--color-scale-gray-8-transparent-5); + --color-header-text: var(--color-scale-white-transparent-7); + + --color-btn-text: var(--color-scale-gray-1); + --color-btn-bg: var(--color-scale-gray-7); + --color-btn-border: var(--color-scale-gray-0-transparent-1); + --color-btn-hover-bg: var(--color-scale-gray-6); + --color-btn-hover-border: var(--color-scale-gray-3); + --color-btn-active-border: var(--color-scale-gray-5); + + --color-fg-default: var(--color-scale-gray-1); + --color-fg-muted: var(--color-scale-gray-3); + --color-fg-subtle: var(--color-scale-gray-4); + --color-fg-on-emphasis: var(--color-scale-white); + --color-text-hover: var(--color-fg-muted); + + --color-accent-fg: var(--color-scale-purple-4); + + --color-text-link: var(--color-accent-fg); + + font-size: 16px; + font-family: "Roboto", arial, sans-serif; +} diff --git a/static/main/css/layout.css b/static/main/css/layout.css index 2c8837f..5e4ef53 100644 --- a/static/main/css/layout.css +++ b/static/main/css/layout.css @@ -1,68 +1,3 @@ -:root { - --color-scale-black: #010409; - --color-scale-white: #ffffff; - - --color-scale-white-transparent-7: #ffffffbc; - - --color-scale-gray-0: #f0f6fc; - --color-scale-gray-1: #c9d1d9; - --color-scale-gray-2: #b1bac4; - --color-scale-gray-3: #8b949e; - --color-scale-gray-4: #6e7681; - --color-scale-gray-5: #484f58; - --color-scale-gray-6: #30363d; - --color-scale-gray-7: #21262d; - --color-scale-gray-8: #161b22; - --color-scale-gray-9: #0d1117; - - --color-scale-gray-0-transparent-10: #f0f6fc1a; - --color-scale-gray-8-transparent-50: #161b2280; - --color-scale-gray-9-transparent-0: #0d111700; - - --color-scale-purple-0: #eddeff; - --color-scale-purple-1: #e2c5ff; - --color-scale-purple-2: #d2a8ff; - --color-scale-purple-3: #bc8cff; - --color-scale-purple-4: #a371f7; - --color-scale-purple-5: #8957e5; - --color-scale-purple-6: #6e40c9; - --color-scale-purple-7: #553098; - --color-scale-purple-8: #3c1e70; - --color-scale-purple-9: #271052; - - --color-scale-purple-4-transparent-06: #a371f70f; - - --color-canvas-default: var(--color-scale-gray-9); - --color-canvas-default-transparent: var(--color-scale-gray-9-transparent-0); - --color-canvas-subtle: var(--color-scale-gray-8); - - --color-border-default: var(--color-scale-gray-6); - - --color-header-bg-default: var(--color-scale-gray-8); - --color-header-bg-transparent: var(--color-scale-gray-8-transparent-5); - --color-header-text: var(--color-scale-white-transparent-7); - - --color-btn-text: var(--color-scale-gray-1); - --color-btn-bg: var(--color-scale-gray-7); - --color-btn-border: var(--color-scale-gray-0-transparent-1); - --color-btn-hover-bg: var(--color-scale-gray-6); - --color-btn-hover-border: var(--color-scale-gray-3); - --color-btn-active-border: var(--color-scale-gray-5); - - --color-fg-default: var(--color-scale-gray-1); - --color-fg-muted: var(--color-scale-gray-3); - --color-fg-subtle: var(--color-scale-gray-4); - --color-fg-on-emphasis: var(--color-scale-white); - --color-text-hover: var(--color-fg-muted); - - --color-accent-fg: var(--color-scale-purple-4); - - --color-text-link: var(--color-accent-fg); - - font-size: 16px; - font-family: "Roboto", arial, sans-serif; -} - html, body { color: var(--color-fg-default); @@ -89,25 +24,12 @@ body { 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; + margin: 1rem; + padding: 1rem; + width: 3rem; aspect-ratio: 1; } @@ -116,11 +38,6 @@ body { justify-content: space-between; } -.mobile-nav-toggle { - display: none; - cursor: pointer; -} - .primary-navigation { background-color: var(--color-header-bg-default); } @@ -165,23 +82,7 @@ body { } .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; + display: flex; } } diff --git a/static/main/css/navigation_button.css b/static/main/css/navigation_button.css new file mode 100644 index 0000000..1a8cd4d --- /dev/null +++ b/static/main/css/navigation_button.css @@ -0,0 +1,63 @@ +:root { + --button-width: 3rem; + --line-width: 3rem; + --line-height: 0.3rem; + --line-border-radius: calc(var(--line-height) / 2); +} + +.mobile-nav-toggle { + display: none; + cursor: pointer; + justify-content: center; + align-items: center; + width: var(--button-width); + aspect-ratio: 1; + cursor: pointer; + transition: all 0.5s ease-in-out; + position: absolute; + z-index: 9999; + border: 0; + top: 1rem; + right: 1rem; + padding: 1rem; +} + +.mobile-nav-toggle__line { + width: var(--line-width); + height: var(--line-height); + background: var(--color-fg-default); + border-radius: var(--line-border-radius); + transition: all 0.5s ease-in-out; +} + +.mobile-nav-toggle__line::before, +.mobile-nav-toggle__line::after { + content: ""; + position: absolute; + width: var(--line-width); + height: var(--line-height); + background: var(--color-fg-default); + border-radius: var(--line-border-radius); + transition: all 0.5s ease-in-out; +} +.mobile-nav-toggle__line::before { + transform: translateY(-16px); +} + +.mobile-nav-toggle__line::after { + transform: translateY(16px); +} + +.mobile-nav-toggle.open .mobile-nav-toggle__line { + transform: translateX(-50px); + background: transparent; + box-shadow: none; +} + +.mobile-nav-toggle.open .mobile-nav-toggle__line::before { + transform: rotate(45deg) translate(35px, -35px); +} + +.mobile-nav-toggle.open .mobile-nav-toggle__line::after { + transform: rotate(-45deg) translate(35px, 35px); +} diff --git a/static/main/img/icons/icon-close.svg b/static/main/img/icons/icon-close.svg deleted file mode 100644 index 40bf5f6..0000000 --- a/static/main/img/icons/icon-close.svg +++ /dev/null @@ -1,63 +0,0 @@ - - - - - - - - - - - - - diff --git a/static/main/img/icons/icon-hamburger-menu.svg b/static/main/img/icons/icon-hamburger-menu.svg deleted file mode 100644 index e091bfc..0000000 --- a/static/main/img/icons/icon-hamburger-menu.svg +++ /dev/null @@ -1,67 +0,0 @@ - - - - - - - - - - - - diff --git a/static/main/js/navigation.js b/static/main/js/navigation.js index ecdb11d..a5a0363 100644 --- a/static/main/js/navigation.js +++ b/static/main/js/navigation.js @@ -1,13 +1,15 @@ const PRIMARY_NAV = document.querySelector(".primary-navigation") -const EMAIL = document.querySelector(".mobile-nav-toggle") +const MENU_BUTTON = document.querySelector(".mobile-nav-toggle") -EMAIL.addEventListener("click", () => { +MENU_BUTTON.addEventListener("click", () => { const VISIBILITY = PRIMARY_NAV.getAttribute("data-visible") === "false" if (VISIBILITY) { PRIMARY_NAV.setAttribute("data-visible", true) - EMAIL.setAttribute("aria-expanded", true) + MENU_BUTTON.setAttribute("aria-expanded", true) + MENU_BUTTON.classList.add("open") } else { PRIMARY_NAV.setAttribute("data-visible", false) - EMAIL.setAttribute("aria-expanded", false) + MENU_BUTTON.setAttribute("aria-expanded", false) + MENU_BUTTON.classList.remove("open") } }) diff --git a/templates/layout.html b/templates/layout.html index 0a8d2ce..4202bab 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -15,11 +15,17 @@ + + - {% block meta %}{% endblock %} + {% block meta %}{% endblock %}
@@ -28,11 +34,9 @@ - +
+
+