Rockfield: Start with the refresh

rockfield/footer.php

@@ -0,0 +1,74 @@
+<?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>' );
+		}
+		?>
+
+    <?php if ( has_nav_menu( 'social' ) ) : ?>
+      <nav class="social-navigation" aria-label="<?php esc_attr_e( 'Social Links Menu', 'rockfield' ); ?>">
+        <?php
+        wp_nav_menu(
+          array(
+            'theme_location' => 'social',
+            'menu_class'     => 'social-links-menu',
+            'link_before'    => '<span class="screen-reader-text">',
+            'link_after'     => '</span>' . varia_get_icon_svg( 'link' ),
+            'depth'          => 1,
+          )
+        );
+        ?>
+      </nav><!-- .social-navigation -->
+    <?php endif; ?>
+
+		<?php if ( has_nav_menu( 'menu-2' ) ) : ?>
+			<nav class="footer-navigation" aria-label="<?php esc_attr_e( 'Footer Menu', 'rockfield' ); ?>">
+				<?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/', 'rockfield' ) ); ?>" class="imprint">
+				<?php
+				/* translators: %s: WordPress. */
+				printf( __( 'proudly powered by %s.', 'rockfield' ), 'WordPress' );
+				?>
+			</a>
+		</div><!-- .site-info -->
+	</footer><!-- #colophon -->
+
+</div><!-- #page -->
+
+<?php wp_footer(); ?>
+
+</body>
+</html>

rockfield/functions.php

@@ -60,37 +60,37 @@ if ( ! function_exists( 'rockfield_setup' ) ) :
 				array(
 					'name'  => __( 'Primary', 'rockfield' ),
 					'slug'  => 'primary',
-					'color' => '#0000FF',
+					'color' => '#7E756E',
 				),
 				array(
 					'name'  => __( 'Secondary', 'rockfield' ),
 					'slug'  => 'secondary',
-					'color' => '#FF0000',
+					'color' => '#208751',
 				),
 				array(
 					'name'  => __( 'Dark Gray', 'rockfield' ),
 					'slug'  => 'foreground-dark',
-					'color' => '#111111',
+					'color' => '#1E1C1B',
 				),
 				array(
 					'name'  => __( 'Gray', 'rockfield' ),
 					'slug'  => 'foreground',
-					'color' => '#444444',
+					'color' => '#5E5853',
 				),
 				array(
 					'name'  => __( 'Light Gray', 'rockfield' ),
 					'slug'  => 'foreground-light',
-					'color' => '#767676',
+					'color' => '#99908A',
 				),
 				array(
 					'name'  => __( 'Lighter Gray', 'rockfield' ),
 					'slug'  => 'background-dark',
-					'color' => '#DDDDDD',
+					'color' => '#E8E9EA',
 				),
 				array(
 					'name'  => __( 'Subtle Gray', 'rockfield' ),
 					'slug'  => 'background-light',
-					'color' => '#FAFAFA',
+					'color' => '#F4F5F5',
 				),
 				array(
 					'name'  => __( 'White', 'rockfield' ),
@@ -159,7 +159,7 @@ function rockfield_fonts_url() {
  */
 function rockfield_scripts() {
 
-	// enqueue Google fonts, if necessary
+	// enqueue Google fonts
 	wp_enqueue_style( 'rockfield-fonts', rockfield_fonts_url(), array(), null );
 
 	// dequeue parent styles
@@ -171,6 +171,9 @@ function rockfield_scripts() {
 	// enqueue child RTL styles
 	wp_style_add_data( 'rockfield-style', 'rtl', 'replace' );
 
+	// enqueue header spacing JS
+	wp_enqueue_script('rockfield-fixed-header-spacing', get_stylesheet_directory_uri() . '/js/fixed-header-spacing.js', array(), wp_get_theme()->get( 'Version' ), true );
+
 }
 add_action( 'wp_enqueue_scripts', 'rockfield_scripts', 99 );
 
@@ -179,7 +182,7 @@ add_action( 'wp_enqueue_scripts', 'rockfield_scripts', 99 );
  */
 function rockfield_editor_styles() {
 
-	// Enqueue Google fonts in the editor, if necessary
+	// Enqueue Google fonts in the editor
 	wp_enqueue_style( 'rockfield-editor-fonts', rockfield_fonts_url(), array(), null );
 }
 add_action( 'enqueue_block_editor_assets', 'rockfield_editor_styles' );

rockfield/header.php

@@ -0,0 +1,54 @@
+<?php
+/**
+ * The header for our theme
+ *
+ * This is the template that displays all of the <head> section and everything up until <div id="content">
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
+ *
+ * @package WordPress
+ * @subpackage Varia
+ * @since 1.0.0
+ */
+?><!doctype html>
+<html <?php language_attributes(); ?>>
+<head>
+	<meta charset="<?php bloginfo( 'charset' ); ?>" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<link rel="profile" href="https://gmpg.org/xfn/11" />
+	<?php wp_head(); ?>
+</head>
+
+<body <?php body_class(); ?>>
+<div id="page" class="site">
+	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'rockfield' ); ?></a>
+
+		<header id="masthead" class="site-header responsive-max-width">
+
+			<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
+
+			<?php if ( has_nav_menu( 'menu-1' ) ) : ?>
+				<nav id="site-navigation" class="main-navigation" aria-label="<?php esc_attr_e( 'Main Navigation', 'rockfield' ); ?>">
+					<input type="checkbox" role="button" aria-haspopup="true" id="toggle" class="hide-visually">
+					<label for="toggle" id="toggle-menu" class="button">
+						<?php _e( 'Menu', 'rockfield' ); ?>
+						<span class="dropdown-icon open">+</span>
+						<span class="dropdown-icon close">&times;</span>
+						<span class="hide-visually expanded-text"><?php _e( 'expanded', 'rockfield' ); ?></span>
+						<span class="hide-visually collapsed-text"><?php _e( 'collapsed', 'rockfield' ); ?></span>
+					</label>
+					<?php
+					wp_nav_menu(
+						array(
+							'theme_location' => 'menu-1',
+							'menu_class'     => 'main-menu',
+							'items_wrap'     => '<ul id="%1$s" class="%2$s" aria-label="submenu">%3$s</ul>',
+						)
+					);
+					?>
+				</nav><!-- #site-navigation -->
+			<?php endif; ?>
+
+		</header><!-- #masthead -->
+
+	<div id="content" class="site-content">

rockfield/js/fixed-header-spacing.js

@@ -0,0 +1,87 @@
+(function() {
+
+	/**
+	 * Debounce
+	 *
+	 * @param {Function} func
+	 * @param {number} wait
+	 * @param {boolean} immediate
+	 */
+	function debounce(func, wait, immediate) {
+		'use strict';
+
+		var timeout;
+		wait      = (typeof wait !== 'undefined') ? wait : 20;
+		immediate = (typeof immediate !== 'undefined') ? immediate : true;
+
+		return function() {
+
+			var context = this, args = arguments;
+			var later = function() {
+				timeout = null;
+
+				if (!immediate) {
+					func.apply(context, args);
+				}
+			};
+
+			var callNow = immediate && !timeout;
+
+			clearTimeout(timeout);
+			timeout = setTimeout(later, wait);
+
+			if (callNow) {
+				func.apply(context, args);
+			}
+		};
+	}
+
+	/**
+	 * Get page header height and use it for top-margin on
+	 * site-content when above mobile breakpoint
+	 */
+	function pageHeaderHeight() {
+		if ( document.documentElement.clientWidth <= 640 ) {
+
+			document.getElementById("primary").style.marginTop = 0;
+
+		} else {
+			var body          = document.body;
+			var header        = document.getElementById("masthead");
+			var content       = document.getElementById("primary");
+			var archiveHeader = body.querySelector('.page-header');
+
+			if ( body.classList.contains("archive") ) {
+
+				content.style.marginTop = header.offsetHeight + "px";
+
+			} else {
+
+				content.style.marginTop = header.offsetHeight + "px";
+			}
+		}
+	};
+
+	/**
+	 * Run our function every time the window resizes
+	 */
+	var isResizing = false;
+	window.addEventListener( 'resize',
+		debounce( function() {
+			if ( isResizing ) {
+				return;
+			}
+
+			isResizing = true;
+			setTimeout( function() {
+				pageHeaderHeight();
+				isResizing = false;
+			}, 150 );
+		} )
+	);
+
+	/**
+	 * Run our page header height function
+	 */
+	pageHeaderHeight();
+})();

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

@@ -141,15 +141,15 @@ $config-elements: (
 		// Fonts
 		"font": (
 			"family": map-deep-get($config-global, "font", "family", "primary"),
-			"line-height": map-deep-get($config-global, "font", "line-height", "md"),
-			"size": map-deep-get($config-global, "font", "size", "md"),
-			"weight": bold,
+			"line-height": map-deep-get($config-global, "font", "line-height", "base"),
+			"size": map-deep-get($config-global, "font", "size", "base"),
+			"weight": normal,
 		),
 
 		// Borders
 		"border": (
-			"width": 1px,
-			"radius": 3px,
+			"width": 2px,
+			"radius": 0,
 		),
 
 		"padding": #{map-deep-get($config-global, "spacing", "unit")},
@@ -162,8 +162,8 @@ $config-elements: (
 $config-button: (
 	// Colors
 	"color": (
-		"text": map-deep-get($config-global, "color", "background"),
-		"text-hover": map-deep-get($config-global, "color", "background"),
+		"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"),
 	),
@@ -188,7 +188,7 @@ $config-button: (
  * Cover
  */
 $config-cover: (
-	"height": calc( 15 * #{map-deep-get($config-global, "spacing", "vertical")} ),
+	"height": 90vh,
 );
 
 /**
@@ -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", "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", "foreground", "light"),
 		),
 		// 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", "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", "foreground", "light"),
 		),
 		// Fonts
 		"font": (
@@ -329,10 +329,10 @@ $config-header: (
 	"social-nav": (
 		// Colors
 		"color": (
-			"link": map-deep-get($config-global, "color", "primary", "default"),
-			"link-hover": map-deep-get($config-global, "color", "primary", "hover"),
+			"link": map-deep-get($config-global, "color", "background", "default"),
+			"link-hover": map-deep-get($config-global, "color", "foreground", "light"),
 		),
-		"link-padding": calc( 0.5 * calc(0.66 * #{map-deep-get($config-global, "spacing", "unit")} ) ),
+		"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", "default"),
-		"link": map-deep-get($config-global, "color", "foreground", "default"),
-		"link-hover": map-deep-get($config-global, "color", "secondary", "default"),
+		"text": map-deep-get($config-global, "color", "foreground", "light"),
+		"link": map-deep-get($config-global, "color", "foreground", "light"),
+		"link-hover": map-deep-get($config-global, "color", "foreground", "dark"),
 	),
 	// Fonts
 	"font": (

rockfield/sass/_extra-child-theme.scss

@@ -3,15 +3,32 @@
  */
 // @import "";
 
+/**
+ * Reset
+ */
+// Reset Links
 a {
 	text-decoration: none;
+
+	.reply &,
+	.widget-area &,
+	.wp-block-cover &,
+	.wp-block-cover-image &,
+	.wp-block-media-text &,
+	p:not(.site-title) & {
+		text-decoration: underline;
+
+		&.wp-block-button__link,
+		&:hover {
+			text-decoration: none;
+		}
+	}
 }
 
-.site-branding,
+// Reset Layout
 .site-info,
 .main-navigation,
 .entry-header,
-.entry-footer,
 .page-title,
 .author-title,
 .comments-title,
@@ -37,9 +54,53 @@ a {
 	justify-content: center;
 }
 
+/**
+ * Header
+ */
+#masthead {
+	background: #{map-deep-get($config-global, "color", "foreground", "dark")};
+	display: flex;
+	justify-content: space-between;
+	margin: 0;
+	padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} #{map-deep-get($config-global, "spacing", "horizontal")};
+	position: relative;
+	text-align: left;
+	z-index: 9999;
 
+	@extend %responsive-width-full;
 
+	@include media(mobile) {
+		align-items: flex-end;
+	}
+
+	@include media(tablet) {
+		left: 0;
+		max-width: 100%;
+		position: absolute;
+		right: 0;
+
+		body:not(.wp-custom-logo) & {
+			position: fixed;
+		}
+	}
+}
+
+/**
+ * Site Branding
+ */
+.site-branding {
+	margin: 0;
+	margin-right: auto;
+	padding-bottom: #{0.27 * map-deep-get($config-global, "spacing", "vertical")};
+	padding-right: #{map-deep-get($config-global, "spacing", "horizontal")};
+	padding-top: #{0.27 * map-deep-get($config-global, "spacing", "vertical")};
+	text-align: inherit;
 
+	@include media(mobile) {
+		padding-bottom: 0;
+		padding-top: 0;
+	}
+}
 
 .site-title {
 	display: inline;
@@ -49,14 +110,401 @@ a {
 	display: none;
 }
 
-@include media(mobile) {
+@include media(tablet) {
 	.site-description {
 		display: inline;
 	}
 
 	.site-title:not(:empty) + .site-description:not(:empty):before {
+		color: map-deep-get($config-global, "color", "foreground", "light");
 		content: "\2666";
 		font-family: Arial, Helvetica, sans-serif;
-    margin: 0 .25em;
+		margin: 0 .25em;
+	}
+}
+
+/**
+ * Header Menu
+ */
+#site-navigation {
+	margin: 0;
+	text-align: right;
+
+ 	> div {
+		background: #{map-deep-get($config-global, "color", "foreground", "dark")};
+		border-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} solid #{map-deep-get($config-global, "color", "foreground", "dark")};
+		box-shadow: inset 0 1px 0 0 #{map-deep-get($config-global, "color", "primary", "default")};
+		left: 0;
+		position: absolute;
+		padding: 0 #{map-deep-get($config-global, "spacing", "horizontal")};
+		right: 0;
+
+		@include media(mobile) {
+			background: transparent;
+			border: 0;
+			box-shadow: none;
+			left: auto;
+			margin-bottom: -2px;
+			position: inherit;
+			padding: 0;
+			right: auto;
+		}
+
+		> ul {
+			justify-content: flex-end;
+
+			& > .menu-item-has-children > a::after {
+					font-size: #{0.5 * map-deep-get($config-global, "font", "size", "base")};
+			}
+
+			@include media(mobile) {
+				> li {
+					&:not(:first-child):before {
+						color: map-deep-get($config-global, "color", "foreground", "light");
+						content: "\2666";
+						font-family: Arial, Helvetica, sans-serif;
+						font-size: #{map-deep-get($config-global, "font", "size", "sm")};
+						line-height: 1;
+						padding-bottom: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
+						padding-top: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
+					}
+
+					> a {
+						padding-bottom: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
+						padding-top: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
+
+						&:before,
+						&:after {
+							margin: 0;
+						}
+					}
+
+					> .sub-menu {
+						background: map-deep-get($config-global, "color", "foreground", "dark");
+						box-shadow: none;
+						left: auto;
+						right: 0;
+						text-align: right;
+
+						.menu-item a::before {
+							display: none;
+						}
+
+						.menu-item a::after {
+							counter-increment: nested-list;
+							content: " –" counters(nested-list, " –", none);
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+// Toggle Menu
+.main-navigation #toggle:focus + #toggle-menu,
+#toggle-menu {
+	text-decoration: none;
+}
+
+/**
+ * Content Area
+ */
+@include media(tablet) {
+	#primary {
+		margin-top: 44px; // JS Fallback
+	}
+}
+
+/**
+ * Post Navigation
+ */
+.post-navigation {
+	border-bottom: 1px solid #{map-deep-get($config-global, "color", "border", "default")};
+	border-top: 2px solid #{map-deep-get($config-global, "color", "border", "default")};
+	padding: #{0.5 * map-deep-get($config-global, "spacing", "vertical")} 0;
+
+	.meta-nav {
+		color: #{map-deep-get($config-global, "color", "foreground", "light")};
+		font-family: #{map-deep-get($config-global, "font", "family", "ui")};
+		font-weight: bold;
+		text-transform: uppercase;
+	}
+
+	.post-title {
+		font-size: inherit;
+	}
+}
+
+/**
+ * Hentry
+ */
+// Entry Header
+.entry-header {
+	.entry-meta {
+		display: none;
+	}
+}
+
+/**
+ * Widgets
+ */
+// Widget Area
+.widget-area {
+	width: 100%;
+
+	&:before {
+		background: map-deep-get($config-global, "color", "border", "default");;
+		height: 1px;
+		content: "";
+		display: block;
+		margin-bottom: #{0.666 * map-deep-get($config-global, "spacing", "vertical")};
+
+		@include media(mobile) {
+			margin-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")};
+		}
+
+		@extend %responsive-width-full;
+	}
+
+  .widget-title,
+  .widgettitle {
+  	font-size: #{map-deep-get($config-global, "font", "size", "base")};
+		font-family: #{map-deep-get($config-global, "font", "family", "ui")};
+    margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  @include media(laptop) {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    & > *:nth-child(2) {
+      margin-top: 0;
+    }
+
+    .widget {
+      width: calc(50% - #{map-deep-get($config-global, "spacing", "horizontal")});
+    }
+  }
+}
+
+// Widgets
+.widget_calendar,
+.widget_calendar {
+  caption {
+    font-weight: bold;
+  }
+
+  td,
+  th {
+	   text-align: center;
+  }
+}
+
+.widget_archive,
+.widget_categories,
+.widget_links,
+.widget_meta,
+.widget_nav_menu,
+.widget_pages,
+.widget_recent_comments,
+.widget_recent_entries,
+.widget_rss,
+.widget_rss_links,
+.widget_top-posts,
+.widget_authors,
+.widget_jp_blogs_i_follow,
+.widget_top-click,
+.widget_upcoming_events_widget {
+  ul {
+    border-bottom: 1px solid map-deep-get($config-global, "color", "border", "default");
+    list-style: none;
+    margin-left: 0;
+  }
+
+  li {
+    border-top: 1px solid map-deep-get($config-global, "color", "border", "default");
+    padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} 0;
+  }
+}
+
+.widget_categories .children,
+.widget_nav_menu .sub-menu,
+.widget_pages .children {
+  border-bottom: 0;
+  margin-bottom: #{-0.25 * map-deep-get($config-global, "spacing", "vertical")};
+  margin-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
+  padding-left: map-deep-get($config-global, "spacing", "horizontal");
+}
+
+.widget_recent_entries .post-date {
+  display: block;
+}
+
+.widget_rss {
+  cite,
+  .rssSummary,
+  .rss-date {
+    display: block;
+  }
+}
+
+.widget_search {
+  input[type="search"] {
+    display: block;
+    margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
+    width: 100%;
+  }
+}
+
+/**
+ * Social Menu
+ */
+.social-navigation {
+	background: #{map-deep-get($config-global, "color", "foreground", "dark")};
+	padding: #{map-deep-get($config-global, "spacing", "vertical")} 0;
+
+	@extend %responsive-width-full;
+
+	.social-links-menu {
+		margin: 0;
+		padding: 0 #{map-deep-get($config-global, "spacing", "horizontal")};
+		text-align: center;
+	}
+}
+
+/**
+ * Footer Menu
+ */
+.footer-navigation {
+	display: block;
+	flex: 1 0 100%;
+	order: 1;
+	text-align: center;
+
+	.footer-menu {
+		justify-content: center;
+		text-align: inherit;
+
+		> li {
+			&:not(:first-child):before {
+				color: map-deep-get($config-global, "color", "border", "dark");
+				content: "\2666";
+				font-family: Arial, Helvetica, sans-serif;
+			}
+		}
+	}
+
+	@include media(mobile) {
+		margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
+	}
+}
+
+/**
+ * Site Info
+ */
+.site-info {
+	font-weight: bold;
+
+	a {
+		font-weight: inherit;
+	}
+}
+
+/**
+ * Comments
+ */
+.comment-list {
+	> li:first-child {
+		border-top-width: 2px;
+	}
+}
+
+.comment-body {
+	content: "";
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+}
+
+.comment-meta .comment-metadata {
+	font-family: #{map-deep-get($config-global, "font", "family", "ui")};
+	font-size: #{map-deep-get($config-global, "font", "size", "sm")};
+	font-weight: bold;
+	text-transform: uppercase;
+}
+
+.reply {
+	font-size: #{map-deep-get($config-global, "font", "size", "sm")};
+}
+
+@include media(tablet) {
+	.comment-meta {
+		border-right: 1px solid #{map-deep-get($config-global, "color", "border", "default")};
+		display: block;
+		float: left;
+		padding-right: #{map-deep-get($config-global, "spacing", "horizontal")};
+		width: 20%;
+
+		.comment-author {
+			display: block;
+			width: 100%;
+
+			.avatar,
+			.fn {
+		    display: block;
+				margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
+			}
+		}
+	}
+
+	.comment-content, .reply {
+		float: right;
+		width: 75%;
+		width: calc(80% - #{map-deep-get($config-global, "spacing", "horizontal")} - 1px);
+	}
+}
+
+.comment-navigation a {
+	font-size: inherit;
+	font-weight: bold;
+}
+
+/**
+ * Buttons
+ */
+.button,
+.wp-block-button__link,
+.wp-block-file__button,
+.a8c-posts-list__view-all {
+	position: relative;
+
+	&:before {
+		border: 2px solid;
+		content: "";
+		display: block;
+		left: 3px;
+		margin: 0;
+		position: absolute;
+		top: 3px;
+		height: calc(100% - 6px);
+		width: calc(100% - 6px);
+	}
+}
+
+button,
+input[type="submit"] {
+	outline: 2px solid;
+	outline-offset: -5px;
+}
+
+.is-style-circular .wp-block-button__link {
+	&:before {
+		border-radius: 100px;
 	}
 }

rockfield/sass/style-child-theme-editor.scss

@@ -38,3 +38,25 @@
 .editor-post-title__input {
 	text-align: center;
 }
+
+.wp-block-button__link {
+	position: relative;
+
+	&:before {
+		border: 2px solid;
+		content: "";
+		display: block;
+		left: 3px;
+		margin: 0;
+		position: absolute;
+		top: 3px;
+		height: calc(100% - 6px);
+		width: calc(100% - 6px);
+	}
+}
+
+.is-style-circular .wp-block-button__link {
+	&:before {
+		border-radius: 100px;
+	}
+}

rockfield/style-editor.css

@@ -304,7 +304,7 @@ object {
 }
 
 .wp-block-button .wp-block-button__link {
-	color: ("default": white, "light": #F4F5F5, "dark": #E8E9EA);
+	color: white;
 	font-weight: bold;
 	font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 0.83333em;
@@ -315,7 +315,7 @@ 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: ("default": white, "light": #F4F5F5, "dark": #E8E9EA);
+	color: white;
 	background-color: #5E5853;
 }
 
@@ -336,7 +336,7 @@ object {
 .wp-block-cover,
 .wp-block-cover-image {
 	background-color: #5E5853;
-	min-height: calc( 15 * 32px);
+	min-height: 90vh;
 	/* Treating H2 separately to account for legacy /core styles */
 }
 
@@ -856,3 +856,23 @@ table th,
 .editor-post-title__input {
 	text-align: center;
 }
+
+.wp-block-button__link {
+	position: relative;
+}
+
+.wp-block-button__link:before {
+	border: 2px solid;
+	content: "";
+	display: block;
+	left: 3px;
+	margin: 0;
+	position: absolute;
+	top: 3px;
+	height: calc(100% - 6px);
+	width: calc(100% - 6px);
+}
+
+.is-style-circular .wp-block-button__link:before {
+	border-radius: 100px;
+}

rockfield/style-rtl.css

@@ -611,7 +611,7 @@ body {
  * Links styles
  */
 a {
-	color: #208751;
+	color: #7E756E;
 }
 
 a:hover {
@@ -970,8 +970,8 @@ input[type="datetime-local"],
 input[type="color"],
 textarea {
 	color: #5E5853;
-	border: 1px solid #E8E9EA;
-	border-radius: 3px;
+	border: 2px solid #E8E9EA;
+	border-radius: 0;
 	padding: 16px;
 }
 
@@ -996,7 +996,7 @@ textarea:focus {
 }
 
 select {
-	border: 1px solid #E8E9EA;
+	border: 2px solid #E8E9EA;
 }
 
 textarea {
@@ -1074,12 +1074,12 @@ input[type="submit"],
 .wp-block-button__link,
 .wp-block-file__button, .a8c-posts-list__view-all {
 	line-height: 1;
-	color: ("default": white, "light": #F4F5F5, "dark": #E8E9EA);
+	color: white;
 	cursor: pointer;
 	font-weight: bold;
 	font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 0.83333rem;
-	background-color: #208751;
+	background-color: #7E756E;
 	border-radius: 0;
 	border-width: 0;
 	padding: 16px 20px;
@@ -1129,7 +1129,7 @@ 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: ("default": white, "light": #F4F5F5, "dark": #E8E9EA);
+	color: white;
 	background-color: #5E5853;
 }
 
@@ -1137,7 +1137,7 @@ input.has-focus[type="submit"],
  * Block Options
  */
 .wp-block-button.is-style-outline .wp-block-button__link {
-	color: #208751;
+	color: #7E756E;
 	background: transparent;
 	border: 2px solid currentcolor;
 	padding: 14px 20px;
@@ -1217,7 +1217,7 @@ input.has-focus[type="submit"],
 .wp-block-cover,
 .wp-block-cover-image {
 	background-color: #5E5853;
-	min-height: calc( 15 * 32px);
+	min-height: 90vh;
 	margin: inherit;
 	/* Treating H2 separately to account for legacy /core styles */
 	/**
@@ -1318,8 +1318,8 @@ input.has-focus[type="submit"],
 }
 
 .wp-block-file .wp-block-file__button {
-	background-color: #208751;
-	color: ("default": white, "light": #F4F5F5, "dark": #E8E9EA);
+	background-color: #7E756E;
+	color: white;
 	font-size: 0.83333rem;
 	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: ("default": white, "light": #F4F5F5, "dark": #E8E9EA);
+	color: white;
 	opacity: .85;
 }
 
@@ -1671,7 +1671,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .a8c-posts-list-item__featured span {
 	color: white;
-	background-color: #208751;
+	background-color: #7E756E;
 	font-family: Lora, Baskerville, Georgia, Times, serif;
 	font-weight: bold;
 	font-size: 0.83333rem;
@@ -1773,7 +1773,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-pullquote.is-style-solid-color {
-	background-color: #208751;
+	background-color: #7E756E;
 	color: white;
 }
 
@@ -1798,7 +1798,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote {
-	border-right-color: #208751;
+	border-right-color: #7E756E;
 	margin: 32px 0;
 	padding: 0 16px;
 	/**
@@ -1841,7 +1841,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: #208751;
+	border-left-color: #7E756E;
 }
 
 .wp-block-quote.is-style-large, .wp-block-quote.is-large {
@@ -1990,11 +1990,11 @@ table th,
 }
 
 .has-primary-color[class] {
-	color: #208751 !important;
+	color: #7E756E !important;
 }
 
 .has-secondary-color[class] {
-	color: #7E756E !important;
+	color: #208751 !important;
 }
 
 .has-foreground-color[class] {
@@ -2022,7 +2022,7 @@ table th,
 }
 
 .has-primary-background-color[class] {
-	background-color: #208751 !important;
+	background-color: #7E756E !important;
 	color: white;
 }
 
@@ -2031,7 +2031,7 @@ table th,
 }
 
 .has-secondary-background-color[class] {
-	background-color: #7E756E !important;
+	background-color: #208751 !important;
 	color: white;
 }
 
@@ -2260,11 +2260,11 @@ table th,
  * - Similar to Blocks but exist outside of the "current" editor context
  */
 .site-branding {
-	color: #99908A;
+	color: white;
 }
 
 .site-title {
-	color: #208751;
+	color: white;
 	font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 0.83333rem;
 	letter-spacing: normal;
@@ -2281,7 +2281,7 @@ table th,
 }
 
 .site-title a:hover {
-	color: #5E5853;
+	color: #99908A;
 }
 
 .site-description {
@@ -2291,7 +2291,7 @@ table th,
 }
 
 .main-navigation {
-	color: #5E5853;
+	color: white;
 }
 
 .main-navigation > div {
@@ -2308,7 +2308,7 @@ table th,
 }
 
 .main-navigation #toggle:focus + #toggle-menu {
-	background-color: #5E5853;
+	background-color: #99908A;
 	outline: inherit;
 	text-decoration: underline;
 }
@@ -2431,7 +2431,7 @@ table th,
 }
 
 .main-navigation a {
-	color: #208751;
+	color: white;
 	display: block;
 	font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 0.83333rem;
@@ -2440,11 +2440,11 @@ table th,
 }
 
 .main-navigation a:link, .main-navigation a:visited {
-	color: #208751;
+	color: white;
 }
 
 .main-navigation a:hover {
-	color: #5E5853;
+	color: #99908A;
 }
 
 .main-navigation .sub-menu {
@@ -2494,13 +2494,13 @@ table th,
 }
 
 .social-navigation a {
-	color: #208751;
+	color: white;
 	display: inline-block;
-	padding: 0 calc( 0.5 * calc(0.66 * 16px ));
+	padding: 0 8px;
 }
 
 .social-navigation a:hover {
-	color: #5E5853;
+	color: #99908A;
 }
 
 .social-navigation svg {
@@ -2518,7 +2518,7 @@ table th,
 }
 
 .site-info {
-	color: #5E5853;
+	color: #99908A;
 	font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 0.83333rem;
 }
@@ -2545,7 +2545,7 @@ table th,
 }
 
 .site-info a:hover {
-	color: #7E756E;
+	color: #1E1C1B;
 }
 
 .footer-navigation {
@@ -2567,7 +2567,7 @@ table th,
 }
 
 .footer-navigation .footer-menu {
-	color: #5E5853;
+	color: #99908A;
 	padding-right: 0;
 	margin-right: -16px;
 	margin-left: -16px;
@@ -2598,7 +2598,7 @@ table th,
 }
 
 .footer-navigation .footer-menu a:hover {
-	color: #7E756E;
+	color: #1E1C1B;
 }
 
 .entry-title {
@@ -3060,7 +3060,7 @@ img#wpstats {
  */
 .sticky-post {
 	color: white;
-	background-color: #208751;
+	background-color: #7E756E;
 	font-family: Lora, Baskerville, Georgia, Times, serif;
 	font-weight: bold;
 	font-size: 0.83333rem;
@@ -3178,7 +3178,7 @@ 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 {
+.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #masthead, .widget-area:before, .social-navigation {
 	margin-right: calc( -0.5 * ( 100vw - 100% ));
 	margin-left: calc( -0.5 * ( 100vw - 100% ));
 	width: calc( 100% + (0.5 * 2) * ( 100vw - 100% ));
@@ -3186,7 +3186,7 @@ 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 {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #masthead, .widget-area:before, .social-navigation {
 		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) ));
@@ -3195,7 +3195,7 @@ 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 {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #masthead, .widget-area:before, .social-navigation {
 		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) ));
@@ -3204,7 +3204,7 @@ 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 {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #masthead, .widget-area:before, .social-navigation {
 		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) ));
@@ -3213,7 +3213,7 @@ 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 {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #masthead, .widget-area:before, .social-navigation {
 		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) ));
@@ -3222,7 +3222,7 @@ 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 {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #masthead, .widget-area:before, .social-navigation {
 		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) ));
@@ -3368,15 +3368,39 @@ img#wpstats {
 /**
  * Extra Child Theme Styles
  */
+/**
+ * Reset
+ */
 a {
 	text-decoration: none;
 }
 
-.site-branding,
+.reply a,
+.widget-area a,
+.wp-block-cover a,
+.wp-block-cover-image a,
+.wp-block-media-text a,
+p:not(.site-title) a {
+	text-decoration: underline;
+}
+
+.reply a.wp-block-button__link, .reply a:hover,
+.widget-area a.wp-block-button__link,
+.widget-area a:hover,
+.wp-block-cover a.wp-block-button__link,
+.wp-block-cover a:hover,
+.wp-block-cover-image a.wp-block-button__link,
+.wp-block-cover-image a:hover,
+.wp-block-media-text a.wp-block-button__link,
+.wp-block-media-text a:hover,
+p:not(.site-title) a.wp-block-button__link,
+p:not(.site-title) a:hover {
+	text-decoration: none;
+}
+
 .site-info,
 .main-navigation,
 .entry-header,
-.entry-footer,
 .page-title,
 .author-title,
 .comments-title,
@@ -3402,6 +3426,57 @@ a {
 	justify-content: center;
 }
 
+/**
+ * Header
+ */
+#masthead {
+	background: #1E1C1B;
+	display: flex;
+	justify-content: space-between;
+	margin: 0;
+	padding: 8px 16px;
+	position: relative;
+	text-align: right;
+	z-index: 9999;
+}
+
+@media only screen and (min-width: 560px) {
+	#masthead {
+		align-items: flex-end;
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	#masthead {
+		right: 0;
+		max-width: 100%;
+		position: absolute;
+		left: 0;
+	}
+	body:not(.wp-custom-logo) #masthead {
+		position: fixed;
+	}
+}
+
+/**
+ * Site Branding
+ */
+.site-branding {
+	margin: 0;
+	margin-left: auto;
+	padding-bottom: 8.64px;
+	padding-left: 16px;
+	padding-top: 8.64px;
+	text-align: inherit;
+}
+
+@media only screen and (min-width: 560px) {
+	.site-branding {
+		padding-bottom: 0;
+		padding-top: 0;
+	}
+}
+
 .site-title {
 	display: inline;
 }
@@ -3410,13 +3485,391 @@ a {
 	display: none;
 }
 
-@media only screen and (min-width: 560px) {
+@media only screen and (min-width: 640px) {
 	.site-description {
 		display: inline;
 	}
 	.site-title:not(:empty) + .site-description:not(:empty):before {
+		color: #99908A;
 		content: "\2666";
 		font-family: Arial, Helvetica, sans-serif;
 		margin: 0 .25em;
 	}
 }
+
+/**
+ * Header Menu
+ */
+#site-navigation {
+	margin: 0;
+	text-align: left;
+}
+
+#site-navigation > div {
+	background: #1E1C1B;
+	border-top: 8px solid #1E1C1B;
+	box-shadow: inset 0 1px 0 0 #7E756E;
+	right: 0;
+	position: absolute;
+	padding: 0 16px;
+	left: 0;
+}
+
+@media only screen and (min-width: 560px) {
+	#site-navigation > div {
+		background: transparent;
+		border: 0;
+		box-shadow: none;
+		right: auto;
+		margin-bottom: -2px;
+		position: inherit;
+		padding: 0;
+		left: auto;
+	}
+}
+
+#site-navigation > div > ul {
+	justify-content: flex-end;
+}
+
+#site-navigation > div > ul > .menu-item-has-children > a::after {
+	font-size: 0.5rem;
+}
+
+@media only screen and (min-width: 560px) {
+	#site-navigation > div > ul > li:not(:first-child):before {
+		color: #99908A;
+		content: "\2666";
+		font-family: Arial, Helvetica, sans-serif;
+		font-size: 0.83333rem;
+		line-height: 1;
+		padding-bottom: 8px;
+		padding-top: 8px;
+	}
+	#site-navigation > div > ul > li > a {
+		padding-bottom: 8px;
+		padding-top: 8px;
+	}
+	#site-navigation > div > ul > li > a:before, #site-navigation > div > ul > li > a:after {
+		margin: 0;
+	}
+	#site-navigation > div > ul > li > .sub-menu {
+		background: #1E1C1B;
+		box-shadow: none;
+		right: auto;
+		left: 0;
+		text-align: left;
+	}
+	#site-navigation > div > ul > li > .sub-menu .menu-item a::before {
+		display: none;
+	}
+	#site-navigation > div > ul > li > .sub-menu .menu-item a::after {
+		counter-increment: nested-list;
+		content: " –" counters(nested-list, " –", none);
+	}
+}
+
+.main-navigation #toggle:focus + #toggle-menu,
+#toggle-menu {
+	text-decoration: none;
+}
+
+/**
+ * Content Area
+ */
+@media only screen and (min-width: 640px) {
+	#primary {
+		margin-top: 44px;
+	}
+}
+
+/**
+ * Post Navigation
+ */
+.post-navigation {
+	border-bottom: 1px solid #E8E9EA;
+	border-top: 2px solid #E8E9EA;
+	padding: 16px 0;
+}
+
+.post-navigation .meta-nav {
+	color: #99908A;
+	font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-weight: bold;
+	text-transform: uppercase;
+}
+
+.post-navigation .post-title {
+	font-size: inherit;
+}
+
+/**
+ * Hentry
+ */
+.entry-header .entry-meta {
+	display: none;
+}
+
+/**
+ * Widgets
+ */
+.widget-area {
+	width: 100%;
+}
+
+.widget-area:before {
+	background: #E8E9EA;
+	height: 1px;
+	content: "";
+	display: block;
+	margin-bottom: 21.312px;
+}
+
+@media only screen and (min-width: 560px) {
+	.widget-area:before {
+		margin-bottom: 64px;
+	}
+}
+
+.widget-area .widget-title,
+.widget-area .widgettitle {
+	font-size: 1rem;
+	font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	margin-bottom: 16px;
+}
+
+.widget-area .widget-title:empty,
+.widget-area .widgettitle:empty {
+	display: none;
+}
+
+@media only screen and (min-width: 782px) {
+	.widget-area {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+	.widget-area > *:nth-child(2) {
+		margin-top: 0;
+	}
+	.widget-area .widget {
+		width: calc(50% - 16px);
+	}
+}
+
+.widget_calendar caption,
+.widget_calendar caption {
+	font-weight: bold;
+}
+
+.widget_calendar td,
+.widget_calendar th,
+.widget_calendar td,
+.widget_calendar th {
+	text-align: center;
+}
+
+.widget_archive ul,
+.widget_categories ul,
+.widget_links ul,
+.widget_meta ul,
+.widget_nav_menu ul,
+.widget_pages ul,
+.widget_recent_comments ul,
+.widget_recent_entries ul,
+.widget_rss ul,
+.widget_rss_links ul,
+.widget_top-posts ul,
+.widget_authors ul,
+.widget_jp_blogs_i_follow ul,
+.widget_top-click ul,
+.widget_upcoming_events_widget ul {
+	border-bottom: 1px solid #E8E9EA;
+	list-style: none;
+	margin-right: 0;
+}
+
+.widget_archive li,
+.widget_categories li,
+.widget_links li,
+.widget_meta li,
+.widget_nav_menu li,
+.widget_pages li,
+.widget_recent_comments li,
+.widget_recent_entries li,
+.widget_rss li,
+.widget_rss_links li,
+.widget_top-posts li,
+.widget_authors li,
+.widget_jp_blogs_i_follow li,
+.widget_top-click li,
+.widget_upcoming_events_widget li {
+	border-top: 1px solid #E8E9EA;
+	padding: 8px 0;
+}
+
+.widget_categories .children,
+.widget_nav_menu .sub-menu,
+.widget_pages .children {
+	border-bottom: 0;
+	margin-bottom: -8px;
+	margin-top: 8px;
+	padding-right: 16px;
+}
+
+.widget_recent_entries .post-date {
+	display: block;
+}
+
+.widget_rss cite,
+.widget_rss .rssSummary,
+.widget_rss .rss-date {
+	display: block;
+}
+
+.widget_search input[type="search"] {
+	display: block;
+	margin-bottom: 8px;
+	width: 100%;
+}
+
+/**
+ * Social Menu
+ */
+.social-navigation {
+	background: #1E1C1B;
+	padding: 32px 0;
+}
+
+.social-navigation .social-links-menu {
+	margin: 0;
+	padding: 0 16px;
+	text-align: center;
+}
+
+/**
+ * Footer Menu
+ */
+.footer-navigation {
+	display: block;
+	flex: 1 0 100%;
+	order: 1;
+	text-align: center;
+}
+
+.footer-navigation .footer-menu {
+	justify-content: center;
+	text-align: inherit;
+}
+
+.footer-navigation .footer-menu > li:not(:first-child):before {
+	color: #DEE1E3;
+	content: "\2666";
+	font-family: Arial, Helvetica, sans-serif;
+}
+
+@media only screen and (min-width: 560px) {
+	.footer-navigation {
+		margin-bottom: 8px;
+	}
+}
+
+/**
+ * Site Info
+ */
+.site-info {
+	font-weight: bold;
+}
+
+.site-info a {
+	font-weight: inherit;
+}
+
+/**
+ * Comments
+ */
+.comment-list > li:first-child {
+	border-top-width: 2px;
+}
+
+.comment-body {
+	content: "";
+	display: table;
+	table-layout: fixed;
+	width: 100%;
+}
+
+.comment-meta .comment-metadata {
+	font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-size: 0.83333rem;
+	font-weight: bold;
+	text-transform: uppercase;
+}
+
+.reply {
+	font-size: 0.83333rem;
+}
+
+@media only screen and (min-width: 640px) {
+	.comment-meta {
+		border-left: 1px solid #E8E9EA;
+		display: block;
+		float: right;
+		padding-left: 16px;
+		width: 20%;
+	}
+	.comment-meta .comment-author {
+		display: block;
+		width: 100%;
+	}
+	.comment-meta .comment-author .avatar,
+	.comment-meta .comment-author .fn {
+		display: block;
+		margin-bottom: 8px;
+	}
+	.comment-content, .reply {
+		float: left;
+		width: 75%;
+		width: calc(80% - 16px - 1px);
+	}
+}
+
+.comment-navigation a {
+	font-size: inherit;
+	font-weight: bold;
+}
+
+/**
+ * Buttons
+ */
+.button,
+.wp-block-button__link,
+.wp-block-file__button,
+.a8c-posts-list__view-all {
+	position: relative;
+}
+
+.button:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before,
+.a8c-posts-list__view-all:before {
+	border: 2px solid;
+	content: "";
+	display: block;
+	right: 3px;
+	margin: 0;
+	position: absolute;
+	top: 3px;
+	height: calc(100% - 6px);
+	width: calc(100% - 6px);
+}
+
+button,
+input[type="submit"] {
+	outline: 2px solid;
+	outline-offset: -5px;
+}
+
+.is-style-circular .wp-block-button__link:before {
+	border-radius: 100px;
+}

rockfield/style.css

@@ -970,8 +970,8 @@ input[type="datetime-local"],
 input[type="color"],
 textarea {
 	color: #5E5853;
-	border: 1px solid #E8E9EA;
-	border-radius: 3px;
+	border: 2px solid #E8E9EA;
+	border-radius: 0;
 	padding: 16px;
 }
 
@@ -996,7 +996,7 @@ textarea:focus {
 }
 
 select {
-	border: 1px solid #E8E9EA;
+	border: 2px solid #E8E9EA;
 }
 
 textarea {
@@ -1074,7 +1074,7 @@ input[type="submit"],
 .wp-block-button__link,
 .wp-block-file__button, .a8c-posts-list__view-all {
 	line-height: 1;
-	color: ("default": white, "light": #F4F5F5, "dark": #E8E9EA);
+	color: white;
 	cursor: pointer;
 	font-weight: bold;
 	font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
@@ -1129,7 +1129,7 @@ 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: ("default": white, "light": #F4F5F5, "dark": #E8E9EA);
+	color: white;
 	background-color: #5E5853;
 }
 
@@ -1217,7 +1217,7 @@ input.has-focus[type="submit"],
 .wp-block-cover,
 .wp-block-cover-image {
 	background-color: #5E5853;
-	min-height: calc( 15 * 32px);
+	min-height: 90vh;
 	margin: inherit;
 	/* Treating H2 separately to account for legacy /core styles */
 	/**
@@ -1319,7 +1319,7 @@ input.has-focus[type="submit"],
 
 .wp-block-file .wp-block-file__button {
 	background-color: #7E756E;
-	color: ("default": white, "light": #F4F5F5, "dark": #E8E9EA);
+	color: white;
 	font-size: 0.83333rem;
 	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: ("default": white, "light": #F4F5F5, "dark": #E8E9EA);
+	color: white;
 	opacity: .85;
 }
 
@@ -2265,11 +2265,11 @@ table th,
  * - Similar to Blocks but exist outside of the "current" editor context
  */
 .site-branding {
-	color: #99908A;
+	color: white;
 }
 
 .site-title {
-	color: #7E756E;
+	color: white;
 	font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 0.83333rem;
 	letter-spacing: normal;
@@ -2286,7 +2286,7 @@ table th,
 }
 
 .site-title a:hover {
-	color: #5E5853;
+	color: #99908A;
 }
 
 .site-description {
@@ -2296,7 +2296,7 @@ table th,
 }
 
 .main-navigation {
-	color: #5E5853;
+	color: white;
 }
 
 .main-navigation > div {
@@ -2313,7 +2313,7 @@ table th,
 }
 
 .main-navigation #toggle:focus + #toggle-menu {
-	background-color: #5E5853;
+	background-color: #99908A;
 	outline: inherit;
 	text-decoration: underline;
 }
@@ -2436,7 +2436,7 @@ table th,
 }
 
 .main-navigation a {
-	color: #7E756E;
+	color: white;
 	display: block;
 	font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 0.83333rem;
@@ -2445,11 +2445,11 @@ table th,
 }
 
 .main-navigation a:link, .main-navigation a:visited {
-	color: #7E756E;
+	color: white;
 }
 
 .main-navigation a:hover {
-	color: #5E5853;
+	color: #99908A;
 }
 
 .main-navigation .sub-menu {
@@ -2499,13 +2499,13 @@ table th,
 }
 
 .social-navigation a {
-	color: #7E756E;
+	color: white;
 	display: inline-block;
-	padding: 0 calc( 0.5 * calc(0.66 * 16px ));
+	padding: 0 8px;
 }
 
 .social-navigation a:hover {
-	color: #5E5853;
+	color: #99908A;
 }
 
 .social-navigation svg {
@@ -2523,7 +2523,7 @@ table th,
 }
 
 .site-info {
-	color: #5E5853;
+	color: #99908A;
 	font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 0.83333rem;
 }
@@ -2550,7 +2550,7 @@ table th,
 }
 
 .site-info a:hover {
-	color: #208751;
+	color: #1E1C1B;
 }
 
 .footer-navigation {
@@ -2572,7 +2572,7 @@ table th,
 }
 
 .footer-navigation .footer-menu {
-	color: #5E5853;
+	color: #99908A;
 	padding-left: 0;
 	margin-left: -16px;
 	margin-right: -16px;
@@ -2603,7 +2603,7 @@ table th,
 }
 
 .footer-navigation .footer-menu a:hover {
-	color: #208751;
+	color: #1E1C1B;
 }
 
 .entry-title {
@@ -3183,7 +3183,7 @@ 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 {
+.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #masthead, .widget-area:before, .social-navigation {
 	margin-left: calc( -0.5 * ( 100vw - 100% ));
 	margin-right: calc( -0.5 * ( 100vw - 100% ));
 	width: calc( 100% + (0.5 * 2) * ( 100vw - 100% ));
@@ -3191,7 +3191,7 @@ 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 {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #masthead, .widget-area:before, .social-navigation {
 		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) ));
@@ -3200,7 +3200,7 @@ 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 {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #masthead, .widget-area:before, .social-navigation {
 		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) ));
@@ -3209,7 +3209,7 @@ 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 {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #masthead, .widget-area:before, .social-navigation {
 		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) ));
@@ -3218,7 +3218,7 @@ 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 {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #masthead, .widget-area:before, .social-navigation {
 		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) ));
@@ -3227,7 +3227,7 @@ 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 {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #masthead, .widget-area:before, .social-navigation {
 		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) ));
@@ -3373,15 +3373,39 @@ img#wpstats {
 /**
  * Extra Child Theme Styles
  */
+/**
+ * Reset
+ */
 a {
 	text-decoration: none;
 }
 
-.site-branding,
+.reply a,
+.widget-area a,
+.wp-block-cover a,
+.wp-block-cover-image a,
+.wp-block-media-text a,
+p:not(.site-title) a {
+	text-decoration: underline;
+}
+
+.reply a.wp-block-button__link, .reply a:hover,
+.widget-area a.wp-block-button__link,
+.widget-area a:hover,
+.wp-block-cover a.wp-block-button__link,
+.wp-block-cover a:hover,
+.wp-block-cover-image a.wp-block-button__link,
+.wp-block-cover-image a:hover,
+.wp-block-media-text a.wp-block-button__link,
+.wp-block-media-text a:hover,
+p:not(.site-title) a.wp-block-button__link,
+p:not(.site-title) a:hover {
+	text-decoration: none;
+}
+
 .site-info,
 .main-navigation,
 .entry-header,
-.entry-footer,
 .page-title,
 .author-title,
 .comments-title,
@@ -3407,6 +3431,57 @@ a {
 	justify-content: center;
 }
 
+/**
+ * Header
+ */
+#masthead {
+	background: #1E1C1B;
+	display: flex;
+	justify-content: space-between;
+	margin: 0;
+	padding: 8px 16px;
+	position: relative;
+	text-align: left;
+	z-index: 9999;
+}
+
+@media only screen and (min-width: 560px) {
+	#masthead {
+		align-items: flex-end;
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	#masthead {
+		left: 0;
+		max-width: 100%;
+		position: absolute;
+		right: 0;
+	}
+	body:not(.wp-custom-logo) #masthead {
+		position: fixed;
+	}
+}
+
+/**
+ * Site Branding
+ */
+.site-branding {
+	margin: 0;
+	margin-right: auto;
+	padding-bottom: 8.64px;
+	padding-right: 16px;
+	padding-top: 8.64px;
+	text-align: inherit;
+}
+
+@media only screen and (min-width: 560px) {
+	.site-branding {
+		padding-bottom: 0;
+		padding-top: 0;
+	}
+}
+
 .site-title {
 	display: inline;
 }
@@ -3415,13 +3490,391 @@ a {
 	display: none;
 }
 
-@media only screen and (min-width: 560px) {
+@media only screen and (min-width: 640px) {
 	.site-description {
 		display: inline;
 	}
 	.site-title:not(:empty) + .site-description:not(:empty):before {
+		color: #99908A;
 		content: "\2666";
 		font-family: Arial, Helvetica, sans-serif;
 		margin: 0 .25em;
 	}
 }
+
+/**
+ * Header Menu
+ */
+#site-navigation {
+	margin: 0;
+	text-align: right;
+}
+
+#site-navigation > div {
+	background: #1E1C1B;
+	border-top: 8px solid #1E1C1B;
+	box-shadow: inset 0 1px 0 0 #7E756E;
+	left: 0;
+	position: absolute;
+	padding: 0 16px;
+	right: 0;
+}
+
+@media only screen and (min-width: 560px) {
+	#site-navigation > div {
+		background: transparent;
+		border: 0;
+		box-shadow: none;
+		left: auto;
+		margin-bottom: -2px;
+		position: inherit;
+		padding: 0;
+		right: auto;
+	}
+}
+
+#site-navigation > div > ul {
+	justify-content: flex-end;
+}
+
+#site-navigation > div > ul > .menu-item-has-children > a::after {
+	font-size: 0.5rem;
+}
+
+@media only screen and (min-width: 560px) {
+	#site-navigation > div > ul > li:not(:first-child):before {
+		color: #99908A;
+		content: "\2666";
+		font-family: Arial, Helvetica, sans-serif;
+		font-size: 0.83333rem;
+		line-height: 1;
+		padding-bottom: 8px;
+		padding-top: 8px;
+	}
+	#site-navigation > div > ul > li > a {
+		padding-bottom: 8px;
+		padding-top: 8px;
+	}
+	#site-navigation > div > ul > li > a:before, #site-navigation > div > ul > li > a:after {
+		margin: 0;
+	}
+	#site-navigation > div > ul > li > .sub-menu {
+		background: #1E1C1B;
+		box-shadow: none;
+		left: auto;
+		right: 0;
+		text-align: right;
+	}
+	#site-navigation > div > ul > li > .sub-menu .menu-item a::before {
+		display: none;
+	}
+	#site-navigation > div > ul > li > .sub-menu .menu-item a::after {
+		counter-increment: nested-list;
+		content: " –" counters(nested-list, " –", none);
+	}
+}
+
+.main-navigation #toggle:focus + #toggle-menu,
+#toggle-menu {
+	text-decoration: none;
+}
+
+/**
+ * Content Area
+ */
+@media only screen and (min-width: 640px) {
+	#primary {
+		margin-top: 44px;
+	}
+}
+
+/**
+ * Post Navigation
+ */
+.post-navigation {
+	border-bottom: 1px solid #E8E9EA;
+	border-top: 2px solid #E8E9EA;
+	padding: 16px 0;
+}
+
+.post-navigation .meta-nav {
+	color: #99908A;
+	font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-weight: bold;
+	text-transform: uppercase;
+}
+
+.post-navigation .post-title {
+	font-size: inherit;
+}
+
+/**
+ * Hentry
+ */
+.entry-header .entry-meta {
+	display: none;
+}
+
+/**
+ * Widgets
+ */
+.widget-area {
+	width: 100%;
+}
+
+.widget-area:before {
+	background: #E8E9EA;
+	height: 1px;
+	content: "";
+	display: block;
+	margin-bottom: 21.312px;
+}
+
+@media only screen and (min-width: 560px) {
+	.widget-area:before {
+		margin-bottom: 64px;
+	}
+}
+
+.widget-area .widget-title,
+.widget-area .widgettitle {
+	font-size: 1rem;
+	font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	margin-bottom: 16px;
+}
+
+.widget-area .widget-title:empty,
+.widget-area .widgettitle:empty {
+	display: none;
+}
+
+@media only screen and (min-width: 782px) {
+	.widget-area {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+	.widget-area > *:nth-child(2) {
+		margin-top: 0;
+	}
+	.widget-area .widget {
+		width: calc(50% - 16px);
+	}
+}
+
+.widget_calendar caption,
+.widget_calendar caption {
+	font-weight: bold;
+}
+
+.widget_calendar td,
+.widget_calendar th,
+.widget_calendar td,
+.widget_calendar th {
+	text-align: center;
+}
+
+.widget_archive ul,
+.widget_categories ul,
+.widget_links ul,
+.widget_meta ul,
+.widget_nav_menu ul,
+.widget_pages ul,
+.widget_recent_comments ul,
+.widget_recent_entries ul,
+.widget_rss ul,
+.widget_rss_links ul,
+.widget_top-posts ul,
+.widget_authors ul,
+.widget_jp_blogs_i_follow ul,
+.widget_top-click ul,
+.widget_upcoming_events_widget ul {
+	border-bottom: 1px solid #E8E9EA;
+	list-style: none;
+	margin-left: 0;
+}
+
+.widget_archive li,
+.widget_categories li,
+.widget_links li,
+.widget_meta li,
+.widget_nav_menu li,
+.widget_pages li,
+.widget_recent_comments li,
+.widget_recent_entries li,
+.widget_rss li,
+.widget_rss_links li,
+.widget_top-posts li,
+.widget_authors li,
+.widget_jp_blogs_i_follow li,
+.widget_top-click li,
+.widget_upcoming_events_widget li {
+	border-top: 1px solid #E8E9EA;
+	padding: 8px 0;
+}
+
+.widget_categories .children,
+.widget_nav_menu .sub-menu,
+.widget_pages .children {
+	border-bottom: 0;
+	margin-bottom: -8px;
+	margin-top: 8px;
+	padding-left: 16px;
+}
+
+.widget_recent_entries .post-date {
+	display: block;
+}
+
+.widget_rss cite,
+.widget_rss .rssSummary,
+.widget_rss .rss-date {
+	display: block;
+}
+
+.widget_search input[type="search"] {
+	display: block;
+	margin-bottom: 8px;
+	width: 100%;
+}
+
+/**
+ * Social Menu
+ */
+.social-navigation {
+	background: #1E1C1B;
+	padding: 32px 0;
+}
+
+.social-navigation .social-links-menu {
+	margin: 0;
+	padding: 0 16px;
+	text-align: center;
+}
+
+/**
+ * Footer Menu
+ */
+.footer-navigation {
+	display: block;
+	flex: 1 0 100%;
+	order: 1;
+	text-align: center;
+}
+
+.footer-navigation .footer-menu {
+	justify-content: center;
+	text-align: inherit;
+}
+
+.footer-navigation .footer-menu > li:not(:first-child):before {
+	color: #DEE1E3;
+	content: "\2666";
+	font-family: Arial, Helvetica, sans-serif;
+}
+
+@media only screen and (min-width: 560px) {
+	.footer-navigation {
+		margin-bottom: 8px;
+	}
+}
+
+/**
+ * Site Info
+ */
+.site-info {
+	font-weight: bold;
+}
+
+.site-info a {
+	font-weight: inherit;
+}
+
+/**
+ * Comments
+ */
+.comment-list > li:first-child {
+	border-top-width: 2px;
+}
+
+.comment-body {
+	content: "";
+	display: table;
+	table-layout: fixed;
+	width: 100%;
+}
+
+.comment-meta .comment-metadata {
+	font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-size: 0.83333rem;
+	font-weight: bold;
+	text-transform: uppercase;
+}
+
+.reply {
+	font-size: 0.83333rem;
+}
+
+@media only screen and (min-width: 640px) {
+	.comment-meta {
+		border-right: 1px solid #E8E9EA;
+		display: block;
+		float: left;
+		padding-right: 16px;
+		width: 20%;
+	}
+	.comment-meta .comment-author {
+		display: block;
+		width: 100%;
+	}
+	.comment-meta .comment-author .avatar,
+	.comment-meta .comment-author .fn {
+		display: block;
+		margin-bottom: 8px;
+	}
+	.comment-content, .reply {
+		float: right;
+		width: 75%;
+		width: calc(80% - 16px - 1px);
+	}
+}
+
+.comment-navigation a {
+	font-size: inherit;
+	font-weight: bold;
+}
+
+/**
+ * Buttons
+ */
+.button,
+.wp-block-button__link,
+.wp-block-file__button,
+.a8c-posts-list__view-all {
+	position: relative;
+}
+
+.button:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before,
+.a8c-posts-list__view-all:before {
+	border: 2px solid;
+	content: "";
+	display: block;
+	left: 3px;
+	margin: 0;
+	position: absolute;
+	top: 3px;
+	height: calc(100% - 6px);
+	width: calc(100% - 6px);
+}
+
+button,
+input[type="submit"] {
+	outline: 2px solid;
+	outline-offset: -5px;
+}
+
+.is-style-circular .wp-block-button__link:before {
+	border-radius: 100px;
+}