Morden: Update theme

* Add new footer file
* Add new site-branding file
* Rework Primary & Secondary colours
* Update CSS

morden/footer.php

@@ -0,0 +1,60 @@
+<?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 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>' );
+		}
+		?>
+
+    <div class="footer-wrapper">
+  		<?php if ( has_nav_menu( 'menu-2' ) ) : ?>
+  			<nav class="footer-navigation" aria-label="<?php esc_attr_e( 'Footer Menu', 'morden' ); ?>">
+  				<?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 ) ) : ?>
+  				<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/', 'morden' ) ); ?>" class="imprint">
+  				<?php
+  				/* translators: %s: WordPress. */
+  				printf( __( 'proudly powered by %s.', 'morden' ), 'WordPress' );
+  				?>
+  			</a>
+  		</div><!-- .site-info -->
+    </div><!-- .footer-wrapper -->
+	</footer><!-- #colophon -->
+
+</div><!-- #page -->
+
+<?php wp_footer(); ?>
+
+</body>
+</html>

morden/functions.php

@@ -60,37 +60,37 @@ if ( ! function_exists( 'morden_setup' ) ) :
 				array(
 					'name'  => __( 'Primary', 'morden' ),
 					'slug'  => 'primary',
-					'color' => '#0000FF', // varia_hsl_hex( 'default' === get_theme_mod( 'primary_color' ) ? $default_hue : get_theme_mod( 'primary_color_hue', $default_hue ), $saturation, $lightness ),
+					'color' => '#E22C2C',
 				),
 				array(
 					'name'  => __( 'Secondary', 'morden' ),
 					'slug'  => 'secondary',
-					'color' => '#FF0000', // varia_hsl_hex( 'default' === get_theme_mod( 'primary_color' ) ? $default_hue : get_theme_mod( 'primary_color_hue', $default_hue ), $saturation, $lightness_hover ),
+					'color' => '#EF6F13',
 				),
 				array(
 					'name'  => __( 'Dark Gray', 'morden' ),
 					'slug'  => 'foreground-dark',
-					'color' => '#111111',
+					'color' => '#101010',
 				),
 				array(
 					'name'  => __( 'Gray', 'morden' ),
 					'slug'  => 'foreground',
-					'color' => '#444444',
+					'color' => '#303030',
 				),
 				array(
 					'name'  => __( 'Light Gray', 'morden' ),
 					'slug'  => 'foreground-light',
-					'color' => '#767676',
+					'color' => '#757575',
 				),
 				array(
 					'name'  => __( 'Lighter Gray', 'morden' ),
 					'slug'  => 'background-dark',
-					'color' => '#DDDDDD',
+					'color' => '#C5C5C5',
 				),
 				array(
 					'name'  => __( 'Subtle Gray', 'morden' ),
 					'slug'  => 'background-light',
-					'color' => '#FAFAFA',
+					'color' => '#F8F8F8',
 				),
 				array(
 					'name'  => __( 'White', 'morden' ),

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

@@ -61,11 +61,11 @@ $config-global: (
 	/* Colors */
 	"color": (
 		"primary": (
-			"default": #E54343,
+			"default": #E22C2C,
 			"hover": #303030,
 		),
 		"secondary": (
-			"default": #17C16C,
+			"default": #EF6F13,
 			"hover": #303030,
 		),
 		"foreground": (
@@ -256,7 +256,7 @@ $config-pullquote: (
 	),
 	// Border
 	"border": (
-		"width": #{0.5 * $baseline-unit},
+		"width": #{0.25 * $baseline-unit},
 	),
 );
 
@@ -285,9 +285,9 @@ $config-header: (
 	"branding": (
 		// Colors
 		"color": (
-			"text": map-deep-get($config-global, "color", "foreground", "light"),
-			"link": map-deep-get($config-global, "color", "foreground", "default"),
-			"link-hover": map-deep-get($config-global, "color", "primary", "default"),
+			"text": map-deep-get($config-global, "color", "background", "default"),
+			"link": map-deep-get($config-global, "color", "background", "default"),
+			"link-hover": rgba(map-deep-get($config-global, "color", "background", "default"), 0.8),
 		),
 		// Fonts & Typography
 		"title": (
@@ -312,9 +312,9 @@ $config-header: (
 	"main-nav": (
 		// Colors
 		"color": (
-			"text": map-deep-get($config-global, "color", "foreground", "default"),
-			"link": map-deep-get($config-global, "color", "foreground", "default"),
-			"link-hover": map-deep-get($config-global, "color", "primary", "default"),
+			"text": map-deep-get($config-global, "color", "background", "default"),
+			"link": map-deep-get($config-global, "color", "background", "default"),
+			"link-hover": rgba(map-deep-get($config-global, "color", "background", "default"), 0.8),
 		),
 		// Fonts
 		"font": (
@@ -329,8 +329,8 @@ $config-header: (
 	"social-nav": (
 		// Colors
 		"color": (
-			"link": map-deep-get($config-global, "color", "foreground", "light"),
-			"link-hover": map-deep-get($config-global, "color", "primary", "default"),
+			"link": map-deep-get($config-global, "color", "background", "default"),
+			"link-hover": rgba(map-deep-get($config-global, "color", "background", "default"), 0.8),
 		),
 		"link-padding": (0.5 * map-deep-get($config-global, "spacing", "unit")),
 	),
@@ -342,9 +342,9 @@ $config-header: (
 $config-footer: (
 	// Colors
 	"color": (
-		"text": map-deep-get($config-global, "color", "foreground", "light"),
-		"link": map-deep-get($config-global, "color", "primary", "default"),
-		"link-hover": map-deep-get($config-global, "color", "primary", "hover"),
+		"text": map-deep-get($config-global, "color", "background", "default"),
+		"link": map-deep-get($config-global, "color", "background", "default"),
+		"link-hover": map-deep-get($config-global, "color", "background", "dark"),
 	),
 	// Fonts
 	"font": (

morden/sass/_extra-child-theme.scss

@@ -33,12 +33,39 @@ a {
 
 #masthead {
 	padding-bottom: 0;
+
+	&:before {
+		background: #{map-deep-get($config-global, "color", "primary", "default")};
+		border-bottom: #{map-deep-get($config-global, "spacing", "vertical")} solid #{map-deep-get($config-global, "color", "primary", "default")};
+		box-sizing: content-box;
+		content: "";
+		display: block;
+		height: 100%;
+		left: 50%;
+		position: absolute;
+		top: 0;
+		transform: translateX(-50%);
+		width: 100vw;
+		z-index: -1;
+	}
 }
 
 /**
  * Mobile-Menu
  */
+.main-navigation #toggle:focus + #toggle-menu,
+#toggle-menu {
+	background: map-deep-get($config-global, "color", "background", "default");
+	color: map-deep-get($config-global, "color", "foreground", "default");
+	text-decoration: none;
 
+	&:active,
+	&:focus,
+	&:hover {
+		background: map-deep-get($config-global, "color", "foreground", "default");
+		color: map-deep-get($config-global, "color", "background", "default");
+	}
+}
 
 /**
  * CSS-grid Desktop Menu
@@ -113,29 +140,23 @@ a {
 			& > div > ul > li.current-menu-item {
 
 				& > a {
-					color: #{map-deep-get($config-global, "color", "primary", "default")};
+					color: rgba(map-deep-get($config-global, "color", "background", "default"), 0.8);
 				}
 
 				& > ul {
+					border: 1px solid darken(map-deep-get($config-global, "color", "primary", "default"), 25%);
+					border-top: 0;
 					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 {
+					border-top: 1px solid darken(map-deep-get($config-global, "color", "primary", "default"), 25%);
 
 					& > a {
 						background: #{map-deep-get($config-global, "color", "primary", "default")};
 						color: #{map-deep-get($config-global, "color", "background", "default")};
+						padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")} #{1.5 * map-deep-get($config-global, "spacing", "unit")};
 					}
 
 					&:hover > a,
@@ -174,8 +195,38 @@ a {
 }
 
 /**
- * Footer Menu
+ * Footer
  */
+#colophon {
+	padding-bottom: 0;
+}
+
+// Footer Wrapper
+.footer-wrapper {
+	align-items: flex-end;
+  display: flex;
+	flex: 1 0 100%;
+  flex-wrap: wrap;
+  justify-content: space-between;
+	padding-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
+	padding-top: #{map-deep-get($config-global, "spacing", "vertical")};
+	position: relative;
+
+	&:before {
+		background: #{map-deep-get($config-global, "color", "foreground", "default")};
+		content: "";
+		display: block;
+		height: 100%;
+		left: 50%;
+		position: absolute;
+		top: 0;
+		transform: translateX(-50%);
+		width: 100vw;
+		z-index: -1;
+	}
+}
+
+// Footer Menu
 .footer-navigation .footer-menu {
 	margin-left: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
 	margin-right: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
@@ -221,30 +272,18 @@ table,
 // Entry Title
 .singular .hentry .entry-title,
 .page-title {
+	background: #{map-deep-get($config-global, "color", "background", "light")};
+	padding-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
+	padding-top: #{map-deep-get($config-global, "spacing", "vertical")};
 	text-align: center;
 
-	&:before,
-	&:after {
-		background: map-deep-get($config-global, "color", "border", "light");;
-		height: 1px;
-		content: "";
-		display: block;
-		margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
-
-		@include media(mobile) {
-			margin-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")};
-		}
-
-		@extend %responsive-width-full;
+	@include media(mobile) {
+		margin-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")};
+		padding-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")};
+		padding-top: #{2 * map-deep-get($config-global, "spacing", "vertical")};
 	}
 
-	&:after {
-		margin-top: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
-
-		@include media(mobile) {
-			margin-top: #{2 * map-deep-get($config-global, "spacing", "vertical")};
-		}
-	}
+	@extend %responsive-width-full;
 }
 
 // Entry Meta

morden/style-editor.css

@@ -188,7 +188,7 @@ p {
 }
 
 a {
-	color: #E54343;
+	color: #E22C2C;
 }
 
 a:hover {
@@ -309,7 +309,7 @@ object {
 	font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 1em;
 	line-height: 1;
-	background-color: #E54343;
+	background-color: #E22C2C;
 	border-radius: 5px;
 	padding: 16px 24px;
 }
@@ -320,7 +320,7 @@ object {
 }
 
 .wp-block-button.is-style-outline .wp-block-button__link {
-	color: #E54343;
+	color: #E22C2C;
 	background: transparent;
 	border: 2px solid currentcolor;
 }
@@ -460,9 +460,9 @@ p.has-background:not(.has-background-background-color) a {
 	margin-right: 0;
 	text-align: center;
 	border-top-color: #C5C5C5;
-	border-top-width: 4px;
+	border-top-width: 2px;
 	border-bottom-color: #C5C5C5;
-	border-bottom-width: 4px;
+	border-bottom-width: 2px;
 	color: #303030;
 	/**
 	 * Block Options
@@ -497,7 +497,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-pullquote.is-style-solid-color {
-	background-color: #E54343;
+	background-color: #E22C2C;
 	color: white;
 }
 
@@ -527,7 +527,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote {
-	border-left-color: #E54343;
+	border-left-color: #E22C2C;
 	margin: 32px 0;
 	padding-left: 16px;
 }
@@ -601,11 +601,11 @@ table th,
 }
 
 .has-primary-color[class] {
-	color: #E54343 !important;
+	color: #E22C2C !important;
 }
 
 .has-secondary-color[class] {
-	color: #17C16C !important;
+	color: #EF6F13 !important;
 }
 
 .has-foreground-color[class] {
@@ -633,7 +633,7 @@ table th,
 }
 
 .has-primary-background-color[class] {
-	background-color: #E54343 !important;
+	background-color: #E22C2C !important;
 	color: white;
 }
 
@@ -642,7 +642,7 @@ table th,
 }
 
 .has-secondary-background-color[class] {
-	background-color: #17C16C !important;
+	background-color: #EF6F13 !important;
 	color: white;
 }
 

morden/style-rtl.css

@@ -611,7 +611,7 @@ body {
  * Links styles
  */
 a {
-	color: #E54343;
+	color: #E22C2C;
 }
 
 a:hover {
@@ -717,11 +717,11 @@ footer {
 }
 
 ::selection {
-	background-color: #A9D9F9;
+	background-color: #FCC7B4;
 }
 
 ::-moz-selection {
-	background-color: #A9D9F9;
+	background-color: #FCC7B4;
 }
 
 /**
@@ -1079,7 +1079,7 @@ input[type="submit"],
 	font-weight: bold;
 	font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 1rem;
-	background-color: #E54343;
+	background-color: #E22C2C;
 	border-radius: 5px;
 	border-width: 0;
 	padding: 16px 24px;
@@ -1137,7 +1137,7 @@ input.has-focus[type="submit"],
  * Block Options
  */
 .wp-block-button.is-style-outline .wp-block-button__link {
-	color: #E54343;
+	color: #E22C2C;
 	background: transparent;
 	border: 2px solid currentcolor;
 	padding: 14px 24px;
@@ -1278,7 +1278,7 @@ input.has-focus[type="submit"],
 }
 
 .wp-block-file .wp-block-file__button {
-	background-color: #E54343;
+	background-color: #E22C2C;
 	color: white;
 	font-size: 0.86957rem;
 	margin-right: 16px;
@@ -1631,7 +1631,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .a8c-posts-list-item__featured span {
 	color: white;
-	background-color: #E54343;
+	background-color: #E22C2C;
 	font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-weight: bold;
 	font-size: 0.86957rem;
@@ -1695,9 +1695,9 @@ p.has-background:not(.has-background-background-color) a {
 	margin-left: 0;
 	text-align: center;
 	border-top-color: #C5C5C5;
-	border-top-width: 4px;
+	border-top-width: 2px;
 	border-bottom-color: #C5C5C5;
-	border-bottom-width: 4px;
+	border-bottom-width: 2px;
 	color: #303030;
 	/**
 	 * Block Options
@@ -1733,7 +1733,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-pullquote.is-style-solid-color {
-	background-color: #E54343;
+	background-color: #E22C2C;
 	color: white;
 }
 
@@ -1758,7 +1758,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote {
-	border-right-color: #E54343;
+	border-right-color: #E22C2C;
 	margin: 32px 0;
 	padding: 0 16px;
 	/**
@@ -1795,7 +1795,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote[style*="text-align:right"], .wp-block-quote[style*="text-align: right"] {
-	border-left-color: #E54343;
+	border-left-color: #E22C2C;
 }
 
 .wp-block-quote.is-style-large, .wp-block-quote.is-large {
@@ -1944,11 +1944,11 @@ table th,
 }
 
 .has-primary-color[class] {
-	color: #E54343 !important;
+	color: #E22C2C !important;
 }
 
 .has-secondary-color[class] {
-	color: #17C16C !important;
+	color: #3ED64D !important;
 }
 
 .has-foreground-color[class] {
@@ -1976,7 +1976,7 @@ table th,
 }
 
 .has-primary-background-color[class] {
-	background-color: #E54343 !important;
+	background-color: #E22C2C !important;
 	color: white;
 }
 
@@ -1985,7 +1985,7 @@ table th,
 }
 
 .has-secondary-background-color[class] {
-	background-color: #17C16C !important;
+	background-color: #3ED64D !important;
 	color: white;
 }
 
@@ -2109,11 +2109,11 @@ table th,
  * - Similar to Blocks but exist outside of the "current" editor context
  */
 .site-branding {
-	color: #757575;
+	color: white;
 }
 
 .site-title {
-	color: #303030;
+	color: white;
 	font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 1.74901rem;
 	letter-spacing: normal;
@@ -2130,7 +2130,7 @@ table th,
 }
 
 .site-title a:hover {
-	color: #E54343;
+	color: rgba(255, 255, 255, 0.8);
 }
 
 .site-description {
@@ -2140,7 +2140,7 @@ table th,
 }
 
 .main-navigation {
-	color: #303030;
+	color: white;
 }
 
 .main-navigation > div {
@@ -2157,7 +2157,7 @@ table th,
 }
 
 .main-navigation #toggle:focus + #toggle-menu {
-	background-color: #E54343;
+	background-color: rgba(255, 255, 255, 0.8);
 	outline: inherit;
 	text-decoration: underline;
 }
@@ -2280,7 +2280,7 @@ table th,
 }
 
 .main-navigation a {
-	color: #303030;
+	color: white;
 	display: block;
 	font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 1rem;
@@ -2289,11 +2289,11 @@ table th,
 }
 
 .main-navigation a:link, .main-navigation a:visited {
-	color: #303030;
+	color: white;
 }
 
 .main-navigation a:hover {
-	color: #E54343;
+	color: rgba(255, 255, 255, 0.8);
 }
 
 .main-navigation .sub-menu {
@@ -2343,13 +2343,13 @@ table th,
 }
 
 .social-navigation a {
-	color: #757575;
+	color: white;
 	display: inline-block;
 	padding: 0 8px;
 }
 
 .social-navigation a:hover {
-	color: #E54343;
+	color: rgba(255, 255, 255, 0.8);
 }
 
 .social-navigation svg {
@@ -2367,7 +2367,7 @@ table th,
 }
 
 .site-info {
-	color: #757575;
+	color: white;
 	font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 0.86957rem;
 }
@@ -2394,7 +2394,7 @@ table th,
 }
 
 .site-info a:hover {
-	color: #303030;
+	color: #C5C5C5;
 }
 
 .footer-navigation {
@@ -2416,7 +2416,7 @@ table th,
 }
 
 .footer-navigation .footer-menu {
-	color: #757575;
+	color: white;
 	padding-right: 0;
 	margin-right: -16px;
 	margin-left: -16px;
@@ -2447,7 +2447,7 @@ table th,
 }
 
 .footer-navigation .footer-menu a:hover {
-	color: #303030;
+	color: #C5C5C5;
 }
 
 .entry-title {
@@ -2909,7 +2909,7 @@ img#wpstats {
  */
 .sticky-post {
 	color: white;
-	background-color: #E54343;
+	background-color: #E22C2C;
 	font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-weight: bold;
 	font-size: 0.86957rem;
@@ -3033,9 +3033,8 @@ img#wpstats {
 	}
 }
 
-.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
-.page-title:before,
-.page-title:after {
+.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+.page-title {
 	margin-right: calc( -0.5 * ( 100vw - 100% ));
 	margin-left: calc( -0.5 * ( 100vw - 100% ));
 	width: calc( 100% + (0.5 * 2) * ( 100vw - 100% ));
@@ -3043,9 +3042,8 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 560px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
-	.page-title:before,
-	.page-title:after {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+	.page-title {
 		margin-right: calc( -0.5 * ( 100vw - calc( 560px - 32px) ));
 		margin-left: calc( -0.5 * ( 100vw - calc( 560px - 32px) ));
 		width: calc( calc( 560px - 32px) + (0.5 * 2) * ( 100vw - calc( 560px - 32px) ));
@@ -3054,9 +3052,8 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 640px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
-	.page-title:before,
-	.page-title:after {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+	.page-title {
 		margin-right: calc( -0.5 * ( 100vw - calc( 640px - 32px) ));
 		margin-left: calc( -0.5 * ( 100vw - calc( 640px - 32px) ));
 		width: calc( calc( 640px - 32px) + (0.5 * 2) * ( 100vw - calc( 640px - 32px) ));
@@ -3065,9 +3062,8 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 782px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
-	.page-title:before,
-	.page-title:after {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+	.page-title {
 		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
@@ -3076,9 +3072,8 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 1024px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
-	.page-title:before,
-	.page-title:after {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+	.page-title {
 		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
@@ -3087,9 +3082,8 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 1280px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
-	.page-title:before,
-	.page-title:after {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+	.page-title {
 		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
@@ -3270,9 +3264,39 @@ p:not(.site-title) a:hover {
 	padding-bottom: 0;
 }
 
+#masthead:before {
+	background: #E22C2C;
+	border-bottom: 32px solid #E22C2C;
+	box-sizing: content-box;
+	content: "";
+	display: block;
+	height: 100%;
+	right: 50%;
+	position: absolute;
+	top: 0;
+	transform: translateX(50%);
+	width: 100vw;
+	z-index: -1;
+}
+
 /**
  * Mobile-Menu
  */
+.main-navigation #toggle:focus + #toggle-menu,
+#toggle-menu {
+	background: white;
+	color: #303030;
+	text-decoration: none;
+}
+
+.main-navigation #toggle:focus + #toggle-menu:active, .main-navigation #toggle:focus + #toggle-menu:focus, .main-navigation #toggle:focus + #toggle-menu:hover,
+#toggle-menu:active,
+#toggle-menu:focus,
+#toggle-menu:hover {
+	background: #303030;
+	color: white;
+}
+
 /**
  * CSS-grid Desktop Menu
  */
@@ -3330,30 +3354,27 @@ p:not(.site-title) a:hover {
 	.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: #E54343;
+		color: rgba(255, 255, 255, 0.8);
 	}
 	.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 {
+		border: 1px solid #7d1111;
+		border-top: 0;
 		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 #E54343;
-		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,
+	.site-header .main-navigation > div > ul > li.focus li,
+	.site-header .main-navigation > div > ul > li.current-menu-item li {
+		border-top: 1px solid #7d1111;
 	}
 	.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: #E54343;
+		background: #E22C2C;
 		color: white;
+		padding: 8px 24px;
 	}
 	.site-header .main-navigation > div > ul > li:hover li:hover > a,
 	.site-header .main-navigation > div > ul > li:hover li.focus > a,
@@ -3381,7 +3402,7 @@ p:not(.site-title) a:hover {
  * Site Title
  */
 .site-description {
-	color: #757575;
+	color: white;
 }
 
 .site-title + .site-description {
@@ -3389,8 +3410,36 @@ p:not(.site-title) a:hover {
 }
 
 /**
- * Footer Menu
+ * Footer
  */
+#colophon {
+	padding-bottom: 0;
+}
+
+.footer-wrapper {
+	align-items: flex-end;
+	display: flex;
+	flex: 1 0 100%;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	padding-bottom: 32px;
+	padding-top: 32px;
+	position: relative;
+}
+
+.footer-wrapper:before {
+	background: #303030;
+	content: "";
+	display: block;
+	height: 100%;
+	right: 50%;
+	position: absolute;
+	top: 0;
+	transform: translateX(50%);
+	width: 100vw;
+	z-index: -1;
+}
+
 .footer-navigation .footer-menu {
 	margin-right: -8px;
 	margin-left: -8px;
@@ -3435,36 +3484,18 @@ table th,
  */
 .singular .hentry .entry-title,
 .page-title {
-	text-align: center;
-}
-
-.singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
-.page-title:before,
-.page-title:after {
 	background: #F8F8F8;
-	height: 1px;
-	content: "";
-	display: block;
-	margin-bottom: 16px;
+	padding-bottom: 32px;
+	padding-top: 32px;
+	text-align: center;
 }
 
 @media only screen and (min-width: 560px) {
-	.singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
-	.page-title:before,
-	.page-title:after {
+	.singular .hentry .entry-title,
+	.page-title {
 		margin-bottom: 64px;
-	}
-}
-
-.singular .hentry .entry-title:after,
-.page-title:after {
-	margin-top: 16px;
-}
-
-@media only screen and (min-width: 560px) {
-	.singular .hentry .entry-title:after,
-	.page-title:after {
-		margin-top: 64px;
+		padding-bottom: 64px;
+		padding-top: 64px;
 	}
 }
 
@@ -3486,7 +3517,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 .a8c-posts-list .a8c-posts-list-item__title a:active,
 .a8c-posts-list .a8c-posts-list-item__title a:focus,
 .a8c-posts-list .a8c-posts-list-item__title a:hover {
-	color: #E54343;
+	color: #E22C2C;
 }
 
 .singular .hentry .entry-content > *:first-child.alignfull {

morden/style.css

@@ -611,7 +611,7 @@ body {
  * Links styles
  */
 a {
-	color: #E54343;
+	color: #E22C2C;
 }
 
 a:hover {
@@ -1079,7 +1079,7 @@ input[type="submit"],
 	font-weight: bold;
 	font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 1rem;
-	background-color: #E54343;
+	background-color: #E22C2C;
 	border-radius: 5px;
 	border-width: 0;
 	padding: 16px 24px;
@@ -1137,7 +1137,7 @@ input.has-focus[type="submit"],
  * Block Options
  */
 .wp-block-button.is-style-outline .wp-block-button__link {
-	color: #E54343;
+	color: #E22C2C;
 	background: transparent;
 	border: 2px solid currentcolor;
 	padding: 14px 24px;
@@ -1278,7 +1278,7 @@ input.has-focus[type="submit"],
 }
 
 .wp-block-file .wp-block-file__button {
-	background-color: #E54343;
+	background-color: #E22C2C;
 	color: white;
 	font-size: 0.86957rem;
 	margin-left: 16px;
@@ -1631,7 +1631,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .a8c-posts-list-item__featured span {
 	color: white;
-	background-color: #E54343;
+	background-color: #E22C2C;
 	font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-weight: bold;
 	font-size: 0.86957rem;
@@ -1695,9 +1695,9 @@ p.has-background:not(.has-background-background-color) a {
 	margin-right: 0;
 	text-align: center;
 	border-top-color: #C5C5C5;
-	border-top-width: 4px;
+	border-top-width: 2px;
 	border-bottom-color: #C5C5C5;
-	border-bottom-width: 4px;
+	border-bottom-width: 2px;
 	color: #303030;
 	/**
 	 * Block Options
@@ -1733,7 +1733,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-pullquote.is-style-solid-color {
-	background-color: #E54343;
+	background-color: #E22C2C;
 	color: white;
 }
 
@@ -1758,7 +1758,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote {
-	border-left-color: #E54343;
+	border-left-color: #E22C2C;
 	margin: 32px 0;
 	padding: 0 16px;
 	/**
@@ -1795,7 +1795,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote[style*="text-align:right"], .wp-block-quote[style*="text-align: right"] {
-	border-right-color: #E54343;
+	border-right-color: #E22C2C;
 }
 
 .wp-block-quote.is-style-large, .wp-block-quote.is-large {
@@ -1949,11 +1949,11 @@ table th,
 }
 
 .has-primary-color[class] {
-	color: #E54343 !important;
+	color: #E22C2C !important;
 }
 
 .has-secondary-color[class] {
-	color: #17C16C !important;
+	color: #EF6F13 !important;
 }
 
 .has-foreground-color[class] {
@@ -1981,7 +1981,7 @@ table th,
 }
 
 .has-primary-background-color[class] {
-	background-color: #E54343 !important;
+	background-color: #E22C2C !important;
 	color: white;
 }
 
@@ -1990,7 +1990,7 @@ table th,
 }
 
 .has-secondary-background-color[class] {
-	background-color: #17C16C !important;
+	background-color: #EF6F13 !important;
 	color: white;
 }
 
@@ -2114,11 +2114,11 @@ table th,
  * - Similar to Blocks but exist outside of the "current" editor context
  */
 .site-branding {
-	color: #757575;
+	color: white;
 }
 
 .site-title {
-	color: #303030;
+	color: white;
 	font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 1.74901rem;
 	letter-spacing: normal;
@@ -2135,7 +2135,7 @@ table th,
 }
 
 .site-title a:hover {
-	color: #E54343;
+	color: rgba(255, 255, 255, 0.8);
 }
 
 .site-description {
@@ -2145,7 +2145,7 @@ table th,
 }
 
 .main-navigation {
-	color: #303030;
+	color: white;
 }
 
 .main-navigation > div {
@@ -2162,7 +2162,7 @@ table th,
 }
 
 .main-navigation #toggle:focus + #toggle-menu {
-	background-color: #E54343;
+	background-color: rgba(255, 255, 255, 0.8);
 	outline: inherit;
 	text-decoration: underline;
 }
@@ -2285,7 +2285,7 @@ table th,
 }
 
 .main-navigation a {
-	color: #303030;
+	color: white;
 	display: block;
 	font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 1rem;
@@ -2294,11 +2294,11 @@ table th,
 }
 
 .main-navigation a:link, .main-navigation a:visited {
-	color: #303030;
+	color: white;
 }
 
 .main-navigation a:hover {
-	color: #E54343;
+	color: rgba(255, 255, 255, 0.8);
 }
 
 .main-navigation .sub-menu {
@@ -2348,13 +2348,13 @@ table th,
 }
 
 .social-navigation a {
-	color: #757575;
+	color: white;
 	display: inline-block;
 	padding: 0 8px;
 }
 
 .social-navigation a:hover {
-	color: #E54343;
+	color: rgba(255, 255, 255, 0.8);
 }
 
 .social-navigation svg {
@@ -2372,7 +2372,7 @@ table th,
 }
 
 .site-info {
-	color: #757575;
+	color: white;
 	font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 0.86957rem;
 }
@@ -2399,7 +2399,7 @@ table th,
 }
 
 .site-info a:hover {
-	color: #303030;
+	color: #C5C5C5;
 }
 
 .footer-navigation {
@@ -2421,7 +2421,7 @@ table th,
 }
 
 .footer-navigation .footer-menu {
-	color: #757575;
+	color: white;
 	padding-left: 0;
 	margin-left: -16px;
 	margin-right: -16px;
@@ -2452,7 +2452,7 @@ table th,
 }
 
 .footer-navigation .footer-menu a:hover {
-	color: #303030;
+	color: #C5C5C5;
 }
 
 .entry-title {
@@ -2914,7 +2914,7 @@ img#wpstats {
  */
 .sticky-post {
 	color: white;
-	background-color: #E54343;
+	background-color: #E22C2C;
 	font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-weight: bold;
 	font-size: 0.86957rem;
@@ -3038,9 +3038,8 @@ img#wpstats {
 	}
 }
 
-.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
-.page-title:before,
-.page-title:after {
+.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+.page-title {
 	margin-left: calc( -0.5 * ( 100vw - 100% ));
 	margin-right: calc( -0.5 * ( 100vw - 100% ));
 	width: calc( 100% + (0.5 * 2) * ( 100vw - 100% ));
@@ -3048,9 +3047,8 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 560px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
-	.page-title:before,
-	.page-title:after {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+	.page-title {
 		margin-left: calc( -0.5 * ( 100vw - calc( 560px - 32px) ));
 		margin-right: calc( -0.5 * ( 100vw - calc( 560px - 32px) ));
 		width: calc( calc( 560px - 32px) + (0.5 * 2) * ( 100vw - calc( 560px - 32px) ));
@@ -3059,9 +3057,8 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 640px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
-	.page-title:before,
-	.page-title:after {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+	.page-title {
 		margin-left: calc( -0.5 * ( 100vw - calc( 640px - 32px) ));
 		margin-right: calc( -0.5 * ( 100vw - calc( 640px - 32px) ));
 		width: calc( calc( 640px - 32px) + (0.5 * 2) * ( 100vw - calc( 640px - 32px) ));
@@ -3070,9 +3067,8 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 782px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
-	.page-title:before,
-	.page-title:after {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+	.page-title {
 		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
@@ -3081,9 +3077,8 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 1024px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
-	.page-title:before,
-	.page-title:after {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+	.page-title {
 		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
@@ -3092,9 +3087,8 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 1280px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
-	.page-title:before,
-	.page-title:after {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+	.page-title {
 		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		width: calc( calc( 782px - 32px) + (0.5 * 2) * ( 100vw - calc( 782px - 32px) ));
@@ -3275,9 +3269,39 @@ p:not(.site-title) a:hover {
 	padding-bottom: 0;
 }
 
+#masthead:before {
+	background: #E22C2C;
+	border-bottom: 32px solid #E22C2C;
+	box-sizing: content-box;
+	content: "";
+	display: block;
+	height: 100%;
+	left: 50%;
+	position: absolute;
+	top: 0;
+	transform: translateX(-50%);
+	width: 100vw;
+	z-index: -1;
+}
+
 /**
  * Mobile-Menu
  */
+.main-navigation #toggle:focus + #toggle-menu,
+#toggle-menu {
+	background: white;
+	color: #303030;
+	text-decoration: none;
+}
+
+.main-navigation #toggle:focus + #toggle-menu:active, .main-navigation #toggle:focus + #toggle-menu:focus, .main-navigation #toggle:focus + #toggle-menu:hover,
+#toggle-menu:active,
+#toggle-menu:focus,
+#toggle-menu:hover {
+	background: #303030;
+	color: white;
+}
+
 /**
  * CSS-grid Desktop Menu
  */
@@ -3335,30 +3359,27 @@ p:not(.site-title) a:hover {
 	.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: #E54343;
+		color: rgba(255, 255, 255, 0.8);
 	}
 	.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 {
+		border: 1px solid #7d1111;
+		border-top: 0;
 		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 #E54343;
-		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,
+	.site-header .main-navigation > div > ul > li.focus li,
+	.site-header .main-navigation > div > ul > li.current-menu-item li {
+		border-top: 1px solid #7d1111;
 	}
 	.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: #E54343;
+		background: #E22C2C;
 		color: white;
+		padding: 8px 24px;
 	}
 	.site-header .main-navigation > div > ul > li:hover li:hover > a,
 	.site-header .main-navigation > div > ul > li:hover li.focus > a,
@@ -3386,7 +3407,7 @@ p:not(.site-title) a:hover {
  * Site Title
  */
 .site-description {
-	color: #757575;
+	color: white;
 }
 
 .site-title + .site-description {
@@ -3394,8 +3415,36 @@ p:not(.site-title) a:hover {
 }
 
 /**
- * Footer Menu
+ * Footer
  */
+#colophon {
+	padding-bottom: 0;
+}
+
+.footer-wrapper {
+	align-items: flex-end;
+	display: flex;
+	flex: 1 0 100%;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	padding-bottom: 32px;
+	padding-top: 32px;
+	position: relative;
+}
+
+.footer-wrapper:before {
+	background: #303030;
+	content: "";
+	display: block;
+	height: 100%;
+	left: 50%;
+	position: absolute;
+	top: 0;
+	transform: translateX(-50%);
+	width: 100vw;
+	z-index: -1;
+}
+
 .footer-navigation .footer-menu {
 	margin-left: -8px;
 	margin-right: -8px;
@@ -3440,36 +3489,18 @@ table th,
  */
 .singular .hentry .entry-title,
 .page-title {
-	text-align: center;
-}
-
-.singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
-.page-title:before,
-.page-title:after {
 	background: #F8F8F8;
-	height: 1px;
-	content: "";
-	display: block;
-	margin-bottom: 16px;
+	padding-bottom: 32px;
+	padding-top: 32px;
+	text-align: center;
 }
 
 @media only screen and (min-width: 560px) {
-	.singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
-	.page-title:before,
-	.page-title:after {
+	.singular .hentry .entry-title,
+	.page-title {
 		margin-bottom: 64px;
-	}
-}
-
-.singular .hentry .entry-title:after,
-.page-title:after {
-	margin-top: 16px;
-}
-
-@media only screen and (min-width: 560px) {
-	.singular .hentry .entry-title:after,
-	.page-title:after {
-		margin-top: 64px;
+		padding-bottom: 64px;
+		padding-top: 64px;
 	}
 }
 
@@ -3491,7 +3522,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 .a8c-posts-list .a8c-posts-list-item__title a:active,
 .a8c-posts-list .a8c-posts-list-item__title a:focus,
 .a8c-posts-list .a8c-posts-list-item__title a:hover {
-	color: #E54343;
+	color: #E22C2C;
 }
 
 .singular .hentry .entry-content > *:first-child.alignfull {

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

@@ -0,0 +1,31 @@
+<?php
+/**
+ * Displays header site branding
+ *
+ * @package WordPress
+ * @subpackage Varia
+ * @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; ?>