Alves: Misc updates

alves/functions.php

@@ -65,23 +65,28 @@ if ( ! function_exists( 'alves_setup' ) ) :
 				array(
 					'name'  => __( 'Secondary', 'alves' ),
 					'slug'  => 'secondary',
-					'color' => '#fcfbf9',
+					'color' => '#9B6A36',
 				),
 				array(
-					'name'  => __( 'Dark Orange', 'alves' ),
-					'slug'  => 'primary-hover',
-					'color' => '#9B6A36',
+					'name'  => __( 'Dark Gray', 'alves' ),
+					'slug'  => 'foreground-dark',
+					'color' => '#253136',
 				),
 				array(
 					'name'  => __( 'Gray', 'alves' ),
-					'slug'  => 'foreground-default',
+					'slug'  => 'foreground',
 					'color' => '#394d55',
 				),
 				array(
 					'name'  => __( 'Light Gray', 'alves' ),
-					'slug'  => 'secondary-hover',
-					'color' => '#ffcf96',
+					'slug'  => 'foreground-light',
+					'color' => '#4d6974',
 				),
+				array(
+                    'name'  => __( 'White', 'alves' ),
+                    'slug'  => 'background',
+                    'color' => '#ffffff',
+                ),
 			)
 		);
 	}

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

@@ -62,21 +62,21 @@ $config-global: (
 	"color": (
 		"primary": (
 			"default": #3E7D98,
-			"hover": #9B6A36,
+			"hover": #2f5f74,
 		),
 		"secondary": (
-			"default": #fcfbf9,
-			"hover": #ffcf96,
+			"default": #9B6A36,
+			"hover": #755029,
 		),
 		"foreground": (
 			"default": #394d55,
-			"light": #394d55, // must be accessible against background (#fcfbf9,)
-			"dark": darkgray, // must be accessible against background
+			"light": #4d6974, // must be accessible against background (#fcfbf9,)
+			"dark": #253136, // must be accessible against background
 		),
 		"background": (
-			"default": white,
+			"default": #ffffff,
 			"light": #fafafa, // must be accessible against foreground-default
-			"dark": #2d2a26, // must be accessible against foreground-default
+			"dark": #d9d9d9, // must be accessible against foreground-default
 		),
 		"border": (
 			"default": #3E7D98,
@@ -100,7 +100,7 @@ $config-global: (
 	"breakpoint": (
 		"sm": 560px,
 		"md": 640px,
-		"lg": 732px,
+		"lg": 782px,
 		"xl": 1024px,
 		"xxl": 1280px,
 	),
@@ -162,8 +162,8 @@ $config-elements: (
 $config-button: (
 	// Colors
 	"color": (
-		"text": map-deep-get($config-global, "color", "secondary", "default"),
-		"text-hover": map-deep-get($config-global, "color", "secondary", "default"),
+		"text": map-deep-get($config-global, "color", "background", "default"),
+		"text-hover": map-deep-get($config-global, "color", "background", "default"),
 		"background": map-deep-get($config-global, "color", "primary", "default"),
 		"background-hover": map-deep-get($config-global, "color", "primary", "hover"),
 	),
@@ -294,7 +294,7 @@ $config-header: (
 			// Fonts
 			"font": (
 				"family": map-deep-get($config-global, "font", "family", "primary"),
-				"size": map-deep-get($config-global, "font", "size", "xl"),
+				"size": map-deep-get($config-global, "font", "size", "lg"),
 				"weight": bold,
 				"line-height": 1,
 			),
@@ -319,7 +319,7 @@ $config-header: (
 		// Fonts
 		"font": (
 			"family": map-deep-get($config-global, "font", "family", "secondary"),
-			"size": map-deep-get($config-global, "font", "size", "base"),
+			"size": map-deep-get($config-global, "font", "size", "sm"),
 			"weight": bold,
 			"line-height": 1,
 		),

alves/sass/_extra-child-theme.scss

@@ -54,14 +54,6 @@ $site_main_spacing_vertical: 2 * map-deep-get($config-global, "spacing", "vertic
 /**
  * 1. General Styles
  */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-	color: $color_foreground;
-}
 
 a {
 	text-decoration: underline;
@@ -96,9 +88,8 @@ a {
 	text-decoration: none;
 }
 
-.site-branding,
+
 .site-info,
-.main-navigation,
 .entry-header,
 .entry-footer,
 .page-title,
@@ -120,13 +111,19 @@ input[type="submit"],
 	transition: background-color 0.125s ease-in;
 }
 
-h3,
-blockquote cite,
-.site-branding .site-title,
-.widget-title  {
+.widget-title {
+	font-family: $font_family_primary;
+}
+
+blockquote cite {
 	font-family: $font_family_secondary;
 }
 
+.wp-block-quote p,
+blockquote p {
+	font-size: $font_size_md;
+}
+
 .comment-reply-title {
 	display: inherit;
 }
@@ -143,6 +140,7 @@ blockquote cite,
 /**
  * 2. Header
  */
+/*
 .site-header {
 	@extend %responsive-alignwide;
 	margin: 0 auto;
@@ -151,14 +149,179 @@ blockquote cite,
 		padding-top: $site_main_spacing_vertical;
 	}
 }
+*/
 
 /**
- * 3. Main Wrapper and Content
+ * Wide Header & Footer
  */
-.site-content {
-	padding-top: $spacing_vertical;
+#masthead {
+	position: relative;
+
+	@extend %responsive-alignwide;
+}
+
+#masthead {
+	padding-left: 0;
+	padding-right: 0;
+	padding-bottom: 0;
+}
+
+/**
+ * Mobile-Menu
+ */
+.site-header {
+	margin-left: 0;
+	margin-right: 0;
 }
 
+/**
+ * CSS-grid Desktop Menu
+ */
+@include media(mobile) {
+	.site-header {
+		align-items: center;
+		display: grid;
+		margin-left: auto;
+		margin-right: auto;
+		grid-template-columns: auto;
+		grid-template-rows: auto;
+		grid-column-gap: #{map-deep-get($config-global, "spacing", "unit")};
+		grid-template-areas:
+			"site-logo site-logo"
+			"site-title main-navigation"
+			"site-description social-navigation";
+
+		&:before,
+		&:after {
+			content: none;
+			display: none;
+		}
+
+		& > * {
+			margin-top: 0;
+			margin-bottom: 0;
+		}
+
+		.site-logo {
+			grid-area: site-logo;
+			margin-bottom: #{map-deep-get($config-global, "spacing", "unit")};
+		}
+
+		.site-title {
+			grid-area: site-title;
+
+			& + .site-description {
+				margin-top: 0;
+			}
+		}
+
+		.site-description {
+			align-self: center;
+			grid-area: site-description;
+		}
+
+		.main-navigation {
+			align-self: center;
+			justify-self: flex-end;
+			grid-area: main-navigation;
+
+			& > div > ul {
+				justify-content: flex-end;
+				margin-left: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
+				margin-right: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
+
+				& > li {
+					padding-left: #{map-deep-get($config-header, "main-nav", "link-padding")};
+					padding-right: #{map-deep-get($config-header, "main-nav", "link-padding")};
+					padding-top: $baseline-unit;
+					padding-bottom: $baseline-unit;
+
+					& > a {
+						padding: 0;
+					}
+
+					.sub-menu {
+						background: #{map-deep-get($config-global, "color", "primary", "default")};
+
+						a {
+							color: #{map-deep-get($config-global, "color", "secondary", "default")};
+
+							&:hover,
+							&:focus {
+								text-decoration: underline;
+							}
+						}
+					}
+				}
+
+				& > .menu-item-has-children > a::after {
+						font-size: #{0.5 * map-deep-get($config-global, "font", "size", "base")};
+				}
+			}
+
+			& > div > ul > li:hover,
+			& > div > ul > li.focus,
+			& > div > ul > li.current-menu-item {
+
+				& > a {
+				}
+
+				& > ul {
+					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 {
+
+					& > a {
+					}
+
+					&:hover > a,
+					&.focus > a,
+					&.current-menu-item > a {
+					}
+				}
+			}
+		}
+
+		.social-navigation {
+			align-self: center;
+			grid-area: social-navigation;
+			justify-self: flex-end;
+		}
+	}
+}
+
+.main-navigation > div > ul > li:first-of-type,
+.social-navigation > div > ul > li:first-of-type {
+	margin-left: 0;
+}
+
+.main-navigation > div > ul > li:last-of-type,
+.social-navigation > div > ul > li:last-of-type {
+	margin-right: 0;
+}
+
+// Social Menu
+.social-navigation {
+	& > div > ul {
+		flex-wrap: wrap;
+	}
+}
+
+/**
+ * 3. Main Wrapper and Content
+ */
 
  .home.page.hide-homepage-title {
 	.site-content {
@@ -171,13 +334,6 @@ blockquote cite,
 	}
 }
 
-.entry-content {
-	font-family: $font_family_primary;
-}
-
-
-
-
 #post-5 .entry-title {
 	display: none;
 }
@@ -201,7 +357,6 @@ blockquote cite,
 }
 
 .main-navigation > div > ul,
-.social-navigation > div > ul,
 .pagination .nav-links {
 	justify-content: center;
 }
@@ -385,7 +540,6 @@ blockquote cite,
  */
 .widget {
 	.widget-title {
-		font-weight: 700;
 		color: $color_secondary;
 		margin-bottom: $spacing_vertical;
 	}
@@ -407,8 +561,6 @@ blockquote cite,
 		li {
 			a {
 				color: $color_secondary;
-				border-top: 1px solid #{map-deep-get($config-global, "color", "border", "light")};
-				display: inline-block;
 				padding: ($baseline-unit * .75) 0;
 
 				&:hover {
@@ -418,7 +570,6 @@ blockquote cite,
 
 			&.recentcomments a {
 				padding: ($baseline-unit * .75) 0 !important;
-				display: inline-block !important;
 			}
 		}
 	}

alves/style-editor.css

@@ -161,7 +161,7 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  */
 body {
 	color: #394d55;
-	background-color: white;
+	background-color: #ffffff;
 	font-family: "Karla", Arial, sans-serif;
 	font-size: 16px;
 	font-weight: normal;
@@ -184,7 +184,7 @@ a {
 }
 
 a:hover {
-	color: #9B6A36;
+	color: #2f5f74;
 }
 
 button,
@@ -247,7 +247,7 @@ blockquote.alignright footer {
 }
 
 figcaption {
-	color: #394d55;
+	color: #4d6974;
 	font-size: 0.86806rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
@@ -296,7 +296,7 @@ object {
 }
 
 .wp-block-button .wp-block-button__link {
-	color: #fcfbf9;
+	color: #ffffff;
 	font-weight: bold;
 	font-family: "Karla", Arial, sans-serif;
 	font-size: 1.04167em;
@@ -307,8 +307,8 @@ object {
 }
 
 .wp-block-button .wp-block-button__link:hover, .wp-block-button .wp-block-button__link:focus, .wp-block-button .wp-block-button__link.has-focus {
-	color: #fcfbf9;
-	background-color: #9B6A36;
+	color: #ffffff;
+	background-color: #2f5f74;
 }
 
 .wp-block-button.is-style-outline .wp-block-button__link {
@@ -318,7 +318,7 @@ object {
 }
 
 .wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
-	color: #9B6A36;
+	color: #2f5f74;
 }
 
 .wp-block-button.is-style-squared .wp-block-button__link {
@@ -338,7 +338,7 @@ object {
 .wp-block-cover-image .wp-block-cover__inner-container,
 .wp-block-cover-image .wp-block-cover-image-text,
 .wp-block-cover-image .wp-block-cover-text {
-	color: white;
+	color: #ffffff;
 }
 
 .wp-block-cover .wp-block-cover__inner-container a,
@@ -491,7 +491,7 @@ p.has-background:not(.has-background-background-color) a {
 .wp-block-pullquote .wp-block-pullquote__citation,
 .wp-block-pullquote cite,
 .wp-block-pullquote footer {
-	color: #394d55;
+	color: #4d6974;
 	font-size: 1.04167em;
 	letter-spacing: normal;
 }
@@ -502,7 +502,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-pullquote.is-style-solid-color {
 	background-color: #3E7D98;
-	color: white;
+	color: #ffffff;
 }
 
 .wp-block-pullquote.is-style-solid-color.alignleft blockquote,
@@ -611,7 +611,7 @@ table th,
 }
 
 .has-secondary-color[class] {
-	color: #fcfbf9 !important;
+	color: #9B6A36 !important;
 }
 
 .has-foreground-color[class] {
@@ -619,11 +619,11 @@ table th,
 }
 
 .has-foreground-light-color[class] {
-	color: #394d55 !important;
+	color: #4d6974 !important;
 }
 
 .has-foreground-dark-color[class] {
-	color: darkgray !important;
+	color: #253136 !important;
 }
 
 .has-background-light-color[class] {
@@ -631,16 +631,16 @@ table th,
 }
 
 .has-background-dark-color[class] {
-	color: #2d2a26 !important;
+	color: #d9d9d9 !important;
 }
 
 .has-background-color[class] {
-	color: white !important;
+	color: #ffffff !important;
 }
 
 .has-primary-background-color[class] {
 	background-color: #3E7D98 !important;
-	color: white;
+	color: #ffffff;
 }
 
 .has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6,
@@ -649,8 +649,8 @@ table th,
 }
 
 .has-secondary-background-color[class] {
-	background-color: #fcfbf9 !important;
-	color: white;
+	background-color: #9B6A36 !important;
+	color: #ffffff;
 }
 
 .has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6,
@@ -660,7 +660,7 @@ table th,
 
 .has-foreground-background-color[class] {
 	background-color: #394d55 !important;
-	color: white;
+	color: #ffffff;
 }
 
 .has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6,
@@ -669,8 +669,8 @@ table th,
 }
 
 .has-foreground-light-background-color[class] {
-	background-color: #394d55 !important;
-	color: white;
+	background-color: #4d6974 !important;
+	color: #ffffff;
 }
 
 .has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6,
@@ -679,8 +679,8 @@ table th,
 }
 
 .has-foreground-dark-background-color[class] {
-	background-color: darkgray !important;
-	color: white;
+	background-color: #253136 !important;
+	color: #ffffff;
 }
 
 .has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6,
@@ -699,7 +699,7 @@ table th,
 }
 
 .has-background-dark-background-color[class] {
-	background-color: #2d2a26 !important;
+	background-color: #d9d9d9 !important;
 	color: #394d55;
 }
 
@@ -709,7 +709,7 @@ table th,
 }
 
 .has-background-background-color[class] {
-	background-color: white !important;
+	background-color: #ffffff !important;
 	color: #394d55;
 }
 

alves/style-rtl.css

@@ -596,7 +596,7 @@ body {
 	font-weight: normal;
 	color: #394d55;
 	text-align: right;
-	background-color: white;
+	background-color: #ffffff;
 }
 
 /**
@@ -607,7 +607,7 @@ a {
 }
 
 a:hover {
-	color: #9B6A36;
+	color: #2f5f74;
 }
 
 button,
@@ -631,7 +631,7 @@ a {
 }
 
 .screen-reader-text:focus {
-	background-color: white;
+	background-color: #ffffff;
 	border-radius: 3px;
 	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
 	clip: auto !important;
@@ -988,7 +988,7 @@ input[type="datetime-local"]:focus,
 input[type="color"]:focus,
 textarea:focus {
 	color: #394d55;
-	border-color: #9B6A36;
+	border-color: #2f5f74;
 }
 
 select {
@@ -1007,7 +1007,7 @@ input[type=checkbox] + label {
 }
 
 figcaption {
-	color: #394d55;
+	color: #4d6974;
 	font-size: 0.86806rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
@@ -1070,7 +1070,7 @@ input[type="submit"],
 .wp-block-button__link,
 .wp-block-file__button, .a8c-posts-list__view-all {
 	line-height: 1;
-	color: #fcfbf9;
+	color: #ffffff;
 	cursor: pointer;
 	font-weight: bold;
 	font-family: "Karla", Arial, sans-serif;
@@ -1125,8 +1125,8 @@ input:focus[type="submit"],
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
 .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all {
-	color: #fcfbf9;
-	background-color: #9B6A36;
+	color: #ffffff;
+	background-color: #2f5f74;
 }
 
 /**
@@ -1140,7 +1140,7 @@ input.has-focus[type="submit"],
 }
 
 .wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
-	color: #9B6A36;
+	color: #2f5f74;
 }
 
 .wp-block-button.is-style-squared .wp-block-button__link {
@@ -1198,7 +1198,7 @@ input.has-focus[type="submit"],
 	}
 }
 
-@media only screen and (min-width: 732px) {
+@media only screen and (min-width: 782px) {
 	.wp-block-columns .wp-block-column:not(:last-child) {
 		/* Resetting margins to match _block-container.scss */
 		margin-bottom: 0;
@@ -1227,7 +1227,7 @@ input.has-focus[type="submit"],
 .wp-block-cover-image .wp-block-cover__inner-container,
 .wp-block-cover-image .wp-block-cover-image-text,
 .wp-block-cover-image .wp-block-cover-text {
-	color: white;
+	color: #ffffff;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
@@ -1319,7 +1319,7 @@ input.has-focus[type="submit"],
 
 .wp-block-file .wp-block-file__button {
 	background-color: #3E7D98;
-	color: #fcfbf9;
+	color: #ffffff;
 	font-size: 1.04167rem;
 	margin-right: 16px;
 	margin-left: 16px;
@@ -1333,7 +1333,7 @@ input.has-focus[type="submit"],
 .wp-block-file a.wp-block-file__button:focus,
 .wp-block-file a.wp-block-file__button:hover,
 .wp-block-file a.wp-block-file__button:visited {
-	color: #fcfbf9;
+	color: #ffffff;
 	opacity: .85;
 }
 
@@ -1440,7 +1440,7 @@ h6, .h6 {
 }
 
 .wp-block-image figcaption {
-	color: #394d55;
+	color: #4d6974;
 	font-size: 0.86806rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
@@ -1490,7 +1490,7 @@ img {
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
-	color: #394d55;
+	color: #4d6974;
 	font-size: 1.04167rem;
 }
 
@@ -1526,7 +1526,7 @@ img {
 }
 
 .wp-block-latest-posts .wp-block-latest-posts__post-date {
-	color: #394d55;
+	color: #4d6974;
 	font-size: 0.86806rem;
 	line-height: 1.6;
 }
@@ -1674,7 +1674,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .a8c-posts-list-item__featured span {
-	color: white;
+	color: #ffffff;
 	background-color: #3E7D98;
 	font-family: "Lora", Georgia, sans-serif;
 	font-weight: bold;
@@ -1713,7 +1713,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__meta {
-	color: #394d55;
+	color: #4d6974;
 	font-size: 1.04167rem;
 }
 
@@ -1722,7 +1722,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__meta a:hover, .a8c-posts-list__item .a8c-posts-list-item__meta a:active {
-	color: #9B6A36;
+	color: #2f5f74;
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__edit-link {
@@ -1762,7 +1762,7 @@ p.has-background:not(.has-background-background-color) a {
 .wp-block-pullquote .wp-block-pullquote__citation,
 .wp-block-pullquote cite,
 .wp-block-pullquote footer {
-	color: #394d55;
+	color: #4d6974;
 	font-size: 1.04167rem;
 	letter-spacing: normal;
 	display: block;
@@ -1782,7 +1782,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-pullquote.is-style-solid-color {
 	background-color: #3E7D98;
-	color: white;
+	color: #ffffff;
 }
 
 .wp-block-pullquote.is-style-solid-color blockquote {
@@ -1837,7 +1837,7 @@ p.has-background:not(.has-background-background-color) a {
 .wp-block-quote .wp-block-quote__citation,
 .wp-block-quote cite,
 .wp-block-quote footer {
-	color: #394d55;
+	color: #4d6974;
 	font-size: 1.04167rem;
 	letter-spacing: normal;
 }
@@ -1869,7 +1869,7 @@ p.has-background:not(.has-background-background-color) a {
 .wp-block-quote.is-style-large footer, .wp-block-quote.is-large .wp-block-quote__citation,
 .wp-block-quote.is-large cite,
 .wp-block-quote.is-large footer {
-	color: #394d55;
+	color: #4d6974;
 	font-size: 1.04167rem;
 	letter-spacing: normal;
 }
@@ -1945,7 +1945,7 @@ table th,
 }
 
 .wp-block-video figcaption {
-	color: #394d55;
+	color: #4d6974;
 	font-size: 0.86806rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
@@ -2017,7 +2017,7 @@ table th,
 }
 
 .has-secondary-color[class] {
-	color: #fcfbf9 !important;
+	color: #9B6A36 !important;
 }
 
 .has-foreground-color[class] {
@@ -2025,11 +2025,11 @@ table th,
 }
 
 .has-foreground-light-color[class] {
-	color: #394d55 !important;
+	color: #4d6974 !important;
 }
 
 .has-foreground-dark-color[class] {
-	color: darkgray !important;
+	color: #253136 !important;
 }
 
 .has-background-light-color[class] {
@@ -2037,16 +2037,16 @@ table th,
 }
 
 .has-background-dark-color[class] {
-	color: #2d2a26 !important;
+	color: #d9d9d9 !important;
 }
 
 .has-background-color[class] {
-	color: white !important;
+	color: #ffffff !important;
 }
 
 .has-primary-background-color[class] {
 	background-color: #3E7D98 !important;
-	color: white;
+	color: #ffffff;
 }
 
 .has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6 {
@@ -2054,8 +2054,8 @@ table th,
 }
 
 .has-secondary-background-color[class] {
-	background-color: #fcfbf9 !important;
-	color: white;
+	background-color: #9B6A36 !important;
+	color: #ffffff;
 }
 
 .has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6 {
@@ -2064,7 +2064,7 @@ table th,
 
 .has-foreground-background-color[class] {
 	background-color: #394d55 !important;
-	color: white;
+	color: #ffffff;
 }
 
 .has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6 {
@@ -2072,8 +2072,8 @@ table th,
 }
 
 .has-foreground-light-background-color[class] {
-	background-color: #394d55 !important;
-	color: white;
+	background-color: #4d6974 !important;
+	color: #ffffff;
 }
 
 .has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6 {
@@ -2081,8 +2081,8 @@ table th,
 }
 
 .has-foreground-dark-background-color[class] {
-	background-color: darkgray !important;
-	color: white;
+	background-color: #253136 !important;
+	color: #ffffff;
 }
 
 .has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6 {
@@ -2099,7 +2099,7 @@ table th,
 }
 
 .has-background-dark-background-color[class] {
-	background-color: #2d2a26 !important;
+	background-color: #d9d9d9 !important;
 	color: #394d55;
 }
 
@@ -2108,7 +2108,7 @@ table th,
 }
 
 .has-background-background-color[class] {
-	background-color: white !important;
+	background-color: #ffffff !important;
 	color: #394d55;
 }
 
@@ -2283,13 +2283,13 @@ table th,
  * - Similar to Blocks but exist outside of the "current" editor context
  */
 .site-branding {
-	color: #394d55;
+	color: #4d6974;
 }
 
 .site-title {
 	color: #394d55;
 	font-family: "Lora", Georgia, sans-serif;
-	font-size: 2.16rem;
+	font-size: 1.8rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2304,7 +2304,7 @@ table th,
 }
 
 .site-title a:hover {
-	color: #9B6A36;
+	color: #2f5f74;
 }
 
 .site-description {
@@ -2331,7 +2331,7 @@ table th,
 }
 
 .main-navigation #toggle:focus + #toggle-menu {
-	background-color: #9B6A36;
+	background-color: #2f5f74;
 	outline: inherit;
 	text-decoration: underline;
 }
@@ -2445,7 +2445,7 @@ table th,
 
 @media only screen and (min-width: 560px) {
 	.main-navigation > div > ul > li > .sub-menu {
-		background: white;
+		background: #ffffff;
 		box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
 		right: 0;
 		top: 100%;
@@ -2475,7 +2475,7 @@ table th,
 }
 
 .main-navigation a:hover {
-	color: #9B6A36;
+	color: #2f5f74;
 }
 
 .main-navigation .sub-menu {
@@ -2539,7 +2539,7 @@ table th,
 }
 
 .social-navigation a:hover {
-	color: #9B6A36;
+	color: #2f5f74;
 }
 
 .social-navigation svg {
@@ -2561,7 +2561,7 @@ table th,
 }
 
 .site-info {
-	color: #394d55;
+	color: #4d6974;
 	font-family: "Lora", Georgia, sans-serif;
 	font-size: 1.04167rem;
 }
@@ -2588,7 +2588,7 @@ table th,
 }
 
 .site-info a:hover {
-	color: #9B6A36;
+	color: #2f5f74;
 }
 
 .footer-navigation {
@@ -2610,7 +2610,7 @@ table th,
 }
 
 .footer-navigation .footer-menu {
-	color: #394d55;
+	color: #4d6974;
 	margin: 0;
 	padding-right: 0;
 }
@@ -2648,7 +2648,7 @@ table th,
 }
 
 .footer-navigation .footer-menu a:hover {
-	color: #9B6A36;
+	color: #2f5f74;
 }
 
 .entry-title {
@@ -2659,7 +2659,7 @@ table th,
 
 .entry-meta,
 .entry-footer {
-	color: #394d55;
+	color: #4d6974;
 	clear: both;
 	float: none;
 	font-size: 1.04167rem;
@@ -2696,7 +2696,7 @@ table th,
 .entry-meta a:hover, .entry-meta a:active,
 .entry-footer a:hover,
 .entry-footer a:active {
-	color: #9B6A36;
+	color: #2f5f74;
 }
 
 .entry-meta .svg-icon,
@@ -2940,7 +2940,7 @@ table th,
 }
 
 .comment-meta .comment-metadata a:hover, .comment-meta .comment-metadata a:active {
-	color: #9B6A36;
+	color: #2f5f74;
 }
 
 @media only screen and (min-width: 560px) {
@@ -3109,7 +3109,7 @@ img#wpstats {
  * - Page specific styles
  */
 .sticky-post {
-	color: white;
+	color: #ffffff;
 	background-color: #3E7D98;
 	font-family: "Lora", Georgia, sans-serif;
 	font-weight: bold;
@@ -3160,13 +3160,13 @@ img#wpstats {
 	}
 }
 
-@media only screen and (min-width: 732px) {
+@media only screen and (min-width: 782px) {
 	.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
 	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
-		max-width: calc( 732px - 32px);
+		max-width: calc( 782px - 32px);
 	}
 }
 
@@ -3176,7 +3176,7 @@ img#wpstats {
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
 	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
-		max-width: calc( 732px - 32px);
+		max-width: calc( 782px - 32px);
 	}
 }
 
@@ -3186,11 +3186,11 @@ img#wpstats {
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
 	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
-		max-width: calc( 732px - 32px);
+		max-width: calc( 782px - 32px);
 	}
 }
 
-.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, .site-header, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
 	width: calc(100% + 256px);
 	max-width: calc(100vw - 32px);
 	margin-right: auto;
@@ -3198,36 +3198,36 @@ 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, .site-header, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
 		width: calc(calc( 560px - 32px) + 256px);
 		max-width: calc(100vw - 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, .site-header, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
 		width: calc(calc( 640px - 32px) + 256px);
 		max-width: calc(100vw - 32px);
 	}
 }
 
-@media only screen and (min-width: 732px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, .site-header, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
-		width: calc(calc( 732px - 32px) + 256px);
+@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, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100vw - 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, .site-header, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
-		width: calc(calc( 732px - 32px) + 256px);
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100vw - 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, .site-header, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
-		width: calc(calc( 732px - 32px) + 256px);
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100vw - 32px);
 	}
 }
@@ -3253,23 +3253,23 @@ img#wpstats {
 	}
 }
 
-@media only screen and (min-width: 732px) {
+@media only screen and (min-width: 782px) {
 	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
-		width: calc(calc( 732px - 32px) + 256px);
+		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 {
-		width: calc(calc( 732px - 32px) + 256px);
+		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 {
-		width: calc(calc( 732px - 32px) + 256px);
+		width: calc(calc( 782px - 32px) + 256px);
 		max-width: 100%;
 	}
 }
@@ -3294,21 +3294,21 @@ img#wpstats {
 	}
 }
 
-@media only screen and (min-width: 732px) {
+@media only screen and (min-width: 782px) {
 	.alignright {
-		margin-right: calc( 0.5 * (100vw - calc( 732px - 32px)));
+		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
 	}
 }
 
 @media only screen and (min-width: 1024px) {
 	.alignright {
-		margin-right: calc( 0.5 * (100vw - calc( 732px - 32px)));
+		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
 	}
 }
 
 @media only screen and (min-width: 1280px) {
 	.alignright {
-		margin-right: calc( 0.5 * (100vw - calc( 732px - 32px)));
+		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
 	}
 }
 
@@ -3328,21 +3328,21 @@ img#wpstats {
 	}
 }
 
-@media only screen and (min-width: 732px) {
+@media only screen and (min-width: 782px) {
 	.alignleft {
-		margin-left: calc( 0.5 * (100vw - calc( 732px - 32px)));
+		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
 	}
 }
 
 @media only screen and (min-width: 1024px) {
 	.alignleft {
-		margin-left: calc( 0.5 * (100vw - calc( 732px - 32px)));
+		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
 	}
 }
 
 @media only screen and (min-width: 1280px) {
 	.alignleft {
-		margin-left: calc( 0.5 * (100vw - calc( 732px - 32px)));
+		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
 	}
 }
 
@@ -3374,15 +3374,6 @@ img#wpstats {
 /**
  * 1. General Styles
  */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-	color: #394d55;
-}
-
 a {
 	text-decoration: underline;
 }
@@ -3419,9 +3410,7 @@ a {
 	text-decoration: none;
 }
 
-.site-branding,
 .site-info,
-.main-navigation,
 .entry-header,
 .entry-footer,
 .page-title,
@@ -3443,13 +3432,19 @@ input[type="submit"],
 	transition: background-color 0.125s ease-in;
 }
 
-h3,
-blockquote cite,
-.site-branding .site-title,
 .widget-title {
+	font-family: "Lora", Georgia, sans-serif;
+}
+
+blockquote cite {
 	font-family: "Karla", Arial, sans-serif;
 }
 
+.wp-block-quote p,
+blockquote p {
+	font-size: 1.5rem;
+}
+
 .comment-reply-title {
 	display: inherit;
 }
@@ -3466,23 +3461,145 @@ blockquote cite,
 /**
  * 2. Header
  */
+/*
 .site-header {
+	@extend %responsive-alignwide;
 	margin: 0 auto;
+
+	@include media(desktop) {
+		padding-top: $site_main_spacing_vertical;
+	}
+}
+*/
+/**
+ * Wide Header & Footer
+ */
+#masthead {
+	position: relative;
 }
 
-@media only screen and (min-width: 1024px) {
+#masthead {
+	padding-right: 0;
+	padding-left: 0;
+	padding-bottom: 0;
+}
+
+/**
+ * Mobile-Menu
+ */
+.site-header {
+	margin-right: 0;
+	margin-left: 0;
+}
+
+/**
+ * CSS-grid Desktop Menu
+ */
+@media only screen and (min-width: 560px) {
 	.site-header {
-		padding-top: 64px;
+		align-items: center;
+		display: grid;
+		margin-right: auto;
+		margin-left: auto;
+		grid-template-columns: auto;
+		grid-template-rows: auto;
+		grid-column-gap: 16px;
+		grid-template-areas: "site-logo site-logo" "site-title main-navigation" "site-description social-navigation";
+	}
+	.site-header:before, .site-header:after {
+		content: none;
+		display: none;
+	}
+	.site-header > * {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+	.site-header .site-logo {
+		grid-area: site-logo;
+		margin-bottom: 16px;
+	}
+	.site-header .site-title {
+		grid-area: site-title;
+	}
+	.site-header .site-title + .site-description {
+		margin-top: 0;
+	}
+	.site-header .site-description {
+		align-self: center;
+		grid-area: site-description;
+	}
+	.site-header .main-navigation {
+		align-self: center;
+		justify-self: flex-end;
+		grid-area: main-navigation;
+	}
+	.site-header .main-navigation > div > ul {
+		justify-content: flex-end;
+		margin-right: -8px;
+		margin-left: -8px;
+	}
+	.site-header .main-navigation > div > ul > li {
+		padding-right: 16px;
+		padding-left: 16px;
+		padding-top: 8px;
+		padding-bottom: 8px;
+	}
+	.site-header .main-navigation > div > ul > li > a {
+		padding: 0;
+	}
+	.site-header .main-navigation > div > ul > li .sub-menu {
+		background: #3E7D98;
+	}
+	.site-header .main-navigation > div > ul > li .sub-menu a {
+		color: #9B6A36;
+	}
+	.site-header .main-navigation > div > ul > li .sub-menu a:hover, .site-header .main-navigation > div > ul > li .sub-menu a:focus {
+		text-decoration: underline;
+	}
+	.site-header .main-navigation > div > ul > .menu-item-has-children > a::after {
+		font-size: 0.625rem;
+	}
+	.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 {
+		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 #3E7D98;
+		border-right: 8px solid transparent;
+		border-left: 8px solid transparent;
+		content: "";
+		display: block;
+		margin-right: 16px;
+		width: 16px;
 	}
+	.site-header .social-navigation {
+		align-self: center;
+		grid-area: social-navigation;
+		justify-self: flex-end;
+	}
+}
+
+.main-navigation > div > ul > li:first-of-type,
+.social-navigation > div > ul > li:first-of-type {
+	margin-right: 0;
+}
+
+.main-navigation > div > ul > li:last-of-type,
+.social-navigation > div > ul > li:last-of-type {
+	margin-left: 0;
+}
+
+.social-navigation > div > ul {
+	flex-wrap: wrap;
 }
 
 /**
  * 3. Main Wrapper and Content
  */
-.site-content {
-	padding-top: 32px;
-}
-
 .home.page.hide-homepage-title .site-content .site-main {
 	padding-top: 0;
 }
@@ -3493,10 +3610,6 @@ blockquote cite,
 	}
 }
 
-.entry-content {
-	font-family: "Lora", Georgia, sans-serif;
-}
-
 #post-5 .entry-title {
 	display: none;
 }
@@ -3520,7 +3633,6 @@ blockquote cite,
 }
 
 .main-navigation > div > ul,
-.social-navigation > div > ul,
 .pagination .nav-links {
 	justify-content: center;
 }
@@ -3529,11 +3641,11 @@ blockquote cite,
  * 5. General Block Styles
  */
 .has-secondary-hover-color[class] {
-	color: #ffcf96 !important;
+	color: #755029 !important;
 }
 
 .has-primary-hover-color[class] {
-	color: #9B6A36 !important;
+	color: #2f5f74 !important;
 }
 
 .has-foreground-default-color[class] {
@@ -3541,19 +3653,19 @@ blockquote cite,
 }
 
 .has-text-color.has-secondary-hover-color[class] {
-	color: #ffcf96 !important;
+	color: #755029 !important;
 }
 
 .has-text-color.has-secondary-hover-color[class]:hover {
-	color: #ffcf96 !important;
+	color: #755029 !important;
 }
 
 .has-text-color.has-primary-hover-color[class] {
-	color: #9B6A36 !important;
+	color: #2f5f74 !important;
 }
 
 .has-text-color.has-primary-hover-color[class]:hover {
-	color: #9B6A36 !important;
+	color: #2f5f74 !important;
 }
 
 .has-text-color.has-foreground-default-color[class] {
@@ -3565,19 +3677,19 @@ blockquote cite,
 }
 
 .has-background.has-secondary-hover-background-color[class] {
-	background: #ffcf96 !important;
+	background: #755029 !important;
 }
 
 .has-background.has-secondary-hover-background-color[class]:hover {
-	background: #ffcf96 !important;
+	background: #755029 !important;
 }
 
 .has-background.has-primary-hover-background-color[class] {
-	background: #9B6A36 !important;
+	background: #2f5f74 !important;
 }
 
 .has-background.has-primary-hover-background-color[class]:hover {
-	background: #9B6A36 !important;
+	background: #2f5f74 !important;
 }
 
 .has-background.has-foreground-default-background-color[class] {
@@ -3595,7 +3707,7 @@ blockquote cite,
 	background: #3E7D98;
 	margin: 0 auto;
 	display: block;
-	color: #fcfbf9;
+	color: #9B6A36;
 }
 
 .site-footer button,
@@ -3603,7 +3715,7 @@ blockquote cite,
 .site-footer input[type="button"],
 .site-footer input[type="reset"],
 .site-footer input[type="submit"] {
-	background: #fcfbf9;
+	background: #9B6A36;
 	color: #3E7D98;
 }
 
@@ -3615,7 +3727,7 @@ blockquote cite,
 	margin: 0 auto;
 }
 
-@media only screen and (max-width: 731px) {
+@media only screen and (max-width: 781px) {
 	.site-footer #footer-widgets {
 		display: block;
 	}
@@ -3626,7 +3738,7 @@ blockquote cite,
 	font-size: 1.04167rem;
 }
 
-@media only screen and (min-width: 732px) {
+@media only screen and (min-width: 782px) {
 	.site-footer #footer-widgets .widget-area {
 		padding-left: 32px;
 	}
@@ -3644,13 +3756,13 @@ blockquote cite,
 
 .site-footer #footer-info-wrapper a {
 	font-family: "Lora", Georgia, sans-serif;
-	color: #fcfbf9;
+	color: #9B6A36;
 	padding: 0;
 	text-decoration: none;
 }
 
 .site-footer #footer-info-wrapper a:hover, .site-footer #footer-info-wrapper a:focus {
-	color: #ffcf96;
+	color: #755029;
 }
 
 .site-footer #footer-info-wrapper .footer-navigation {
@@ -3666,7 +3778,7 @@ blockquote cite,
 	display: block;
 	justify-content: left;
 	margin: 0;
-	color: #fcfbf9;
+	color: #9B6A36;
 }
 
 .site-footer #footer-info-wrapper .footer-navigation .footer-menu li:after {
@@ -3681,7 +3793,7 @@ blockquote cite,
 }
 
 .site-footer #footer-info-wrapper .site-info {
-	color: #fcfbf9;
+	color: #9B6A36;
 	text-align: left;
 	order: 2;
 	font-style: italic;
@@ -3693,8 +3805,7 @@ blockquote cite,
  * Widgets
  */
 .widget .widget-title {
-	font-weight: 700;
-	color: #fcfbf9;
+	color: #9B6A36;
 	margin-bottom: 32px;
 }
 
@@ -3714,17 +3825,14 @@ blockquote cite,
 }
 
 .widget ul li a {
-	color: #fcfbf9;
-	border-top: 1px solid #fcfbf9;
-	display: inline-block;
+	color: #9B6A36;
 	padding: 6px 0;
 }
 
 .widget ul li a:hover {
-	color: #ffcf96;
+	color: #755029;
 }
 
 .widget ul li.recentcomments a {
 	padding: 6px 0 !important;
-	display: inline-block !important;
 }

alves/style.css

@@ -596,7 +596,7 @@ body {
 	font-weight: normal;
 	color: #394d55;
 	text-align: left;
-	background-color: white;
+	background-color: #ffffff;
 }
 
 /**
@@ -607,7 +607,7 @@ a {
 }
 
 a:hover {
-	color: #9B6A36;
+	color: #2f5f74;
 }
 
 button,
@@ -631,7 +631,7 @@ a {
 }
 
 .screen-reader-text:focus {
-	background-color: white;
+	background-color: #ffffff;
 	border-radius: 3px;
 	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
 	clip: auto !important;
@@ -988,7 +988,7 @@ input[type="datetime-local"]:focus,
 input[type="color"]:focus,
 textarea:focus {
 	color: #394d55;
-	border-color: #9B6A36;
+	border-color: #2f5f74;
 }
 
 select {
@@ -1007,7 +1007,7 @@ input[type=checkbox] + label {
 }
 
 figcaption {
-	color: #394d55;
+	color: #4d6974;
 	font-size: 0.86806rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
@@ -1070,7 +1070,7 @@ input[type="submit"],
 .wp-block-button__link,
 .wp-block-file__button, .a8c-posts-list__view-all {
 	line-height: 1;
-	color: #fcfbf9;
+	color: #ffffff;
 	cursor: pointer;
 	font-weight: bold;
 	font-family: "Karla", Arial, sans-serif;
@@ -1125,8 +1125,8 @@ input:focus[type="submit"],
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
 .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all {
-	color: #fcfbf9;
-	background-color: #9B6A36;
+	color: #ffffff;
+	background-color: #2f5f74;
 }
 
 /**
@@ -1140,7 +1140,7 @@ input.has-focus[type="submit"],
 }
 
 .wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
-	color: #9B6A36;
+	color: #2f5f74;
 }
 
 .wp-block-button.is-style-squared .wp-block-button__link {
@@ -1198,7 +1198,7 @@ input.has-focus[type="submit"],
 	}
 }
 
-@media only screen and (min-width: 732px) {
+@media only screen and (min-width: 782px) {
 	.wp-block-columns .wp-block-column:not(:last-child) {
 		/* Resetting margins to match _block-container.scss */
 		margin-bottom: 0;
@@ -1227,7 +1227,7 @@ input.has-focus[type="submit"],
 .wp-block-cover-image .wp-block-cover__inner-container,
 .wp-block-cover-image .wp-block-cover-image-text,
 .wp-block-cover-image .wp-block-cover-text {
-	color: white;
+	color: #ffffff;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
@@ -1319,7 +1319,7 @@ input.has-focus[type="submit"],
 
 .wp-block-file .wp-block-file__button {
 	background-color: #3E7D98;
-	color: #fcfbf9;
+	color: #ffffff;
 	font-size: 1.04167rem;
 	margin-left: 16px;
 	margin-right: 16px;
@@ -1333,7 +1333,7 @@ input.has-focus[type="submit"],
 .wp-block-file a.wp-block-file__button:focus,
 .wp-block-file a.wp-block-file__button:hover,
 .wp-block-file a.wp-block-file__button:visited {
-	color: #fcfbf9;
+	color: #ffffff;
 	opacity: .85;
 }
 
@@ -1440,7 +1440,7 @@ h6, .h6 {
 }
 
 .wp-block-image figcaption {
-	color: #394d55;
+	color: #4d6974;
 	font-size: 0.86806rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
@@ -1490,7 +1490,7 @@ img {
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
-	color: #394d55;
+	color: #4d6974;
 	font-size: 1.04167rem;
 }
 
@@ -1526,7 +1526,7 @@ img {
 }
 
 .wp-block-latest-posts .wp-block-latest-posts__post-date {
-	color: #394d55;
+	color: #4d6974;
 	font-size: 0.86806rem;
 	line-height: 1.6;
 }
@@ -1674,7 +1674,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .a8c-posts-list-item__featured span {
-	color: white;
+	color: #ffffff;
 	background-color: #3E7D98;
 	font-family: "Lora", Georgia, sans-serif;
 	font-weight: bold;
@@ -1713,7 +1713,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__meta {
-	color: #394d55;
+	color: #4d6974;
 	font-size: 1.04167rem;
 }
 
@@ -1722,7 +1722,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__meta a:hover, .a8c-posts-list__item .a8c-posts-list-item__meta a:active {
-	color: #9B6A36;
+	color: #2f5f74;
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__edit-link {
@@ -1762,7 +1762,7 @@ p.has-background:not(.has-background-background-color) a {
 .wp-block-pullquote .wp-block-pullquote__citation,
 .wp-block-pullquote cite,
 .wp-block-pullquote footer {
-	color: #394d55;
+	color: #4d6974;
 	font-size: 1.04167rem;
 	letter-spacing: normal;
 	display: block;
@@ -1782,7 +1782,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-pullquote.is-style-solid-color {
 	background-color: #3E7D98;
-	color: white;
+	color: #ffffff;
 }
 
 .wp-block-pullquote.is-style-solid-color blockquote {
@@ -1837,7 +1837,7 @@ p.has-background:not(.has-background-background-color) a {
 .wp-block-quote .wp-block-quote__citation,
 .wp-block-quote cite,
 .wp-block-quote footer {
-	color: #394d55;
+	color: #4d6974;
 	font-size: 1.04167rem;
 	letter-spacing: normal;
 }
@@ -1869,7 +1869,7 @@ p.has-background:not(.has-background-background-color) a {
 .wp-block-quote.is-style-large footer, .wp-block-quote.is-large .wp-block-quote__citation,
 .wp-block-quote.is-large cite,
 .wp-block-quote.is-large footer {
-	color: #394d55;
+	color: #4d6974;
 	font-size: 1.04167rem;
 	letter-spacing: normal;
 }
@@ -1945,7 +1945,7 @@ table th,
 }
 
 .wp-block-video figcaption {
-	color: #394d55;
+	color: #4d6974;
 	font-size: 0.86806rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
@@ -2021,7 +2021,7 @@ table th,
 }
 
 .has-secondary-color[class] {
-	color: #fcfbf9 !important;
+	color: #9B6A36 !important;
 }
 
 .has-foreground-color[class] {
@@ -2029,11 +2029,11 @@ table th,
 }
 
 .has-foreground-light-color[class] {
-	color: #394d55 !important;
+	color: #4d6974 !important;
 }
 
 .has-foreground-dark-color[class] {
-	color: darkgray !important;
+	color: #253136 !important;
 }
 
 .has-background-light-color[class] {
@@ -2041,16 +2041,16 @@ table th,
 }
 
 .has-background-dark-color[class] {
-	color: #2d2a26 !important;
+	color: #d9d9d9 !important;
 }
 
 .has-background-color[class] {
-	color: white !important;
+	color: #ffffff !important;
 }
 
 .has-primary-background-color[class] {
 	background-color: #3E7D98 !important;
-	color: white;
+	color: #ffffff;
 }
 
 .has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6 {
@@ -2058,8 +2058,8 @@ table th,
 }
 
 .has-secondary-background-color[class] {
-	background-color: #fcfbf9 !important;
-	color: white;
+	background-color: #9B6A36 !important;
+	color: #ffffff;
 }
 
 .has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6 {
@@ -2068,7 +2068,7 @@ table th,
 
 .has-foreground-background-color[class] {
 	background-color: #394d55 !important;
-	color: white;
+	color: #ffffff;
 }
 
 .has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6 {
@@ -2076,8 +2076,8 @@ table th,
 }
 
 .has-foreground-light-background-color[class] {
-	background-color: #394d55 !important;
-	color: white;
+	background-color: #4d6974 !important;
+	color: #ffffff;
 }
 
 .has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6 {
@@ -2085,8 +2085,8 @@ table th,
 }
 
 .has-foreground-dark-background-color[class] {
-	background-color: darkgray !important;
-	color: white;
+	background-color: #253136 !important;
+	color: #ffffff;
 }
 
 .has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6 {
@@ -2103,7 +2103,7 @@ table th,
 }
 
 .has-background-dark-background-color[class] {
-	background-color: #2d2a26 !important;
+	background-color: #d9d9d9 !important;
 	color: #394d55;
 }
 
@@ -2112,7 +2112,7 @@ table th,
 }
 
 .has-background-background-color[class] {
-	background-color: white !important;
+	background-color: #ffffff !important;
 	color: #394d55;
 }
 
@@ -2287,13 +2287,13 @@ table th,
  * - Similar to Blocks but exist outside of the "current" editor context
  */
 .site-branding {
-	color: #394d55;
+	color: #4d6974;
 }
 
 .site-title {
 	color: #394d55;
 	font-family: "Lora", Georgia, sans-serif;
-	font-size: 2.16rem;
+	font-size: 1.8rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2308,7 +2308,7 @@ table th,
 }
 
 .site-title a:hover {
-	color: #9B6A36;
+	color: #2f5f74;
 }
 
 .site-description {
@@ -2335,7 +2335,7 @@ table th,
 }
 
 .main-navigation #toggle:focus + #toggle-menu {
-	background-color: #9B6A36;
+	background-color: #2f5f74;
 	outline: inherit;
 	text-decoration: underline;
 }
@@ -2449,7 +2449,7 @@ table th,
 
 @media only screen and (min-width: 560px) {
 	.main-navigation > div > ul > li > .sub-menu {
-		background: white;
+		background: #ffffff;
 		box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
 		left: 0;
 		top: 100%;
@@ -2469,7 +2469,7 @@ table th,
 	color: #394d55;
 	display: block;
 	font-family: "Karla", Arial, sans-serif;
-	font-size: 1.25rem;
+	font-size: 1.04167rem;
 	font-weight: bold;
 	padding: 16px;
 }
@@ -2479,7 +2479,7 @@ table th,
 }
 
 .main-navigation a:hover {
-	color: #9B6A36;
+	color: #2f5f74;
 }
 
 .main-navigation .sub-menu {
@@ -2543,7 +2543,7 @@ table th,
 }
 
 .social-navigation a:hover {
-	color: #9B6A36;
+	color: #2f5f74;
 }
 
 .social-navigation svg {
@@ -2565,7 +2565,7 @@ table th,
 }
 
 .site-info {
-	color: #394d55;
+	color: #4d6974;
 	font-family: "Lora", Georgia, sans-serif;
 	font-size: 1.04167rem;
 }
@@ -2592,7 +2592,7 @@ table th,
 }
 
 .site-info a:hover {
-	color: #9B6A36;
+	color: #2f5f74;
 }
 
 .footer-navigation {
@@ -2614,7 +2614,7 @@ table th,
 }
 
 .footer-navigation .footer-menu {
-	color: #394d55;
+	color: #4d6974;
 	margin: 0;
 	padding-left: 0;
 }
@@ -2652,7 +2652,7 @@ table th,
 }
 
 .footer-navigation .footer-menu a:hover {
-	color: #9B6A36;
+	color: #2f5f74;
 }
 
 .entry-title {
@@ -2663,7 +2663,7 @@ table th,
 
 .entry-meta,
 .entry-footer {
-	color: #394d55;
+	color: #4d6974;
 	clear: both;
 	float: none;
 	font-size: 1.04167rem;
@@ -2700,7 +2700,7 @@ table th,
 .entry-meta a:hover, .entry-meta a:active,
 .entry-footer a:hover,
 .entry-footer a:active {
-	color: #9B6A36;
+	color: #2f5f74;
 }
 
 .entry-meta .svg-icon,
@@ -2944,7 +2944,7 @@ table th,
 }
 
 .comment-meta .comment-metadata a:hover, .comment-meta .comment-metadata a:active {
-	color: #9B6A36;
+	color: #2f5f74;
 }
 
 @media only screen and (min-width: 560px) {
@@ -3113,7 +3113,7 @@ img#wpstats {
  * - Page specific styles
  */
 .sticky-post {
-	color: white;
+	color: #ffffff;
 	background-color: #3E7D98;
 	font-family: "Lora", Georgia, sans-serif;
 	font-weight: bold;
@@ -3164,13 +3164,13 @@ img#wpstats {
 	}
 }
 
-@media only screen and (min-width: 732px) {
+@media only screen and (min-width: 782px) {
 	.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
 	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
-		max-width: calc( 732px - 32px);
+		max-width: calc( 782px - 32px);
 	}
 }
 
@@ -3180,7 +3180,7 @@ img#wpstats {
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
 	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
-		max-width: calc( 732px - 32px);
+		max-width: calc( 782px - 32px);
 	}
 }
 
@@ -3190,11 +3190,11 @@ img#wpstats {
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
 	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
-		max-width: calc( 732px - 32px);
+		max-width: calc( 782px - 32px);
 	}
 }
 
-.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, .site-header, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
 	width: calc(100% + 256px);
 	max-width: calc(100vw - 32px);
 	margin-left: auto;
@@ -3202,36 +3202,36 @@ 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, .site-header, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
 		width: calc(calc( 560px - 32px) + 256px);
 		max-width: calc(100vw - 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, .site-header, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
 		width: calc(calc( 640px - 32px) + 256px);
 		max-width: calc(100vw - 32px);
 	}
 }
 
-@media only screen and (min-width: 732px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, .site-header, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
-		width: calc(calc( 732px - 32px) + 256px);
+@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, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100vw - 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, .site-header, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
-		width: calc(calc( 732px - 32px) + 256px);
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100vw - 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, .site-header, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
-		width: calc(calc( 732px - 32px) + 256px);
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100vw - 32px);
 	}
 }
@@ -3257,23 +3257,23 @@ img#wpstats {
 	}
 }
 
-@media only screen and (min-width: 732px) {
+@media only screen and (min-width: 782px) {
 	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
-		width: calc(calc( 732px - 32px) + 256px);
+		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 {
-		width: calc(calc( 732px - 32px) + 256px);
+		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 {
-		width: calc(calc( 732px - 32px) + 256px);
+		width: calc(calc( 782px - 32px) + 256px);
 		max-width: 100%;
 	}
 }
@@ -3301,24 +3301,24 @@ img#wpstats {
 	}
 }
 
-@media only screen and (min-width: 732px) {
+@media only screen and (min-width: 782px) {
 	.alignright {
 		/*rtl:ignore*/
-		margin-right: calc( 0.5 * (100vw - calc( 732px - 32px)));
+		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
 	}
 }
 
 @media only screen and (min-width: 1024px) {
 	.alignright {
 		/*rtl:ignore*/
-		margin-right: calc( 0.5 * (100vw - calc( 732px - 32px)));
+		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
 	}
 }
 
 @media only screen and (min-width: 1280px) {
 	.alignright {
 		/*rtl:ignore*/
-		margin-right: calc( 0.5 * (100vw - calc( 732px - 32px)));
+		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
 	}
 }
 
@@ -3341,24 +3341,24 @@ img#wpstats {
 	}
 }
 
-@media only screen and (min-width: 732px) {
+@media only screen and (min-width: 782px) {
 	.alignleft {
 		/*rtl:ignore*/
-		margin-left: calc( 0.5 * (100vw - calc( 732px - 32px)));
+		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
 	}
 }
 
 @media only screen and (min-width: 1024px) {
 	.alignleft {
 		/*rtl:ignore*/
-		margin-left: calc( 0.5 * (100vw - calc( 732px - 32px)));
+		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
 	}
 }
 
 @media only screen and (min-width: 1280px) {
 	.alignleft {
 		/*rtl:ignore*/
-		margin-left: calc( 0.5 * (100vw - calc( 732px - 32px)));
+		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
 	}
 }
 
@@ -3390,15 +3390,6 @@ img#wpstats {
 /**
  * 1. General Styles
  */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-	color: #394d55;
-}
-
 a {
 	text-decoration: underline;
 }
@@ -3435,9 +3426,7 @@ a {
 	text-decoration: none;
 }
 
-.site-branding,
 .site-info,
-.main-navigation,
 .entry-header,
 .entry-footer,
 .page-title,
@@ -3459,13 +3448,19 @@ input[type="submit"],
 	transition: background-color 0.125s ease-in;
 }
 
-h3,
-blockquote cite,
-.site-branding .site-title,
 .widget-title {
+	font-family: "Lora", Georgia, sans-serif;
+}
+
+blockquote cite {
 	font-family: "Karla", Arial, sans-serif;
 }
 
+.wp-block-quote p,
+blockquote p {
+	font-size: 1.5rem;
+}
+
 .comment-reply-title {
 	display: inherit;
 }
@@ -3482,23 +3477,145 @@ blockquote cite,
 /**
  * 2. Header
  */
+/*
 .site-header {
+	@extend %responsive-alignwide;
 	margin: 0 auto;
+
+	@include media(desktop) {
+		padding-top: $site_main_spacing_vertical;
+	}
+}
+*/
+/**
+ * Wide Header & Footer
+ */
+#masthead {
+	position: relative;
 }
 
-@media only screen and (min-width: 1024px) {
+#masthead {
+	padding-left: 0;
+	padding-right: 0;
+	padding-bottom: 0;
+}
+
+/**
+ * Mobile-Menu
+ */
+.site-header {
+	margin-left: 0;
+	margin-right: 0;
+}
+
+/**
+ * CSS-grid Desktop Menu
+ */
+@media only screen and (min-width: 560px) {
 	.site-header {
-		padding-top: 64px;
+		align-items: center;
+		display: grid;
+		margin-left: auto;
+		margin-right: auto;
+		grid-template-columns: auto;
+		grid-template-rows: auto;
+		grid-column-gap: 16px;
+		grid-template-areas: "site-logo site-logo" "site-title main-navigation" "site-description social-navigation";
+	}
+	.site-header:before, .site-header:after {
+		content: none;
+		display: none;
+	}
+	.site-header > * {
+		margin-top: 0;
+		margin-bottom: 0;
 	}
+	.site-header .site-logo {
+		grid-area: site-logo;
+		margin-bottom: 16px;
+	}
+	.site-header .site-title {
+		grid-area: site-title;
+	}
+	.site-header .site-title + .site-description {
+		margin-top: 0;
+	}
+	.site-header .site-description {
+		align-self: center;
+		grid-area: site-description;
+	}
+	.site-header .main-navigation {
+		align-self: center;
+		justify-self: flex-end;
+		grid-area: main-navigation;
+	}
+	.site-header .main-navigation > div > ul {
+		justify-content: flex-end;
+		margin-left: -8px;
+		margin-right: -8px;
+	}
+	.site-header .main-navigation > div > ul > li {
+		padding-left: 16px;
+		padding-right: 16px;
+		padding-top: 8px;
+		padding-bottom: 8px;
+	}
+	.site-header .main-navigation > div > ul > li > a {
+		padding: 0;
+	}
+	.site-header .main-navigation > div > ul > li .sub-menu {
+		background: #3E7D98;
+	}
+	.site-header .main-navigation > div > ul > li .sub-menu a {
+		color: #9B6A36;
+	}
+	.site-header .main-navigation > div > ul > li .sub-menu a:hover, .site-header .main-navigation > div > ul > li .sub-menu a:focus {
+		text-decoration: underline;
+	}
+	.site-header .main-navigation > div > ul > .menu-item-has-children > a::after {
+		font-size: 0.625rem;
+	}
+	.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 {
+		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 #3E7D98;
+		border-left: 8px solid transparent;
+		border-right: 8px solid transparent;
+		content: "";
+		display: block;
+		margin-left: 16px;
+		width: 16px;
+	}
+	.site-header .social-navigation {
+		align-self: center;
+		grid-area: social-navigation;
+		justify-self: flex-end;
+	}
+}
+
+.main-navigation > div > ul > li:first-of-type,
+.social-navigation > div > ul > li:first-of-type {
+	margin-left: 0;
+}
+
+.main-navigation > div > ul > li:last-of-type,
+.social-navigation > div > ul > li:last-of-type {
+	margin-right: 0;
+}
+
+.social-navigation > div > ul {
+	flex-wrap: wrap;
 }
 
 /**
  * 3. Main Wrapper and Content
  */
-.site-content {
-	padding-top: 32px;
-}
-
 .home.page.hide-homepage-title .site-content .site-main {
 	padding-top: 0;
 }
@@ -3509,10 +3626,6 @@ blockquote cite,
 	}
 }
 
-.entry-content {
-	font-family: "Lora", Georgia, sans-serif;
-}
-
 #post-5 .entry-title {
 	display: none;
 }
@@ -3536,7 +3649,6 @@ blockquote cite,
 }
 
 .main-navigation > div > ul,
-.social-navigation > div > ul,
 .pagination .nav-links {
 	justify-content: center;
 }
@@ -3545,11 +3657,11 @@ blockquote cite,
  * 5. General Block Styles
  */
 .has-secondary-hover-color[class] {
-	color: #ffcf96 !important;
+	color: #755029 !important;
 }
 
 .has-primary-hover-color[class] {
-	color: #9B6A36 !important;
+	color: #2f5f74 !important;
 }
 
 .has-foreground-default-color[class] {
@@ -3557,19 +3669,19 @@ blockquote cite,
 }
 
 .has-text-color.has-secondary-hover-color[class] {
-	color: #ffcf96 !important;
+	color: #755029 !important;
 }
 
 .has-text-color.has-secondary-hover-color[class]:hover {
-	color: #ffcf96 !important;
+	color: #755029 !important;
 }
 
 .has-text-color.has-primary-hover-color[class] {
-	color: #9B6A36 !important;
+	color: #2f5f74 !important;
 }
 
 .has-text-color.has-primary-hover-color[class]:hover {
-	color: #9B6A36 !important;
+	color: #2f5f74 !important;
 }
 
 .has-text-color.has-foreground-default-color[class] {
@@ -3581,19 +3693,19 @@ blockquote cite,
 }
 
 .has-background.has-secondary-hover-background-color[class] {
-	background: #ffcf96 !important;
+	background: #755029 !important;
 }
 
 .has-background.has-secondary-hover-background-color[class]:hover {
-	background: #ffcf96 !important;
+	background: #755029 !important;
 }
 
 .has-background.has-primary-hover-background-color[class] {
-	background: #9B6A36 !important;
+	background: #2f5f74 !important;
 }
 
 .has-background.has-primary-hover-background-color[class]:hover {
-	background: #9B6A36 !important;
+	background: #2f5f74 !important;
 }
 
 .has-background.has-foreground-default-background-color[class] {
@@ -3611,7 +3723,7 @@ blockquote cite,
 	background: #3E7D98;
 	margin: 0 auto;
 	display: block;
-	color: #fcfbf9;
+	color: #9B6A36;
 }
 
 .site-footer button,
@@ -3619,7 +3731,7 @@ blockquote cite,
 .site-footer input[type="button"],
 .site-footer input[type="reset"],
 .site-footer input[type="submit"] {
-	background: #fcfbf9;
+	background: #9B6A36;
 	color: #3E7D98;
 }
 
@@ -3631,7 +3743,7 @@ blockquote cite,
 	margin: 0 auto;
 }
 
-@media only screen and (max-width: 731px) {
+@media only screen and (max-width: 781px) {
 	.site-footer #footer-widgets {
 		display: block;
 	}
@@ -3642,7 +3754,7 @@ blockquote cite,
 	font-size: 1.04167rem;
 }
 
-@media only screen and (min-width: 732px) {
+@media only screen and (min-width: 782px) {
 	.site-footer #footer-widgets .widget-area {
 		padding-right: 32px;
 	}
@@ -3660,13 +3772,13 @@ blockquote cite,
 
 .site-footer #footer-info-wrapper a {
 	font-family: "Lora", Georgia, sans-serif;
-	color: #fcfbf9;
+	color: #9B6A36;
 	padding: 0;
 	text-decoration: none;
 }
 
 .site-footer #footer-info-wrapper a:hover, .site-footer #footer-info-wrapper a:focus {
-	color: #ffcf96;
+	color: #755029;
 }
 
 .site-footer #footer-info-wrapper .footer-navigation {
@@ -3682,7 +3794,7 @@ blockquote cite,
 	display: block;
 	justify-content: left;
 	margin: 0;
-	color: #fcfbf9;
+	color: #9B6A36;
 }
 
 .site-footer #footer-info-wrapper .footer-navigation .footer-menu li:after {
@@ -3697,7 +3809,7 @@ blockquote cite,
 }
 
 .site-footer #footer-info-wrapper .site-info {
-	color: #fcfbf9;
+	color: #9B6A36;
 	text-align: right;
 	order: 2;
 	font-style: italic;
@@ -3709,8 +3821,7 @@ blockquote cite,
  * Widgets
  */
 .widget .widget-title {
-	font-weight: 700;
-	color: #fcfbf9;
+	color: #9B6A36;
 	margin-bottom: 32px;
 }
 
@@ -3730,17 +3841,14 @@ blockquote cite,
 }
 
 .widget ul li a {
-	color: #fcfbf9;
-	border-top: 1px solid #fcfbf9;
-	display: inline-block;
+	color: #9B6A36;
 	padding: 6px 0;
 }
 
 .widget ul li a:hover {
-	color: #ffcf96;
+	color: #755029;
 }
 
 .widget ul li.recentcomments a {
 	padding: 6px 0 !important;
-	display: inline-block !important;
 }

alves/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; ?>