From ca62ecfd4e27f158665525e1f706b827783f0c13 Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam@adamkudrna.cz>
Date: Tue, 19 Mar 2024 01:58:29 +0100
Subject: [PATCH] Introduce semi-obscured cover variant

Add `#cover` and `#cover-object-medium` tags to activate this feature.
---
 CONTRIBUTING.md                                | 2 +-
 assets/scss/styles/06-components/_article.scss | 6 ++++++
 assets/scss/styles/06-components/_cover.scss   | 7 +++++++
 partials/post-card.hbs                         | 4 ++++
 post.hbs                                       | 6 +++++-
 5 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index cac7cd4..71cf376 100644
--- 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
index dc3167d..dca0860 100644
--- 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
index 146229d..e07cfb3 100644
--- 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
index f2d2b1b..d0676ba 100644
--- 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
index 233ec6d..9d355d2 100644
--- 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