nnwhen/nnwhen.com
SHA256
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Inclusion of Content Warnings

Browse source
This commit is contained in:
NNWHEN 2025-01-14 11:44:05 +02:00
parent f5fc53d551
commit a1b313f045
13 changed files with 247 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
poetry/an-obsidian.html
View file

@ -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">&#x21B5; 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">&#x21B5; 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">&#x21B5; Back</a>
</p>
<footer id="free">
<a href="../our-siblings.html"
>&#x46;&#x72;&#x65;&#x65;&#x20;&#x4F;&#x75;&#x72;&#x20;&#x50;&#x65;&#x6F;&#x70;&#x6C;&#x65;</a

22
poetry/blackened-dust.html
View file

@ -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">&#x21B5; 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">&#x21B5; 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">&#x21B5; Back</a>
</p>
<footer id="free">
<a href="../our-siblings.html"
>&#x46;&#x72;&#x65;&#x65;&#x20;&#x4F;&#x75;&#x72;&#x20;&#x50;&#x65;&#x6F;&#x70;&#x6C;&#x65;</a

21
poetry/brazen-word-token-i.html
View file

@ -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">&#x21B5; 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">&#x21B5; 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">&#x21B5; Back</a>
</p>
<footer id="free">
<a href="../our-siblings.html"
>&#x46;&#x72;&#x65;&#x65;&#x20;&#x4F;&#x75;&#x72;&#x20;&#x50;&#x65;&#x6F;&#x70;&#x6C;&#x65;</a

22
poetry/crackle.html
View file

@ -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">&#x21B5; 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">&#x21B5; 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">&#x21B5; Back</a>
</p>
<footer id="free">
<a href="../our-siblings.html"
>&#x46;&#x72;&#x65;&#x65;&#x20;&#x4F;&#x75;&#x72;&#x20;&#x50;&#x65;&#x6F;&#x70;&#x6C;&#x65;</a

21
poetry/destroy-the-map.html
View file

@ -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">&#x21B5; 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">&#x21B5; 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">&#x21B5; Back</a>
</p>
<footer id="free">
<a href="../our-siblings.html"
>&#x46;&#x72;&#x65;&#x65;&#x20;&#x4F;&#x75;&#x72;&#x20;&#x50;&#x65;&#x6F;&#x70;&#x6C;&#x65;</a

21
poetry/i-am-art.html
View file

@ -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">&#x21B5; 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">&#x21B5; 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">&#x21B5; Back</a>
</p>
<footer id="free">
<a href="../our-siblings.html"
>&#x46;&#x72;&#x65;&#x65;&#x20;&#x4F;&#x75;&#x72;&#x20;&#x50;&#x65;&#x6F;&#x70;&#x6C;&#x65;</a

22
poetry/inspiring.html
View file

@ -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">&#x21B5; 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">&#x21B5; 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">&#x21B5; Back</a>
</p>
<footer id="free">
<a href="../our-siblings.html"
>&#x46;&#x72;&#x65;&#x65;&#x20;&#x4F;&#x75;&#x72;&#x20;&#x50;&#x65;&#x6F;&#x70;&#x6C;&#x65;</a

22
poetry/into-the-dunes.html
View file

@ -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">&#x21B5; 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">&#x21B5; 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">&#x21B5; Back</a>
</p>
<footer id="free">
<a href="../our-siblings.html"
>&#x46;&#x72;&#x65;&#x65;&#x20;&#x4F;&#x75;&#x72;&#x20;&#x50;&#x65;&#x6F;&#x70;&#x6C;&#x65;</a

26
poetry/red-and-purple-and-amber-and-black.html
View file

@ -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">&#x21B5; 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">&#x21B5; 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">&#x21B5; Back</a>
</p>
<footer id="free">
<a href="../our-siblings.html"
>&#x46;&#x72;&#x65;&#x65;&#x20;&#x4F;&#x75;&#x72;&#x20;&#x50;&#x65;&#x6F;&#x70;&#x6C;&#x65;</a

20
poetry/stars.html
View file

@ -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">&#x21B5; 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">&#x21B5; 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">&#x21B5; Back</a>
</p>
<footer id="free">
<a href="../our-siblings.html"
>&#x46;&#x72;&#x65;&#x65;&#x20;&#x4F;&#x75;&#x72;&#x20;&#x50;&#x65;&#x6F;&#x70;&#x6C;&#x65;</a

23
poetry/this-will-destroy-you.html
View file

@ -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">&#x21B5; 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">&#x21B5; 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">&#x21B5; Back</a>
</p>
<footer id="free">
<a href="../our-siblings.html"
>&#x46;&#x72;&#x65;&#x65;&#x20;&#x4F;&#x75;&#x72;&#x20;&#x50;&#x65;&#x6F;&#x70;&#x6C;&#x65;</a

20
poetry/you-remind-me-of-it.html
View file

@ -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">&#x21B5; 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">&#x21B5; 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">&#x21B5; Back</a>
</p>
<footer id="free">
<a href="../our-siblings.html"
>&#x46;&#x72;&#x65;&#x65;&#x20;&#x4F;&#x75;&#x72;&#x20;&#x50;&#x65;&#x6F;&#x70;&#x6C;&#x65;</a

35
style.css
View file

@ -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 {