beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Barnsbury: Make header layout match Hever layout

Browse source
This commit is contained in:
Allan Cole 2019-08-14 16:39:54 -04:00 committed by Danny Dudzic
parent d509b5cd47
commit 7e0fb69371
4 changed files with 379 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

141
barnsbury/sass/_extra-child-theme.scss
View file

@ -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 {

141
barnsbury/style-rtl.css
View file

@ -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;

160
barnsbury/style.css
View file

@ -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;

31
barnsbury/template-parts/header/site-branding.php Normal file
View file

@ -0,0 +1,31 @@
<?php
/**
* Displays header site branding
*
* @package WordPress
* @subpackage Barnsbury
* @since 1.0.0
*/
?>
<?php if ( has_custom_logo() ) : ?>
<div class="site-logo"><?php the_custom_logo(); ?></div>
<?php endif; ?>
<?php $blog_info = get_bloginfo( 'name' ); ?>
<?php if ( ! empty( $blog_info ) ) : ?>
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
<?php endif; ?>
<?php endif; ?>
<?php
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) :
?>
<p class="site-description">
<?php echo $description; ?>
</p>
<?php endif; ?>