From 309aea6354182fe4c3ef5a3ffc4461908cdd2ac8 Mon Sep 17 00:00:00 2001 From: Ryan Christian Date: Mon, 9 Jun 2025 22:53:08 -0500 Subject: [PATCH 1/7] refactor: Simplify i18n color change on drop down --- src/assets/icons.svg | 2 +- src/components/header/style.module.css | 6 ------ 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/src/assets/icons.svg b/src/assets/icons.svg index 39616da2d..de4a59153 100644 --- a/src/assets/icons.svg +++ b/src/assets/icons.svg @@ -24,7 +24,7 @@ - + diff --git a/src/components/header/style.module.css b/src/components/header/style.module.css index 603a3d544..32b751bfc 100644 --- a/src/components/header/style.module.css +++ b/src/components/header/style.module.css @@ -255,12 +255,6 @@ & > button { background: #fff; color: #555; - z-index: 101; - - svg { - filter: invert(40%) sepia(0%) saturate(3773%) hue-rotate(315deg) - brightness(73%) contrast(81%); - } } nav { From 16a93776928fcf6fc427ca65af9cbd9a3510a69d Mon Sep 17 00:00:00 2001 From: Ryan Christian Date: Tue, 10 Jun 2025 01:14:01 -0500 Subject: [PATCH 2/7] refactor: Sidebar toggle should be below expanded header --- src/components/sidebar/style.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/sidebar/style.module.css b/src/components/sidebar/style.module.css index 708196afa..ac35e1db1 100644 --- a/src/components/sidebar/style.module.css +++ b/src/components/sidebar/style.module.css @@ -21,7 +21,7 @@ color: #fff; fill: rgba(255, 255, 255, 0.6); cursor: pointer; - z-index: 560; + z-index: 460; transition: transform 0.3s; &:after { From 6ae52ba0e108ab0396953fedbc624a208eb6fb21 Mon Sep 17 00:00:00 2001 From: Ryan Christian Date: Tue, 10 Jun 2025 16:18:27 -0500 Subject: [PATCH 3/7] fix: Stop nav links in header from wrapping --- src/components/header/style.module.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/header/style.module.css b/src/components/header/style.module.css index 32b751bfc..0b95385f5 100644 --- a/src/components/header/style.module.css +++ b/src/components/header/style.module.css @@ -94,11 +94,7 @@ } nav { - position: relative; - display: inline-block; - font-size: 100%; - user-select: none; - -webkit-user-drag: none; + display: flex; @media (max-width: /* --header-mobile-breakpoint */ 50rem) { display: block; From 5fd605ec8430e7565e80a90b35ce29358ac2f1f2 Mon Sep 17 00:00:00 2001 From: Ryan Christian Date: Tue, 10 Jun 2025 16:20:16 -0500 Subject: [PATCH 4/7] fix: Ensure header dropdown arrow is vertically centered --- src/components/header/style.module.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/header/style.module.css b/src/components/header/style.module.css index 0b95385f5..b5c5e32f3 100644 --- a/src/components/header/style.module.css +++ b/src/components/header/style.module.css @@ -181,6 +181,8 @@ & > a, & > button { + display: flex; + align-items: center; transition: all 0.3s; &::after { From f797bf345b7b42ee031d57e74c5beda4f474fb87 Mon Sep 17 00:00:00 2001 From: Ryan Christian Date: Tue, 10 Jun 2025 16:26:09 -0500 Subject: [PATCH 5/7] fix: Social items in header --- src/components/header/style.module.css | 30 +++++++++++++++++++++----- src/style/variables.css | 3 ++- 2 files changed, 27 insertions(+), 6 deletions(-) diff --git a/src/components/header/style.module.css b/src/components/header/style.module.css index b5c5e32f3..37cc86341 100644 --- a/src/components/header/style.module.css +++ b/src/components/header/style.module.css @@ -2,6 +2,8 @@ background: #38235c; color: white; + height: var(--banner-height); + padding: 0.5rem; a { @@ -29,7 +31,7 @@ .open & { justify-content: space-between; -webkit-overflow-scrolling: touch; - height: var(--vh); + height: calc(var(--vh) - var(--banner-height)); } } @@ -305,6 +307,8 @@ justify-content: space-between; align-items: flex-start; + touch-action: none; + @media (min-width: /* --content-width */ 50rem) { justify-content: center; justify-content: flex-start; @@ -319,14 +323,24 @@ .translation { position: absolute; height: 2rem; - top: calc(var(--vh) - 3rem); /* TODO: Why does bottom not work? */ - display: flex; + display: none; + bottom: calc(env(safe-area-inset-bottom) + 1rem); width: 100%; justify-content: space-between; align-items: center; + @media (max-width: /* --header-mobile-breakpoint */ 50rem) { + padding-left: 26px; + padding-right: 26px; + } + + .open & { + display: flex; + } + @media (min-width: /* --content-width */ 50rem) { - top: initial; + display: flex; + bottom: initial; height: 100%; left: initial; position: relative; @@ -334,6 +348,13 @@ } } +.translation { + @media (max-width: /* --header-mobile-breakpoint */ 50rem) { + /* Otherwise overlaps the social items in the dropdown header, blocking use */ + display: none; + } +} + .socialItem { padding: 0 0.5rem; } @@ -391,7 +412,6 @@ padding: 18px 23px 12px; line-height: var(--header-height); text-align: center; - z-index: 100; opacity: 0.7; cursor: pointer; transition: opacity 250ms ease; diff --git a/src/style/variables.css b/src/style/variables.css index 1bf2b5e2f..d438ecdf8 100644 --- a/src/style/variables.css +++ b/src/style/variables.css @@ -1,8 +1,9 @@ :root { --vh: 100vh; + --banner-height: 2.5rem; --header-height: 3.5rem; --header-mobile-breakpoint: 50rem; - --header-and-banner-height: calc(var(--header-height) + 2.5rem); + --header-and-banner-height: calc(var(--header-height) + var(--banner-height)); --content-width: 50rem; --sidebar-break: 900px; From 410c2eb12d4ecee1a5264c840d960d56d7e16951 Mon Sep 17 00:00:00 2001 From: Ryan Christian Date: Wed, 11 Jun 2025 16:43:25 -0500 Subject: [PATCH 6/7] fix: Specificity --- src/components/header/style.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/header/style.module.css b/src/components/header/style.module.css index 37cc86341..574aa6ea2 100644 --- a/src/components/header/style.module.css +++ b/src/components/header/style.module.css @@ -351,7 +351,7 @@ .translation { @media (max-width: /* --header-mobile-breakpoint */ 50rem) { /* Otherwise overlaps the social items in the dropdown header, blocking use */ - display: none; + display: none !important; } } From 297aaf0424fadab6b7b8c1bff81db3c69685a9ee Mon Sep 17 00:00:00 2001 From: Ryan Christian Date: Wed, 11 Jun 2025 16:47:06 -0500 Subject: [PATCH 7/7] fix: Dropdown arrow alignment in expanded header --- src/components/header/style.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/header/style.module.css b/src/components/header/style.module.css index 574aa6ea2..4c9e55a1d 100644 --- a/src/components/header/style.module.css +++ b/src/components/header/style.module.css @@ -203,7 +203,7 @@ & > a, & > button { - display: block; + display: flex; } }