From 3198172af9901aa6a5294ca5c75a382c450fc1f1 Mon Sep 17 00:00:00 2001 From: MTRNord Date: Tue, 3 Nov 2026 20:53:24 +0100 Subject: [PATCH 1/9] animate the navbar: link brackets, dropdown fade, logo brackets, try matrix hover Signed-off-by: MTRNord --- sass/_header.scss | 112 +++++++++++++++++++++++++++++++-- templates/includes/header.html | 4 +- templates/includes/logo.html | 10 +++ 3 files changed, 120 insertions(+), 6 deletions(-) create mode 100644 templates/includes/logo.html diff --git a/sass/_header.scss b/sass/_header.scss index 5817dfa55f..b8267f0d8d 100644 --- a/sass/_header.scss +++ b/sass/_header.scss @@ -24,10 +24,12 @@ .brand { margin-right: auto; - img { + .logo { width: 128px; height: 55px; display: block; + // The brackets move outside the viewBox on hover. + overflow: visible; } } @@ -89,7 +91,15 @@ &.primary { border-radius: 60px; background-color: #fff; - color: #000 !important; + color: #000; + + // Inverts to an outlined pill like the secondary buttons. The outline is + // a shadow so the pill does not change size. + &:hover { + background-color: #000; + color: #fff; + box-shadow: inset 0 0 0 2px #fff; + } padding-inline: clamp(1em, 3dvw, 2em); @@ -188,11 +198,12 @@ background: #fff; border: 1px solid #f4f4f4; border-radius: 6px; - padding-inline: 1rem; - padding-block: 0.75rem; + padding-inline: 1.75rem; + padding-block: 1rem; display: flex; flex-direction: column; + gap: 0.3rem; a { white-space: nowrap; @@ -244,3 +255,96 @@ } } } + +// Motion for the nav. Respects reduced motion by leaving all of it out. +@media (prefers-reduced-motion: no-preference) { + $ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); + + .site-header nav a.primary { + transition: background-color 0.4s $ease-out, color 0.4s $ease-out, box-shadow 0.4s $ease-out; + } + + // The logo brackets open up a little on hover. Lengths are in viewBox units. + .site-header .brand .logo > :is(:first-child, :last-child) { + transition: translate 0.4s $ease-out; + } + + .site-header .brand:hover .logo { + > :first-child { + translate: -2.5px 0; + } + + > :last-child { + translate: 2.5px 0; + } + } + + // Desktop nav only. + @media (min-width: 1150px) { + // Dropdowns fade in and settle 10px. display is animated too so they can fade out. + .site-header .section-submenu { + transition: opacity 0.35s ease, translate 0.4s $ease-out, display 0.35s allow-discrete; + + @starting-style { + opacity: 0; + translate: 0 -10px; + } + } + + .site-header .section-wrap:not(:hover, :focus-within) .section-submenu { + opacity: 0; + translate: 0 -10px; + } + + // Matrix-style square brackets slide in around the hovered link and stay + // around the current page's link. --bracket-inset is how far from the + // element's edge they sit. + .site-header nav { + > a:not(.primary), + .submenu-title { + --bracket-inset: calc(var(--header-padding) - 0.6em); + } + + .section-submenu a { + --bracket-inset: -0.9em; + align-self: flex-start; + } + + > a:not(.primary), + .submenu-title, + .section-submenu a { + position: relative; + + &::before, + &::after { + position: absolute; + top: 50%; + opacity: 0; + transition: opacity 0.35s ease, translate 0.45s $ease-out; + } + + &::before { + content: "["; + left: var(--bracket-inset); + translate: 0.4em -50%; + } + + &::after { + content: "]"; + right: var(--bracket-inset); + translate: -0.4em -50%; + } + } + + > a:not(.primary):is(:hover, :focus-visible, .current), + .section-wrap:is(:hover, :focus-within, :has(.submenu-checkbox:checked)) .submenu-title, + .section-submenu a:is(:hover, :focus-visible) { + &::before, + &::after { + opacity: 1; + translate: 0 -50%; + } + } + } + } +} diff --git a/templates/includes/header.html b/templates/includes/header.html index b652624ac6..2f0114fc84 100644 --- a/templates/includes/header.html +++ b/templates/includes/header.html @@ -1,6 +1,6 @@
- - Matrix logo + + {% include "includes/logo.html" %} diff --git a/templates/includes/logo.html b/templates/includes/logo.html new file mode 100644 index 0000000000..2a3a153d19 --- /dev/null +++ b/templates/includes/logo.html @@ -0,0 +1,10 @@ + From 23fc20ee3a12a714a3a4bb295988f8e3ceeb3964 Mon Sep 17 00:00:00 2001 From: MTRNord Date: Tue, 3 Nov 2026 20:58:31 +0100 Subject: [PATCH 2/9] align the nav brackets to the text baseline Signed-off-by: MTRNord --- sass/_header.scss | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/sass/_header.scss b/sass/_header.scss index b8267f0d8d..577bf8deb7 100644 --- a/sass/_header.scss +++ b/sass/_header.scss @@ -297,16 +297,18 @@ } // Matrix-style square brackets slide in around the hovered link and stay - // around the current page's link. --bracket-inset is how far from the - // element's edge they sit. + // around the current page's link. --bracket-inset and --bracket-top are + // where they sit from the element's edge, matching its padding. .site-header nav { > a:not(.primary), .submenu-title { --bracket-inset: calc(var(--header-padding) - 0.6em); + --bracket-top: var(--header-vertical-padding); } .section-submenu a { --bracket-inset: -0.9em; + --bracket-top: 0; align-self: flex-start; } @@ -317,8 +319,10 @@ &::before, &::after { + // Placed at the top of the text line instead of centred, so they + // share its baseline in any font. position: absolute; - top: 50%; + top: var(--bracket-top); opacity: 0; transition: opacity 0.35s ease, translate 0.45s $ease-out; } @@ -326,13 +330,13 @@ &::before { content: "["; left: var(--bracket-inset); - translate: 0.4em -50%; + translate: 0.4em 0; } &::after { content: "]"; right: var(--bracket-inset); - translate: -0.4em -50%; + translate: -0.4em 0; } } @@ -342,7 +346,7 @@ &::before, &::after { opacity: 1; - translate: 0 -50%; + translate: 0; } } } From b52a5f239ae7f375139c4fc2ad22b46638aa24b0 Mon Sep 17 00:00:00 2001 From: MTRNord Date: Tue, 3 Nov 2026 21:05:17 +0100 Subject: [PATCH 3/9] improve bracket design Signed-off-by: MTRNord --- sass/_header.scss | 55 ++++++++++++++++++---------------- templates/includes/header.html | 11 ++----- 2 files changed, 32 insertions(+), 34 deletions(-) diff --git a/sass/_header.scss b/sass/_header.scss index 577bf8deb7..955b722d3c 100644 --- a/sass/_header.scss +++ b/sass/_header.scss @@ -296,52 +296,55 @@ translate: 0 -10px; } - // Matrix-style square brackets slide in around the hovered link and stay - // around the current page's link. --bracket-inset and --bracket-top are - // where they sit from the element's edge, matching its padding. + // Square brackets slide in around the hovered link and stay around the + // current page's link. They are drawn like the logo's: twice the height of + // the capitals, centred on the middle of the lowercase letters (vertical-align: + // middle, as in the logo), with every other measure a fraction of that + // height and a 1px floor so the thin strokes stay crisp. They sit in the + // text flow with margins that cancel their width, so nothing moves. .site-header nav { - > a:not(.primary), - .submenu-title { - --bracket-inset: calc(var(--header-padding) - 0.6em); - --bracket-top: var(--header-vertical-padding); - } - - .section-submenu a { - --bracket-inset: -0.9em; - --bracket-top: 0; - align-self: flex-start; - } + --bracket-height: calc(2.03 * 1cap); + --bracket-width: max(0.095 * var(--bracket-height), 3px); + --bracket-stem: max(0.026 * var(--bracket-height), 1px); + --bracket-tab: max(0.023 * var(--bracket-height), 1px); + --bracket-gap: calc(0.077 * var(--bracket-height)); > a:not(.primary), - .submenu-title, + .submenu-title a, .section-submenu a { - position: relative; - &::before, &::after { - // Placed at the top of the text line instead of centred, so they - // share its baseline in any font. - position: absolute; - top: var(--bracket-top); + content: ""; + display: inline-block; + box-sizing: border-box; + width: var(--bracket-width); + height: var(--bracket-height); + margin-block: calc(var(--bracket-height) / -2); + vertical-align: middle; + border: var(--bracket-tab) solid currentcolor; opacity: 0; transition: opacity 0.35s ease, translate 0.45s $ease-out; } &::before { - content: "["; - left: var(--bracket-inset); + margin-left: calc(-1 * (var(--bracket-width) + var(--bracket-gap))); + margin-right: var(--bracket-gap); + border-left-width: var(--bracket-stem); + border-right: 0; translate: 0.4em 0; } &::after { - content: "]"; - right: var(--bracket-inset); + margin-left: var(--bracket-gap); + margin-right: calc(-1 * (var(--bracket-width) + var(--bracket-gap))); + border-right-width: var(--bracket-stem); + border-left: 0; translate: -0.4em 0; } } > a:not(.primary):is(:hover, :focus-visible, .current), - .section-wrap:is(:hover, :focus-within, :has(.submenu-checkbox:checked)) .submenu-title, + .section-wrap:is(:hover, :focus-within, :has(.submenu-checkbox:checked)) .submenu-title a, .section-submenu a:is(:hover, :focus-visible) { &::before, &::after { diff --git a/templates/includes/header.html b/templates/includes/header.html index 2f0114fc84..e2eb0bc5cc 100644 --- a/templates/includes/header.html +++ b/templates/includes/header.html @@ -14,8 +14,7 @@