From dd2286398442efbadf9d3d3099df5ac4038e10fa Mon Sep 17 00:00:00 2001 From: Kimberly Grey Date: Fri, 11 Jun 2021 20:02:11 +0100 Subject: [PATCH 1/6] Redesign website masthead. --- components/masthead/_masthead.scss | 55 +++++++++++++------------ components/masthead/template.twig | 66 ++++++++++++++++++------------ src/images/logo.svg | 1 - 3 files changed, 69 insertions(+), 53 deletions(-) delete mode 100644 src/images/logo.svg diff --git a/components/masthead/_masthead.scss b/components/masthead/_masthead.scss index 835c382..c57189d 100644 --- a/components/masthead/_masthead.scss +++ b/components/masthead/_masthead.scss @@ -7,50 +7,53 @@ .sb-masthead { $self: &; - $flipBreakpoint: 25em; + $flipBreakpoint: 40em; margin-bottom: tokens.$grid-gutter; + padding: 1rem 0; + position: sticky; + top: 0; + z-index: tokens.$layer-overlay; + background-color: var(--theme-background); &__inner { @include layout.container; + display: flex; + flex-direction: column; position: relative; + @include media.mq($flipBreakpoint) { + flex-direction: row; + align-items: center; + } } &__branding { display: block; - overflow: hidden; - color: var(--theme-accent); - &:hover { - color: var(--theme-text); - } - &:focus { - @include a11y.focus-ring; + width: 100%; + max-width: 15rem; + margin: 0 auto; + line-height: 0; + @include media.mq($flipBreakpoint) { + margin-left: 0; } } &__logo { - margin-top: -1.25vw; - } - &__logo-left, - &__logo-right { - fill: currentColor; } &__nav { - margin-top: 1em; - } - &__nav-list { - @include helpers.list-reset; + margin-top: 1rem; @include media.mq($flipBreakpoint) { - display: flex; - flex-direction: row; + margin-top: 0; } } - &__nav-item { - @include media.mq($flipBreakpoint) { - & + & { - margin-left: 1.25em; - } - } + &__nav-list { + @include helpers.list-reset; + display: flex; + flex-direction: row; + justify-content: center; + gap: 1.25rem; } &__nav-link { @include theme.default-link(var(--theme-accent), var(--theme-accent-mod)); - font-size: tokens.$size-byline; + @include media.mq(60em) { + font-size: tokens.$size-byline; + } &[aria-current] { @include theme.default-link(var(--theme-text), var(--theme-accent-mod)); } diff --git a/components/masthead/template.twig b/components/masthead/template.twig index 547b9da..927a073 100644 --- a/components/masthead/template.twig +++ b/components/masthead/template.twig @@ -1,30 +1,44 @@
-
- -
+ + - - + +
diff --git a/src/images/logo.svg b/src/images/logo.svg deleted file mode 100644 index 7878337..0000000 --- a/src/images/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From 6f9ebd67434f2f6d4a0168f9e6bcfe223db9a7d5 Mon Sep 17 00:00:00 2001 From: Kimberly Grey Date: Fri, 11 Jun 2021 20:09:02 +0100 Subject: [PATCH 2/6] Update theme-color meta tags for Safari 15. --- views/global-partials/html-head.twig | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/views/global-partials/html-head.twig b/views/global-partials/html-head.twig index cd6a49c..7242fb5 100644 --- a/views/global-partials/html-head.twig +++ b/views/global-partials/html-head.twig @@ -33,7 +33,8 @@ - + + {{ function('wp_head') }} \ No newline at end of file From ec0a00176944fcee9ff5b4e8d07b05738a856231 Mon Sep 17 00:00:00 2001 From: Kimberly Grey Date: Fri, 11 Jun 2021 20:24:39 +0100 Subject: [PATCH 3/6] Give masthead a fixed height on desktop. --- components/masthead/_masthead.scss | 3 +++ components/subnavigation/_subnavigation.scss | 2 +- tokens/layout.yml | 4 ++++ 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/components/masthead/_masthead.scss b/components/masthead/_masthead.scss index c57189d..fe35a2c 100644 --- a/components/masthead/_masthead.scss +++ b/components/masthead/_masthead.scss @@ -14,6 +14,9 @@ top: 0; z-index: tokens.$layer-overlay; background-color: var(--theme-background); + @include media.mq($flipBreakpoint) { + height: tokens.$masthead-height-desktop; + } &__inner { @include layout.container; display: flex; diff --git a/components/subnavigation/_subnavigation.scss b/components/subnavigation/_subnavigation.scss index 9c0d3fe..2268170 100644 --- a/components/subnavigation/_subnavigation.scss +++ b/components/subnavigation/_subnavigation.scss @@ -4,7 +4,7 @@ .sb-subnavigation { position: sticky; - top: 2rem; + top: calc(#{tokens.$masthead-height-desktop} + 2rem); &__list { @include helpers.list-reset; @include media.mq(50em) { diff --git a/tokens/layout.yml b/tokens/layout.yml index c418885..fe1efd8 100644 --- a/tokens/layout.yml +++ b/tokens/layout.yml @@ -15,3 +15,7 @@ props: value: 0 category: border-radius type: size + masthead_height_desktop: + value: 4rem + category: sizing + type: size From 0d31cce0474ac958a96536c88b6773b16f22d70b Mon Sep 17 00:00:00 2001 From: Kimberly Grey Date: Fri, 11 Jun 2021 20:28:59 +0100 Subject: [PATCH 4/6] Adapt layout to screens with notches and overlapping browser UI. --- components/footer/_footer.scss | 2 +- components/masthead/_masthead.scss | 1 + src/sass/mixins/_layout.scss | 8 ++++++-- views/global-partials/html-head.twig | 2 +- 4 files changed, 9 insertions(+), 4 deletions(-) diff --git a/components/footer/_footer.scss b/components/footer/_footer.scss index 1eba7b7..f182d94 100644 --- a/components/footer/_footer.scss +++ b/components/footer/_footer.scss @@ -10,7 +10,7 @@ $narrowPadding: tokens.$grid-gutter / 2; margin-top: $padding * 2; padding-top: $padding; - padding-bottom: $padding; + padding-bottom: calc(#{$padding} + env(safe-area-inset-bottom)); color: tokens.$color-white; background-color: tokens.$color-off-black; @include media.dark-mode { diff --git a/components/masthead/_masthead.scss b/components/masthead/_masthead.scss index fe35a2c..f45c6e9 100644 --- a/components/masthead/_masthead.scss +++ b/components/masthead/_masthead.scss @@ -25,6 +25,7 @@ @include media.mq($flipBreakpoint) { flex-direction: row; align-items: center; + height: 100%; } } &__branding { diff --git a/src/sass/mixins/_layout.scss b/src/sass/mixins/_layout.scss index b34e0d4..912cb4c 100644 --- a/src/sass/mixins/_layout.scss +++ b/src/sass/mixins/_layout.scss @@ -5,10 +5,14 @@ */ @mixin container { - width: 92%; - max-width: tokens.$grid-max-width; + width: 100%; + max-width: calc( + #{tokens.$grid-max-width} + env(safe-area-inset-left) + env(safe-area-inset-right) + ); margin-right: auto; margin-left: auto; + padding-left: max(1rem, env(safe-area-inset-left)); + padding-right: max(1rem, env(safe-area-inset-right)); } /** diff --git a/views/global-partials/html-head.twig b/views/global-partials/html-head.twig index 7242fb5..a92f69b 100644 --- a/views/global-partials/html-head.twig +++ b/views/global-partials/html-head.twig @@ -3,7 +3,7 @@ - + From 71305046053d7d0317a6fd9cecd047a460f4cc37 Mon Sep 17 00:00:00 2001 From: Kimberly Grey Date: Fri, 11 Jun 2021 20:45:21 +0100 Subject: [PATCH 5/6] Add controls to manipulate logo colour from backoffice. --- functions.php | 2 + inc/header.php | 55 ++++++++++++++++++++++++++++ views/global-partials/html-head.twig | 6 +++ 3 files changed, 63 insertions(+) diff --git a/functions.php b/functions.php index 46cd032..c69f76c 100644 --- a/functions.php +++ b/functions.php @@ -115,6 +115,8 @@ public function add_to_context($context) $context['primary_navigation'] = new Timber\Menu('primary', [ 'depth' => 1, ]); + $context['logo_color_1'] = get_field('logo_color_1', 'option'); + $context['logo_color_2'] = get_field('logo_color_2', 'option'); // Phase banner $context['phase_banner_visible'] = get_field( diff --git a/inc/header.php b/inc/header.php index c177bf3..b2fbf6f 100644 --- a/inc/header.php +++ b/inc/header.php @@ -7,6 +7,61 @@ 'parent_slug' => 'website-settings', ]); + acf_add_local_field_group([ + 'key' => 'group_60c3ba96e91a4', + 'title' => 'Logo colours', + 'fields' => [ + [ + 'key' => 'field_60c3baa0fff2d', + 'label' => 'Color 1', + 'name' => 'logo_color_1', + 'type' => 'color_picker', + 'instructions' => + 'Applied to the \'Severn\' text and speech bubble icon.', + 'required' => 0, + 'conditional_logic' => 0, + 'wrapper' => [ + 'width' => '', + 'class' => '', + 'id' => '', + ], + 'default_value' => '', + ], + [ + 'key' => 'field_60c3bacffff2e', + 'label' => 'Color 2', + 'name' => 'logo_color_2', + 'type' => 'color_picker', + 'instructions' => 'Applied to the \'Bronies\' text.', + 'required' => 0, + 'conditional_logic' => 0, + 'wrapper' => [ + 'width' => '', + 'class' => '', + 'id' => '', + ], + 'default_value' => '', + ], + ], + 'location' => [ + [ + [ + 'param' => 'options_page', + 'operator' => '==', + 'value' => 'acf-options-header', + ], + ], + ], + 'menu_order' => 0, + 'position' => 'normal', + 'style' => 'default', + 'label_placement' => 'top', + 'instruction_placement' => 'label', + 'hide_on_screen' => '', + 'active' => true, + 'description' => '', + ]); + acf_add_local_field_group([ 'key' => 'group_5ec94f2745a73', 'title' => 'Banners', diff --git a/views/global-partials/html-head.twig b/views/global-partials/html-head.twig index a92f69b..9ee5ec2 100644 --- a/views/global-partials/html-head.twig +++ b/views/global-partials/html-head.twig @@ -25,6 +25,12 @@ + From b26b4b812819a87176f917819b69596ad9f32d8e Mon Sep 17 00:00:00 2001 From: Kimberly Grey Date: Fri, 11 Jun 2021 20:47:26 +0100 Subject: [PATCH 6/6] Bump version number to 1.11.0. --- package-lock.json | 2 +- package.json | 2 +- style.css | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7603309..d5f08ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "sb-plimsoll", - "version": "1.10.0", + "version": "1.11.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index bedcf65..df66109 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "sb-plimsoll", "namespace": "sb", - "version": "1.10.0", + "version": "1.11.0", "description": "", "main": "./dist/js/all.js", "browserslist": [ diff --git a/style.css b/style.css index 4d6ba5c..7528d09 100644 --- a/style.css +++ b/style.css @@ -5,6 +5,6 @@ Author: Kimberly Grey Author URI: https://berly.kim/ Description: - Version: 1.10.0 + Version: 1.11.0 Text Domain: sb */