Skip to content

Navbar animations #3745

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MTRNord wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Navbar animations #3745

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3198172
animate the navbar: link brackets, dropdown fade, logo brackets, try …
MTRNord Nov 3, 2026
23fc20e
align the nav brackets to the text baseline
MTRNord Nov 3, 2026
b52a5f2
improve bracket design
MTRNord Nov 3, 2026
16a77fc
keep nav hover effects off touch and guard the bracket height
MTRNord Nov 3, 2026
79a4fb5
improve colors of the navbar hover
MTRNord Nov 3, 2026
ab90a06
fix the hover having a non hover gap
MTRNord Nov 3, 2026
4cd8132
fade the nav dropdown in and out with firefox support
MTRNord Nov 3, 2026
916f5a6
add active state in the dropdowns for subpages as well
MTRNord Nov 3, 2026
22fa2b9
prevent hover on the hidden dropdown elements
MTRNord Nov 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 146 additions & 11 deletions sass/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand All @@ -48,6 +50,9 @@
}

nav {
// Hover and current colour from the redesign tokens (accent.on-dark).
--nav-hover: #f07241;

display: flex;

@media screen and (max-width: 1149px) {
Expand Down Expand Up @@ -79,17 +84,27 @@
padding: var(--header-vertical-padding) var(--header-padding);

&:hover {
color: #0082f3;
color: var(--nav-hover);
}

&.current {
color: #0082f3;
color: var(--nav-hover);
}

&.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. Not on touch, where hover sticks.
@media (hover: hover) {
&:hover {
background-color: #000;
color: #fff;
box-shadow: inset 0 0 0 2px #fff;
}
}


padding-inline: clamp(1em, 3dvw, 2em);
Expand Down Expand Up @@ -148,8 +163,9 @@
font-size: 1.5rem;
}

label:hover {
color: #0082f3;
// The brackets sit outside the link, so colour from the whole title.
&:hover a {
color: var(--nav-hover);
}

margin: auto 0;
Expand Down Expand Up @@ -185,18 +201,20 @@
}

.section-submenu {
background: #fff;
border: 1px solid #f4f4f4;
// The tokens only define a dark header, so the dropdown stays dark too.
background: #000;
border: 1px solid #fff;
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;
color: #000;
color: #fff;
// The parent already provides the padding
padding: 0;
}
Expand Down Expand Up @@ -244,3 +262,120 @@
}
}
}

// 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;
}

@media (hover: hover) {
.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, and fade out again. They stay laid out
// when closed (display would cut the fade, and Firefox does not animate it);
// visibility hides them for clicks and keyboard once the fade is done.
.site-header .section-submenu {
transition: opacity 0.35s ease, translate 0.4s $ease-out, visibility 0s;
}

// The wrapper keeps its box while closed, so it must not catch the pointer.
.site-header .section-wrap:not(:hover, :focus-within) .section-submenu-wrap {
pointer-events: none;
}

.site-header .section-wrap:not(:hover, :focus-within) .section-submenu {
display: flex;
opacity: 0;
translate: 0 -10px;
visibility: hidden;
transition: opacity 0.35s ease, translate 0.4s $ease-out, visibility 0s 0.35s;
}

// Needs the cap unit (older browsers just get no brackets).
@supports (height: 1cap) {
// 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 {
--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 a,
.section-submenu a {
&::before,
&::after {
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 {
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 {
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;
}
}

// Padding under the brackets keeps the gap to the text hoverable.
// The negative margin cancels it so nothing moves.
.section-submenu a {
padding-inline: calc(var(--bracket-width) + var(--bracket-gap));
margin-inline: calc(-1 * (var(--bracket-width) + var(--bracket-gap)));
}

> a:not(.primary):is(:hover, :focus-visible, .current),
.section-wrap:is(:hover, :focus-within, :has(.submenu-checkbox:checked)) .submenu-title a,
.section-submenu a:is(:hover, :focus-visible, .current) {
&::before,
&::after {
opacity: 1;
translate: 0;
}
}
}
}
}
}
21 changes: 8 additions & 13 deletions templates/includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<header class="site-header">
<a href="/" class="brand">
<img src="/images/matrix-logo-white.svg" alt="Matrix logo">
<a href="/" class="brand" aria-label="Matrix">
{% include "includes/logo.html" %}
</a>
<input id="site-header-dropdown-checkbox" type="checkbox" class="dropdown-checkbox" aria-hidden="true">
<label for="site-header-dropdown-checkbox" class="dropdown-button">&#xe602;</label>
Expand All @@ -14,8 +14,7 @@
<input id="{{ link.section }}-submenu-checkbox" type="checkbox" class="submenu-checkbox" aria-hidden="true"
{{ util::current_checked(if_path_starts_with="/" ~ link.section) }}>
<label for="{{ link.section }}-submenu-checkbox" class="submenu-title">
<a href="/{{ link.section }}">
{{ link.title }}</a> <div class="arrow">
<a href="/{{ link.section }}">{{ link.title }}</a> <div class="arrow">
</div></label>

<div class="section-submenu-wrap">
Expand All @@ -24,13 +23,13 @@
{% set subsection = get_section(path=subsection_path) %}
{# We ignore subsections with "navigation" key being false in the metadata. Note this variable may be unset #}
{% if subsection.extra.navigation is not defined or subsection.extra.navigation %}
<a href="{{ subsection.path }}">{{ subsection.title }}</a>
<a href="{{ subsection.path }}" class="{{ util::current_class(if_path_starts_with=subsection.path) }}">{{ subsection.title }}</a>
{% endif %}
{% endfor %}
{% for mypage in section.pages %}
{# We ignore subsections with "navigation" key being false in the metadata. Note this variable may be unset #}
{% if mypage.extra.navigation is undefined or mypage.extra.navigation %}
<a href="{{ mypage.path }}">{{ mypage.title }}</a>
<a href="{{ mypage.path }}" class="{{ util::current_class(if_path_starts_with=mypage.path) }}">{{ mypage.title }}</a>
{% endif %}
{% endfor %}
</div>
Expand All @@ -47,24 +46,20 @@
{{ util::current_checked(if_path_starts_with=link.href) }}
>
<label for="{{ link.id }}-submenu-checkbox" class="submenu-title">
<a href="{{ link.href }}">
{{ link.title }}
</a>
<a href="{{ link.href }}">{{ link.title }}</a>
<div class="arrow"></div>
</label>
<div class="section-submenu-wrap">
<div class="section-submenu">
{% for child in link.children %}
<a href="{{ child.href }}">{{ child.title }}</a>
<a href="{{ child.href }}" class="{{ util::current_class(if_path_starts_with=child.href) }}">{{ child.title }}</a>
{% endfor %}
</div>
</div>
</div>
{% else %}
<a href="{{ link.href }}" class="{% if link.primary %}primary{% endif %}
{{ util::current_class(if_path_starts_with=link.href) }}">
{{ link.title }}
</a>
{{ util::current_class(if_path_starts_with=link.href) }}">{{ link.title }}</a>
{% endif %}
{% endif %}
{% endfor %}
Expand Down
10 changes: 10 additions & 0 deletions templates/includes/logo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<svg class="logo" viewBox="0 0 75 32" fill="#fff" aria-hidden="true">
<polygon points="0.936314791 0.73220178 0.936314791 31.2495668 3.12942478 31.2495668 3.12942478 31.9817685 0.094721871 31.9817685 0.094721871 9.49554896e-05 3.12942478 9.49554896e-05 3.12942478 0.73220178"/>
<path d="M9.38571429,10.4066469 L9.38571429,11.951003 L9.42961441,11.951003 C9.8409292,11.3631335 10.3363464,10.9066825 10.9167193,10.5830742 C11.496713,10.2600356 12.1615676,10.0978516 12.9104298,10.0978516 C13.6298989,10.0978516 14.287263,10.237911 14.8819532,10.5170801 C15.4768331,10.796724 15.9285398,11.2891632 16.2369785,11.9952522 C16.5745259,11.4953116 17.0334387,11.0539585 17.6138116,10.6715727 C18.1938053,10.2893769 18.8803729,10.0978516 19.6736094,10.0978516 C20.2757901,10.0978516 20.8335967,10.1715371 21.3480721,10.3186231 C21.8617889,10.4657092 22.302402,10.7010089 22.6696271,11.0245223 C23.0364728,11.3483205 23.3228192,11.7711573 23.5288559,12.2928427 C23.7343236,12.8154777 23.8372946,13.4438932 23.8372946,14.1795134 L23.8372946,21.8126053 L20.7089128,21.8125104 L20.7089128,15.3485104 C20.7089128,14.9663145 20.694311,14.6059585 20.664823,14.2674421 C20.6351454,13.9294006 20.5547408,13.6354184 20.4225664,13.3850208 C20.2902971,13.1351929 20.0954488,12.936451 19.83878,12.78927 C19.581732,12.6427537 19.2328066,12.5687834 18.7922882,12.5687834 C18.3517699,12.5687834 17.9955436,12.6538635 17.723799,12.8224095 C17.4518647,12.9918101 17.2390961,13.2125816 17.085019,13.4843442 C16.930847,13.7567715 16.8279709,14.0654718 16.7766751,14.4112997 C16.725,14.7567478 16.6994943,15.106184 16.6994943,15.4591335 L16.6994943,21.8126053 L13.571397,21.8126053 L13.571397,15.4149792 C13.571397,15.0767478 13.5637168,14.7420297 13.5495891,14.4112997 C13.5346081,14.0801899 13.4724083,13.7750979 13.3620417,13.495454 C13.2518647,13.2162849 13.0682048,12.9918101 12.8112516,12.8224095 C12.5542035,12.6538635 12.1760746,12.5687834 11.6767699,12.5687834 C11.5297092,12.5687834 11.3351454,12.6019228 11.0930784,12.6682967 C10.8507269,12.7344807 10.6155815,12.859727 10.3881163,13.043276 C10.160177,13.2272997 9.96580278,13.4920356 9.80423515,13.8373887 C9.64257269,14.1832166 9.56188369,14.6352047 9.56188369,15.1940178 L9.56188369,21.8125104 L6.43388116,21.8126053 L6.43388116,10.4066469 L9.38571429,10.4066469 Z"/>
<path d="M25.8417193,12.0835608 C26.1645702,11.5980534 26.5759798,11.208546 27.0754741,10.914089 C27.5745891,10.6200119 28.1360936,10.4105401 28.7604614,10.2853887 C29.3845449,10.1605223 30.0125158,10.0977567 30.6439949,10.0977567 C31.2168774,10.0977567 31.7967762,10.1383976 32.3842604,10.2190148 C32.9716498,10.3002018 33.5078382,10.4584926 33.9925411,10.6935074 C34.4771492,10.9287122 34.8735777,11.2562136 35.1821113,11.6751573 C35.4905499,12.0942908 35.6447219,12.6495905 35.6447219,13.3409614 L35.6447219,19.2751098 C35.6447219,19.7905282 35.674115,20.2826825 35.7329962,20.7532819 C35.7913085,21.2241662 35.8942794,21.5771157 36.0412453,21.8123205 L32.869153,21.8123205 C32.8102718,21.6357033 32.7623894,21.4557626 32.725885,21.2717389 C32.6889064,21.0881899 32.6632111,20.9006528 32.648799,20.7093175 C32.1493995,21.2241662 31.5617257,21.5845223 30.8866308,21.7904807 C30.2108723,21.9958694 29.5206068,22.099181 28.8156448,22.099181 C28.2720607,22.099181 27.7653603,22.0329021 27.2954488,21.900724 C26.8253477,21.7682611 26.4143173,21.5624926 26.0618837,21.2825638 C25.7093552,21.0035846 25.4340076,20.6505401 25.2357459,20.224095 C25.0374842,19.7976499 24.9382111,19.2897329 24.9382111,18.7016736 C24.9382111,18.0547418 25.0518963,17.5213769 25.2799305,17.1026231 C25.5073957,16.6832047 25.8009482,16.3487715 26.1612516,16.0984688 C26.5208913,15.848546 26.9320164,15.6610089 27.3948167,15.5360475 C27.8573325,15.411181 28.3235461,15.3121424 28.7935525,15.2381721 C29.2635588,15.1648665 29.7260746,15.1058991 30.1814791,15.0618398 C30.6366941,15.0175905 31.040708,14.9513116 31.3931416,14.8630979 C31.74567,14.7748843 32.0244311,14.6464095 32.2302781,14.4771039 C32.4355563,14.3079881 32.5310367,14.0616736 32.5166245,13.7378754 C32.5166245,13.3998338 32.4616308,13.1312047 32.3514539,12.9327478 C32.2413717,12.7342908 32.0944058,12.5796083 31.9109355,12.469365 C31.7272756,12.3591217 31.5143173,12.2855312 31.2721555,12.2485935 C31.0297092,12.2123205 30.7687737,12.1935193 30.4901075,12.1935193 C29.8732301,12.1935193 29.388622,12.3259822 29.0360936,12.5907181 C28.6837547,12.855454 28.4777181,13.2969021 28.4192162,13.9143976 L25.2911188,13.9143976 C25.3349241,13.1792522 25.5182048,12.5685935 25.8417193,12.0835608 Z M32.0208281,16.5068724 C31.8226612,16.5729614 31.6096081,16.6279407 31.3821429,16.6721899 C31.1543932,16.7163442 30.9158344,16.7531869 30.666182,16.7824332 C30.4163401,16.8121543 30.1666877,16.8487122 29.917225,16.8928665 C29.6820796,16.9366409 29.4508217,16.9959881 29.2234513,17.0691988 C28.995512,17.1431691 28.7972503,17.2422077 28.6285714,17.3671691 C28.4594185,17.4922255 28.323641,17.6506113 28.2208597,17.8413769 C28.1179836,18.0326172 28.0666877,18.2754184 28.0666877,18.5694955 C28.0666877,18.8486647 28.1179836,19.0843442 28.2208597,19.2751098 C28.323641,19.466635 28.4634008,19.6173294 28.6395702,19.7275727 C28.8157396,19.837816 29.0212073,19.9152047 29.2565424,19.9590742 C29.4912137,20.0033234 29.7335651,20.0253531 29.9833123,20.0253531 C30.6000948,20.0253531 31.0772124,19.9226113 31.4153287,19.7164629 C31.7529709,19.5107893 32.0024336,19.2642849 32.1642857,18.9772344 C32.3256637,18.6905638 32.4249368,18.4006647 32.4617257,18.1061128 C32.4981353,17.8120356 32.5167193,17.5766409 32.5167193,17.4002136 L32.5167193,16.2307418 C32.3843552,16.3487715 32.2191846,16.4405935 32.0208281,16.5068724 Z"/>
<path d="M43.8835335,10.4066469 L43.8835335,12.5025045 L41.5926675,12.5025045 L41.5926675,18.150362 C41.5926675,18.679549 41.6806574,19.0326884 41.8570164,19.2090208 C42.0329962,19.385543 42.3857143,19.4737567 42.9144121,19.4737567 C43.0906764,19.4737567 43.2593552,19.4665401 43.4210177,19.451727 C43.5824905,19.4372938 43.7367573,19.4148843 43.8835335,19.385638 L43.8835335,21.8124154 C43.6191846,21.8565697 43.3253477,21.885816 43.002402,21.900819 C42.6793616,21.9149674 42.363622,21.9226588 42.0551833,21.9226588 C41.5705752,21.9226588 41.1114728,21.8894243 40.6783502,21.8231454 C40.2449431,21.7571513 39.8632111,21.6287715 39.5328698,21.4373412 C39.2023388,21.2463858 38.9415929,20.9739585 38.7508217,20.6210089 C38.5596713,20.2683442 38.4643805,19.8048665 38.4643805,19.2309555 L38.4643805,12.5025045 L36.5699431,12.5025045 L36.5699431,10.4066469 L38.4643805,10.4066469 L38.4643805,6.98710979 L41.5925727,6.98710979 L41.5925727,10.4066469 L43.8835335,10.4066469 Z"/>
<path d="M48.3553729,10.4066469 L48.3553729,12.5246291 L48.3994627,12.5246291 C48.5460493,12.1713947 48.7442162,11.8444629 48.994153,11.5426944 C49.2439001,11.2414955 49.5300569,10.9838813 49.8531922,10.7706113 C50.176043,10.5577211 50.5213654,10.3922136 50.8888748,10.274184 C51.2556258,10.156724 51.637737,10.0976617 52.0343552,10.0976617 C52.2399178,10.0976617 52.4672882,10.1346944 52.717225,10.208095 L52.717225,13.1203798 C52.5701643,13.0907537 52.3939001,13.0649258 52.1885272,13.0430861 C51.982775,13.0209614 51.7846081,13.0098516 51.5936473,13.0098516 C51.0208597,13.0098516 50.5362516,13.1057567 50.1399178,13.2967122 C49.7433944,13.4879525 49.4240518,13.7487953 49.1816056,14.0798101 C48.9393489,14.4109199 48.7664033,14.796724 48.6637168,15.2380772 C48.5610303,15.6791454 48.5096397,16.1574362 48.5096397,16.672095 L48.5096397,21.8123205 L45.3815424,21.8123205 L45.3815424,10.4066469 L48.3553729,10.4066469 Z"/>
<path d="M54.0388748,8.64161424 L54.0388748,6.06043917 L57.1672566,6.06043917 L57.1672566,8.64161424 L54.0388748,8.64161424 Z M57.1672566,10.4066469 L57.1672566,21.8124154 L54.0388748,21.8124154 L54.0388748,10.4066469 L57.1672566,10.4066469 Z"/>
<polygon points="58.7972503 10.4066469 62.365866 10.4066469 64.37067 13.3849258 66.3533818 10.4066469 69.8119153 10.4066469 66.0670354 15.7456142 70.2747155 21.8125104 66.7058154 21.8125104 64.3265803 18.216546 61.9472503 21.8125104 58.4449115 21.8125104 62.542225 15.8119881"/>
<polygon points="74.0938369 31.2495668 74.0938369 0.73220178 71.9007269 0.73220178 71.9007269 9.49554896e-05 74.9356195 9.49554896e-05 74.9356195 31.9817685 71.9007269 31.9817685 71.9007269 31.2495668"/>
</svg>
Loading