Replace font, improve colors and setup templates

patterns/footer-default.php

@@ -6,8 +6,10 @@
  * Block Types: core/template-part/footer
  */
 ?>
-<!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"backgroundColor":"contrast","textColor":"base","layout":{"type":"constrained"}} -->
-<div class="wp-block-group has-base-color has-contrast-background-color has-text-color has-background has-link-color"><!-- wp:paragraph {"align":"center","fontSize":"small"} -->
-<p class="has-text-align-center has-small-font-size">© Het Groene Doel</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:group -->
+<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|primary"}}}},"textColor":"contrast-2"} -->
+<p class="has-text-align-center has-contrast-2-color has-text-color has-link-color"><strong>Contact</strong>    +3160606060  •  <a href="mailto:info@hetgroenedoel.nl">info@hetgroenedoel.nl</a>  •  <em>Zwolle en omgeving</em></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer {"height":"7vh"} -->
+<div style="height:7vh" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->

patterns/header-default.php

@@ -6,12 +6,8 @@
  * Block Types: core/template-part/header
  */
 ?>
-<!-- wp:group {"backgroundColor":"contrast","textColor":"base","layout":{"type":"default"}} -->
-<div class="wp-block-group has-base-color has-contrast-background-color has-text-color has-background"><!-- wp:paragraph -->
-<p>Header</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:group -->
-
-<!-- wp:cover {"url":"/wp-content/themes/hetgroenedoel/assets/images/placeholder.png","dimRatio":50,"overlayColor":"base","minHeight":50,"isDark":false} -->
-<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-base-background-color has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="/wp-content/themes/hetgroenedoel/assets/images/placeholder.png" data-object-fit="cover"/><div class="wp-block-cover__inner-container"></div></div>
-<!-- /wp:cover -->
+<!-- wp:group {"layout":{"type":"default"}} -->
+<div class="wp-block-group"><!-- wp:group {"align":"full","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center","orientation":"horizontal","verticalAlignment":"bottom"}} -->
+<div class="wp-block-group alignfull"><!-- wp:site-logo {"width":280,"shouldSyncIcon":true,"className":"is-style-default"} /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->

style.css

@@ -45,6 +45,8 @@ h6.has-background {
 /* Cover block */
 .wp-block-cover {
     overflow: hidden;
+    padding: var(--wp--style--root--padding-top)
+             var(--wp--style--root--padding-left);
 }
 
 .wp-block-cover h1 {
@@ -89,15 +91,16 @@ header {
 
 /* Logo */
 header .wp-block-site-logo {
-    position: relative;
-    z-index: 99;
-    margin-bottom: -5.5rem;
-    margin-top: -7rem;
     background-color: var(--wp--preset--color--base);
     border-radius: 999px;
-    padding: 10rem 1rem 1rem 7rem;
-    width: 450px;
-    height: 450px;
+    position: relative;
+    z-index: 99;
+
+    margin-bottom: -4rem;
+    margin-top: -5rem;
+    padding: 6rem 2rem 1rem 4rem;
+    width: 280px;
+    height: 280px;
 }
 
 header .wp-block-site-logo img {
@@ -128,6 +131,31 @@ footer {}
 
 /* ------------------------------ BREAKPOINTS ------------------------------- */
 
+/* Breakpoint for tiny screens */
+@media screen and (max-width: 480px) {
+
+    body {
+        --wp--style--root--padding-top: 1.5rem;
+        --wp--style--root--padding-bottom: 1.5rem;
+        --wp--style--root--padding-left: 1.5rem;
+        --wp--style--root--padding-right: 1.5rem;
+    }
+}
+
+/* Breakpoint for  */
+@media screen and (min-width: 600px) {
+
+    /* Logo */
+    header .wp-block-site-logo {
+        margin-bottom: -5.5rem;
+        margin-top: -7rem;
+        padding: 10rem 1rem 1rem 7rem;
+        width: 450px;
+        height: 450px;
+    }
+
+}
+
 /* Breakpoint for  */
 @media screen and (min-width: 960px) {
 
@@ -136,12 +164,6 @@ footer {}
         bottom: 1rem;
     } 
 
-}
-
-/* Breakpoint for tiny screens */
-@media screen and (max-width: 480px) {
-
-
 }
 
 /* ------------------------------- TEMPLATES -------------------------------- */

templates/404.html

@@ -1,10 +1,14 @@
 <!-- wp:template-part {"slug":"header","theme":"hetgroenedoel","tagName":"header"} /-->
 
-<!-- wp:group {"tagName":"main","align":"full","backgroundColor":"base","layout":{"type":"constrained"}} -->
-<main class="wp-block-group alignfull has-base-background-color has-background">
+<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"default"}} -->
+<main class="wp-block-group alignfull"><!-- wp:cover {"url":"/wp-content/themes/hetgroenedoel/assets/images/placeholder.png","dimRatio":0,"contentPosition":"bottom left","isDark":false} -->
+<div class="wp-block-cover is-light has-custom-content-position is-position-bottom-left"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="/wp-content/themes/hetgroenedoel/assets/images/placeholder.png" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"left","level":1,"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"backgroundColor":"primary","textColor":"base"} -->
+<h1 class="wp-block-heading has-text-align-left has-base-color has-primary-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)">Tuinaanleg en groendaken</h1>
+<!-- /wp:heading --></div></div>
+<!-- /wp:cover -->
+
+<!-- wp:pattern {"slug":"hgd/hidden-404"} /-->
 
-	<!-- wp:pattern {"slug":"hgd/hidden-404"} /-->
-
 </main>
 <!-- /wp:group -->
 

templates/index.html

@@ -4,4 +4,12 @@
 <main class="wp-block-group alignfull has-base-background-color has-background"><!-- wp:post-content {"layout":{"type":"constrained"}} /--></main>
 <!-- /wp:group -->
 
+<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"default"}} -->
+<main class="wp-block-group alignfull"><!-- wp:cover {"url":"/wp-content/themes/hetgroenedoel/assets/images/placeholder.png","dimRatio":0,"contentPosition":"bottom left","isDark":false} -->
+<div class="wp-block-cover is-light has-custom-content-position is-position-bottom-left"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="/wp-content/themes/hetgroenedoel/assets/images/placeholder.png" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"left","level":1,"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"backgroundColor":"primary","textColor":"base"} -->
+<h1 class="wp-block-heading has-text-align-left has-base-color has-primary-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)">Tuinaanleg en groendaken</h1>
+<!-- /wp:heading --></div></div>
+<!-- /wp:cover --></main>
+<!-- /wp:group -->
+
 <!-- wp:template-part {"slug":"footer","theme":"hetgroenedoel","tagName":"footer"} /-->

theme.json

@@ -11,7 +11,7 @@
 			"palette": [
 				{ "name": "Base", 	    "slug": "base", 	  "color": "#FFFFFF" },
 				{ "name": "Contrast", 	"slug": "contrast",   "color": "#333333" },
-				{ "name": "Contrast 2",	"slug": "contrast-2", "color": "#8A8A8A" },
+				{ "name": "Contrast 2",	"slug": "contrast-2", "color": "#777777" },
 				{ "name": "Primary", 	"slug": "primary",	  "color": "#2FAC66" }
 			],
 			"custom": true,
@@ -23,37 +23,37 @@
 		"typography": {
 			"fontFamilies": [
 				{
-					"fontFamily": "\"Open Sans\", -apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
-					"slug": "open-sans",
-					"name": "Open Sans",
+					"fontFamily": "\"Poppins\", -apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
+					"slug": "poppins",
+					"name": "Poppins",
 					"fontFace": [
 						{
-							"fontFamily": "Open Sans",
+							"fontFamily": "Poppins",
 							"fontWeight": "300",
 							"fontStyle": "normal",
 							"fontStretch": "normal",
-							"src": [ "file:./assets/fonts/open-sans/open-sans-v34-latin-300.woff2" ]
+							"src": [ "file:./assets/fonts/poppins/poppins-v20-latin-300.woff2" ]
 						},
 						{
-							"fontFamily": "Open Sans",
+							"fontFamily": "Poppins",
 							"fontWeight": "300",
 							"fontStyle": "italic",
 							"fontStretch": "normal",
-							"src": [ "file:./assets/fonts/open-sans/open-sans-v34-latin-300italic.woff2" ]
+							"src": [ "file:./assets/fonts/poppins/poppins-v20-latin-300italic.woff2" ]
 						},
 						{
-							"fontFamily": "Open Sans",
+							"fontFamily": "Poppins",
 							"fontWeight": "700",
 							"fontStyle": "normal",
 							"fontStretch": "normal",
-							"src": [ "file:./assets/fonts/open-sans/open-sans-v34-latin-700.woff2" ]
+							"src": [ "file:./assets/fonts/poppins/poppins-v20-latin-700.woff2" ]
 						},
 						{
-							"fontFamily": "Open Sans",
+							"fontFamily": "Poppins",
 							"fontWeight": "700",
 							"fontStyle": "italic",
 							"fontStretch": "normal",
-							"src": [ "file:./assets/fonts/open-sans/open-sans-v34-latin-700italic.woff2" ]
+							"src": [ "file:./assets/fonts/poppins/poppins-v20-latin-700italic.woff2" ]
 						}
 					]
 				}
@@ -63,7 +63,7 @@
 				{ "name": "Medium",   "slug": "medium",   "size": "clamp(1.125rem, 4vw, 1.25rem)" },
 				{ "name": "Large",    "slug": "large",    "size": "1.5rem" },
 				{ "name": "X-large",  "slug": "x-large",  "size": "clamp(1.5rem, 4vw, 2.125rem)" },
-				{ "name": "XX Large", "slug": "xx-large", "size": "clamp(2rem, 4vw, 2.875rem)" }
+				{ "name": "XX Large", "slug": "xx-large", "size": "clamp(1.75rem, 4vw, 2.875rem)" }
 			],
 			"customFontSize": false,
             "lineHeight": true,
@@ -123,7 +123,7 @@
 			"text": 	  "var(--wp--preset--color--contrast)"
 		},
 		"typography": {
-			"fontFamily": "var(--wp--preset--font-family--open-sans)",
+			"fontFamily": "var(--wp--preset--font-family--poppins)",
 			"lineHeight": "var(--wp--custom--typography--line-height--normal)",
 			"fontSize":   "var(--wp--preset--font-size--medium)"
 		},