6650 - MozFest Dark Quote (#11539)

* add dark quote block template * match styling of single_quote_block
MozillaFoundation · Dec 15, 2023 · 0a1742c · 0a1742c
1 parent be5f3e9
commit 0a1742c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/network-api/networkapi/mozfest/templates/fragments/blocks/mozfest_dark_quote.html b/network-api/networkapi/mozfest/templates/fragments/blocks/mozfest_dark_quote.html
@@ -0,0 +1,16 @@
+{% load wagtailcore_tags wagtailimages_tags %}
+
+{% block block_content %}
+    <div class="tw-py-16 tw-bg-black tw-dark">
+        <div class="tw-container">
+            <div class="tw-row tw-justify-center">
+                <div class="feature-quote">
+                    <div class="quote-content [&_p]:tw-text-white">
+                        {{ self.quote|richtext }}
+                    </div>
+                    <p class="tw-text-gray-40 tw-h6-heading tw-text-lg tw-max-w-4xl">{{ self.cite }}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock block_content %}
diff --git a/source/sass/wagtail/blocks/feature-quote.scss b/source/sass/wagtail/blocks/feature-quote.scss
@@ -18,6 +18,10 @@
     content: "";
     display: block;
     margin: 0 auto 10px;
+
+    @at-root .tw-dark & {
+      opacity: 0.3;
+    }
   }
 
   .quote-content .rich-text {