Add style for portfolio items

ejoweb · Apr 18, 2024 · 0cb2db5 · 0cb2db5
1 parent 5e6a397
commit 0cb2db5
Showing 1 changed file with 64 additions and 29 deletions.
diff --git a/style.css b/style.css
@@ -245,35 +245,6 @@ footer > .wp-block-group.has-primary-background-color > * {
 }
 
 
-
-/* ------------------------------ 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;
-    }
-}
-
-
 /* ------------------------------- TEMPLATES -------------------------------- */
 
 /* Default page without post thumbnail */
@@ -404,4 +375,68 @@ footer > .wp-block-group.has-primary-background-color > * {
 .wp-block-gallery--overlap > figure + figure {
     margin-left: calc( var(--wp--style--block-gap) * -4 ) !important;
     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 ------------------------------- */
+
+/* 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);
+    }
+}
+
+/* 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) {
+
+    /* Header bottom size */
+    header > .wp-block-group {
+        /* padding-top: 0;*/
+    }
+
+    /* Header top bar */
+    header #top-bar {
+        position: relative;
+        display: block;
+        display: none;
+    }
 }