Add blaadjes, improve portolio style and change loading of stylesheets

ejoweb · Apr 25, 2024 · e5866ba · e5866ba
1 parent 0cb2db5
commit e5866ba
Show file tree

Hide file tree

Showing 28 changed files with 147 additions and 57 deletions.
diff --git a/style-for-editor.css → assets/css/editor.css b/style-for-editor.css → assets/css/editor.css
diff --git a/assets/css/hgd-portfolio.css b/assets/css/hgd-portfolio.css
@@ -0,0 +1,129 @@
+/**
+ * Portfolio Style
+ */
+.wp-block-group.is-style-hgd-portfolio {
+    display: grid;
+    grid-template-columns: 1fr;
+}
+
+/* WordPress breakpoint for small screens  */
+@media screen and (min-width: 600px) {
+
+    .wp-block-group.is-style-hgd-portfolio {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+/* WordPress breakpoint for medium screens */
+@media screen and (min-width: 782px) {
+
+    .wp-block-group.is-style-hgd-portfolio {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+}
+
+.wp-block-group.is-style-hgd-portfolio .wp-block-cover {
+    padding: 0;
+    overflow: visible; /* To show the heart-image of the reviews */
+}
+
+.wp-block-group.is-style-hgd-portfolio .wp-block-details {
+    position: relative;
+    overflow: visible;
+    font-style: italic;
+    padding-left: var(--wp--preset--spacing--50) !important;
+}
+
+.wp-block-group.is-style-hgd-portfolio .wp-block-details summary {
+    font-weight: bold;
+}
+
+.wp-block-group.is-style-hgd-portfolio .wp-block-details summary::marker {
+    display: none;
+    content: "";
+}
+
+.wp-block-group.is-style-hgd-portfolio .wp-block-details summary::after {
+  content: ' ▸';
+  font-style: normal;
+}
+
+.wp-block-group.is-style-hgd-portfolio .wp-block-details[open] summary:after {
+  content: " ▾";
+}
+
+.wp-block-group.is-style-hgd-portfolio .wp-block-details summary::before {
+    content: '';
+    display: block;
+    background-image: url('../images/Het Groene Doel_blaadje_blauw2.png');
+    background-size: cover;
+    width: 60px;
+    height: 60px;
+    position: absolute;
+    left: -20px;
+    top: -30px;
+    z-index: 99;
+}
+
+.wp-block-group.is-style-hgd-portfolio .wp-block-cover.is-position-bottom-left .wp-block-details,
+.wp-block-group.is-style-hgd-portfolio .wp-block-cover.is-position-top-left .wp-block-details {
+    padding-left: var(--wp--preset--spacing--40) !important;
+    padding-right: var(--wp--preset--spacing--50) !important;
+}
+
+.wp-block-group.is-style-hgd-portfolio .wp-block-cover.is-position-bottom-left .wp-block-details summary::before {
+    background-image: url('../images/Het Groene Doel_blaadje_geel2.png');
+    top: -30px;
+    left: auto;
+    right: -20px;
+    bottom: auto;
+}
+
+.wp-block-group.is-style-hgd-portfolio .wp-block-cover.is-position-top-left .wp-block-details summary::before {
+    background-image: url('../images/Het Groene Doel_blaadje_roze2.png');
+    top: auto;
+    left: auto;
+    right: -20px;
+    bottom: -30px;
+}
+
+.wp-block-group.is-style-hgd-portfolio .wp-block-cover.is-position-top-right .wp-block-details summary::before {
+    background-image: url('../images/Het Groene Doel_blaadje_grijs2.png');
+    top: auto;
+    left: -20px;
+    right: auto;
+    bottom: -30px;
+}
+
+.wp-block-group.is-style-hgd-portfolio p {
+    font-style: italic;
+}
+
+/* ------------------------------ RESPONSIVENESS ------------------------------- */
+
+/* Only tiny screens */
+@media screen and (max-width: 480px) {
+
+    body {
+        --wp--style--root--padding-right: var(--wp--preset--spacing--40);
+        --wp--style--root--padding-left: var(--wp--preset--spacing--40);
+    }
+}
+
+
+
+/* Only medium screens */
+@media screen and (max-width: 960px) {
+
+    /* Header bottom size */
+    header > .wp-block-group {
+        /* padding-top: 0;*/
+    }
+
+    /* Header top bar */
+    header #top-bar {
+        position: relative;
+        display: block;
+        display: none;
+    }
+}
diff --git a/assets/images/Het Groene Doel_blaadje_blauw1.png b/assets/images/Het Groene Doel_blaadje_blauw1.png
diff --git a/assets/images/Het Groene Doel_blaadje_blauw2.png b/assets/images/Het Groene Doel_blaadje_blauw2.png
diff --git a/assets/images/Het Groene Doel_blaadje_blauw3.png b/assets/images/Het Groene Doel_blaadje_blauw3.png
diff --git a/assets/images/Het Groene Doel_blaadje_blauw4.png b/assets/images/Het Groene Doel_blaadje_blauw4.png
diff --git a/assets/images/Het Groene Doel_blaadje_geel1.png b/assets/images/Het Groene Doel_blaadje_geel1.png
diff --git a/assets/images/Het Groene Doel_blaadje_geel2.png b/assets/images/Het Groene Doel_blaadje_geel2.png
diff --git a/assets/images/Het Groene Doel_blaadje_geel3.png b/assets/images/Het Groene Doel_blaadje_geel3.png
diff --git a/assets/images/Het Groene Doel_blaadje_geel4.png b/assets/images/Het Groene Doel_blaadje_geel4.png
diff --git a/assets/images/Het Groene Doel_blaadje_grijs1.png b/assets/images/Het Groene Doel_blaadje_grijs1.png
diff --git a/assets/images/Het Groene Doel_blaadje_grijs2.png b/assets/images/Het Groene Doel_blaadje_grijs2.png
diff --git a/assets/images/Het Groene Doel_blaadje_grijs3.png b/assets/images/Het Groene Doel_blaadje_grijs3.png
diff --git a/assets/images/Het Groene Doel_blaadje_grijs4.png b/assets/images/Het Groene Doel_blaadje_grijs4.png
diff --git a/assets/images/Het Groene Doel_blaadje_groen1.png b/assets/images/Het Groene Doel_blaadje_groen1.png
diff --git a/assets/images/Het Groene Doel_blaadje_groen2.png b/assets/images/Het Groene Doel_blaadje_groen2.png
diff --git a/assets/images/Het Groene Doel_blaadje_groen3.png b/assets/images/Het Groene Doel_blaadje_groen3.png
diff --git a/assets/images/Het Groene Doel_blaadje_groen4.png b/assets/images/Het Groene Doel_blaadje_groen4.png
diff --git a/assets/images/Het Groene Doel_blaadje_roze1.png b/assets/images/Het Groene Doel_blaadje_roze1.png
diff --git a/assets/images/Het Groene Doel_blaadje_roze2.png b/assets/images/Het Groene Doel_blaadje_roze2.png
diff --git a/assets/images/Het Groene Doel_blaadje_roze3.png b/assets/images/Het Groene Doel_blaadje_roze3.png
diff --git a/assets/images/Het Groene Doel_blaadje_roze4.png b/assets/images/Het Groene Doel_blaadje_roze4.png
diff --git a/assets/images/Het Groene Doel_blaadje_wit1.png b/assets/images/Het Groene Doel_blaadje_wit1.png
diff --git a/assets/images/Het Groene Doel_blaadje_wit2.png b/assets/images/Het Groene Doel_blaadje_wit2.png
diff --git a/assets/images/Het Groene Doel_blaadje_wit3.png b/assets/images/Het Groene Doel_blaadje_wit3.png
diff --git a/assets/images/Het Groene Doel_blaadje_wit4.png b/assets/images/Het Groene Doel_blaadje_wit4.png
diff --git a/functions.php b/functions.php
@@ -12,18 +12,15 @@
  */
 add_action( 'after_setup_theme', function() {
 
-	// Add support for block styles.
-	add_theme_support( 'wp-block-styles' );
-
-	// Enqueue editor styles.
-	add_editor_style( 'style.css' );
-
 	// Enqueue scripts and styles to frontend
 	add_action( 'wp_enqueue_scripts', 'hgd_add_frontend_styles_and_scripts' );
 
 	// Enqueue scripts and styles to the editor
 	add_action( 'enqueue_block_editor_assets', 'hgd_add_editor_styles_and_scripts' );
 
+	// // Add support for block styles.
+	// add_theme_support( 'wp-block-styles' );
+
 	// Add class to body for featured image
 	add_filter('body_class', function($classes) {
 
@@ -61,19 +58,21 @@
  */
 function hgd_add_frontend_styles_and_scripts() {
 
-	// Register theme stylesheet.
 	$theme_version = wp_get_theme()->get( 'Version' );
 
-	$version_string = is_string( $theme_version ) ? $theme_version : false;
-	wp_register_style(
-		'hgd-style',
+	wp_enqueue_style(
+		'hgd',
 		get_template_directory_uri() . '/style.css',
 		array(),
-		$version_string
+		$theme_version
 	);
 
-	// Enqueue theme stylesheet.
-	wp_enqueue_style( 'hgd-style' );
+	wp_enqueue_style(
+		'hgd-portfolio',
+		get_template_directory_uri() . '/assets/css/hgd-portfolio.css',
+		array(),
+		$theme_version
+	);
 }
 
 
@@ -82,19 +81,17 @@ function hgd_add_frontend_styles_and_scripts() {
  */
 function hgd_add_editor_styles_and_scripts() {
 
-	// Register theme stylesheet.
 	$theme_version = wp_get_theme()->get( 'Version' );
 
-	$version_string = is_string( $theme_version ) ? $theme_version : false;
-	wp_register_style(
-		'hgd-style-for-editor',
-		get_template_directory_uri() . '/style-for-editor.css',
+	wp_enqueue_style(
+		'hgd-editor-style',
+		get_template_directory_uri() . '/assets/css/editor.css',
 		array(),
-		$version_string
+		$theme_version
 	);
 
-	// Enqueue theme stylesheet.
-	wp_enqueue_style( 'hgd-style-for-editor' );
+	// Enqueue editor styles.
+	add_editor_style( ['style.css', 'assets/css/hgd-portfolio.css'] );
 }
 
 

diff --git a/style.css b/style.css
@@ -377,26 +377,6 @@ footer > .wp-block-group.has-primary-background-color > * {
     opacity: 0.8;
 }
 
-/**
- * Portfolio Style
- */
-.wp-block-group.is-style-hgd-portfolio {
-    display: grid;
-    grid-template-columns: 1fr;
-}
-
-.wp-block-group.is-style-hgd-portfolio .wp-block-cover {
-    padding: 0;
-}
-
-.wp-block-group.is-style-hgd-portfolio .wp-block-details {
-
-}
-
-.wp-block-group.is-style-hgd-portfolio p {
-    font-style: italic;
-}
-
 
 /* ------------------------------ RESPONSIVENESS ------------------------------- */
 
@@ -409,22 +389,6 @@ footer > .wp-block-group.has-primary-background-color > * {
     }
 }
 
-/* WordPress breakpoint for small screens  */
-@media screen and (min-width: 600px) {
-
-    .wp-block-group.is-style-hgd-portfolio {
-        grid-template-columns: 1fr 1fr;
-    }
-}
-
-/* WordPress breakpoint for medium screens */
-@media screen and (min-width: 782px) {
-
-    .wp-block-group.is-style-hgd-portfolio {
-        grid-template-columns: 1fr 1fr 1fr;
-    }
-}
-
 /* Only medium screens */
 @media screen and (max-width: 960px) {