We use cookies to ensure you get the best experience on our website
Startseite Erkunden Hilfe
Registrieren Anmelden
0ct0pu5
/
themes-wordpress
1
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

Dalston: Redesigning the header layout

Allan Cole vor 5 Jahren
Ursprung
0b20f9d764
Commit
1a8498493a
5 geänderte Dateien mit 143 neuen und 51 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  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
Datei anzeigen 

@@ -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
Datei anzeigen 

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

+ 20 - 17
dalston/style-rtl.css
Datei anzeigen 

@@ -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);
 
 	max-width: 100%;
 
 	margin-right: auto;
 
@@ -3247,35 +3247,35 @@ img#wpstats {
 
 }
 
 
 @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);
 
 		max-width: 100%;
 
 	}
 
 }
 
 
 @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);
 
 		max-width: 100%;
 
 	}
 
 }
 
 
 @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);
 
 		max-width: 100%;
 
 	}
 
 }
 
 
 @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);
 
 		max-width: 100%;
 
 	}
 
 }
 
 
 @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);
 
 		max-width: 100%;
 
 	}
 
@@ -3413,6 +3413,7 @@ a {
 
 	margin-left: auto;
 
 	padding-bottom: 0;
 
 	position: relative;
 
+	width: calc(100% - 32px);
 
 }
 
 
 /**
 
@@ -3424,8 +3425,9 @@ a {
 
 		display: grid;
 
 		grid-template-columns: auto;
 
 		grid-template-rows: auto;
 
+		grid-auto-flow: row;
 
 		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 {
 
 		content: none;
 
@@ -3435,28 +3437,28 @@ a {
 
 		margin-top: 0;
 
 		margin-bottom: 0;
 
 	}
 
+	.site-header .site-branding {
 
+		align-self: flex-end;
 
+		grid-area: site-branding;
 
+	}
 
 	.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;
 
+		align-self: flex-end;
 
 		grid-area: site-description;
 
 	}
 
 	.site-header .main-navigation {
 
-		align-self: center;
 
+		align-self: flex-start;
 
+		margin-bottom: 16px;
 
 		grid-area: main-navigation;
 
-		justify-self: flex-end;
 
+		justify-self: flex-start;
 
 	}
 
 	.site-header .main-navigation > div > ul {
 
-		justify-content: flex-end;
 
+		justify-content: flex-start;
 
 		margin-right: -8px;
 
 		margin-left: -8px;
 
 	}
 
@@ -3501,7 +3503,8 @@ a {
 
 		background: #005177;
 
 	}
 
 	.site-header .social-navigation {
 
-		align-self: center;
 
+		line-height: 1;
 
+		align-self: flex-start;
 
 		grid-area: social-navigation;
 
 		justify-self: flex-end;
 
 	}

+ 21 - 18
dalston/style.css
Datei anzeigen 

@@ -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);
 
 	max-width: 100%;
 
 	margin-left: auto;
 
@@ -3264,35 +3264,35 @@ img#wpstats {
 
 }
 
 
 @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);
 
 		max-width: 100%;
 
 	}
 
 }
 
 
 @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);
 
 		max-width: 100%;
 
 	}
 
 }
 
 
 @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);
 
 		max-width: 100%;
 
 	}
 
 }
 
 
 @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);
 
 		max-width: 100%;
 
 	}
 
 }
 
 
 @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);
 
 		max-width: 100%;
 
 	}
 
@@ -3442,6 +3442,7 @@ a {
 
 	margin-right: auto;
 
 	padding-bottom: 0;
 
 	position: relative;
 
+	width: calc(100% - 32px);
 
 }
 
 
 /**
 
@@ -3453,8 +3454,9 @@ a {
 
 		display: grid;
 
 		grid-template-columns: auto;
 
 		grid-template-rows: auto;
 
+		grid-auto-flow: row;
 
 		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 {
 
 		content: none;
 
@@ -3464,33 +3466,33 @@ a {
 
 		margin-top: 0;
 
 		margin-bottom: 0;
 
 	}
 
+	.site-header .site-branding {
 
+		align-self: flex-end;
 
+		grid-area: site-branding;
 
+	}
 
 	.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;
 
+		align-self: flex-end;
 
 		grid-area: site-description;
 
 	}
 
 	.site-header .main-navigation {
 
-		align-self: center;
 
+		align-self: flex-start;
 
+		margin-bottom: 16px;
 
 		grid-area: main-navigation;
 
-		justify-self: flex-end;
 
+		justify-self: flex-start;
 
 	}
 
 	.site-header .main-navigation > div > ul {
 
-		justify-content: flex-end;
 
+		justify-content: flex-start;
 
 		margin-left: -8px;
 
 		margin-right: -8px;
 
 	}
 
 	.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 {
 
 		font-size: 0.5rem;
 
@@ -3530,7 +3532,8 @@ a {
 
 		background: #005177;
 
 	}
 
 	.site-header .social-navigation {
 
-		align-self: center;
 
+		line-height: 1;
 
+		align-self: flex-start;
 
 		grid-area: social-navigation;
 
 		justify-self: flex-end;
 
 	}

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

@@ -7,7 +7,7 @@
 
  * @since 1.0.0
 
  */
 
 ?>
 
-
 
+<div class="site-branding">
 
 <?php if ( has_custom_logo() ) : ?>
 
 	<div class="site-logo"><?php the_custom_logo(); ?></div>
 
 <?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>
 
 	<?php endif; ?>
 
 <?php endif; ?>
 
+</div>
 
 
 <?php
 
 $description = get_bloginfo( 'description', 'display' );

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5