blog: add content warning system

src/_includes/layouts/post.njk

@@ -25,6 +25,16 @@ subhead: blog
             <h1>{{ title }}</h1>
             <strong id="lead">{{ description }}</strong>
         </header>
+        {% if content_warnings %}
+            <div class="content-warnings">
+                <p>
+                <strong>content warnings:</strong></br>
+                {% for cw in content_warnings %}
+                    <span class="cw">{{ cw }}</span>{% if not loop.last %}, {% endif %}
+                {% endfor %}
+                </p>
+            </div>
+        {% endif %}
         {{ content | safe }}
         <a class="banner-link" href="https://ko-fi.com/nyancrimew">
             <div class="kofi-banner">
@@ -33,4 +43,4 @@ subhead: blog
             </div>
         </a>
     </article>
-{% endblock %}
+{% endblock %}

src/posts/the-emails-2.md

@@ -8,6 +8,9 @@ tags:
     - politics
 feature_image: /img/posts/the-emails-2/cover.jpg
 feature_alt: "a glitchy edited photo of a fax machine"
+content_warnings:
+    - transphobia
+    - us politics
 ---
 
 **CLARIFICATION: i, maia, am not the source of this email leak, merely a publisher, since i feel that this should be more widely available than just to selected journalists**

src/posts/the-emails.md

@@ -8,6 +8,9 @@ tags:
     - politics
 feature_image: /img/posts/the-emails/cover.jpg
 feature_alt: "a glitchy edited photo of a fax machine"
+content_warnings:
+    - transphobia
+    - us politics
 ---
 
 **Emails.pdf (PDF, 2603 pages, 62MB), available as a [torrent](/files/emails.torrent) ([magnet](magnet:?xt=urn:btih:78cebcb51122170c857d71a6bd64e939c26af7f3&xt=urn:btmh:1220af77008cd1506d65208aa0a8cf8b288d783b90a7b4ea4f8c08fa3a5c08b90b5e))**

src/static/style.css

@@ -83,7 +83,7 @@ img {
   text-decoration: inherit;
 }
 
-.kofi-banner {
+.kofi-banner, .content-warnings {
   border-radius: 8px;
   padding: 4px;
   border: 2px solid rgb(255, 0, 140);
@@ -91,6 +91,16 @@ img {
   font-size: 1.1rem;
 }
 
+.content-warnings {
+  margin-top: 16px;
+  margin-bottom: 16px;
+  width: fit-content;
+}
+
+.content-warnings > p {
+  margin: 0;
+}
+
 .greentext {
   color: #789922;
 }