Varia: Add styles for the footer menu

varia/footer.php

@@ -17,6 +17,24 @@
 
 	<footer id="colophon" class="site-footer responsive-max-width">
 		<?php get_template_part( 'template-parts/footer/footer', 'widgets' ); ?>
+		<?php
+		if ( function_exists( 'the_privacy_policy_link' ) ) {
+			the_privacy_policy_link( '', '<span role="separator" aria-hidden="true"></span>' );
+		}
+		?>
+		<?php 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; ?>
 		<div class="site-info">
 			<?php $blog_info = get_bloginfo( 'name' ); ?>
 			<?php if ( ! empty( $blog_info ) ) : ?>
@@ -28,24 +46,6 @@
 				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>' );
-			}
-			?>
-			<?php 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; ?>
 		</div><!-- .site-info -->
 	</footer><!-- #colophon -->
 

varia/sass/components/footer/_footer-branding.scss

@@ -7,6 +7,11 @@
 	font-size: #{map-deep-get($config-footer, "font", "size")};
 	line-height: #{map-deep-get($config-footer, "font", "line-height")};
 
+	@include media(tablet) {
+		order: 1;
+		flex: 1 0 50%;
+	}
+
 	.site-name {
 		font-weight: bold;
 	}

varia/sass/components/footer/_footer-navigation.scss

@@ -2,19 +2,49 @@
 
 	display: inline;
 
+	@include media(tablet) {
+		flex: 1 0 50%;
+		order: 2;
+		text-align: right;
+	}
+
 	& > div {
 		display: inline;
 	}
 
 	.footer-menu {
 
-		display: inline;
+		color: #{map-deep-get($config-footer, "color", "text")};
 		padding-left: 0;
+		margin-left: -#{map-deep-get($config-global, "spacing", "unit")};
+		margin-right: -#{map-deep-get($config-global, "spacing", "unit")};
+
+		@include media(tablet) {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: flex-end;
+		}
 
 		li {
 			display: inline;
-			margin-right: #{map-deep-get($config-global, "spacing", "unit")}
 		}
-	}
 
-}
+		a {
+			font-family: #{map-deep-get($config-header, "main-nav", "font", "family")};
+			font-size: #{map-deep-get($config-global, "font", "size", "sm")};
+			font-weight: #{map-deep-get($config-header, "main-nav", "font", "weight")};
+			padding: #{map-deep-get($config-header, "main-nav", "link-padding")};
+
+			color: currentColor;
+
+			&:link,
+			&:visited {
+				color: currentColor;
+			}
+
+			&:hover {
+				color: #{map-deep-get($config-footer, "color", "link-hover")};
+			}
+		}
+	}
+}

varia/sass/components/footer/_footer.scss

@@ -1,2 +1,17 @@
+.site-footer {
+
+	@include media(tablet) {
+		align-items: baseline;
+		display: flex;
+		justify-content: space-between;
+
+		& > * {
+			margin-top: 0;
+			margin-bottom: 0;
+		}
+	}
+}
+
+
 @import "footer-branding";
 @import "footer-navigation";

varia/style-rtl.css

@@ -2199,12 +2199,31 @@ table th,
 	vertical-align: middle;
 }
 
+@media only screen and (min-width: 640px) {
+	.site-footer {
+		align-items: baseline;
+		display: flex;
+		justify-content: space-between;
+	}
+	.site-footer > * {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+}
+
 .site-info {
 	color: #767676;
 	font-family: sans-serif;
 	font-size: 0.83333rem;
 }
 
+@media only screen and (min-width: 640px) {
+	.site-info {
+		order: 1;
+		flex: 1 0 50%;
+	}
+}
+
 .site-info .site-name {
 	font-weight: bold;
 }
@@ -2225,18 +2244,51 @@ table th,
 	display: inline;
 }
 
+@media only screen and (min-width: 640px) {
+	.footer-navigation {
+		flex: 1 0 50%;
+		order: 2;
+		text-align: left;
+	}
+}
+
 .footer-navigation > div {
 	display: inline;
 }
 
 .footer-navigation .footer-menu {
-	display: inline;
+	color: #767676;
 	padding-right: 0;
+	margin-right: -16px;
+	margin-left: -16px;
+}
+
+@media only screen and (min-width: 640px) {
+	.footer-navigation .footer-menu {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+	}
 }
 
 .footer-navigation .footer-menu li {
 	display: inline;
-	margin-left: 16px;
+}
+
+.footer-navigation .footer-menu a {
+	font-family: sans-serif;
+	font-size: 0.83333rem;
+	font-weight: bold;
+	padding: 16px;
+	color: currentColor;
+}
+
+.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
+	color: currentColor;
+}
+
+.footer-navigation .footer-menu a:hover {
+	color: indigo;
 }
 
 .entry-title {

varia/style.css

@@ -2204,12 +2204,31 @@ table th,
 	vertical-align: middle;
 }
 
+@media only screen and (min-width: 640px) {
+	.site-footer {
+		align-items: baseline;
+		display: flex;
+		justify-content: space-between;
+	}
+	.site-footer > * {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+}
+
 .site-info {
 	color: #767676;
 	font-family: sans-serif;
 	font-size: 0.83333rem;
 }
 
+@media only screen and (min-width: 640px) {
+	.site-info {
+		order: 1;
+		flex: 1 0 50%;
+	}
+}
+
 .site-info .site-name {
 	font-weight: bold;
 }
@@ -2230,18 +2249,51 @@ table th,
 	display: inline;
 }
 
+@media only screen and (min-width: 640px) {
+	.footer-navigation {
+		flex: 1 0 50%;
+		order: 2;
+		text-align: right;
+	}
+}
+
 .footer-navigation > div {
 	display: inline;
 }
 
 .footer-navigation .footer-menu {
-	display: inline;
+	color: #767676;
 	padding-left: 0;
+	margin-left: -16px;
+	margin-right: -16px;
+}
+
+@media only screen and (min-width: 640px) {
+	.footer-navigation .footer-menu {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+	}
 }
 
 .footer-navigation .footer-menu li {
 	display: inline;
-	margin-right: 16px;
+}
+
+.footer-navigation .footer-menu a {
+	font-family: sans-serif;
+	font-size: 0.83333rem;
+	font-weight: bold;
+	padding: 16px;
+	color: currentColor;
+}
+
+.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
+	color: currentColor;
+}
+
+.footer-navigation .footer-menu a:hover {
+	color: indigo;
 }
 
 .entry-title {