Adjust desktop break to 785px.

assets/css/main.css

@@ -0,0 +1,326 @@
+/* 32m custom styles */
+/* Note the default style are mobile versions, with overrides for desktop. */
+
+:root {
+	--red32m: #A02827;
+	--white32m: #FFFFFF;
+        --grey32m: #ECECEC;
+        --lrmargin: 2vw;
+        --desktop-lrmargin: 25vw;
+        --typeface: 'Fivo Sans';
+        --typeface-body: 'Fivo Sans';
+        --font-weight-bold: 700;
+        --font-weight-medium: 400;
+        --font-size-normal: 1.3rem;
+        --font-size-large: 1.3em;
+        --font-size-xlarge: 1.5em;
+}
+
+html {
+	background: none;
+	padding: 0 !important;
+	margin: 0 !important;
+}
+
+body {
+    background-color: var(--white32m);
+    font-family: var(--typeface);
+    font-weight: var(--weight-medium);
+    width: 100%;
+    margin: 0 !important;
+    padding: 0 !important;
+    border-radius: none;
+    box-shadow: none;
+    max-width: 100%;
+    font-size: var(--font-size-normal);
+}
+
+p#copyright-footer {
+    display: none;
+}
+
+div#page {
+    font-family: var(--typeface);
+    font-weight: var(--weight-medium);
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    border-radius: none;
+    box-shadow: none;
+    max-width: 100%;
+}
+
+body.home {
+    background-color: var(--red32m);
+    color: var(--white32m);
+    padding: 0;
+    margin: auto;
+}
+
+body > div#page header#masthead {
+    background-color: var(--red32m);
+}
+
+body.home > div#page header#masthead {
+	background-color: var(--white32m);
+}
+
+body.home > div#page article header {
+    display: none;
+}
+
+body.home > div#page article div.entry-content {
+    color: white;
+    font-weight: var(--weight-bold);
+    font-size: var(--font-size-normal);
+}
+
+body.home form#search-form {
+	display: none;
+}
+
+header#masthead {
+    display: flex;
+    flex-direction: column;
+}
+
+h1.site-title {
+	display: none;
+}
+
+div.site-logo > a > img.custom-logo {
+	width: 8.5rem;
+	height: 8.5rem;
+}
+
+div.site-logo {
+    margin: auto;
+}
+
+div#content {
+    margin-left: var(--lrmargin);
+    margin-right: var(--lrmargin);
+}
+
+
+footer#colophon {
+    background: var(--grey32m);
+    margin: 0;
+    padding: 0;
+    margin-top: 2em;
+}
+
+footer#colophon > p {
+    margin-left: var(--lrmargin);
+    margin-right: var(--lrmargin);
+}
+
+footer#colophon div.widget-area {
+    margin-left: var(--lrmargin);
+    margin-right: var(--lrmargin);
+}
+
+footer#colophon {
+    background: none;
+    color: var(--red32m);
+}
+
+body.home footer#colophon {
+    background: none;
+    color: var(--white32m);
+}
+
+footer#colophon a,
+footer#colophon a:link,
+footer#colophon a:visited,
+footer#colophon a:hover {
+    background: none;
+    color: var(--red32m);
+    text-decoration: none;
+}
+
+footer#colophon a:hover {
+    background: none;
+    color: var(--red32m);
+    text-decoration: underline;
+}
+
+
+body.home footer#colophon a,
+body.home footer#colophon a:link,
+body.home footer#colophon a:visited,
+body.home footer#colophon a:hover {
+    color: var(--white32m);
+}
+
+body.home footer#colophon a:hover {
+    color: var(--white32m);
+}
+
+nav#site-navigation {
+    display: flex;
+    height: auto;
+  margin: auto;
+}
+
+nav#site-navigation ul#primary-menu-list {
+    display: flex;
+    margin: 0;
+    padding: 0;
+}
+
+nav#site-navigation ul#primary-menu-list li.menu-item {
+    margin: 1em;
+    list-style-type: none;
+}
+
+nav#site-navigation ul#primary-menu-list li.menu-item a,
+nav#site-navigation ul#primary-menu-list li.menu-item a:hover,
+nav#site-navigation ul#primary-menu-list li.menu-item a:visited  {
+    color: var(--white32m);
+    text-decoration: underline;
+    text-transform: uppercase;
+}
+
+body.home nav#site-navigation ul#primary-menu-list li.menu-item a,
+body.home nav#site-navigation ul#primary-menu-list li.menu-item a:hover,
+body.home nav#site-navigation ul#primary-menu-list li.menu-item a:visited  {
+    color: var(--red32m);
+}
+
+.compact-keyvalue-table .wp-block-columns {
+    margin: 0;
+    padding: 0;
+}
+
+.compact-keyvalue-table .wp-block-column {
+    margin: 0;
+    padding: 0;
+    flex-grow: 0;
+
+}
+.compact-keyvalue-table .wp-block-column p {
+    margin: 0;
+    padding: 0.25em;
+}
+
+.compact-keyvalue-table.ckt-right .wp-block-column p {
+    text-align: left;
+}
+
+.widget-area div#address-widget p {
+    margin: 0;
+    padding: 0.25em;
+}
+
+:where(.wp-block-columns.is-layout-flex) {
+    gap: 0.25em;
+}
+
+/* override wordpress automatic squishing for mobile */
+footer#colophon div.widget-area div.compact-keyvalue-table {
+    flex-basis: auto !important;
+}
+
+footer#colophon .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
+    flex-basis: auto !important;
+}
+
+
+
+
+/* Normal desktop size */
+@media (min-width: 785px) {
+    header#masthead {
+        display: flex;
+        flex-direction: row;
+    }
+
+    body.home > div#page article div.entry-content {
+        color: white;
+        font-weight: var(--weight-bold);
+        font-size: var(--font-size-xlarge);
+    }
+
+    body.home > div#page header#masthead {
+        margin-bottom: 15vh;
+    }
+
+    div#content {
+        margin-bottom: 20vh;
+    }
+
+    div.site-logo {
+        margin: 0;
+        margin-left: var(--desktop-lrmargin);
+    }
+
+    div#content {
+        margin-left: var(--desktop-lrmargin);
+        margin-right: var(--desktop-lrmargin);
+    }
+
+    footer#colophon {
+        margin: 0;
+    }
+
+    footer#colophon > p {
+        margin-left: var(--desktop-lrmargin);
+        margin-right: var(--desktop-lrmargin);
+    }
+
+    footer#colophon > div.widget-area {
+        margin-left: var(--desktop-lrmargin);
+        margin-right: var(--desktop-lrmargin);
+    }
+
+    nav#site-navigation {
+        margin-right: var(--desktop-lrmargin);
+        height: 5.5rem;
+    }
+
+    nav#site-navigation ul#primary-menu-list {
+        padding-left: 2em;
+        margin-top: 1em;
+        margin-bottom: 1em;
+    }
+
+    footer#colophon .compact-keyvalue-table {
+        white-space: nowrap;
+    }
+
+    footer#colophon .compact-keyvalue-table.ckt-right .wp-block-column p {
+        text-align: right;
+    }
+
+    footer#colophon .compact-keyvalue-table .wp-block-column p {
+        padding: 0;
+    }
+
+    footer#colophon .widget-area div#address-widget p {
+        padding: 0;
+    }
+
+    footer#colophon div.widget-area div.compact-keyvalue-table {
+        flex-basis: 50% !important;
+    }
+
+    footer#colophon .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
+        flex-basis: 50% !important;
+    }
+
+}
+
+
+/* Very small screens should cause the menu to fold up and the header to get smol */
+@media (max-width: 400px) {
+    div.site-logo > a > img.custom-logo {
+	width: 5.5rem;
+	height: 4.5rem;
+    }
+
+    header#masthead > div.site-branding { heigt: 0px; margin: 0px; padding: 0px;}
+    header#masthead > p.site-description { heigt: 0px; margin: 0px; padding: 0px;}
+    header#masthead li.menu-item { margin: 0.25em; }
+    nav#site-navigation ul#primary-menu-list { flex-wrap: wrap; padding: 0.5em; }
+}

assets/fonts/ConcourseOT/concourseot.css

@@ -0,0 +1,17 @@
+@font-face {
+font-family: 'Concourse OT';
+font-style: normal;
+font-weight: normal;
+font-stretch: normal;
+font-display: auto;
+src: url('concourse_ot_3_book.woff2') format('woff2');
+}
+
+@font-face {
+font-family: 'Concourse OT';
+font-style: normal;
+font-weight: bold;
+font-stretch: normal;
+font-display: auto;
+src: url('concourse_ot_6_semibold.woff2') format('woff2');
+}

assets/fonts/FivoSans/FivoSans.css

@@ -0,0 +1,125 @@
+@font-face {
+    font-family: 'Fivo Sans';
+    src: url('FivoSans-Black-Oblique.woff2') format('woff2'),
+         url('FivoSans-Black-Oblique.woff') format('woff');
+    font-style: italic;
+    font-weight: 900;
+}
+
+
+@font-face {
+    font-family: 'Fivo Sans';
+    src: url('FivoSans-Black.woff2') format('woff2'),
+         url('FivoSans-Black.woff') format('woff');
+    font-style: regular;
+    font-weight: 900;
+}
+
+
+@font-face {
+    font-family: 'Fivo Sans';
+    src: url('FivoSans-Bold-Oblique.woff2') format('woff2'),
+         url('FivoSans-Bold-Oblique.woff') format('woff');
+    font-style: italic;
+    font-weight: 700;
+}
+
+
+@font-face {
+    font-family: 'Fivo Sans';
+    src: url('FivoSans-Bold.woff2') format('woff2'),
+         url('FivoSans-Bold.woff') format('woff');
+    font-style: regular;
+    font-weight: 700;
+}
+
+
+@font-face {
+    font-family: 'Fivo Sans';
+    src: url('FivoSans-Heavy-Oblique.woff2') format('woff2'),
+         url('FivoSans-Heavy-Oblique.woff') format('woff');
+    font-style: italic;
+    font-weight: 900;
+}
+
+
+@font-face {
+    font-family: 'Fivo Sans';
+    src: url('FivoSans-Heavy.woff2') format('woff2'),
+         url('FivoSans-Heavy.woff') format('woff');
+    font-style: regular;
+    font-weight: 900;
+}
+
+
+@font-face {
+    font-family: 'Fivo Sans';
+    src: url('FivoSans-Light-Oblique.woff2') format('woff2'),
+         url('FivoSans-Light-Oblique.woff') format('woff');
+    font-style: italic;
+    font-weight: 300;
+}
+
+
+@font-face {
+    font-family: 'Fivo Sans';
+    src: url('FivoSans-Light.woff2') format('woff2'),
+         url('FivoSans-Light.woff') format('woff');
+    font-style: regular;
+    font-weight: 300;
+}
+
+
+@font-face {
+    font-family: 'Fivo Sans';
+    src: url('FivoSans-Medium-Oblique.woff2') format('woff2'),
+         url('FivoSans-Medium-Oblique.woff') format('woff');
+    font-style: italic;
+    font-weight: 500;
+}
+
+
+@font-face {
+    font-family: 'Fivo Sans';
+    src: url('FivoSans-Medium.woff2') format('woff2'),
+         url('FivoSans-Medium.woff') format('woff');
+    font-style: regular;
+    font-weight: 500;
+}
+
+
+@font-face {
+    font-family: 'Fivo Sans';
+    src: url('FivoSans-Oblique.woff2') format('woff2'),
+         url('FivoSans-Oblique.woff') format('woff');
+    font-style: italic;
+    font-weight: 400;
+}
+
+
+@font-face {
+    font-family: 'Fivo Sans';
+    src: url('FivoSans-Regular.woff2') format('woff2'),
+         url('FivoSans-Regular.woff') format('woff');
+    font-style: regular;
+    font-weight: 400;
+}
+
+
+@font-face {
+    font-family: 'Fivo Sans';
+    src: url('FivoSans-Thin-Oblique.woff2') format('woff2'),
+         url('FivoSans-Thin-Oblique.woff') format('woff');
+    font-style: italic;
+    font-weight: 300;
+}
+
+
+@font-face {
+    font-family: 'Fivo Sans';
+    src: url('FivoSans-Thin.woff2') format('woff2'),
+         url('FivoSans-Thin.woff') format('woff');
+    font-style: regular;
+    font-weight: 300;
+}
+

assets/fonts/FivoSans/Readme.md

@@ -0,0 +1 @@
+ 

footer.php

@@ -35,7 +35,7 @@
 			</nav><!-- .footer-navigation -->
 		<?php endif; ?>
 
-	    <p id="copyright-footer">
+        <p id="copyright-footer">
 	    	&copy; <?php echo date( 'Y' ) ?> <?php bloginfo('name') ?>.
 	    <br>
                 <!-- WP theme by <a href="https://corenominal.com">corenominal</a>. -->

functions.php

@@ -1,20 +1,26 @@
 <?php
-add_action( 'wp_enqueue_scripts', 'etcskel32m_enqueue_styles' );
 function etcskel32m_enqueue_styles() {
-	$parenthandle = 'parent-style';
-	$theme        = wp_get_theme();
+	$parenthandle    = 'parent-style';
+	$theme           = wp_get_theme();
+    $child_directory = get_stylesheet_directory_uri();
 	wp_enqueue_style( $parenthandle,
 		get_template_directory_uri() . '/style.css',
 		array(),
 		$theme->parent()->get( 'Version' )
 	);
+    // make child style
 	wp_enqueue_style( 'child-style',
 		get_stylesheet_uri(),
 		array( $parenthandle ),
 		$theme->get( 'Version' )
 	);
+    // fonts
+    wp_enqueue_style( '32m-fonts', $child_directory . '/assets/fonts/FivoSans/FivoSans.css', false );
+    wp_enqueue_style( '32m-main-css', $child_directory . '/assets/css/main.css', array(), false );
 }
 
+add_action( 'wp_enqueue_scripts', 'etcskel32m_enqueue_styles', 99);
+
 function etcskel32m_widgets_init() {
   register_sidebar( array(
     'name'          => __( 'Footer Widgets', 'etcskel32m' ),

style.css

@@ -11,139 +11,3 @@ License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         accessibility-ready
 Text Domain:  etcskel32m
 */
-
-@font-face {
-font-family: 'Concourse OT';
-font-style: normal;
-font-weight: normal;
-font-stretch: normal;
-font-display: auto;
-src: url('fonts/ConcourseOT/concourse_ot_3_book.woff2') format('woff2');
-}
-
-@font-face {
-font-family: 'Concourse OT';
-font-style: normal;
-font-weight: bold;
-font-stretch: normal;
-font-display: auto;
-src: url('fonts/ConcourseOT/concourse_ot_6_semibold.woff2') format('woff2');
-}
-
-:root {
-	--red32m: #A02827;
-	--white32m: #FFFFFF;
-        --grey32m: #ECECEC;
-        --lrmargin: 2vw;
-        --desktop-lrmargin: 25vw;
-        --typeface: 'Concourse OT', sans-serif;
-        --typeface-body: 'Concourse OT', sans-serif;
-        --font-weight-bold: 700;
-        --font-weight-medium: 400;
-        --font-size-large: 1.4em;
-        --font-size-xlarge: 1.75em;
-}
-
-
-html {
-	background: none;
-	padding: 0;
-	margin: 0;
-}
-
-
-body {
-    background-color: var(--white32m);
-    font-face: var(--typeface);
-    font-weight: var(--weight-medium);
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    border-radius: none;
-    box-shadow: none;
-    max-width: 100%;
-}
-
-body.home {
-	background-color: var(--red32m);
-	padding: 0;
-	margin: auto;
-}
-
-body > div.site {
-	width: 100%;
-}
-
-body > div.site header#masthead {
-	background-color: var(--red32m);
-}
-
-body.home > div.site header#masthead {
-	background-color: var(--white32m);
-}
-
-body.home > div.site article header {
-    display: none;
-}
-
-body.home > div.site article div.entry-content {
-    color: white;
-    font-weight: var(--weight-bold);
-    font-size: var(--font-size-xlarge);
-}
-
-body.home form#search-form {
-	display: none;
-}
-
-h1.site-title {
-	display: none;
-}
-
-div.site-logo > a > img.custom-logo {
-	width: 10rem;
-	height: 10rem;
-}
-
-div.site-logo {
-    margin-left: var(--lrmargin);
-}
-
-div#content {
-    margin-left: var(--lrmargin);
-    margin-right: var(--lrmargin);
-}
-
-
-footer#colophon {
-    background: var(--grey32m);
-    margin: 0;
-    padding: 0;
-}
-
-footer#colophon > p {
-    margin-left: var(--lrmargin);
-    margin-right: var(--lrmargin);
-}
-
-body.home footer#colophon {
-    background: none;
-    color: var(--white32m);
-}
-
-@media (min-width: 640px) {
-    div.site-logo {
-        margin-left: var(--desktop-lrmargin);
-    }
-
-    div#content {
-        margin-left: var(--desktop-lrmargin);
-        margin-right: var(--desktop-lrmargin);
-    }
-
-    footer#colophon > p {
-        margin-left: var(--desktop-lrmargin);
-        margin-right: var(--desktop-lrmargin);
-    }
-
-}