Barnsbury: Make header layout match Hever layout

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;
 
-	padding: $spacing_unit;
+	@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 {

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;

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;
-}
-
-@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);
+	/*
+	.main-navigation {
+		margin-bottom: 0;
 	}
-}
 
-@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);
+	.social-navigation {
+		line-height: 1;
+		margin-top: 0;
 	}
+*/
+	/**
+	 * CSS-grid Desktop Menu
+	 */
 }
 
-@media only screen and (min-width: 1280px) {
+@media only screen and (min-width: 560px) {
 	.site-header {
-		max-width: calc( 1024px - 32px);
+		padding: 64px 0 40px;
 	}
 }
 
-.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;

barnsbury/template-parts/header/site-branding.php

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