From 8cdcaf60d371a5f2867c5e2d6c3c0843d22840ce64cdddc03a77bf66db0c8327 Mon Sep 17 00:00:00 2001
From: NNWHEN <learning@nnwhen.com>
Date: Tue, 14 Jan 2025 10:35:31 +0200
Subject: [PATCH 1/3] Poetry Re-Organised
---
poetry/index.html | 6 +-----
1 file changed, 1 insertion(+), 5 deletions(-)
diff --git a/poetry/index.html b/poetry/index.html
index 6b5f1b6..d237a16 100644
--- a/poetry/index.html
+++ b/poetry/index.html
@@ -177,7 +177,7 @@
</li>
</ol>
- <h2>Non-Series Poems</h2>
+ <h2>Standalone</h2>
<ul>
<li>
<a href="you-remind-me-of-it.html">You Remind Me Of It</a>
@@ -200,10 +200,6 @@
<li>
<a href="inspiring.html">Inspiring</a>
</li>
- </ul>
-
- <h2>More Experimental Than Usual</h2>
- <ul>
<li>
<a href="stars.html">Stars</a>
</li>
From f5fc53d551a6bdec1d95725abd4b3a621624051f286d44971385dd2ea62bb0ca Mon Sep 17 00:00:00 2001
From: NNWHEN <learning@nnwhen.com>
Date: Tue, 14 Jan 2025 11:07:04 +0200
Subject: [PATCH 2/3] Added poem: brazen word token i
---
poetry/index.html | 3 +++
1 file changed, 3 insertions(+)
diff --git a/poetry/index.html b/poetry/index.html
index d237a16..a51d735 100644
--- a/poetry/index.html
+++ b/poetry/index.html
@@ -191,6 +191,9 @@
<li>
<a href="destroy-the-map.html">Destroy The Map</a>
</li>
+ <li>
+ <a href="brazen-word-token-i.html">Brazen Word (Token I)</a>
+ </li>
<li>
<a href="crackle.html">Crackle</a>
</li>
From a1b313f0450074131bdd6da2395555a08b3c42fa28a6a7ae9d0ed836576a699c Mon Sep 17 00:00:00 2001
From: NNWHEN <learning@nnwhen.com>
Date: Tue, 14 Jan 2025 11:44:05 +0200
Subject: [PATCH 3/3] Inclusion of Content Warnings
---
poetry/an-obsidian.html | 20 ++++++++---
poetry/blackened-dust.html | 22 +++++++++---
poetry/brazen-word-token-i.html | 21 ++++++++---
poetry/crackle.html | 22 +++++++++---
poetry/destroy-the-map.html | 21 ++++++++---
poetry/i-am-art.html | 21 ++++++++---
poetry/inspiring.html | 22 +++++++++---
poetry/into-the-dunes.html | 22 +++++++++---
.../red-and-purple-and-amber-and-black.html | 26 +++++++++++---
poetry/stars.html | 20 ++++++++---
poetry/this-will-destroy-you.html | 23 +++++++++---
poetry/you-remind-me-of-it.html | 20 ++++++++---
style.css | 35 +++++++++++++++++++
13 files changed, 247 insertions(+), 48 deletions(-)
diff --git a/poetry/an-obsidian.html b/poetry/an-obsidian.html
index ae96ea6..110dd7e 100644
--- a/poetry/an-obsidian.html
+++ b/poetry/an-obsidian.html
@@ -51,7 +51,7 @@
/>
</head>
<body>
- <a class="skip-to-content" href="#poem">Skip to main content</a>
+ <a class="skip-to-content" href="#content-warnings">Skip to main content</a>
<header>
<div role="img" aria-label="nnwhen logo and banner" id="header-img-group">
@@ -145,10 +145,18 @@
</a>
</aside>
+ <section id="content-warnings">
+ <h1>Content Warnings</h1>
+ <ul>
+ <li>Sexually Suggestive</li>
+ </ul>
+ </section>
+
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<main id="poem">
- <p style="text-align: right; margin: 0; margin-right: 30px">
- <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
- </p>
<hr />
<h1>An Obsidian</h1>
<hr />
@@ -183,6 +191,10 @@
<hr />
</main>
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<footer id="free">
<a href="../our-siblings.html"
>Free Our People</a
diff --git a/poetry/blackened-dust.html b/poetry/blackened-dust.html
index 39b9f42..392aa32 100644
--- a/poetry/blackened-dust.html
+++ b/poetry/blackened-dust.html
@@ -54,7 +54,7 @@
/>
</head>
<body>
- <a class="skip-to-content" href="#poem">Skip to main content</a>
+ <a class="skip-to-content" href="#content-warnings">Skip to main content</a>
<header>
<div role="img" aria-label="nnwhen logo and banner" id="header-img-group">
@@ -148,10 +148,20 @@
</a>
</aside>
+ <section id="content-warnings">
+ <h1>Content Warnings</h1>
+ <ul>
+ <li>Familial Loss</li>
+ <li>Intrusive Thoughts</li>
+ <li>Political Persecution</li>
+ </ul>
+ </section>
+
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<main id="poem">
- <p style="text-align: right; margin: 0; margin-right: 30px">
- <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
- </p>
<hr />
<h1>Blackened Dust</h1>
<hr />
@@ -212,6 +222,10 @@
<hr />
</main>
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<footer id="free">
<a href="../our-siblings.html"
>Free Our People</a
diff --git a/poetry/brazen-word-token-i.html b/poetry/brazen-word-token-i.html
index f63954a..fe38fd2 100644
--- a/poetry/brazen-word-token-i.html
+++ b/poetry/brazen-word-token-i.html
@@ -60,7 +60,7 @@
/>
</head>
<body>
- <a class="skip-to-content" href="#poem">Skip to main content</a>
+ <a class="skip-to-content" href="#content-warnings">Skip to main content</a>
<header>
<div role="img" aria-label="nnwhen logo and banner" id="header-img-group">
@@ -154,10 +154,19 @@
</a>
</aside>
+ <section id="content-warnings">
+ <h1>Content Warnings</h1>
+ <ul>
+ <li>Gun Violence</li>
+ <li>Blood</li>
+ </ul>
+ </section>
+
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<main id="poem">
- <p style="text-align: right; margin: 0; margin-right: 30px">
- <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
- </p>
<hr />
<h1>Brazen Word (Token I)</h1>
<hr />
@@ -177,6 +186,10 @@
<hr />
</main>
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<footer id="free">
<a href="../our-siblings.html"
>Free Our People</a
diff --git a/poetry/crackle.html b/poetry/crackle.html
index 5f4e1b4..9e3240c 100644
--- a/poetry/crackle.html
+++ b/poetry/crackle.html
@@ -54,7 +54,7 @@
/>
</head>
<body>
- <a class="skip-to-content" href="#poem">Skip to main content</a>
+ <a class="skip-to-content" href="#content-warnings">Skip to main content</a>
<header>
<div role="img" aria-label="nnwhen logo and banner" id="header-img-group">
@@ -148,10 +148,20 @@
</a>
</aside>
+ <section id="content-warnings">
+ <h1>Content Warnings</h1>
+ <ul>
+ <li>Body Horror</li>
+ <li>Paranoia</li>
+ <li>Dissolving Coherence</li>
+ </ul>
+ </section>
+
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<main id="poem">
- <p style="text-align: right; margin: 0; margin-right: 30px">
- <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
- </p>
<hr />
<h1>Crackle</h1>
<hr />
@@ -182,6 +192,10 @@
<hr />
</main>
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<footer id="free">
<a href="../our-siblings.html"
>Free Our People</a
diff --git a/poetry/destroy-the-map.html b/poetry/destroy-the-map.html
index 524cb53..f96ba51 100644
--- a/poetry/destroy-the-map.html
+++ b/poetry/destroy-the-map.html
@@ -60,7 +60,7 @@
</style>
</head>
<body>
- <a class="skip-to-content" href="#poem">Skip to main content</a>
+ <a class="skip-to-content" href="#content-warnings">Skip to main content</a>
<header>
<div role="img" aria-label="nnwhen logo and banner" id="header-img-group">
@@ -154,10 +154,19 @@
</a>
</aside>
+ <section id="content-warnings">
+ <h1>Content Warnings</h1>
+ <ul>
+ <li>Dissolving Coherence</li>
+ <li>Abstract Self-Harm parallels</li>
+ </ul>
+ </section>
+
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<main id="poem">
- <p style="text-align: right; margin: 0; margin-right: 30px">
- <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
- </p>
<hr />
<h1>Destroy The Map</h1>
<hr />
@@ -221,6 +230,10 @@
<hr />
</main>
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<footer id="free">
<a href="../our-siblings.html"
>Free Our People</a
diff --git a/poetry/i-am-art.html b/poetry/i-am-art.html
index f1a9dda..2f94cfc 100644
--- a/poetry/i-am-art.html
+++ b/poetry/i-am-art.html
@@ -54,7 +54,7 @@
/>
</head>
<body>
- <a class="skip-to-content" href="#poem">Skip to main content</a>
+ <a class="skip-to-content" href="#content-warnings">Skip to main content</a>
<header>
<div role="img" aria-label="nnwhen logo and banner" id="header-img-group">
@@ -148,10 +148,19 @@
</a>
</aside>
+ <section id="content-warnings">
+ <h1>Content Warnings</h1>
+ <ul>
+ <li>Body Horror</li>
+ <li>Dissolving Coherence</li>
+ </ul>
+ </section>
+
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<main id="poem">
- <p style="text-align: right; margin: 0; margin-right: 30px">
- <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
- </p>
<hr />
<h1>I am art</h1>
<hr />
@@ -217,6 +226,10 @@
<hr />
</main>
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<footer id="free">
<a href="../our-siblings.html"
>Free Our People</a
diff --git a/poetry/inspiring.html b/poetry/inspiring.html
index 4de06a4..2ed2681 100644
--- a/poetry/inspiring.html
+++ b/poetry/inspiring.html
@@ -54,7 +54,7 @@
/>
</head>
<body>
- <a class="skip-to-content" href="#poem">Skip to main content</a>
+ <a class="skip-to-content" href="#content-warnings">Skip to main content</a>
<header>
<div role="img" aria-label="nnwhen logo and banner" id="header-img-group">
@@ -148,10 +148,20 @@
</a>
</aside>
+ <section id="content-warnings">
+ <h1>Content Warnings</h1>
+ <ul>
+ <li>Mentions of a Church</li>
+ <li>Vague allusion to Self-Harm</li>
+ <li>Dissolving Coherence</li>
+ </ul>
+ </section>
+
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<main id="poem">
- <p style="text-align: right; margin: 0; margin-right: 30px">
- <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
- </p>
<hr />
<h1>Inspiring</h1>
<hr />
@@ -176,6 +186,10 @@
<hr />
</main>
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<footer id="free">
<a href="../our-siblings.html"
>Free Our People</a
diff --git a/poetry/into-the-dunes.html b/poetry/into-the-dunes.html
index bfefc81..e88519b 100644
--- a/poetry/into-the-dunes.html
+++ b/poetry/into-the-dunes.html
@@ -54,7 +54,7 @@
/>
</head>
<body>
- <a class="skip-to-content" href="#poem">Skip to main content</a>
+ <a class="skip-to-content" href="#content-warnings">Skip to main content</a>
<header>
<div role="img" aria-label="nnwhen logo and banner" id="header-img-group">
@@ -148,10 +148,20 @@
</a>
</aside>
+ <section id="content-warnings">
+ <h1>Content Warnings</h1>
+ <ul>
+ <li>Undergoing Death</li>
+ <li>Blood</li>
+ <li>Unmentioned Gun Violence</li>
+ </ul>
+ </section>
+
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<main id="poem">
- <p style="text-align: right; margin: 0; margin-right: 30px">
- <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
- </p>
<hr />
<h1>Into The Dunes</h1>
<hr />
@@ -193,6 +203,10 @@
<hr />
</main>
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<footer id="free">
<a href="../our-siblings.html"
>Free Our People</a
diff --git a/poetry/red-and-purple-and-amber-and-black.html b/poetry/red-and-purple-and-amber-and-black.html
index 2276ad2..0fbf528 100644
--- a/poetry/red-and-purple-and-amber-and-black.html
+++ b/poetry/red-and-purple-and-amber-and-black.html
@@ -54,7 +54,7 @@
/>
</head>
<body>
- <a class="skip-to-content" href="#poem">Skip to main content</a>
+ <a class="skip-to-content" href="#content-warnings">Skip to main content</a>
<header>
<div role="img" aria-label="nnwhen logo and banner" id="header-img-group">
@@ -148,10 +148,24 @@
</a>
</aside>
+ <section id="content-warnings">
+ <h1>Content Warnings</h1>
+ <ul>
+ <li>War</li>
+ <li>Sickness</li>
+ <li>Famine</li>
+ <li>Death</li>
+ <li>Gore</li>
+ <li>Drowning</li>
+ <li>Mention of Religion</li>
+ </ul>
+ </section>
+
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<main id="poem">
- <p style="text-align: right; margin: 0; margin-right: 30px">
- <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
- </p>
<hr />
<h1>Red and Purple and Amber and Black</h1>
<hr />
@@ -222,6 +236,10 @@
<hr />
</main>
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<footer id="free">
<a href="../our-siblings.html"
>Free Our People</a
diff --git a/poetry/stars.html b/poetry/stars.html
index 2b3863e..003b98a 100644
--- a/poetry/stars.html
+++ b/poetry/stars.html
@@ -63,7 +63,7 @@
</style>
</head>
<body>
- <a class="skip-to-content" href="#poem">Skip to main content</a>
+ <a class="skip-to-content" href="#content-warnings">Skip to main content</a>
<header>
<div role="img" aria-label="nnwhen logo and banner" id="header-img-group">
@@ -157,10 +157,18 @@
</a>
</aside>
+ <section id="content-warnings">
+ <h1>Content Warnings</h1>
+ <ul>
+ <li>Existentialism</li>
+ </ul>
+ </section>
+
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<main id="poem">
- <p style="text-align: right; margin: 0; margin-right: 30px">
- <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
- </p>
<hr />
<h1>Stars</h1>
<hr />
@@ -204,6 +212,10 @@
<hr />
</main>
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<footer id="free">
<a href="../our-siblings.html"
>Free Our People</a
diff --git a/poetry/this-will-destroy-you.html b/poetry/this-will-destroy-you.html
index c13d0ee..e0d355e 100644
--- a/poetry/this-will-destroy-you.html
+++ b/poetry/this-will-destroy-you.html
@@ -54,7 +54,7 @@
/>
</head>
<body>
- <a class="skip-to-content" href="#poem">Skip to main content</a>
+ <a class="skip-to-content" href="#content-warnings">Skip to main content</a>
<header>
<div role="img" aria-label="nnwhen logo and banner" id="header-img-group">
@@ -148,10 +148,21 @@
</a>
</aside>
+ <section id="content-warnings">
+ <h1>Content Warnings</h1>
+ <ul>
+ <li>Dementia</li>
+ <li>Derealisation</li>
+ <li>Grief</li>
+ <li>Allusions to Death</li>
+ </ul>
+ </section>
+
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<main id="poem">
- <p style="text-align: right; margin: 0; margin-right: 30px">
- <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
- </p>
<hr />
<h1>This Will Destroy You</h1>
<hr />
@@ -172,6 +183,10 @@
<hr />
</main>
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<footer id="free">
<a href="../our-siblings.html"
>Free Our People</a
diff --git a/poetry/you-remind-me-of-it.html b/poetry/you-remind-me-of-it.html
index 4c675a6..bd3965a 100644
--- a/poetry/you-remind-me-of-it.html
+++ b/poetry/you-remind-me-of-it.html
@@ -54,7 +54,7 @@
/>
</head>
<body>
- <a class="skip-to-content" href="#poem">Skip to main content</a>
+ <a class="skip-to-content" href="#content-warnings">Skip to main content</a>
<header>
<div role="img" aria-label="nnwhen logo and banner" id="header-img-group">
@@ -148,10 +148,18 @@
</a>
</aside>
+ <section id="content-warnings">
+ <h1>Content Warnings</h1>
+ <ul>
+ <li>Shame</li>
+ </ul>
+ </section>
+
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<main id="poem">
- <p style="text-align: right; margin: 0; margin-right: 30px">
- <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
- </p>
<hr />
<h1>You Remind Me Of It</h1>
<hr />
@@ -186,6 +194,10 @@
<hr />
</main>
+ <p class="back">
+ <a href="index.html" aria-label="Go back to poem-list">↵ Back</a>
+ </p>
+
<footer id="free">
<a href="../our-siblings.html"
>Free Our People</a
diff --git a/style.css b/style.css
index 6c19f1a..93870eb 100644
--- a/style.css
+++ b/style.css
@@ -87,6 +87,41 @@ a:hover {
}
}
+#content-warnings {
+ margin: 15px 0;
+ padding: 2px;
+
+ background-color: var(--accent-2);
+ color: var(--background);
+ font-family: "mono", monospace;
+ text-align: center;
+}
+#content-warnings h1 {
+ font-size: 2rem;
+ margin: 10px 0;
+}
+#content-warnings ul {
+ display: flex;
+ flex-wrap: wrap;
+ max-width: 1200px;
+ margin: 16px auto;
+
+ list-style-type: none;
+ padding: 0;
+ justify-content: space-evenly;
+}
+#content-warnings ul li {
+ padding: 5px 10px;
+ min-width: 30%;
+ font-size: 1.2rem;
+}
+.back {
+ font-size: 1.2rem;
+ text-align: right;
+ width: min(700px, 90%);
+ margin: auto;
+}
+
/* Header */
/* Banner */
header {