copy over custom css from editor to css file

assets/css/custom.css

@@ -0,0 +1,59 @@
+figcaption.wp-element-caption {
+  width: fit-content;
+  margin: 0;
+  padding: 8px 12px;
+}
+
+.main-header-nav .wp-block-navigation-item {
+  justify-content: center;
+  border: 1px solid;
+  flex-grow: 1;
+  border-left: 0;
+  padding-block: 0.5em
+}
+
+.main-header-nav .wp-block-navigation-item:last-of-type {
+  border-right: 0;
+}
+
+nav.wp-block-navigation.mobile-header-nav {
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+  padding-block: 15px
+}
+
+ul.wp-block-navigation.mobile-header-nav li {
+  font-size: 40px !important;
+  margin-block: .5em;
+}
+
+@media (min-width: 1080px) {
+  .wp-block-column.footer-gradient-column {
+    padding-left: 2rem !important;
+    border-left: 8px solid var(--wp--preset--color--turquoise-green);
+  }
+}
+
+@media (max-width: 786px) {
+  .wp-block-column.footer-gradient-column {
+    padding-top: 1.5rem !important;
+    border-top: 8px solid var(--wp--preset--color--turquoise-green);
+  }
+}
+
+.overlap {
+  z-index: 21;
+}
+
+.home-post-item {
+  height: 100%
+}
+
+.post-title a {
+  text-decoration: none;
+}
+
+.post-title a:hover,
+.post-title a:focus {
+  text-decoration: underline;
+}

functions.php

@@ -1,58 +1,16 @@
 <?php
 
-/* Remove default CSS variables that come with Wordpress
+// enqueue custom css on front-end and editor
-  https://github.com/WordPress/gutenberg/issues/56180#issuecomment-1819222376
+function jett_editor_css() {
-*/
+	add_editor_style( get_theme_file_uri('/assets/css/custom.css') );
-function custom_wp_theme_json_default( $theme_json ) {
-	$new_data = array(
-		'version'  => 2,
-		'settings' => array(
-			'color'  => array(
-				'palette'   => array(),
-				'gradients' => array(),
-			),
-			'shadow' => array(
-				'presets' => array(),
-			),
-			'typography' => array(
-				'fontSizes' => array(),
-			),
-			// 'dimensions' => array(
-			// 	'aspectRatios' => array(),
-			// ),
-			// 'spacing' => array(
-			// 	'spacingScale' => array(
-			// 		'steps' => 0,
-			// 	),
-			// ),
-		),
-	);
-	return $theme_json->update_with( $new_data );
 }
-add_filter( 'wp_theme_json_data_default', 'custom_wp_theme_json_default' );
+add_action( 'after_setup_theme', 'jett_editor_css' );
 
-// enable svg uploads
+function jett_frontend_css() {
-add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
+	wp_enqueue_style('jett_css', get_theme_file_uri('/assets/css/custom.css'));
-
-  global $wp_version;
-  if ( $wp_version !== '4.7.1' ) {
-     return $data;
-  }
-
-  $filetype = wp_check_filetype( $filename, $mimes );
-
-  return [
-      'ext'             => $filetype['ext'],
-      'type'            => $filetype['type'],
-      'proper_filename' => $data['proper_filename']
-  ];
-
-}, 10, 4 );
-function cc_mime_types($mimes) {
-  $mimes['svg'] = 'image/svg+xml';
-  return $mimes;
 }
-add_filter('upload_mimes', 'cc_mime_types');
+add_action('wp_enqueue_scripts', 'jett_frontend_css');
+
 
 // define block styles
 function jett_block_styles() {
@@ -133,3 +91,57 @@ function jett_block_styles() {
 	);
 }
 add_action( 'init', 'jett_block_styles' );
+
+/* Remove default CSS variables that come with Wordpress
+  https://github.com/WordPress/gutenberg/issues/56180#issuecomment-1819222376
+*/
+function custom_wp_theme_json_default( $theme_json ) {
+	$new_data = array(
+		'version'  => 2,
+		'settings' => array(
+			'color'  => array(
+				'palette'   => array(),
+				'gradients' => array(),
+			),
+			'shadow' => array(
+				'presets' => array(),
+			),
+			'typography' => array(
+				'fontSizes' => array(),
+			),
+			// 'dimensions' => array(
+			// 	'aspectRatios' => array(),
+			// ),
+			// 'spacing' => array(
+			// 	'spacingScale' => array(
+			// 		'steps' => 0,
+			// 	),
+			// ),
+		),
+	);
+	return $theme_json->update_with( $new_data );
+}
+add_filter( 'wp_theme_json_data_default', 'custom_wp_theme_json_default' );
+
+// enable svg uploads
+add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
+
+  global $wp_version;
+  if ( $wp_version !== '4.7.1' ) {
+     return $data;
+  }
+
+  $filetype = wp_check_filetype( $filename, $mimes );
+
+  return [
+      'ext'             => $filetype['ext'],
+      'type'            => $filetype['type'],
+      'proper_filename' => $data['proper_filename']
+  ];
+
+}, 10, 4 );
+function cc_mime_types($mimes) {
+  $mimes['svg'] = 'image/svg+xml';
+  return $mimes;
+}
+add_filter('upload_mimes', 'cc_mime_types');

templates/front-page.html

@@ -0,0 +1,7 @@
+<!-- wp:template-part {"slug":"header"} /-->
+
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"0"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"default"}} -->
+<div class="wp-block-group" style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><!-- wp:post-content /--></div>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","area":"footer"} /-->

theme.json

@@ -1,4 +1,6 @@
 {
+	"version": 3,
+	"$schema": "https://schemas.wp.org/trunk/theme.json",
 	"settings": {
 		"appearanceTools": true,
 		"color": {
@@ -65,7 +67,6 @@
 			"wideSize": "1760px"
 		},
 		"typography": {
-			"defaultFontSizes": false,
 			"fontFamilies": [
 				{
 					"fontFace": [
@@ -636,7 +637,6 @@
 				}
 			}
 		},
-		"css": "figcaption.wp-element-caption {\n width: fit-content;\n  margin: 0;\n  padding: 8px 12px;\n}\n\n.main-header-nav .wp-block-navigation-item {\n  justify-content: center;\n  border: 1px solid;\n  flex-grow: 1;\n  border-left: 0;\n  padding-block: 0.5em\n}\n\n.main-header-nav .wp-block-navigation-item:last-of-type {\n  border-right: 0;\n}\n\nnav.wp-block-navigation.mobile-header-nav {\n  border-top: 1px solid;\n  border-bottom: 1px solid;\n  padding-block: 15px\n}\n\nul.wp-block-navigation.mobile-header-nav li {\n font-size: 40px !important;\n margin-block: .5em;\n}\n\n@media (min-width: 1080px) {\n  .wp-block-column.footer-gradient-column {\n    padding-left: 2rem !important;\n    border-left: 8px solid var(--wp--preset--color--turquoise-green);\n}\n}\n\n@media (max-width: 786px) {\n.wp-block-column.footer-gradient-column {\n    padding-top: 1.5rem !important;\n    border-top: 8px solid var(--wp--preset--color--turquoise-green);\n}\n}\n\n.overlap {\n  z-index: 21;\n}",
 		"elements": {
 			"caption": {
 				"color": {
@@ -666,7 +666,5 @@
 			"name": "footer",
 			"title": "Footer"
 		}
-	],
+	]
-	"version": 3,
-	"$schema": "https://schemas.wp.org/trunk/theme.json"
 }