diff --git a/barnsbury/sass/_extra-child-theme.scss b/barnsbury/sass/_extra-child-theme.scss index 23ad91bc9..cd4ce8b76 100644 --- a/barnsbury/sass/_extra-child-theme.scss +++ b/barnsbury/sass/_extra-child-theme.scss @@ -20,34 +20,19 @@ a { .site-header { - max-width: $content-width-flex; + margin-left: auto; + margin-right: auto; + position: relative; + + @extend %responsive-width-wide; padding: $spacing_unit; - & > * { - } - @include media(mobile) { - max-width: $content-width-sm; padding: (2 * $spacing_vertical) 0 (1.25 * $spacing_vertical); } - @include media(tablet) { - max-width: $content-width-md; - } - - @include media(laptop) { - max-width: $content-width-lg; - } - - @include media(desktop) { - max-width: $content-width-xl; - } - - @include media(wide) { - max-width: $content-width-xl; - } - +/* .main-navigation { margin-bottom: 0; } @@ -56,6 +41,7 @@ a { line-height: 1; margin-top: 0; } +*/ .social-navigation ul li a svg { display: block; @@ -63,6 +49,119 @@ a { height: $spacing_vertical; transform: translateZ(0); } + + /** + * CSS-grid Desktop Menu + */ + @include media(mobile) { + align-items: center; + display: grid; + grid-template-columns: auto; + grid-template-rows: auto; + grid-column-gap: #{map-deep-get($config-global, "spacing", "unit")}; + grid-template-areas: + "site-logo site-logo" + "site-title main-navigation" + "site-description social-navigation"; + + &:before, + &:after { + content: none; + display: none; + } + + & > * { + margin-top: 0; + margin-bottom: 0; + } + + .site-logo { + grid-area: site-logo; + margin-bottom: #{map-deep-get($config-global, "spacing", "unit")}; + } + + .site-title { + align-self: flex-end; + grid-area: site-title; + + & + .site-description { + margin-top: 0; + } + } + + .site-description { + align-self: center; + grid-area: site-description; + } + + .main-navigation { + align-self: center; + grid-area: main-navigation; + justify-self: flex-end; + + & > div > ul { + justify-content: flex-end; + margin-left: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")}; + margin-right: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")}; + + & > li { + padding: #{map-deep-get($config-header, "main-nav", "link-padding")}; + + & > a { + padding: 0; + } + } + + & > .menu-item-has-children > a::after { + font-size: #{0.5 * map-deep-get($config-global, "font", "size", "base")}; + } + } + + & > div > ul > li:hover, + & > div > ul > li.focus, + & > div > ul > li.current-menu-item { + + & > a { + color: #{map-deep-get($config-global, "color", "primary", "default")}; + } + + & > ul { + box-shadow: none; + overflow: hidden; + + &:before { + border-bottom: #{0.5 * map-deep-get($config-global, "spacing", "unit")} solid #{map-deep-get($config-global, "color", "primary", "default")}; + border-left: #{0.5 * map-deep-get($config-global, "spacing", "unit")} solid transparent; + border-right: #{0.5 * map-deep-get($config-global, "spacing", "unit")} solid transparent; + content: ""; + display: block; + margin-left: #{map-deep-get($config-global, "spacing", "unit")}; + width: #{map-deep-get($config-global, "spacing", "unit")}; + } + } + + & li { + + & > a { + background: #{map-deep-get($config-global, "color", "primary", "default")}; + color: #{map-deep-get($config-global, "color", "background", "default")}; + } + + &:hover > a, + &.focus > a, + &.current-menu-item > a { + background: #{map-deep-get($config-global, "color", "primary", "hover")}; + } + } + } + } + + .social-navigation { + align-self: center; + grid-area: social-navigation; + justify-self: flex-end; + } + } } .site-branding { diff --git a/barnsbury/style-rtl.css b/barnsbury/style-rtl.css index 45c49a422..79073b2b9 100644 --- a/barnsbury/style-rtl.css +++ b/barnsbury/style-rtl.css @@ -3131,7 +3131,7 @@ img#wpstats { .wp-block-group.alignwide .alignwide, .wp-block-group.alignwide .alignfull, -.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery { +.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, .site-header { margin-right: calc( -0.25 * ( 100vw - 100% )); margin-left: calc( -0.25 * ( 100vw - 100% )); width: calc( 100% + (0.25 * 2) * ( 100vw - 100% )); @@ -3141,7 +3141,7 @@ img#wpstats { @media only screen and (min-width: 560px) { .wp-block-group.alignwide .alignwide, .wp-block-group.alignwide .alignfull, - .wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery { + .wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, .site-header { margin-right: calc( -0.25 * ( 100vw - calc( 560px - 32px) )); margin-left: calc( -0.25 * ( 100vw - calc( 560px - 32px) )); width: calc( calc( 560px - 32px) + (0.25 * 2) * ( 100vw - calc( 560px - 32px) )); @@ -3152,7 +3152,7 @@ img#wpstats { @media only screen and (min-width: 640px) { .wp-block-group.alignwide .alignwide, .wp-block-group.alignwide .alignfull, - .wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery { + .wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, .site-header { margin-right: calc( -0.25 * ( 100vw - calc( 640px - 32px) )); margin-left: calc( -0.25 * ( 100vw - calc( 640px - 32px) )); width: calc( calc( 640px - 32px) + (0.25 * 2) * ( 100vw - calc( 640px - 32px) )); @@ -3163,7 +3163,7 @@ img#wpstats { @media only screen and (min-width: 782px) { .wp-block-group.alignwide .alignwide, .wp-block-group.alignwide .alignfull, - .wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery { + .wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, .site-header { margin-right: calc( -0.25 * ( 100vw - calc( 782px - 32px) )); margin-left: calc( -0.25 * ( 100vw - calc( 782px - 32px) )); width: calc( calc( 782px - 32px) + (0.25 * 2) * ( 100vw - calc( 782px - 32px) )); @@ -3174,7 +3174,7 @@ img#wpstats { @media only screen and (min-width: 1024px) { .wp-block-group.alignwide .alignwide, .wp-block-group.alignwide .alignfull, - .wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery { + .wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, .site-header { margin-right: -128px; margin-left: -128px; width: calc(calc( 782px - 32px) + 256px); @@ -3185,7 +3185,7 @@ img#wpstats { @media only screen and (min-width: 1280px) { .wp-block-group.alignwide .alignwide, .wp-block-group.alignwide .alignfull, - .wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery { + .wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, .site-header { margin-right: -128px; margin-left: -128px; width: calc(calc( 782px - 32px) + 256px); @@ -3394,41 +3394,21 @@ a { * Header */ .site-header { - max-width: 100%; + margin-right: auto; + margin-left: auto; + position: relative; padding: 16px; + /** + * CSS-grid Desktop Menu + */ } @media only screen and (min-width: 560px) { .site-header { - max-width: calc( 560px - 32px); padding: 64px 0 40px; } } -@media only screen and (min-width: 640px) { - .site-header { - max-width: calc( 640px - 32px); - } -} - -@media only screen and (min-width: 782px) { - .site-header { - max-width: calc( 782px - 32px); - } -} - -@media only screen and (min-width: 1024px) { - .site-header { - max-width: calc( 1024px - 32px); - } -} - -@media only screen and (min-width: 1280px) { - .site-header { - max-width: calc( 1024px - 32px); - } -} - .site-header .main-navigation { margin-bottom: 0; } @@ -3445,6 +3425,103 @@ a { transform: translateZ(0); } +@media only screen and (min-width: 560px) { + .site-header { + align-items: center; + display: grid; + grid-template-columns: auto; + grid-template-rows: auto; + grid-column-gap: 16px; + grid-template-areas: "site-logo site-logo" "site-title main-navigation" "site-description social-navigation"; + } + .site-header:before, .site-header:after { + content: none; + display: none; + } + .site-header > * { + margin-top: 0; + margin-bottom: 0; + } + .site-header .site-logo { + grid-area: site-logo; + margin-bottom: 16px; + } + .site-header .site-title { + align-self: flex-end; + grid-area: site-title; + } + .site-header .site-title + .site-description { + margin-top: 0; + } + .site-header .site-description { + align-self: center; + grid-area: site-description; + } + .site-header .main-navigation { + align-self: center; + grid-area: main-navigation; + justify-self: flex-end; + } + .site-header .main-navigation > div > ul { + justify-content: flex-end; + margin-right: -8px; + margin-left: -8px; + } + .site-header .main-navigation > div > ul > li { + padding: 10.56px; + } + .site-header .main-navigation > div > ul > li > a { + padding: 0; + } + .site-header .main-navigation > div > ul > .menu-item-has-children > a::after { + font-size: 0.5rem; + } + .site-header .main-navigation > div > ul > li:hover > a, + .site-header .main-navigation > div > ul > li.focus > a, + .site-header .main-navigation > div > ul > li.current-menu-item > a { + color: #20603C; + } + .site-header .main-navigation > div > ul > li:hover > ul, + .site-header .main-navigation > div > ul > li.focus > ul, + .site-header .main-navigation > div > ul > li.current-menu-item > ul { + box-shadow: none; + overflow: hidden; + } + .site-header .main-navigation > div > ul > li:hover > ul:before, + .site-header .main-navigation > div > ul > li.focus > ul:before, + .site-header .main-navigation > div > ul > li.current-menu-item > ul:before { + border-bottom: 8px solid #20603C; + border-right: 8px solid transparent; + border-left: 8px solid transparent; + content: ""; + display: block; + margin-right: 16px; + width: 16px; + } + .site-header .main-navigation > div > ul > li:hover li > a, + .site-header .main-navigation > div > ul > li.focus li > a, + .site-header .main-navigation > div > ul > li.current-menu-item li > a { + background: #20603C; + color: #FFFDF6; + } + .site-header .main-navigation > div > ul > li:hover li:hover > a, + .site-header .main-navigation > div > ul > li:hover li.focus > a, + .site-header .main-navigation > div > ul > li:hover li.current-menu-item > a, + .site-header .main-navigation > div > ul > li.focus li:hover > a, + .site-header .main-navigation > div > ul > li.focus li.focus > a, + .site-header .main-navigation > div > ul > li.focus li.current-menu-item > a, + .site-header .main-navigation > div > ul > li.current-menu-item li:hover > a, + .site-header .main-navigation > div > ul > li.current-menu-item li.focus > a, + .site-header .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a { + background: #133a24; + } + .site-header .social-navigation { + align-self: center; + grid-area: social-navigation; + justify-self: flex-end; + } +} + .site-branding { align-items: flex-start; display: flex; diff --git a/barnsbury/style.css b/barnsbury/style.css index 9dfae72e0..3b236913d 100644 --- a/barnsbury/style.css +++ b/barnsbury/style.css @@ -3136,7 +3136,7 @@ img#wpstats { .wp-block-group.alignwide .alignwide, .wp-block-group.alignwide .alignfull, -.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery { +.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, .site-header { margin-left: calc( -0.25 * ( 100vw - 100% )); margin-right: calc( -0.25 * ( 100vw - 100% )); width: calc( 100% + (0.25 * 2) * ( 100vw - 100% )); @@ -3146,7 +3146,7 @@ img#wpstats { @media only screen and (min-width: 560px) { .wp-block-group.alignwide .alignwide, .wp-block-group.alignwide .alignfull, - .wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery { + .wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, .site-header { margin-left: calc( -0.25 * ( 100vw - calc( 560px - 32px) )); margin-right: calc( -0.25 * ( 100vw - calc( 560px - 32px) )); width: calc( calc( 560px - 32px) + (0.25 * 2) * ( 100vw - calc( 560px - 32px) )); @@ -3157,7 +3157,7 @@ img#wpstats { @media only screen and (min-width: 640px) { .wp-block-group.alignwide .alignwide, .wp-block-group.alignwide .alignfull, - .wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery { + .wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, .site-header { margin-left: calc( -0.25 * ( 100vw - calc( 640px - 32px) )); margin-right: calc( -0.25 * ( 100vw - calc( 640px - 32px) )); width: calc( calc( 640px - 32px) + (0.25 * 2) * ( 100vw - calc( 640px - 32px) )); @@ -3168,7 +3168,7 @@ img#wpstats { @media only screen and (min-width: 782px) { .wp-block-group.alignwide .alignwide, .wp-block-group.alignwide .alignfull, - .wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery { + .wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, .site-header { margin-left: calc( -0.25 * ( 100vw - calc( 782px - 32px) )); margin-right: calc( -0.25 * ( 100vw - calc( 782px - 32px) )); width: calc( calc( 782px - 32px) + (0.25 * 2) * ( 100vw - calc( 782px - 32px) )); @@ -3179,7 +3179,7 @@ img#wpstats { @media only screen and (min-width: 1024px) { .wp-block-group.alignwide .alignwide, .wp-block-group.alignwide .alignfull, - .wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery { + .wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, .site-header { margin-left: -128px; margin-right: -128px; width: calc(calc( 782px - 32px) + 256px); @@ -3190,7 +3190,7 @@ img#wpstats { @media only screen and (min-width: 1280px) { .wp-block-group.alignwide .alignwide, .wp-block-group.alignwide .alignfull, - .wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery { + .wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, .site-header { margin-left: -128px; margin-right: -128px; width: calc(calc( 782px - 32px) + 256px); @@ -3399,50 +3399,31 @@ a { * Header */ .site-header { - max-width: 100%; + margin-left: auto; + margin-right: auto; + position: relative; padding: 16px; + /* + .main-navigation { + margin-bottom: 0; + } + + .social-navigation { + line-height: 1; + margin-top: 0; + } +*/ + /** + * CSS-grid Desktop Menu + */ } @media only screen and (min-width: 560px) { .site-header { - max-width: calc( 560px - 32px); padding: 64px 0 40px; } } -@media only screen and (min-width: 640px) { - .site-header { - max-width: calc( 640px - 32px); - } -} - -@media only screen and (min-width: 782px) { - .site-header { - max-width: calc( 782px - 32px); - } -} - -@media only screen and (min-width: 1024px) { - .site-header { - max-width: calc( 1024px - 32px); - } -} - -@media only screen and (min-width: 1280px) { - .site-header { - max-width: calc( 1024px - 32px); - } -} - -.site-header .main-navigation { - margin-bottom: 0; -} - -.site-header .social-navigation { - line-height: 1; - margin-top: 0; -} - .site-header .social-navigation ul li a svg { display: block; width: 32px; @@ -3450,6 +3431,103 @@ a { transform: translateZ(0); } +@media only screen and (min-width: 560px) { + .site-header { + align-items: center; + display: grid; + grid-template-columns: auto; + grid-template-rows: auto; + grid-column-gap: 16px; + grid-template-areas: "site-logo site-logo" "site-title main-navigation" "site-description social-navigation"; + } + .site-header:before, .site-header:after { + content: none; + display: none; + } + .site-header > * { + margin-top: 0; + margin-bottom: 0; + } + .site-header .site-logo { + grid-area: site-logo; + margin-bottom: 16px; + } + .site-header .site-title { + align-self: flex-end; + grid-area: site-title; + } + .site-header .site-title + .site-description { + margin-top: 0; + } + .site-header .site-description { + align-self: center; + grid-area: site-description; + } + .site-header .main-navigation { + align-self: center; + grid-area: main-navigation; + justify-self: flex-end; + } + .site-header .main-navigation > div > ul { + justify-content: flex-end; + margin-left: -8px; + margin-right: -8px; + } + .site-header .main-navigation > div > ul > li { + padding: 10.56px; + } + .site-header .main-navigation > div > ul > li > a { + padding: 0; + } + .site-header .main-navigation > div > ul > .menu-item-has-children > a::after { + font-size: 0.5rem; + } + .site-header .main-navigation > div > ul > li:hover > a, + .site-header .main-navigation > div > ul > li.focus > a, + .site-header .main-navigation > div > ul > li.current-menu-item > a { + color: #20603C; + } + .site-header .main-navigation > div > ul > li:hover > ul, + .site-header .main-navigation > div > ul > li.focus > ul, + .site-header .main-navigation > div > ul > li.current-menu-item > ul { + box-shadow: none; + overflow: hidden; + } + .site-header .main-navigation > div > ul > li:hover > ul:before, + .site-header .main-navigation > div > ul > li.focus > ul:before, + .site-header .main-navigation > div > ul > li.current-menu-item > ul:before { + border-bottom: 8px solid #20603C; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + content: ""; + display: block; + margin-left: 16px; + width: 16px; + } + .site-header .main-navigation > div > ul > li:hover li > a, + .site-header .main-navigation > div > ul > li.focus li > a, + .site-header .main-navigation > div > ul > li.current-menu-item li > a { + background: #20603C; + color: #FFFDF6; + } + .site-header .main-navigation > div > ul > li:hover li:hover > a, + .site-header .main-navigation > div > ul > li:hover li.focus > a, + .site-header .main-navigation > div > ul > li:hover li.current-menu-item > a, + .site-header .main-navigation > div > ul > li.focus li:hover > a, + .site-header .main-navigation > div > ul > li.focus li.focus > a, + .site-header .main-navigation > div > ul > li.focus li.current-menu-item > a, + .site-header .main-navigation > div > ul > li.current-menu-item li:hover > a, + .site-header .main-navigation > div > ul > li.current-menu-item li.focus > a, + .site-header .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a { + background: #133a24; + } + .site-header .social-navigation { + align-self: center; + grid-area: social-navigation; + justify-self: flex-end; + } +} + .site-branding { align-items: flex-start; display: flex; diff --git a/barnsbury/template-parts/header/site-branding.php b/barnsbury/template-parts/header/site-branding.php new file mode 100644 index 000000000..cd3918df2 --- /dev/null +++ b/barnsbury/template-parts/header/site-branding.php @@ -0,0 +1,31 @@ + + + +
+ + + + + ++ +
+