add dark quote block template

MozillaFoundation · Dec 14, 2023 · ece8ce3 · ece8ce3
1 parent 0af1ee0
commit ece8ce3
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">
+                <blockquote class="feature-quote">
+                    <div class="tw-quote tw-px-2 [&_p]:tw-h2-heading">
+                        {{ self.quote|richtext }}
+                    </div>
+                    <cite class="tw-text-gray-40 tw-h6-heading tw-max-w-4xl">{{ self.cite }}</cite>
+                </blockquote>
+            </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 {