Dalston: Various design improvements for the footer and menu

dalston/footer.php

@@ -0,0 +1,64 @@
+<?php
+/**
+ * The template for displaying the footer
+ *
+ * Contains the closing of the #content div and all content after.
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
+ *
+ * @package WordPress
+ * @subpackage Varia
+ * @since 1.0.0
+ */
+
+?>
+
+	</div><!-- #content -->
+
+	<footer id="colophon" class="site-footer <?php echo class_exists( 'A8C\FSE\WP_Template' ) ? 'entry-content' : 'responsive-max-width'; ?>">
+		<?php
+			if ( class_exists( 'A8C\FSE\WP_Template' ) ) : // If the FSE plugin is active, use the Header template for content.
+				$template = new A8C\FSE\WP_Template();
+				$template->output_template_content( A8C\FSE\WP_Template::FOOTER );
+			else : // Otherwise we'll fallback to the default Varia footer below.
+				get_template_part( 'template-parts/footer/footer', 'widgets' );
+
+				if ( has_nav_menu( 'menu-2' ) ) : ?>
+					<nav class="footer-navigation" aria-label="<?php esc_attr_e( 'Footer Menu', 'varia' ); ?>">
+						<?php
+						wp_nav_menu(
+							array(
+								'theme_location' => 'menu-2',
+								'menu_class'     => 'footer-menu',
+								'depth'          => 1,
+							)
+						);
+						?>
+					</nav><!-- .footer-navigation -->
+				<?php endif;
+			endif;
+		?>
+
+		<div class="site-info">
+			<?php $blog_info = get_bloginfo( 'name' ); ?>
+			<?php if ( ! empty( $blog_info ) ) : ?>
+				<a class="site-name" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a><span class="comma">,</span>
+			<?php endif; ?>
+			<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'varia' ) ); ?>" class="imprint">
+				<?php
+				/* translators: %s: WordPress. */
+				printf( __( 'proudly powered by %s.', 'varia' ), 'WordPress' );
+				?>
+			</a>
+			<?php if ( function_exists( 'the_privacy_policy_link' ) ) {
+				the_privacy_policy_link( '', '<span role="separator" aria-hidden="true"></span>' );
+			} ?>
+		</div><!-- .site-info -->
+	</footer><!-- #colophon -->
+
+</div><!-- #page -->
+
+<?php wp_footer(); ?>
+
+</body>
+</html>

dalston/sass/_config-child-theme-deep.scss

@@ -308,7 +308,7 @@ $config-header: (
 			// Fonts
 			"font": (
 				"family": map-deep-get($config-global, "font", "family", "secondary"),
-				"size": map-deep-get($config-global, "font", "size", "xs"),
+				"size": map-deep-get($config-global, "font", "size", "md"),
 			),
 		),
 	),
@@ -353,7 +353,7 @@ $config-footer: (
 	// Fonts
 	"font": (
 		"family": map-deep-get($config-global, "font", "family", "primary"),
-		"size": map-deep-get($config-global, "font", "size", "sm"),
+		"size": map-deep-get($config-global, "font", "size", "xs"),
 		"line-height": map-deep-get($config-global, "font", "line-height", "sm"),
 	),
 );

dalston/sass/_extra-child-theme.scss

@@ -19,7 +19,23 @@ a {
 	margin-right: auto;
 	padding-bottom: 0;
 	position: relative;
-	width: calc(100% - #{$spacing_unit * 2});
+	width: $content-width-flex;
+
+	@include media(mobile) {
+		width: $content-width-sm;
+	}
+
+	@include media(tablet) {
+		width: $content-width-md;
+	}
+
+	@include media(laptop) {
+		width: $content-width-lg;
+	}
+
+	@include media(desktop) {
+		width: calc(#{$content-width-flex} - #{$spacing_vertical});
+	}
 }
 
 /**
@@ -29,13 +45,14 @@ a {
 	.site-header {
 		align-items: center;
 		display: grid;
-		grid-template-columns: auto;
+		grid-template-columns: 66% auto;
 		grid-template-rows: auto;
 		grid-auto-flow: row;
 		grid-column-gap: $spacing_unit;
 		grid-template-areas:
-			"site-branding main-navigation main-navigation social-navigation"
-			"site-branding site-description site-description .";
+			"site-branding site-branding"
+			"site-description site-description"
+			"main-navigation social-navigation";
 
 		&:before,
 		&:after {
@@ -49,8 +66,9 @@ a {
 		}
 
 		.site-branding {
-			align-self: flex-end;
+			align-self: baseline;
 			grid-area: site-branding;
+			flex: 0 1 25%;
 		}
 
 		.site-logo {
@@ -64,13 +82,13 @@ a {
 		}
 
 		.site-description {
-			align-self: flex-end;
+			align-self: baseline;
 			grid-area: site-description;
 		}
 
 		.main-navigation {
 			align-self: flex-start;
-			margin-bottom: $spacing_unit;
+			margin-bottom: (2 * $spacing_unit);
 			grid-area: main-navigation;
 			justify-self: flex-start;
 
@@ -135,6 +153,19 @@ a {
 	}
 }
 
+@include media(desktop) {
+	.site-header {
+		grid-template-columns: calc( 0.5 * (100vw - #{$content-width-lg} - #{4 * $spacing_unit}) ) auto 15%;
+		grid-template-rows: auto;
+		grid-auto-flow: row;
+		grid-column-gap: $spacing_unit;
+		grid-template-areas:
+			". main-navigation social-navigation"
+			"site-branding site-description .";
+
+	}
+}
+
 // Social Menu
 .social-navigation {
 	& > div > ul {
@@ -192,4 +223,17 @@ a {
 		border: 1px solid #{map-deep-get($config-global, "color", "background", "default")};
 		z-index: 1;
 	}
-}
+}
+
+
+/**
+ * Footer
+ */
+
+#colophon {
+	@extend %responsive-alignwide;
+}
+
+.footer-navigation .footer-menu a {
+	font-size: map-deep-get($config-global, "font", "size", "xs");
+}

dalston/style-rtl.css

@@ -2314,7 +2314,7 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 0.75614rem;
+	font-size: 1.15rem;
 }
 
 .main-navigation {
@@ -2381,11 +2381,6 @@ table th,
 	z-index: 1;
 }
 
-.main-navigation > div > ul li:hover, .main-navigation > div > ul li[focus-within] {
-	cursor: pointer;
-	z-index: 99999;
-}
-
 .main-navigation > div > ul li:hover, .main-navigation > div > ul li:focus-within {
 	cursor: pointer;
 	z-index: 99999;
@@ -2398,14 +2393,6 @@ table th,
 		/* Submenu display */
 	}
 	.main-navigation > div > ul li:hover > ul,
-	.main-navigation > div > ul li[focus-within] > ul,
-	.main-navigation > div > ul li ul:hover,
-	.main-navigation > div > ul li ul:focus {
-		visibility: visible;
-		opacity: 1;
-		display: block;
-	}
-	.main-navigation > div > ul li:hover > ul,
 	.main-navigation > div > ul li:focus-within > ul,
 	.main-navigation > div > ul li ul:hover,
 	.main-navigation > div > ul li ul:focus {
@@ -2570,7 +2557,7 @@ table th,
 .site-info {
 	color: #767676;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 0.86957rem;
+	font-size: 0.75614rem;
 }
 
 @media only screen and (min-width: 640px) {
@@ -3197,7 +3184,7 @@ img#wpstats {
 	}
 }
 
-.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
 	width: calc(100% + 256px);
 	max-width: calc(100% - 32px);
 	margin-right: auto;
@@ -3205,35 +3192,35 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 560px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
 		width: calc(calc( 560px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
 		width: calc(calc( 640px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
@@ -3413,7 +3400,31 @@ a {
 	margin-left: auto;
 	padding-bottom: 0;
 	position: relative;
-	width: calc(100% - 32px);
+	width: 100%;
+}
+
+@media only screen and (min-width: 560px) {
+	#masthead {
+		width: calc( 560px - 32px);
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	#masthead {
+		width: calc( 640px - 32px);
+	}
+}
+
+@media only screen and (min-width: 782px) {
+	#masthead {
+		width: calc( 782px - 32px);
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	#masthead {
+		width: calc(100% - 32px);
+	}
 }
 
 /**
@@ -3423,11 +3434,11 @@ a {
 	.site-header {
 		align-items: center;
 		display: grid;
-		grid-template-columns: auto;
+		grid-template-columns: 66% auto;
 		grid-template-rows: auto;
 		grid-auto-flow: row;
 		grid-column-gap: 16px;
-		grid-template-areas: "site-branding main-navigation main-navigation social-navigation" "site-branding site-description site-description .";
+		grid-template-areas: "site-branding site-branding" "site-description site-description" "main-navigation social-navigation";
 	}
 	.site-header:before, .site-header:after {
 		content: none;
@@ -3438,8 +3449,9 @@ a {
 		margin-bottom: 0;
 	}
 	.site-header .site-branding {
-		align-self: flex-end;
+		align-self: baseline;
 		grid-area: site-branding;
+		flex: 0 1 25%;
 	}
 	.site-header .site-logo {
 		margin-bottom: 16px;
@@ -3448,12 +3460,12 @@ a {
 		margin-top: 0;
 	}
 	.site-header .site-description {
-		align-self: flex-end;
+		align-self: baseline;
 		grid-area: site-description;
 	}
 	.site-header .main-navigation {
 		align-self: flex-start;
-		margin-bottom: 16px;
+		margin-bottom: 32px;
 		grid-area: main-navigation;
 		justify-self: flex-start;
 	}
@@ -3463,7 +3475,7 @@ a {
 		margin-left: -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;
@@ -3510,6 +3522,16 @@ a {
 	}
 }
 
+@media only screen and (min-width: 1024px) {
+	.site-header {
+		grid-template-columns: calc( 0.5 * (100vw - calc( 782px - 32px) - 64px)) auto 15%;
+		grid-template-rows: auto;
+		grid-auto-flow: row;
+		grid-column-gap: 16px;
+		grid-template-areas: ". main-navigation social-navigation" "site-branding site-description .";
+	}
+}
+
 .social-navigation > div > ul {
 	flex-wrap: wrap;
 }
@@ -3563,3 +3585,10 @@ a {
 	border: 1px solid #FFFFFF;
 	z-index: 1;
 }
+
+/**
+ * Footer
+ */
+.footer-navigation .footer-menu a {
+	font-size: 0.75614rem;
+}

dalston/style.css

@@ -2331,7 +2331,7 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 0.75614rem;
+	font-size: 1.15rem;
 }
 
 .main-navigation {
@@ -2587,7 +2587,7 @@ table th,
 .site-info {
 	color: #767676;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 0.86957rem;
+	font-size: 0.75614rem;
 }
 
 @media only screen and (min-width: 640px) {
@@ -3214,7 +3214,7 @@ img#wpstats {
 	}
 }
 
-.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
 	width: calc(100% + 256px);
 	max-width: calc(100% - 32px);
 	margin-left: auto;
@@ -3222,35 +3222,35 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 560px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
 		width: calc(calc( 560px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
 		width: calc(calc( 640px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #colophon {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
@@ -3442,7 +3442,31 @@ a {
 	margin-right: auto;
 	padding-bottom: 0;
 	position: relative;
-	width: calc(100% - 32px);
+	width: 100%;
+}
+
+@media only screen and (min-width: 560px) {
+	#masthead {
+		width: calc( 560px - 32px);
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	#masthead {
+		width: calc( 640px - 32px);
+	}
+}
+
+@media only screen and (min-width: 782px) {
+	#masthead {
+		width: calc( 782px - 32px);
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	#masthead {
+		width: calc(100% - 32px);
+	}
 }
 
 /**
@@ -3452,11 +3476,11 @@ a {
 	.site-header {
 		align-items: center;
 		display: grid;
-		grid-template-columns: auto;
+		grid-template-columns: 66% auto;
 		grid-template-rows: auto;
 		grid-auto-flow: row;
 		grid-column-gap: 16px;
-		grid-template-areas: "site-branding main-navigation main-navigation social-navigation" "site-branding site-description site-description .";
+		grid-template-areas: "site-branding site-branding" "site-description site-description" "main-navigation social-navigation";
 	}
 	.site-header:before, .site-header:after {
 		content: none;
@@ -3467,8 +3491,9 @@ a {
 		margin-bottom: 0;
 	}
 	.site-header .site-branding {
-		align-self: flex-end;
+		align-self: baseline;
 		grid-area: site-branding;
+		flex: 0 1 25%;
 	}
 	.site-header .site-logo {
 		margin-bottom: 16px;
@@ -3477,12 +3502,12 @@ a {
 		margin-top: 0;
 	}
 	.site-header .site-description {
-		align-self: flex-end;
+		align-self: baseline;
 		grid-area: site-description;
 	}
 	.site-header .main-navigation {
 		align-self: flex-start;
-		margin-bottom: 16px;
+		margin-bottom: 32px;
 		grid-area: main-navigation;
 		justify-self: flex-start;
 	}
@@ -3539,6 +3564,16 @@ a {
 	}
 }
 
+@media only screen and (min-width: 1024px) {
+	.site-header {
+		grid-template-columns: calc( 0.5 * (100vw - calc( 782px - 32px) - 64px)) auto 15%;
+		grid-template-rows: auto;
+		grid-auto-flow: row;
+		grid-column-gap: 16px;
+		grid-template-areas: ". main-navigation social-navigation" "site-branding site-description .";
+	}
+}
+
 .social-navigation > div > ul {
 	flex-wrap: wrap;
 }
@@ -3592,3 +3627,10 @@ a {
 	border: 1px solid #FFFFFF;
 	z-index: 1;
 }
+
+/**
+ * Footer
+ */
+.footer-navigation .footer-menu a {
+	font-size: 0.75614rem;
+}