Introduce semi-obscured cover variant

Add `#cover` and `#cover-object-medium` tags to activate this feature.
frontend-garden · Mar 19, 2024 · ca62ecf · ca62ecf
1 parent 7456759
commit ca62ecf
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 2 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -17,7 +17,7 @@ your machine.
    directory. Optionally clone the theme to a place of your choice and create
    a symlink in the said destination. Either way you should end up with this
    structure:
-   `<YOUR_GHOST_INSTALLATION>/content/frontend-garden-ghost-theme`.
+   `<YOUR_GHOST_INSTALLATION>/content/themes/frontend-garden-ghost-theme`.
 
 2. In the theme root run:
 

diff --git a/assets/scss/styles/06-components/_article.scss b/assets/scss/styles/06-components/_article.scss
@@ -39,3 +39,9 @@
     max-width: 42rem;
     margin-left: -0.15em; // 2.
 }
+
+.article--cover .article__title,
+.article--cover .article__summary {
+    width: clamp(24rem, 55vw, 50rem);
+    max-width: 100%;
+}
diff --git a/assets/scss/styles/06-components/_cover.scss b/assets/scss/styles/06-components/_cover.scss
@@ -108,6 +108,13 @@
     }
 }
 
+.cover--object--medium {
+    $overlay-color: color.adjust(colors.$black, $alpha: -0.75);
+
+    --gradient-from: #{$overlay-color};
+    --gradient-to: #{color.adjust($overlay-color, $alpha: -1)};
+}
+
 .cover--object--dark {
     $overlay-color: color.adjust(colors.$black, $alpha: -0.333);
 

diff --git a/partials/post-card.hbs b/partials/post-card.hbs
@@ -10,6 +10,10 @@
             cover--object
             cover--object--light
         {{/has}}
+        {{#has tag="#cover-object-medium"}}
+            cover--object
+            cover--object--medium
+        {{/has}}
         {{#has tag="#cover-object-dark"}}
             cover--object
             cover--object--dark

diff --git a/post.hbs b/post.hbs
@@ -3,7 +3,7 @@
 <main class="site__content">
 
     {{#post}}
-        <article class="article">
+        <article class="article {{#has tag="#cover"}}article--cover{{/has}}">
 
             <header
                 class="
@@ -20,6 +20,10 @@
                             cover--object
                             cover--object--light
                         {{/has}}
+                        {{#has tag="#cover-object-medium"}}
+                            cover--object
+                            cover--object--medium
+                        {{/has}}
                         {{#has tag="#cover-object-dark"}}
                             cover--object
                             cover--object--dark