Skip to content

Commit 59e09df

Browse files
querkmachinequerkmachine
committed
Merge branch 'release/v1.11.0'
* release/v1.11.0: Bump version number to 1.11.0. Add controls to manipulate logo colour from backoffice. Adapt layout to screens with notches and overlapping browser UI. Give masthead a fixed height on desktop. Update theme-color meta tags for Safari 15. Redesign website masthead.
2 parents e7a8755 + b26b4b8 commit 59e09df

13 files changed

Lines changed: 154 additions & 62 deletions

File tree

‎components/footer/_footer.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
$narrowPadding: tokens.$grid-gutter / 2;
1111
margin-top: $padding * 2;
1212
padding-top: $padding;
13-
padding-bottom: $padding;
13+
padding-bottom: calc(#{$padding} + env(safe-area-inset-bottom));
1414
color: tokens.$color-white;
1515
background-color: tokens.$color-off-black;
1616
@include media.dark-mode {

‎components/masthead/_masthead.scss‎

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,50 +7,57 @@
77

88
.sb-masthead {
99
$self: &;
10-
$flipBreakpoint: 25em;
10+
$flipBreakpoint: 40em;
1111
margin-bottom: tokens.$grid-gutter;
12+
padding: 1rem 0;
13+
position: sticky;
14+
top: 0;
15+
z-index: tokens.$layer-overlay;
16+
background-color: var(--theme-background);
17+
@include media.mq($flipBreakpoint) {
18+
height: tokens.$masthead-height-desktop;
19+
}
1220
&__inner {
1321
@include layout.container;
22+
display: flex;
23+
flex-direction: column;
1424
position: relative;
25+
@include media.mq($flipBreakpoint) {
26+
flex-direction: row;
27+
align-items: center;
28+
height: 100%;
29+
}
1530
}
1631
&__branding {
1732
display: block;
18-
overflow: hidden;
19-
color: var(--theme-accent);
20-
&:hover {
21-
color: var(--theme-text);
22-
}
23-
&:focus {
24-
@include a11y.focus-ring;
33+
width: 100%;
34+
max-width: 15rem;
35+
margin: 0 auto;
36+
line-height: 0;
37+
@include media.mq($flipBreakpoint) {
38+
margin-left: 0;
2539
}
2640
}
2741
&__logo {
28-
margin-top: -1.25vw;
29-
}
30-
&__logo-left,
31-
&__logo-right {
32-
fill: currentColor;
3342
}
3443
&__nav {
35-
margin-top: 1em;
36-
}
37-
&__nav-list {
38-
@include helpers.list-reset;
44+
margin-top: 1rem;
3945
@include media.mq($flipBreakpoint) {
40-
display: flex;
41-
flex-direction: row;
46+
margin-top: 0;
4247
}
4348
}
44-
&__nav-item {
45-
@include media.mq($flipBreakpoint) {
46-
& + & {
47-
margin-left: 1.25em;
48-
}
49-
}
49+
&__nav-list {
50+
@include helpers.list-reset;
51+
display: flex;
52+
flex-direction: row;
53+
justify-content: center;
54+
gap: 1.25rem;
5055
}
5156
&__nav-link {
5257
@include theme.default-link(var(--theme-accent), var(--theme-accent-mod));
53-
font-size: tokens.$size-byline;
58+
@include media.mq(60em) {
59+
font-size: tokens.$size-byline;
60+
}
5461
&[aria-current] {
5562
@include theme.default-link(var(--theme-text), var(--theme-accent-mod));
5663
}

‎components/masthead/template.twig‎

Lines changed: 40 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,44 @@
11
<header
2-
data-module="sb-masthead"
3-
class="sb-masthead {%- if params.classes %} {{ params.classes }}{% endif %}"
4-
{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
5-
<div class="sb-masthead__inner">
6-
<a class="sb-masthead__branding" href="{{ params.branding.href }}" role="banner" rel="home" aria-label="{{ params.branding.name }}">
7-
<svg
8-
class="sb-masthead__logo"
9-
xmlns="http://www.w3.org/2000/svg"
10-
viewBox="0 0 199 17"
11-
role="img"
12-
aria-labelledby="brandingName">
13-
<title id="brandingName">{{ params.branding.name }}</title>
14-
<path class="sb-masthead__logo-left" d="M9.14 3.62c-.76-.27-1.55-.41-2.35-.44-.52-.03-1.03.09-1.47.34-.35.21-.56.59-.55 1-.02.54.29 1.04.78 1.28.77.39 1.58.7 2.41.92.92.25 1.82.57 2.69.95.71.32 1.33.81 1.81 1.43.53.73.79 1.62.75 2.52.03.95-.25 1.88-.8 2.65-.56.76-1.33 1.34-2.21 1.67-1.02.39-2.11.59-3.2.57-1.29 0-2.58-.23-3.79-.68-1.18-.42-2.27-1.05-3.22-1.86l1.43-2.93c.81.73 1.75 1.32 2.76 1.74.9.41 1.87.63 2.86.66.61.04 1.21-.11 1.74-.41.41-.25.65-.7.62-1.18.01-.38-.15-.74-.42-1a3.2 3.2 0 00-1.06-.64c-.43-.17-1-.36-1.78-.57-.91-.24-1.81-.54-2.67-.91-.71-.33-1.32-.83-1.78-1.46-.53-.71-.8-1.59-.75-2.47-.02-.9.25-1.78.77-2.51C2.25 1.54 3 .96 3.87.63 4.89.23 5.99.03 7.09.05c1.09 0 2.18.16 3.22.48.99.29 1.94.71 2.81 1.27l-1.38 3c-.82-.5-1.69-.89-2.6-1.18zM15.73.27h12.1v3h-8.51v3.48h7.65v3h-7.65v3.52h8.29v3H15.73v-16zm30.82 4l3-4h9.1v3h-8.5v3.48h7.65v3h-7.65v3.52h8.76v3H46.55v-12zm24.94 12l-2.52-4.57h-3.66v4.57h-3.58v-16h6.9c1.73-.11 3.43.4 4.81 1.45a5.124 5.124 0 011.7 4.11c.03 1.1-.23 2.19-.76 3.16-.51.88-1.28 1.58-2.21 2l3.38 5.28h-4.06zm-6.18-7.59h3.32c.82.05 1.64-.19 2.3-.69.55-.52.85-1.25.81-2 .05-.76-.25-1.49-.81-2a3.51 3.51 0 00-2.3-.68h-3.32v5.37zM89.14.27h3.41v16h-3.26L81.55 5.98v10.29h-3.42v-16h3.26l7.72 10.33.03-10.33zm-59.09 0h3.5v12l9-12h4.5l-12 16h-5v-16z"></path>
15-
<path class="sb-masthead__logo-right" d="M107.32 1.43c.98.64 1.55 1.73 1.52 2.9.02.8-.24 1.58-.73 2.21-.51.64-1.21 1.09-2 1.29.95.15 1.81.64 2.43 1.37.6.75.91 1.68.88 2.64.05 1.27-.55 2.49-1.58 3.23a7.292 7.292 0 01-4.42 1.21h-7.58V.36h7.31c1.47-.08 2.93.29 4.17 1.07zm-2.73 4.85c.39-.32.6-.8.58-1.3.02-.49-.19-.96-.58-1.27-.47-.33-1.03-.48-1.6-.43h-3.54v3.47h3.54c.58.03 1.14-.14 1.6-.47zm.4 6.52c.47-.32.74-.85.72-1.42a1.56 1.56 0 00-.72-1.36c-.6-.36-1.3-.53-2-.48h-3.54v3.74h3.54c.7.05 1.4-.11 2-.48zm16.79 3.48l-2.52-4.53h-3.65v4.53h-3.59V.36h6.9c1.72-.11 3.43.4 4.81 1.44a5.044 5.044 0 011.7 4.07c.03 1.1-.23 2.19-.76 3.15-.51.88-1.28 1.58-2.21 2l3.38 5.26h-4.06zm-6.17-7.53h3.31c.82.05 1.64-.19 2.3-.69.56-.51.85-1.25.81-2 .06-.76-.24-1.5-.81-2-.67-.48-1.48-.72-2.3-.67h-3.31v5.36zm24.57-7.57c3.93 2.16 5.37 7.09 3.22 11.02a8.11 8.11 0 01-3.22 3.22 9.297 9.297 0 01-8.67 0 8.184 8.184 0 01-3.07-3 7.934 7.934 0 01-1.13-4.14 7.82 7.82 0 011.13-4.16 8.002 8.002 0 013.06-2.94 9.317 9.317 0 018.68 0zm-6.74 2.73c-.75.44-1.36 1.08-1.79 1.83-.44.77-.67 1.65-.66 2.54-.01 1.8.92 3.47 2.46 4.4 1.49.9 3.37.9 4.86 0 .73-.45 1.33-1.08 1.75-1.83.43-.79.65-1.67.64-2.57.01-.89-.21-1.76-.64-2.54a5.035 5.035 0 00-1.75-1.83c-.73-.43-1.57-.65-2.42-.63-.85-.01-1.7.2-2.45.63zM157.72.36h3.41v15.92h-3.29l-7.69-10.21v10.21h-3.41V.36h3.27l7.71 10.26V.36zm6.9 0h3.59v15.92h-3.59V.36zm7.1 0h12.12v3h-8.51v3.42h7.64v3h-7.64v3.5h8.76v3h-12.37V.36zm23.02 3.23c-.75-.26-1.54-.41-2.34-.44a2.81 2.81 0 00-1.48.34c-.35.21-.56.59-.54 1-.01.54.29 1.04.78 1.28.77.39 1.58.7 2.41.92.92.28 1.82.61 2.69 1 .71.32 1.33.81 1.81 1.43.53.73.79 1.62.75 2.52.02.94-.26 1.86-.81 2.62-.56.73-1.31 1.29-2.17 1.62-1.02.39-2.11.59-3.2.57-1.29 0-2.58-.23-3.79-.68-1.18-.42-2.27-1.05-3.22-1.86l1.43-2.93c.82.74 1.76 1.33 2.78 1.75.9.41 1.87.63 2.85.66a3.2 3.2 0 001.74-.41c.65-.45.82-1.34.37-1.99-.05-.07-.11-.14-.17-.2-.31-.28-.67-.51-1.06-.65-.43-.17-1-.36-1.78-.57-.91-.24-1.8-.54-2.67-.9-.71-.31-1.34-.78-1.83-1.39-.53-.71-.8-1.58-.75-2.47-.02-.9.25-1.78.77-2.51a4.91 4.91 0 012.16-1.66c1.03-.4 2.12-.59 3.22-.57 2.12.01 4.2.61 6 1.74l-1.39 3c-.8-.5-1.66-.91-2.56-1.22z"></path>
2+
data-module="sb-masthead"
3+
class="sb-masthead {%- if params.classes %} {{ params.classes }}{% endif %}"
4+
{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
5+
<div class="sb-masthead__inner">
6+
<a class="sb-masthead__branding" href="{{ params.branding.href }}" role="banner" rel="home" aria-label="{{ params.branding.name }}">
7+
<svg
8+
class="sb-masthead__logo"
9+
xmlns="http://www.w3.org/2000/svg"
10+
viewBox="0 0 221 18"
11+
role="img"
12+
aria-labelledby="brandingName">
13+
<title id="brandingName">{{ params.branding.name }}</title>
14+
<defs>
15+
<style>
16+
.sb-masthead__logo-left,
17+
.sb-masthead__logo-icon {
18+
fill: #212529;
19+
fill: var(--custom-logo-1, var(--theme-accent, #212529));
20+
}
21+
.sb-masthead__logo-right {
22+
fill: #5832ab;
23+
fill: var(--custom-logo-2, var(--theme-text, #5832ab));
24+
}
25+
</style>
26+
</defs>
27+
<path class="sb-masthead__logo-left" d="M9.6,4.4A6.2,6.2,0,0,0,7.3,4a4,4,0,0,0-1.5.3.88.88,0,0,0-.5,1,1.56,1.56,0,0,0,.8,1.3,11.72,11.72,0,0,0,2.4.9c.9.3,1.8.6,2.7,1A4.89,4.89,0,0,1,13,9.9a4.38,4.38,0,0,1,.8,2.5A4.7,4.7,0,0,1,13,15a5.25,5.25,0,0,1-2.2,1.7,8.66,8.66,0,0,1-3.2.6,9.86,9.86,0,0,1-3.8-.7A8,8,0,0,1,.6,14.7L2,11.8a10,10,0,0,0,2.8,1.7,9.47,9.47,0,0,0,2.9.7,3.29,3.29,0,0,0,1.7-.4,1.14,1.14,0,0,0,.6-1.2,1.28,1.28,0,0,0-.4-1A2.38,2.38,0,0,0,8.5,11l-1.8-.6c-.9-.2-1.8-.6-2.7-.9A4.89,4.89,0,0,1,2.2,8.1a3.67,3.67,0,0,1-.7-2.5,4.38,4.38,0,0,1,.8-2.5A5.85,5.85,0,0,1,4.4,1.4,8.66,8.66,0,0,1,7.6.8a11.27,11.27,0,0,1,3.2.5,10.17,10.17,0,0,1,2.8,1.3l-1.4,3A20.62,20.62,0,0,0,9.6,4.4ZM16,17H28V14H19.6V10.5H27v-3H19.6V4H28V1H16Zm32,0H60V14H51.5V10.5H59v-3H51.5V4H60V1H50.9L48,5Zm29,0-3.4-5.3a4.73,4.73,0,0,0,2.2-2,6.09,6.09,0,0,0,.8-3.2,4.86,4.86,0,0,0-1.7-4.1A7.63,7.63,0,0,0,70,1H63V17h3.5V12.4h3.9L72.9,17ZM66.5,4h3.6a3.89,3.89,0,0,1,2.3.7,2.17,2.17,0,0,1,.8,2,2.17,2.17,0,0,1-.8,2,3.31,3.31,0,0,1-2.3.7H66.5Zm23.9,7.3L82.4,1H79V17h3.6V6.7l8,10.3H94V1H90.4ZM31,17h5L48,1H43.5l-9,12V1H31Z"/>
28+
<path class="sb-masthead__logo-right" d="M108.88,2.11A3.36,3.36,0,0,1,110.49,5a3.45,3.45,0,0,1-.81,2.2,3.82,3.82,0,0,1-2.11,1.3,3.92,3.92,0,0,1,3.42,4,3.77,3.77,0,0,1-1.71,3.3,7.21,7.21,0,0,1-4.53,1.2H97V1h7.55A7,7,0,0,1,108.88,2.11ZM106.06,7a1.61,1.61,0,0,0,.6-1.3,1.61,1.61,0,0,0-.6-1.3,2,2,0,0,0-1.61-.4h-3.73v3.5h3.73A3.36,3.36,0,0,0,106.06,7Zm.4,6.5a1.73,1.73,0,0,0,.81-1.4,1.61,1.61,0,0,0-.81-1.4,3.68,3.68,0,0,0-2.11-.5h-3.63V14h3.73A3.55,3.55,0,0,0,106.46,13.51ZM122.9,17l-2.5-4.6h-3.9V17H113V1h7a7.81,7.81,0,0,1,4.9,1.4,4.86,4.86,0,0,1,1.7,4.1,6.09,6.09,0,0,1-.8,3.2,4.73,4.73,0,0,1-2.2,2L127,17Zm-6.4-7.6H120a3.41,3.41,0,0,0,2.4-.7,2.27,2.27,0,0,0,.8-2,2.17,2.17,0,0,0-.8-2A4,4,0,0,0,120,4h-3.5ZM141.35,2a8,8,0,0,1,3.2,10.9,7.6,7.6,0,0,1-3.2,3.2,9.33,9.33,0,0,1-8.6,0,8.11,8.11,0,0,1-3.1-3,8,8,0,0,1,2.7-11c.1-.1.2-.1.3-.2a9.24,9.24,0,0,1,8.7.1Zm-6.7,2.7a5.17,5.17,0,0,0-1.8,1.8,5.53,5.53,0,0,0-.7,2.5,4.3,4.3,0,0,0,.7,2.5,3.92,3.92,0,0,0,1.8,1.8,5.13,5.13,0,0,0,2.4.7,4.2,4.2,0,0,0,2.4-.7,4.9,4.9,0,0,0,1.7-1.8,4.75,4.75,0,0,0,.6-2.6,5.14,5.14,0,0,0-.6-2.5,4.9,4.9,0,0,0-1.7-1.8,4.75,4.75,0,0,0-2.4-.6A4.42,4.42,0,0,0,134.65,4.71ZM159.5,1l-.1,10.3L151.4,1H148V17h3.6V6.71l8,10.3H163V1ZM166,17h4V1h-4Zm7,0h12V14h-8.5v-3.5H184v-3h-7.5V4H185V1H173Zm26.1-11.4,1.4-3a10.17,10.17,0,0,0-2.8-1.3,11.27,11.27,0,0,0-3.2-.5,7.18,7.18,0,0,0-3.3.5A5.43,5.43,0,0,0,189,3a3.75,3.75,0,0,0-.8,2.5A4.38,4.38,0,0,0,189,8a5.94,5.94,0,0,0,1.8,1.3,14.26,14.26,0,0,0,2.7.9l1.8.6a4.13,4.13,0,0,1,1.1.7,1.28,1.28,0,0,1,.4,1,1.43,1.43,0,0,1-.6,1.2,3.29,3.29,0,0,1-1.7.4,9.47,9.47,0,0,1-2.9-.7,10,10,0,0,1-2.8-1.7l-1.4,2.9a9.38,9.38,0,0,0,3.2,1.9,9.86,9.86,0,0,0,3.8.7,8.66,8.66,0,0,0,3.2-.6,5.25,5.25,0,0,0,2.2-1.7,4.7,4.7,0,0,0,.8-2.6,4.38,4.38,0,0,0-.8-2.5,4.89,4.89,0,0,0-1.8-1.4c-.9-.4-1.8-.7-2.7-1a11.72,11.72,0,0,1-2.4-.9,1.56,1.56,0,0,1-.8-1.3,1,1,0,0,1,.5-1,4,4,0,0,1,1.5-.3,6.2,6.2,0,0,1,2.3.4A13.43,13.43,0,0,1,199.1,5.61Z"/>
29+
<path class="sb-masthead__logo-icon" d="M212,1a8,8,0,0,0-7.12,11.62L204,17l4.38-.88A8,8,0,1,0,212,1Z"/>
1630
</svg>
17-
</a>
18-
<nav class="sb-masthead__nav" aria-label="Main navigation" role="navigation">
19-
<ul class="sb-masthead__nav-list">
20-
{%- for item in params.navItems %}
21-
<li class="sb-masthead__nav-item {{ item.classes | join(' ') }}">
22-
<a class="sb-masthead__nav-link" href="{{ item.link }}" target="{{ item.target }}" {%- if item.current %} aria-current="page"{% endif %}>
23-
{{- item.title -}}
24-
</a>
25-
</li>
26-
{%- endfor %}
27-
</ul>
28-
</nav>
31+
</a>
32+
<nav class="sb-masthead__nav" aria-label="Main navigation" role="navigation">
33+
<ul class="sb-masthead__nav-list">
34+
{%- for item in params.navItems %}
35+
<li class="sb-masthead__nav-item {{ item.classes | join(' ') }}">
36+
<a class="sb-masthead__nav-link" href="{{ item.link }}" target="{{ item.target }}" {%- if item.current %} aria-current="page"{% endif %}>
37+
{{- item.title -}}
38+
</a>
39+
</li>
40+
{%- endfor %}
41+
</ul>
42+
</nav>
2943
</div>
3044
</header>

‎components/subnavigation/_subnavigation.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
.sb-subnavigation {
66
position: sticky;
7-
top: 2rem;
7+
top: calc(#{tokens.$masthead-height-desktop} + 2rem);
88
&__list {
99
@include helpers.list-reset;
1010
@include media.mq(50em) {

‎functions.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,8 @@ public function add_to_context($context)
115115
$context['primary_navigation'] = new Timber\Menu('primary', [
116116
'depth' => 1,
117117
]);
118+
$context['logo_color_1'] = get_field('logo_color_1', 'option');
119+
$context['logo_color_2'] = get_field('logo_color_2', 'option');
118120

119121
// Phase banner
120122
$context['phase_banner_visible'] = get_field(

‎inc/header.php‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,61 @@
77
'parent_slug' => 'website-settings',
88
]);
99

10+
acf_add_local_field_group([
11+
'key' => 'group_60c3ba96e91a4',
12+
'title' => 'Logo colours',
13+
'fields' => [
14+
[
15+
'key' => 'field_60c3baa0fff2d',
16+
'label' => 'Color 1',
17+
'name' => 'logo_color_1',
18+
'type' => 'color_picker',
19+
'instructions' =>
20+
'Applied to the \'Severn\' text and speech bubble icon.',
21+
'required' => 0,
22+
'conditional_logic' => 0,
23+
'wrapper' => [
24+
'width' => '',
25+
'class' => '',
26+
'id' => '',
27+
],
28+
'default_value' => '',
29+
],
30+
[
31+
'key' => 'field_60c3bacffff2e',
32+
'label' => 'Color 2',
33+
'name' => 'logo_color_2',
34+
'type' => 'color_picker',
35+
'instructions' => 'Applied to the \'Bronies\' text.',
36+
'required' => 0,
37+
'conditional_logic' => 0,
38+
'wrapper' => [
39+
'width' => '',
40+
'class' => '',
41+
'id' => '',
42+
],
43+
'default_value' => '',
44+
],
45+
],
46+
'location' => [
47+
[
48+
[
49+
'param' => 'options_page',
50+
'operator' => '==',
51+
'value' => 'acf-options-header',
52+
],
53+
],
54+
],
55+
'menu_order' => 0,
56+
'position' => 'normal',
57+
'style' => 'default',
58+
'label_placement' => 'top',
59+
'instruction_placement' => 'label',
60+
'hide_on_screen' => '',
61+
'active' => true,
62+
'description' => '',
63+
]);
64+
1065
acf_add_local_field_group([
1166
'key' => 'group_5ec94f2745a73',
1267
'title' => 'Banners',

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "sb-plimsoll",
33
"namespace": "sb",
4-
"version": "1.10.0",
4+
"version": "1.11.0",
55
"description": "",
66
"main": "./dist/js/all.js",
77
"browserslist": [

‎src/images/logo.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/sass/mixins/_layout.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,14 @@
55
*/
66

77
@mixin container {
8-
width: 92%;
9-
max-width: tokens.$grid-max-width;
8+
width: 100%;
9+
max-width: calc(
10+
#{tokens.$grid-max-width} + env(safe-area-inset-left) + env(safe-area-inset-right)
11+
);
1012
margin-right: auto;
1113
margin-left: auto;
14+
padding-left: max(1rem, env(safe-area-inset-left));
15+
padding-right: max(1rem, env(safe-area-inset-right));
1216
}
1317

1418
/**

0 commit comments

Comments
 (0)