diff --git a/navigation.toml b/navigation.toml
index 21f4ebf52..d3056d8e6 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 232f6ab0e..e3031572f 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,6 +59,8 @@ body {
}
main {
+ display: flex;
+ flex-direction: column;
flex: 1;
}
diff --git a/sass/_docs.scss b/sass/_docs.scss
index 535811c9b..0e650b6ba 100644
--- a/sass/_docs.scss
+++ b/sass/_docs.scss
@@ -1,15 +1,3 @@
-header {
- margin-bottom: 1em;
-
- h1 {
- margin-bottom: 0;
- }
-
- .metadata {
- font-size: 0.8rem;
- }
-}
-
.docs-body {
width: 100%;
display: flex;
@@ -21,6 +9,18 @@ header {
}
--docs-menu-width: 18rem;
+
+ header {
+ margin-bottom: 1em;
+
+ h1 {
+ margin-bottom: 0;
+ }
+
+ .metadata {
+ font-size: 0.8rem;
+ }
+ }
}
.docs-menu {
@@ -122,18 +122,6 @@ header {
}
}
-#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;
diff --git a/sass/_header.scss b/sass/_header.scss
index 5817dfa55..7448a1fce 100644
--- a/sass/_header.scss
+++ b/sass/_header.scss
@@ -1,246 +1,291 @@
.site-header {
- position: sticky;
- top: 0;
- 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;
+ width: 100%;
+
+ @media all and (min-width: 1150px) {
+ height: var(--navbar-height);
+ }
+
+ .header-content {
+ display: flex;
+ justify-content: space-between;
+
+ width: 100%;
+ height: auto;
+ padding: 1.25rem;
+
+ font-size: 1.5rem;
+ color: #fff;
+
+ @media all and (min-width: 1150px) {
+ 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);
+ padding-block: 0.5rem;
+
+ @media all and (max-width: 1149px) {
+ margin-block: 1.2rem;
+ text-align: center;
+ }
+
+ @media all and (min-width: 1150px) {
+ &:not(:last-child) {
+ margin-right: 12px;
+ }
+ }
+ }
+ }
+
+ &:has(#header-toggle-checkbox:checked) {
+ nav > ul {
+ display: flex;
+ }
+
+ gap: 1rem;
+ flex-direction: column;
+
+ @media all and (min-width: 1150px) {
+ 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: 1150px) {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ }
+
+ li {
+ display: flex;
+ flex-direction: column;
+
+ flex-shrink: 0;
+ white-space: nowrap;
+
+ &:has(.button) {
+ @media all and (max-width: 1149px) {
+ align-self: center;
+ width: 100%;
+ }
+ }
+
+ & > div {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ @media all and (min-width: 1150px) {
+ text-align: center;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .submenu-toggle {
+ aspect-ratio: 1;
+ width: .8rem;
+ display: grid;
+ cursor: pointer;
+ top: 2px;
+
+ & > * {
+ 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 all and (min-width: 1150px) {
+ 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 all and (min-width: 1150px) {
+ &:hover img {
+ transform: rotate(-180deg);
+ }
+
+ &:hover .section-submenu {
+ display: flex;
+ }
+ }
+
+ &:has(.submenu-toggle-checkbox:checked) img {
+ transform: rotate(-180deg);
+ }
+
+ &:has(.submenu-toggle-checkbox:checked) .section-submenu {
+ display: flex;
+ }
+ }
+
+ ul.section-submenu {
+ display: none;
+ flex-direction: column;
+ color: #fff;
+ align-items: start;
+
+ @media all and (min-width: 1150px) {
+ 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: 1150px) {
+ 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: 1150px) {
+ 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/static/assets/down-arrow.svg b/static/assets/down-arrow.svg
index cdbb0956c..1c0773e95 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 900a5aa0e..eab80d7db 100644
--- a/static/images/matrix-logo-white.svg
+++ b/static/images/matrix-logo-white.svg
@@ -1,18 +1 @@
-
-
\ 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 3395af5f7..91f70712c 100644
--- a/templates/includes/header.html
+++ b/templates/includes/header.html
@@ -1,47 +1,72 @@
diff --git a/templates/macros/util.html b/templates/macros/util.html
index 76e17d5ce..547bc0f32 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 %}
-
-
-
-
-