From 671677a11748f96fa8692a048f70722a16a9fecb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Moritz=20St=C3=BCckler?= Date: Fri, 22 Aug 2025 06:54:46 +0200 Subject: [PATCH 1/7] feat: header refactoring --- navigation.toml | 2 +- sass/_base.scss | 9 +- sass/_docs.scss | 51 ++- sass/_header.scss | 528 +++++++++++++++------------- sass/_index.scss | 1 + static/assets/down-arrow.svg | 6 +- static/images/matrix-logo-white.svg | 19 +- templates/includes/header.html | 113 +++--- templates/macros/util.html | 3 - 9 files changed, 390 insertions(+), 342 deletions(-) diff --git a/navigation.toml b/navigation.toml index 9c2cddedd7..569da7f89d 100644 --- a/navigation.toml +++ b/navigation.toml @@ -6,7 +6,7 @@ header = [ { title = "Ecosystem", section = "ecosystem" }, { title = "Homeserver", section = "homeserver" }, { title = "Support us", href = "/support" }, - { title = "Try Matrix", href = "/try-matrix/", primary = true }, + { title = "Try Matrix", href = "/try-matrix/", button = true }, ] footer_internal = [ diff --git a/sass/_base.scss b/sass/_base.scss index b370a4998a..32fcb1100a 100644 --- a/sass/_base.scss +++ b/sass/_base.scss @@ -1,7 +1,11 @@ :root { --page-max-width: 57rem; --page-with-toc-max-width: 81rem; - --navbar-height: 5.937rem; + --navbar-height: 4.25rem; + + @media all and (min-width: 768px) { + --navbar-height: 5.875rem; + } --color-text: #333; --color-text-light: #757575; @@ -55,8 +59,9 @@ body { } main { + display: flex; + flex-direction: column; flex: 1; - padding-top: var(--navbar-height); } a { diff --git a/sass/_docs.scss b/sass/_docs.scss index 067b48e4f7..6c8afc4bfe 100644 --- a/sass/_docs.scss +++ b/sass/_docs.scss @@ -1,21 +1,21 @@ -header { - margin-bottom: 1em; - - h1 { - margin-bottom: 0; - } - - .metadata { - font-size: .8rem; - } -} - .docs-body { width: 100%; display: flex; flex-direction: row; --docs-menu-width: 18rem; + + header { + margin-bottom: 1em; + + h1 { + margin-bottom: 0; + } + + .metadata { + font-size: 0.8rem; + } + } } .docs-menu { @@ -50,11 +50,11 @@ header { .submenu-checkbox { display: none; - &:not(:checked)~.section-submenu-wrap { + &:not(:checked) ~ .section-submenu-wrap { display: none; } - &:not(:checked)~.submenu-title { + &:not(:checked) ~ .submenu-title { .arrow { background-image: url("/assets/down-arrow.svg"); width: 1rem; @@ -63,7 +63,7 @@ header { } } - &:checked~.submenu-title { + &:checked ~ .submenu-title { .arrow { background-image: url("/assets/up-arrow.svg"); width: 1rem; @@ -76,7 +76,7 @@ header { .submenu-title { display: flex; flex-direction: row; - gap: .8rem; + gap: 0.8rem; font-size: 1.2rem; font-weight: 700; @@ -91,7 +91,7 @@ header { li { margin-inline-start: 1em; - margin-block: .5em; + margin-block: 0.5em; ul { border-left: 1px solid #bbb; @@ -103,7 +103,6 @@ header { } } - a { color: var(--color-text); } @@ -111,11 +110,11 @@ header { } .docs-content { - padding-inline-start: calc(var(--docs-menu-width) + 3rem + .5rem); + padding-inline-start: calc(var(--docs-menu-width) + 3rem + 0.5rem); @media (max-width: 767px) { margin-inline: auto; - padding-inline: .5rem; + padding-inline: 0.5rem; } article p img { @@ -141,21 +140,21 @@ header { color: #fff; border: transparent; border-radius: 9999px; - padding: .5rem 2rem; + padding: 0.5rem 2rem; box-shadow: 0 2px 2px #666; } -#docs-menu-checkbox:checked~#docs-menu-button { +#docs-menu-checkbox:checked ~ #docs-menu-button { background-color: #333; } -#docs-menu-checkbox:not(:checked)~.docs-menu { +#docs-menu-checkbox:not(:checked) ~ .docs-menu { @media (max-width: 767px) { display: none; } } -#docs-menu-checkbox:checked~.docs-content { +#docs-menu-checkbox:checked ~ .docs-content { @media (max-width: 767px) { display: none; } @@ -164,7 +163,7 @@ header { .mjolnir_button { border: 1px solid rgb(217, 217, 217); border-radius: 1000px; - padding: 0 .4rem; + padding: 0 0.4rem; background-color: rgb(242, 247, 252); } @@ -186,7 +185,7 @@ figure { } figcaption { - font-size: .8rem; + font-size: 0.8rem; text-align: center; } } diff --git a/sass/_header.scss b/sass/_header.scss index c282d21082..9e36585745 100644 --- a/sass/_header.scss +++ b/sass/_header.scss @@ -1,245 +1,287 @@ .site-header { - position: fixed; - z-index: 1000; - --header-padding: 1.5dvw; - --header-vertical-padding: 8px; - - display: flex; - width: 100%; - height: var(--navbar-height); - padding-left: 20px; - align-items: center; - margin-bottom: 0; - - font-size: 1.125rem; - color: #fff; - - background-color: #000; - - @media screen and (min-width: 1150px) { - padding-right: 20px; - } - - .brand { - margin-right: auto; - - img { - width: 128px; - height: 55px; - display: block; - } - } - - .dropdown-button { - font-family: 'webflow-icons'; - font-size: 1.5rem; - - padding: 0 1rem; - - // Make the button take the full height - align-self: stretch; - display: flex; - align-items: center; - - @media screen and (min-width: 1150px) { - display: none; - } - } - - nav { - display: flex; - - @media screen and (max-width: 1149px) { - position: fixed; - z-index: 800; - top: 5.937rem; - left: 0; - right: 0; - - flex-direction: column; - background-color: #000; - - max-height: calc(100vh - 5.937rem); - overflow-y: auto; - } - - @media screen and (min-width: 1150px) { - align-items: center; - } - - a { - color: #fff; - font-size: 1.125rem; - - @media screen and (max-width: 1149px) { - font-size: 1.5rem; - } - - padding: var(--header-vertical-padding) var(--header-padding); - - &:hover { - color: #0082f3; - } - - &.current { - color: #0082f3; - } - - &.primary { - border-radius: 60px; - background-color: #fff; - color: #000 !important; - - - padding-inline: clamp(1em, 3dvw, 2em); - margin-inline: .5rem; - - @media screen and (max-width: 1149px) { - margin-block: 1.2rem; - text-align: center; - } - - @media screen and (min-width: 1150px) { - &:not(:last-child) { - margin-right: 12px; - } - } - } - } - - .submenu-checkbox { - opacity: 0; - position: absolute; - - @media screen and (max-width: 1149px) { - &:not(:checked)~.section-submenu-wrap { - display: none; - } - - &:not(:checked)~.submenu-title { - .arrow { - background-image: url("/assets/down-arrow.svg"); - width: 1rem; - height: 1rem; - margin: auto 0; - filter: invert(1); - } - } - - &:checked~.submenu-title { - .arrow { - background-image: url("/assets/up-arrow.svg"); - width: 1rem; - height: 1rem; - margin: auto 0; - filter: invert(1); - } - } - } - } - - .submenu-title { - @media screen and (max-width: 1149px) { - display: flex; - flex-direction: row; - gap: 1rem; - - font-size: 1.5rem; - } - - label:hover { - color: #0082f3; - } - - margin: auto 0; - - padding: var(--header-vertical-padding) var(--header-padding); - } - - label { - cursor: pointer; - - a { - padding: 0; - } - } - } - - @media screen and (min-width: 1150px) { - .section-wrap { - position: relative; - align-self: stretch; - display: flex; - justify-content: center; - - &:not(:hover, :focus-within) .section-submenu { - display: none; - } - } - - .section-submenu-wrap { - position: absolute; - top: 47.5px; - left: 0; - } - - .section-submenu { - background: #fff; - border: 1px solid #f4f4f4; - border-radius: 6px; - padding-inline: 1rem; - padding-block: 0.75rem; - - display: flex; - flex-direction: column; - - a { - white-space: nowrap; - color: #000; - // The parent already provides the padding - padding: 0; - } - } - } - - @media screen and (max-width: 1149px) { - .section-submenu { - padding-left: 1em; - display: flex; - flex-direction: column; - - a { - font-size: 1.125rem; - } - } - - .section-wrap { - margin: 8px 0; - } - } -} - -#site-header-dropdown-checkbox { - display: none; - - @media screen and (max-width: 1149px) { - &:checked~.dropdown-button { - background-color: #000; - } - - &:checked~.page-overlay { - position: fixed; - z-index: 400; - top: 5.937rem; - right: 0; - bottom: 0; - left: 0; - - display: block; - } - - &:not(:checked)~nav { - display: none; - } - } + position: sticky; + top: 0; + z-index: 1000; + background-color: #000; + display: flex; + justify-content: center; + align-items: center; + + @media all and (min-width: 1024px) { + height: var(--navbar-height); + } + + .header-content { + display: flex; + justify-content: space-between; + gap: 1rem; + + width: 100%; + height: auto; + padding: 20px 20px; + + font-size: 1.5rem; + color: #fff; + + @media all and (min-width: 1024px) { + align-items: center; + font-size: 1.125rem; + padding: 0 20px; + gap: 2rem; + flex-direction: row; + } + + a { + color: #fff; + text-decoration: none; + + &:hover { + color: #0082f3; + } + + &.current { + color: #0082f3; + } + + &.button { + border-radius: 60px; + background-color: #fff; + color: #000 !important; + + padding-inline: clamp(1em, 3dvw, 2em); + + @media screen and (max-width: 1023px) { + margin-block: 1.2rem; + text-align: center; + } + + @media screen and (min-width: 1024px) { + &:not(:last-child) { + margin-right: 12px; + } + } + } + } + + &:has(#header-toggle-checkbox:checked) { + nav > ul { + display: flex; + } + + flex-direction: column; + @media all and (min-width: 1024px) { + flex-direction: row; + } + } + + nav { + & > ul { + display: none; + + flex-direction: column; + gap: 1.5rem; + list-style: none; + padding: 0; + margin: 0; + align-items: start; + + @media all and (min-width: 1024px) { + display: flex; + flex-direction: row; + } + + li { + display: flex; + flex-direction: column; + + flex-shrink: 0; + white-space: nowrap; + + &:has(.button) { + @media screen and (max-width: 1023px) { + align-self: center; + width: 100%; + } + } + + & > div { + display: flex; + flex-direction: row; + align-items: center; + gap: 0.5rem; + } + + @media screen and (min-width: 1024px) { + text-align: center; + justify-content: center; + align-items: center; + } + + .submenu-toggle { + aspect-ratio: 1; + height: 1rem; + display: grid; + padding-top: 0.1rem; + cursor: pointer; + + & > * { + grid-row-start: 1; + grid-column-start: 1; + } + } + } + + li.section { + position: relative; + gap: 0.4rem; + justify-items: center; + + .submenu-toggle-checkbox { + aspect-ratio: 1; + visibility: hidden; + width: 100%; + height: auto; + } + + label { + position: relative; + + input[type="checkbox"] { + position: absolute; + top: 0; + left: 0; + + @media screen and (min-width: 1024px) { + pointer-events: none; + } + } + + img { + width: 100%; + height: auto; + position: absolute; + top: 0; + left: 0; + transform: rotate(0deg); + } + } + + img { + transition: transform 0.3s ease-in-out; + transform: rotate(0deg); + } + + @media screen and (min-width: 1024px) { + &:hover img { + transform: rotate(-90deg); + } + + &:hover .section-submenu { + display: flex; + } + } + + &:has(.submenu-toggle-checkbox:checked) img { + transform: rotate(-90deg); + } + + &:has(.submenu-toggle-checkbox:checked) .section-submenu { + display: flex; + } + } + + ul.section-submenu { + display: none; + flex-direction: column; + color: #fff; + align-items: start; + + @media screen and (min-width: 1024px) { + position: absolute; + width: auto; + top: 2rem; + background-color: #fff; + border: 1px solid hsla(0, 0%, 80%, 1); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); + border-radius: 6px; + padding-inline: 1rem; + padding-block: 0.5rem; + font-size: 1.125rem; + + a { + color: #000 !important; + + &:hover { + color: #0082f3 !important; + } + } + } + + a { + color: #fff; + } + + li { + justify-content: start; + } + } + } + } + + .brand-container { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + @media all and (min-width: 1024px) { + width: auto; + } + } + + .brand { + display: flex; + align-items: center; + justify-content: center; + width: 75px; + height: 32px; + + @media all and (min-width: 768px) { + width: 128px; + height: 55px; + } + + img { + width: 100%; + height: auto; + } + } + + .dropdown-button { + font-family: "webflow-icons"; + display: grid; + line-height: 1rem; + + @media all and (min-width: 1024px) { + display: none; + } + + span { + display: flex; + justify-content: center; + align-items: center; + width: 1rem; + } + + input[type="checkbox"] { + opacity: 0; + aspect-ratio: 1; + cursor: pointer; + } + + & > * { + grid-row-start: 1; + grid-column-start: 1; + } + } + } } diff --git a/sass/_index.scss b/sass/_index.scss index d823abf642..d65597eb79 100644 --- a/sass/_index.scss +++ b/sass/_index.scss @@ -447,6 +447,7 @@ padding: .4em 1em; background-color: var(--notice-box-color); text-align: center; + z-index: 999; } .notice-box { diff --git a/static/assets/down-arrow.svg b/static/assets/down-arrow.svg index cdbb0956c2..1c0773e95c 100644 --- a/static/assets/down-arrow.svg +++ b/static/assets/down-arrow.svg @@ -1,5 +1 @@ - - - - - + \ No newline at end of file diff --git a/static/images/matrix-logo-white.svg b/static/images/matrix-logo-white.svg index 900a5aa0ed..eab80d7dba 100644 --- a/static/images/matrix-logo-white.svg +++ b/static/images/matrix-logo-white.svg @@ -1,18 +1 @@ - - - - matrix logo white - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/templates/includes/header.html b/templates/includes/header.html index 3395af5f77..91f70712c9 100644 --- a/templates/includes/header.html +++ b/templates/includes/header.html @@ -1,47 +1,72 @@
- - Matrix logo - - - - - + + + +
diff --git a/templates/macros/util.html b/templates/macros/util.html index 76e17d5ce8..547bc0f32a 100644 --- a/templates/macros/util.html +++ b/templates/macros/util.html @@ -2,6 +2,3 @@ {% if current_path and current_path is starting_with(if_path_starts_with) %}current{% endif %} {%- endmacro current_class %} -{% macro current_checked(if_path_starts_with) -%} -{% if current_path and current_path is starting_with(if_path_starts_with) %}checked{% endif %} -{%- endmacro current_checked %} From 6e629a3bc2122df2028524d3417f9acb3c628239 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Moritz=20St=C3=BCckler?= Date: Fri, 22 Aug 2025 07:12:07 +0200 Subject: [PATCH 2/7] fix: merge conflicts --- sass/_header.scss | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/sass/_header.scss b/sass/_header.scss index 9ef75d9d83..fecdd1bcb4 100644 --- a/sass/_header.scss +++ b/sass/_header.scss @@ -2,8 +2,11 @@ position: sticky; top: 0; z-index: 1000; - --header-padding: 1.5dvw; - --header-vertical-padding: 8px; + background-color: #000; + display: flex; + justify-content: center; + align-items: center; + width: 100%; @media all and (min-width: 1024px) { height: var(--navbar-height); @@ -16,7 +19,7 @@ width: 100%; height: auto; - padding: 20px 20px; + padding: 1.25rem; font-size: 1.5rem; color: #fff; @@ -48,12 +51,12 @@ padding-inline: clamp(1em, 3dvw, 2em); - @media screen and (max-width: 1023px) { + @media all and (max-width: 1023px) { margin-block: 1.2rem; text-align: center; } - @media screen and (min-width: 1024px) { + @media all and (min-width: 1024px) { &:not(:last-child) { margin-right: 12px; } @@ -67,6 +70,7 @@ } flex-direction: column; + @media all and (min-width: 1024px) { flex-direction: row; } @@ -96,7 +100,7 @@ white-space: nowrap; &:has(.button) { - @media screen and (max-width: 1023px) { + @media all and (max-width: 1023px) { align-self: center; width: 100%; } @@ -109,7 +113,7 @@ gap: 0.5rem; } - @media screen and (min-width: 1024px) { + @media all and (min-width: 1024px) { text-align: center; justify-content: center; align-items: center; @@ -149,7 +153,7 @@ top: 0; left: 0; - @media screen and (min-width: 1024px) { + @media all and (min-width: 1024px) { pointer-events: none; } } @@ -169,7 +173,7 @@ transform: rotate(0deg); } - @media screen and (min-width: 1024px) { + @media all and (min-width: 1024px) { &:hover img { transform: rotate(-90deg); } @@ -194,7 +198,7 @@ color: #fff; align-items: start; - @media screen and (min-width: 1024px) { + @media all and (min-width: 1024px) { position: absolute; width: auto; top: 2rem; From 9dde6ae0cad32d2c9eeec97d4d22f3fe38fd6973 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Moritz=20St=C3=BCckler?= Date: Fri, 22 Aug 2025 07:13:26 +0200 Subject: [PATCH 3/7] fix: cleanup --- sass/_docs.scss | 37 ------------------------------------- 1 file changed, 37 deletions(-) diff --git a/sass/_docs.scss b/sass/_docs.scss index 322ee369cd..0e650b6ba7 100644 --- a/sass/_docs.scss +++ b/sass/_docs.scss @@ -122,43 +122,6 @@ } } -#docs-menu-button { - position: fixed; - display: none; - z-index: 991; - - @media (max-width: 767px) { - display: inline-block; - } - - bottom: 2rem; - left: 50%; - transform: translateX(-50%); - - background-color: #000; - color: #fff; - border: transparent; - border-radius: 9999px; - padding: 0.5rem 2rem; - box-shadow: 0 2px 2px #666; -} - -#docs-menu-checkbox:checked ~ #docs-menu-button { - background-color: #333; -} - -#docs-menu-checkbox:not(:checked) ~ .docs-menu { - @media (max-width: 767px) { - display: none; - } -} - -#docs-menu-checkbox:checked ~ .docs-content { - @media (max-width: 767px) { - display: none; - } -} - .mjolnir_button { border: 1px solid rgb(217, 217, 217); border-radius: 1000px; From c4489e103dd4e9ff75e0272d78eef493f84030d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Moritz=20St=C3=BCckler?= Date: Sat, 23 Aug 2025 08:42:44 +0200 Subject: [PATCH 4/7] fix: alignment --- sass/_header.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/sass/_header.scss b/sass/_header.scss index fecdd1bcb4..0d346cd410 100644 --- a/sass/_header.scss +++ b/sass/_header.scss @@ -15,7 +15,6 @@ .header-content { display: flex; justify-content: space-between; - gap: 1rem; width: 100%; height: auto; @@ -69,6 +68,7 @@ display: flex; } + gap: 1rem; flex-direction: column; @media all and (min-width: 1024px) { @@ -121,10 +121,10 @@ .submenu-toggle { aspect-ratio: 1; - height: 1rem; + width: .8rem; display: grid; - padding-top: 0.1rem; cursor: pointer; + top: 2px; & > * { grid-row-start: 1; @@ -202,6 +202,7 @@ position: absolute; width: auto; top: 2rem; + left: -1rem; background-color: #fff; border: 1px solid hsla(0, 0%, 80%, 1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); From 7dd7eb2dd7ea2953bc3e325028a9e91be4669f2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Moritz=20St=C3=BCckler?= Date: Sat, 23 Aug 2025 08:46:44 +0200 Subject: [PATCH 5/7] fix: button style --- sass/_header.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/sass/_header.scss b/sass/_header.scss index 0d346cd410..7df09cc08c 100644 --- a/sass/_header.scss +++ b/sass/_header.scss @@ -49,6 +49,7 @@ color: #000 !important; padding-inline: clamp(1em, 3dvw, 2em); + padding-block: 0.5rem; @media all and (max-width: 1023px) { margin-block: 1.2rem; @@ -90,6 +91,7 @@ @media all and (min-width: 1024px) { display: flex; flex-direction: row; + align-items: center; } li { From 9ee49ac177fcd971e5a5b62530b4861022881292 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Moritz=20St=C3=BCckler?= Date: Sat, 23 Aug 2025 08:49:33 +0200 Subject: [PATCH 6/7] fix: arrow rotation angle --- sass/_header.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/sass/_header.scss b/sass/_header.scss index 7df09cc08c..9cf0ea5f25 100644 --- a/sass/_header.scss +++ b/sass/_header.scss @@ -177,7 +177,7 @@ @media all and (min-width: 1024px) { &:hover img { - transform: rotate(-90deg); + transform: rotate(-180deg); } &:hover .section-submenu { @@ -186,7 +186,7 @@ } &:has(.submenu-toggle-checkbox:checked) img { - transform: rotate(-90deg); + transform: rotate(-180deg); } &:has(.submenu-toggle-checkbox:checked) .section-submenu { From 27da7c571f9c5974a18e3d381aeab5342d1b7d10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Moritz=20St=C3=BCckler?= Date: Sat, 23 Aug 2025 08:53:52 +0200 Subject: [PATCH 7/7] fix: breakpoints --- sass/_header.scss | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/sass/_header.scss b/sass/_header.scss index 9cf0ea5f25..7448a1fce3 100644 --- a/sass/_header.scss +++ b/sass/_header.scss @@ -8,7 +8,7 @@ align-items: center; width: 100%; - @media all and (min-width: 1024px) { + @media all and (min-width: 1150px) { height: var(--navbar-height); } @@ -23,7 +23,7 @@ font-size: 1.5rem; color: #fff; - @media all and (min-width: 1024px) { + @media all and (min-width: 1150px) { align-items: center; font-size: 1.125rem; padding: 0 20px; @@ -51,12 +51,12 @@ padding-inline: clamp(1em, 3dvw, 2em); padding-block: 0.5rem; - @media all and (max-width: 1023px) { + @media all and (max-width: 1149px) { margin-block: 1.2rem; text-align: center; } - @media all and (min-width: 1024px) { + @media all and (min-width: 1150px) { &:not(:last-child) { margin-right: 12px; } @@ -72,7 +72,7 @@ gap: 1rem; flex-direction: column; - @media all and (min-width: 1024px) { + @media all and (min-width: 1150px) { flex-direction: row; } } @@ -88,7 +88,7 @@ margin: 0; align-items: start; - @media all and (min-width: 1024px) { + @media all and (min-width: 1150px) { display: flex; flex-direction: row; align-items: center; @@ -102,7 +102,7 @@ white-space: nowrap; &:has(.button) { - @media all and (max-width: 1023px) { + @media all and (max-width: 1149px) { align-self: center; width: 100%; } @@ -115,7 +115,7 @@ gap: 0.5rem; } - @media all and (min-width: 1024px) { + @media all and (min-width: 1150px) { text-align: center; justify-content: center; align-items: center; @@ -155,7 +155,7 @@ top: 0; left: 0; - @media all and (min-width: 1024px) { + @media all and (min-width: 1150px) { pointer-events: none; } } @@ -175,7 +175,7 @@ transform: rotate(0deg); } - @media all and (min-width: 1024px) { + @media all and (min-width: 1150px) { &:hover img { transform: rotate(-180deg); } @@ -200,11 +200,10 @@ color: #fff; align-items: start; - @media all and (min-width: 1024px) { + @media all and (min-width: 1150px) { position: absolute; width: auto; top: 2rem; - left: -1rem; background-color: #fff; border: 1px solid hsla(0, 0%, 80%, 1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); @@ -238,7 +237,7 @@ justify-content: space-between; align-items: center; width: 100%; - @media all and (min-width: 1024px) { + @media all and (min-width: 1150px) { width: auto; } } @@ -266,7 +265,7 @@ display: grid; line-height: 1rem; - @media all and (min-width: 1024px) { + @media all and (min-width: 1150px) { display: none; }