From 17601da4e4dd60d5307aded4fba948e16d3e2bfb Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 18 Nov 2021 13:26:42 +0000 Subject: [PATCH 1/5] Videomaker: Update navigation width --- blockbase/sass/blocks/_navigation.scss | 1 + videomaker/assets/theme.css | 2 ++ videomaker/sass/_navigation.scss | 2 ++ 3 files changed, 5 insertions(+) diff --git a/blockbase/sass/blocks/_navigation.scss b/blockbase/sass/blocks/_navigation.scss index 1e100ad8ce..d7c95e1478 100644 --- a/blockbase/sass/blocks/_navigation.scss +++ b/blockbase/sass/blocks/_navigation.scss @@ -35,6 +35,7 @@ .wp-block-navigation-item { align-items: flex-start; } + .wp-block-navigation__responsive-container-content .has-child { // Needed for specificity to beat the navigation block CSS .wp-block-navigation__submenu-container { font-size: var(--wp--preset--font-size--normal); diff --git a/videomaker/assets/theme.css b/videomaker/assets/theme.css index 9656df1213..d9b5c63c0b 100644 --- a/videomaker/assets/theme.css +++ b/videomaker/assets/theme.css @@ -109,6 +109,8 @@ div.post-meta a { .wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content { align-items: flex-start; + margin: 0 auto; + max-width: 800px; } .wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .wp-block-navigation-item { diff --git a/videomaker/sass/_navigation.scss b/videomaker/sass/_navigation.scss index f7dddaa289..9c186738cc 100644 --- a/videomaker/sass/_navigation.scss +++ b/videomaker/sass/_navigation.scss @@ -11,6 +11,8 @@ .wp-block-navigation__responsive-container-content { // Needed for specificity to beat the navigation block CSS align-items: flex-start; + margin: 0 auto; + max-width: 800px; // This should match the content width .wp-block-navigation-item { row-gap: 0rem; From 57c68d309b96e882f244c59410d18c2b1b28296e Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 18 Nov 2021 17:29:10 +0000 Subject: [PATCH 2/5] Update font sizes --- videomaker/assets/theme.css | 9 +++++++++ videomaker/sass/_navigation.scss | 9 +++++++++ 2 files changed, 18 insertions(+) diff --git a/videomaker/assets/theme.css b/videomaker/assets/theme.css index d9b5c63c0b..e056059c91 100644 --- a/videomaker/assets/theme.css +++ b/videomaker/assets/theme.css @@ -103,6 +103,11 @@ div.post-meta a { align-items: flex-end; } +.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container { + font-size: var(--wp--preset--font-size--large); + font-weight: 200; +} + .wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__container { row-gap: 1rem; } @@ -133,6 +138,10 @@ div.post-meta a { padding-bottom: calc( var(--wp--custom--gap--vertical) * 2); } +.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container { + font-size: var(--wp--preset--font-size--medium); +} + footer > .wp-block-group { align-items: center; justify-content: space-between; diff --git a/videomaker/sass/_navigation.scss b/videomaker/sass/_navigation.scss index 9c186738cc..f9af413469 100644 --- a/videomaker/sass/_navigation.scss +++ b/videomaker/sass/_navigation.scss @@ -5,6 +5,9 @@ .wp-block-navigation.is-style-blockbase-navigation-improved-responsive { &.is-responsive .is-menu-open.wp-block-navigation__responsive-container { + font-size: var(--wp--preset--font-size--large); + font-weight: 200; + .wp-block-navigation__container { row-gap: 1rem; } @@ -32,5 +35,11 @@ ul.wp-block-social-links { padding-bottom: calc( var(--wp--custom--gap--vertical) * 2 ); } + + .wp-block-navigation__responsive-container-content .has-child { // Needed for specificity to beat the navigation block CSS + .wp-block-navigation__submenu-container { + font-size: var(--wp--preset--font-size--medium); + } + } } } From 249dff7c2454a327f56a24b110c97e2d2228c1b1 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 24 Nov 2021 13:52:25 +0000 Subject: [PATCH 3/5] change the jusificiation to be center --- videomaker/assets/theme.css | 2 +- videomaker/sass/_navigation.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/videomaker/assets/theme.css b/videomaker/assets/theme.css index e056059c91..6ec1858818 100644 --- a/videomaker/assets/theme.css +++ b/videomaker/assets/theme.css @@ -131,7 +131,7 @@ div.post-meta a { } .wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content { - justify-content: space-between; + justify-content: center; } .wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container ul.wp-block-social-links { diff --git a/videomaker/sass/_navigation.scss b/videomaker/sass/_navigation.scss index f9af413469..9bd52036dd 100644 --- a/videomaker/sass/_navigation.scss +++ b/videomaker/sass/_navigation.scss @@ -30,7 +30,7 @@ } } .wp-block-navigation__responsive-container-content { - justify-content: space-between; + justify-content: center; } ul.wp-block-social-links { padding-bottom: calc( var(--wp--custom--gap--vertical) * 2 ); From e7fa86d6318c7e5dade2afc37f392331dad3b931 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 24 Nov 2021 17:31:46 +0000 Subject: [PATCH 4/5] add social links to the navigation --- videomaker/block-template-parts/header.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/videomaker/block-template-parts/header.html b/videomaker/block-template-parts/header.html index d90373b5e3..91c716faec 100644 --- a/videomaker/block-template-parts/header.html +++ b/videomaker/block-template-parts/header.html @@ -7,6 +7,6 @@ - + From 32330f59d80cafc6405687aac0c59230cf2dce25 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 24 Nov 2021 17:36:14 +0000 Subject: [PATCH 5/5] prevent the navigation wrapping --- videomaker/assets/theme.css | 1 + videomaker/sass/_navigation.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/videomaker/assets/theme.css b/videomaker/assets/theme.css index 6ec1858818..d81dbf62a9 100644 --- a/videomaker/assets/theme.css +++ b/videomaker/assets/theme.css @@ -131,6 +131,7 @@ div.post-meta a { } .wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content { + flex-wrap: nowrap; justify-content: center; } diff --git a/videomaker/sass/_navigation.scss b/videomaker/sass/_navigation.scss index 9bd52036dd..cc5aa98caf 100644 --- a/videomaker/sass/_navigation.scss +++ b/videomaker/sass/_navigation.scss @@ -30,6 +30,7 @@ } } .wp-block-navigation__responsive-container-content { + flex-wrap: nowrap; justify-content: center; } ul.wp-block-social-links {