Преглед на файлове

Dalston: Redesigning the header layout

Allan Cole преди 5 години
родител
ревизия
1a8498493a
променени са 5 файла, в които са добавени 143 реда и са изтрити 51 реда
  1. 83 0
      dalston/header.php
  2. 17 15
      dalston/sass/_extra-child-theme.scss
  3. 20 17
      dalston/style-rtl.css
  4. 21 18
      dalston/style.css
  5. 2 1
      dalston/template-parts/header/site-branding.php

+ 83 - 0
dalston/header.php

@@ -0,0 +1,83 @@
+<?php
+/**
+ * The header for our theme
+ *
+ * This is the template that displays all of the <head> section and everything up until <div id="content">
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
+ *
+ * @package WordPress
+ * @subpackage Varia
+ * @since 1.0.0
+ */
+?><!doctype html>
+<html <?php language_attributes(); ?>>
+<head>
+	<meta charset="<?php bloginfo( 'charset' ); ?>" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<link rel="profile" href="https://gmpg.org/xfn/11" />
+	<?php wp_head(); ?>
+</head>
+
+<body <?php body_class(); ?>>
+<div id="page" class="site">
+	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'varia' ); ?></a>
+
+	<?php if ( class_exists( 'A8C\FSE\WP_Template' ) ) : // If the FSE plugin is active, use the Header template for content. ?>
+
+		<header id="masthead" class="site-header site-branding entry-content">
+			<?php
+				$template = new A8C\FSE\WP_Template();
+				$template->output_template_content( A8C\FSE\WP_Template::HEADER );
+			?>
+		</header>
+
+	<?php else : // Otherwise we'll fallback to the default Varia header below. ?>
+
+		<header id="masthead" class="site-header">
+
+			<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
+
+			<?php if ( has_nav_menu( 'menu-1' ) ) : ?>
+				<nav id="site-navigation" class="main-navigation" aria-label="<?php esc_attr_e( 'Main Navigation', 'varia' ); ?>">
+					<input type="checkbox" role="button" aria-haspopup="true" id="toggle" class="hide-visually">
+					<label for="toggle" id="toggle-menu" class="button">
+						<?php _e( 'Menu', 'varia' ); ?>
+						<span class="dropdown-icon open">+</span>
+						<span class="dropdown-icon close">&times;</span>
+						<span class="hide-visually expanded-text"><?php _e( 'expanded', 'varia' ); ?></span>
+						<span class="hide-visually collapsed-text"><?php _e( 'collapsed', 'varia' ); ?></span>
+					</label>
+					<?php
+					wp_nav_menu(
+						array(
+							'theme_location' => 'menu-1',
+							'menu_class'     => 'main-menu',
+							'items_wrap'     => '<ul id="%1$s" class="%2$s" aria-label="submenu">%3$s</ul>',
+						)
+					);
+					?>
+				</nav><!-- #site-navigation -->
+			<?php endif; ?>
+
+			<?php if ( has_nav_menu( 'social' ) ) : ?>
+				<nav class="social-navigation" aria-label="<?php esc_attr_e( 'Social Links Menu', 'varia' ); ?>">
+					<?php
+					wp_nav_menu(
+						array(
+							'theme_location' => 'social',
+							'menu_class'     => 'social-links-menu',
+							'link_before'    => '<span class="screen-reader-text">',
+							'link_after'     => '</span>' . varia_get_icon_svg( 'link' ),
+							'depth'          => 1,
+						)
+					);
+					?>
+				</nav><!-- .social-navigation -->
+			<?php endif; ?>
+
+		</header><!-- #masthead -->
+
+	<?php endif; ?>
+
+	<div id="content" class="site-content">

+ 17 - 15
dalston/sass/_extra-child-theme.scss

@@ -19,8 +19,7 @@ a {
 	margin-right: auto;
 	margin-right: auto;
 	padding-bottom: 0;
 	padding-bottom: 0;
 	position: relative;
 	position: relative;
-
-	@extend %responsive-alignwide-nested;
+	width: calc(100% - #{$spacing_unit * 2});
 }
 }
 
 
 /**
 /**
@@ -32,11 +31,11 @@ a {
 		display: grid;
 		display: grid;
 		grid-template-columns: auto;
 		grid-template-columns: auto;
 		grid-template-rows: auto;
 		grid-template-rows: auto;
+		grid-auto-flow: row;
 		grid-column-gap: $spacing_unit;
 		grid-column-gap: $spacing_unit;
 		grid-template-areas:
 		grid-template-areas:
-			"site-logo site-logo"
-			"site-title main-navigation"
-			"site-description social-navigation";
+			"site-branding main-navigation main-navigation social-navigation"
+			"site-branding site-description site-description .";
 
 
 		&:before,
 		&:before,
 		&:after {
 		&:after {
@@ -49,39 +48,41 @@ a {
 			margin-bottom: 0;
 			margin-bottom: 0;
 		}
 		}
 
 
+		.site-branding {
+			align-self: flex-end;
+			grid-area: site-branding;
+		}
+
 		.site-logo {
 		.site-logo {
-			grid-area: site-logo;
 			margin-bottom: $spacing_unit;
 			margin-bottom: $spacing_unit;
 		}
 		}
 
 
 		.site-title {
 		.site-title {
-			align-self: flex-end;
-			grid-area: site-title;
-
 			& + .site-description {
 			& + .site-description {
 				margin-top: 0;
 				margin-top: 0;
 			}
 			}
 		}
 		}
 
 
 		.site-description {
 		.site-description {
-			align-self: center;
+			align-self: flex-end;
 			grid-area: site-description;
 			grid-area: site-description;
 		}
 		}
 
 
 		.main-navigation {
 		.main-navigation {
-			align-self: center;
+			align-self: flex-start;
+			margin-bottom: $spacing_unit;
 			grid-area: main-navigation;
 			grid-area: main-navigation;
-			justify-self: flex-end;
+			justify-self: flex-start;
 
 
 			& > div > ul {
 			& > div > ul {
-				justify-content: flex-end;
+				justify-content: flex-start;
 				margin-left: -#{0.5 * $spacing_horizontal};
 				margin-left: -#{0.5 * $spacing_horizontal};
 				margin-right: -#{0.5 * $spacing_horizontal};
 				margin-right: -#{0.5 * $spacing_horizontal};
 
 
 				& > li {
 				& > li {
 
 
 					& > a {
 					& > a {
-						padding: 0 #{0.5 * map-deep-get($config-header, "main-nav", "link-padding")};
+						padding: #{0.5 * map-deep-get($config-header, "main-nav", "link-padding")};
 					}
 					}
 				}
 				}
 
 
@@ -126,7 +127,8 @@ a {
 		}
 		}
 
 
 		.social-navigation {
 		.social-navigation {
-			align-self: center;
+			line-height: 1;
+			align-self: flex-start;
 			grid-area: social-navigation;
 			grid-area: social-navigation;
 			justify-self: flex-end;
 			justify-self: flex-end;
 		}
 		}

+ 20 - 17
dalston/style-rtl.css

@@ -3239,7 +3239,7 @@ img#wpstats {
 	}
 	}
 }
 }
 
 
-.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead {
+.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
 	width: calc(100% + 256px);
 	width: calc(100% + 256px);
 	max-width: 100%;
 	max-width: 100%;
 	margin-right: auto;
 	margin-right: auto;
@@ -3247,35 +3247,35 @@ img#wpstats {
 }
 }
 
 
 @media only screen and (min-width: 560px) {
 @media only screen and (min-width: 560px) {
-	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
 		width: calc(calc( 560px - 32px) + 256px);
 		width: calc(calc( 560px - 32px) + 256px);
 		max-width: 100%;
 		max-width: 100%;
 	}
 	}
 }
 }
 
 
 @media only screen and (min-width: 640px) {
 @media only screen and (min-width: 640px) {
-	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
 		width: calc(calc( 640px - 32px) + 256px);
 		width: calc(calc( 640px - 32px) + 256px);
 		max-width: 100%;
 		max-width: 100%;
 	}
 	}
 }
 }
 
 
 @media only screen and (min-width: 782px) {
 @media only screen and (min-width: 782px) {
-	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
 		width: calc(calc( 782px - 32px) + 256px);
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: 100%;
 		max-width: 100%;
 	}
 	}
 }
 }
 
 
 @media only screen and (min-width: 1024px) {
 @media only screen and (min-width: 1024px) {
-	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
 		width: calc(calc( 782px - 32px) + 256px);
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: 100%;
 		max-width: 100%;
 	}
 	}
 }
 }
 
 
 @media only screen and (min-width: 1280px) {
 @media only screen and (min-width: 1280px) {
-	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
 		width: calc(calc( 782px - 32px) + 256px);
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: 100%;
 		max-width: 100%;
 	}
 	}
@@ -3413,6 +3413,7 @@ a {
 	margin-left: auto;
 	margin-left: auto;
 	padding-bottom: 0;
 	padding-bottom: 0;
 	position: relative;
 	position: relative;
+	width: calc(100% - 32px);
 }
 }
 
 
 /**
 /**
@@ -3424,8 +3425,9 @@ a {
 		display: grid;
 		display: grid;
 		grid-template-columns: auto;
 		grid-template-columns: auto;
 		grid-template-rows: auto;
 		grid-template-rows: auto;
+		grid-auto-flow: row;
 		grid-column-gap: 16px;
 		grid-column-gap: 16px;
-		grid-template-areas: "site-logo site-logo" "site-title main-navigation" "site-description social-navigation";
+		grid-template-areas: "site-branding main-navigation main-navigation social-navigation" "site-branding site-description site-description .";
 	}
 	}
 	.site-header:before, .site-header:after {
 	.site-header:before, .site-header:after {
 		content: none;
 		content: none;
@@ -3435,28 +3437,28 @@ a {
 		margin-top: 0;
 		margin-top: 0;
 		margin-bottom: 0;
 		margin-bottom: 0;
 	}
 	}
+	.site-header .site-branding {
+		align-self: flex-end;
+		grid-area: site-branding;
+	}
 	.site-header .site-logo {
 	.site-header .site-logo {
-		grid-area: site-logo;
 		margin-bottom: 16px;
 		margin-bottom: 16px;
 	}
 	}
-	.site-header .site-title {
-		align-self: flex-end;
-		grid-area: site-title;
-	}
 	.site-header .site-title + .site-description {
 	.site-header .site-title + .site-description {
 		margin-top: 0;
 		margin-top: 0;
 	}
 	}
 	.site-header .site-description {
 	.site-header .site-description {
-		align-self: center;
+		align-self: flex-end;
 		grid-area: site-description;
 		grid-area: site-description;
 	}
 	}
 	.site-header .main-navigation {
 	.site-header .main-navigation {
-		align-self: center;
+		align-self: flex-start;
+		margin-bottom: 16px;
 		grid-area: main-navigation;
 		grid-area: main-navigation;
-		justify-self: flex-end;
+		justify-self: flex-start;
 	}
 	}
 	.site-header .main-navigation > div > ul {
 	.site-header .main-navigation > div > ul {
-		justify-content: flex-end;
+		justify-content: flex-start;
 		margin-right: -8px;
 		margin-right: -8px;
 		margin-left: -8px;
 		margin-left: -8px;
 	}
 	}
@@ -3501,7 +3503,8 @@ a {
 		background: #005177;
 		background: #005177;
 	}
 	}
 	.site-header .social-navigation {
 	.site-header .social-navigation {
-		align-self: center;
+		line-height: 1;
+		align-self: flex-start;
 		grid-area: social-navigation;
 		grid-area: social-navigation;
 		justify-self: flex-end;
 		justify-self: flex-end;
 	}
 	}

+ 21 - 18
dalston/style.css

@@ -3256,7 +3256,7 @@ img#wpstats {
 	}
 	}
 }
 }
 
 
-.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead {
+.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
 	width: calc(100% + 256px);
 	width: calc(100% + 256px);
 	max-width: 100%;
 	max-width: 100%;
 	margin-left: auto;
 	margin-left: auto;
@@ -3264,35 +3264,35 @@ img#wpstats {
 }
 }
 
 
 @media only screen and (min-width: 560px) {
 @media only screen and (min-width: 560px) {
-	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
 		width: calc(calc( 560px - 32px) + 256px);
 		width: calc(calc( 560px - 32px) + 256px);
 		max-width: 100%;
 		max-width: 100%;
 	}
 	}
 }
 }
 
 
 @media only screen and (min-width: 640px) {
 @media only screen and (min-width: 640px) {
-	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
 		width: calc(calc( 640px - 32px) + 256px);
 		width: calc(calc( 640px - 32px) + 256px);
 		max-width: 100%;
 		max-width: 100%;
 	}
 	}
 }
 }
 
 
 @media only screen and (min-width: 782px) {
 @media only screen and (min-width: 782px) {
-	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
 		width: calc(calc( 782px - 32px) + 256px);
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: 100%;
 		max-width: 100%;
 	}
 	}
 }
 }
 
 
 @media only screen and (min-width: 1024px) {
 @media only screen and (min-width: 1024px) {
-	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
 		width: calc(calc( 782px - 32px) + 256px);
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: 100%;
 		max-width: 100%;
 	}
 	}
 }
 }
 
 
 @media only screen and (min-width: 1280px) {
 @media only screen and (min-width: 1280px) {
-	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
 		width: calc(calc( 782px - 32px) + 256px);
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: 100%;
 		max-width: 100%;
 	}
 	}
@@ -3442,6 +3442,7 @@ a {
 	margin-right: auto;
 	margin-right: auto;
 	padding-bottom: 0;
 	padding-bottom: 0;
 	position: relative;
 	position: relative;
+	width: calc(100% - 32px);
 }
 }
 
 
 /**
 /**
@@ -3453,8 +3454,9 @@ a {
 		display: grid;
 		display: grid;
 		grid-template-columns: auto;
 		grid-template-columns: auto;
 		grid-template-rows: auto;
 		grid-template-rows: auto;
+		grid-auto-flow: row;
 		grid-column-gap: 16px;
 		grid-column-gap: 16px;
-		grid-template-areas: "site-logo site-logo" "site-title main-navigation" "site-description social-navigation";
+		grid-template-areas: "site-branding main-navigation main-navigation social-navigation" "site-branding site-description site-description .";
 	}
 	}
 	.site-header:before, .site-header:after {
 	.site-header:before, .site-header:after {
 		content: none;
 		content: none;
@@ -3464,33 +3466,33 @@ a {
 		margin-top: 0;
 		margin-top: 0;
 		margin-bottom: 0;
 		margin-bottom: 0;
 	}
 	}
+	.site-header .site-branding {
+		align-self: flex-end;
+		grid-area: site-branding;
+	}
 	.site-header .site-logo {
 	.site-header .site-logo {
-		grid-area: site-logo;
 		margin-bottom: 16px;
 		margin-bottom: 16px;
 	}
 	}
-	.site-header .site-title {
-		align-self: flex-end;
-		grid-area: site-title;
-	}
 	.site-header .site-title + .site-description {
 	.site-header .site-title + .site-description {
 		margin-top: 0;
 		margin-top: 0;
 	}
 	}
 	.site-header .site-description {
 	.site-header .site-description {
-		align-self: center;
+		align-self: flex-end;
 		grid-area: site-description;
 		grid-area: site-description;
 	}
 	}
 	.site-header .main-navigation {
 	.site-header .main-navigation {
-		align-self: center;
+		align-self: flex-start;
+		margin-bottom: 16px;
 		grid-area: main-navigation;
 		grid-area: main-navigation;
-		justify-self: flex-end;
+		justify-self: flex-start;
 	}
 	}
 	.site-header .main-navigation > div > ul {
 	.site-header .main-navigation > div > ul {
-		justify-content: flex-end;
+		justify-content: flex-start;
 		margin-left: -8px;
 		margin-left: -8px;
 		margin-right: -8px;
 		margin-right: -8px;
 	}
 	}
 	.site-header .main-navigation > div > ul > li > a {
 	.site-header .main-navigation > div > ul > li > a {
-		padding: 0 8px;
+		padding: 8px;
 	}
 	}
 	.site-header .main-navigation > div > ul > .menu-item-has-children > a::after {
 	.site-header .main-navigation > div > ul > .menu-item-has-children > a::after {
 		font-size: 0.5rem;
 		font-size: 0.5rem;
@@ -3530,7 +3532,8 @@ a {
 		background: #005177;
 		background: #005177;
 	}
 	}
 	.site-header .social-navigation {
 	.site-header .social-navigation {
-		align-self: center;
+		line-height: 1;
+		align-self: flex-start;
 		grid-area: social-navigation;
 		grid-area: social-navigation;
 		justify-self: flex-end;
 		justify-self: flex-end;
 	}
 	}

+ 2 - 1
dalston/template-parts/header/site-branding.php

@@ -7,7 +7,7 @@
  * @since 1.0.0
  * @since 1.0.0
  */
  */
 ?>
 ?>
-
+<div class="site-branding">
 <?php if ( has_custom_logo() ) : ?>
 <?php if ( has_custom_logo() ) : ?>
 	<div class="site-logo"><?php the_custom_logo(); ?></div>
 	<div class="site-logo"><?php the_custom_logo(); ?></div>
 <?php endif; ?>
 <?php endif; ?>
@@ -20,6 +20,7 @@
 		<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
 		<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
 	<?php endif; ?>
 	<?php endif; ?>
 <?php endif; ?>
 <?php endif; ?>
+</div>
 
 
 <?php
 <?php
 $description = get_bloginfo( 'description', 'display' );
 $description = get_bloginfo( 'description', 'display' );