<html lang="en">

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>Community stories · BlockNSFW</title>

<script src="ui/scheme.js"></script>

<link rel="stylesheet" href="ui/tokens.css" />

<link rel="stylesheet" href="ui/components.css" />

<style>

/* Community stories. The page opens on its one deep band: a single voice

:root {

--page-gutter: clamp(var(--space-4), 4vw, var(--space-5));

}

html.dialog-open {

overflow: hidden;

}

body {

min-height: 100vh;

}

.shell {

max-width: calc(60rem + 2 * var(--page-gutter));

margin-inline: auto;

padding-inline: var(--page-gutter);

}

/* ── A voice from the community ──────────────────────────────────── */

.voice-inner {

padding-block: var(--space-6) var(--space-7);

}

.voice-eyebrow {

margin-top: var(--space-7);

}

.voice-figure {

display: flex;

align-items: flex-start;

gap: var(--space-5);

margin: var(--space-4) 0 0;

}

.voice-mark {

flex: none;

font-family: var(--font-display);

font-size: 96px;

line-height: 0.8;

color: var(--color-band-signal);

}

.voice-body {

min-width: 0;

}

.voice-quote {

margin: 0;

font-family: var(--font-display);

font-style: italic;

font-size: clamp(28px, 3.6vw, 44px);

font-weight: 400;

line-height: 1.25;

letter-spacing: -0.01em;

color: var(--color-on-band);

text-wrap: pretty;

overflow-wrap: anywhere;

}

.voice-cite {

margin-top: var(--space-4);

}

.voice-actions {

display: flex;

flex-wrap: wrap;

gap: var(--space-3);

margin-top: var(--space-6);

}

@media (max-width: 40rem) {

.voice-figure {

gap: var(--space-3);

}

.voice-mark {

font-size: 64px;

}

}

/* ── The column ──────────────────────────────────────────────────── */

.page-head {

padding-block: var(--space-7) var(--space-6);

border-bottom: 1px solid var(--color-ink);

}

.lede {

margin-top: var(--space-3);

max-width: var(--measure);

font-size: 16px;

color: var(--color-ink-2);

}

.tags {

margin-top: var(--space-3);

}

.guidelines {

margin-top: var(--space-7);

}

.guideline-list {

display: grid;

gap: var(--space-3);

margin: var(--space-4) 0 0;

padding: 0;

list-style: none;

}

.guideline {

display: flex;

gap: var(--space-3);

font-size: 14px;

line-height: 1.5;

color: var(--color-ink-2);

}

.guideline .index {

flex: none;

color: var(--color-brass);

font-family: var(--font-mono);

font-size: 12px;

line-height: 1.75;

}

.stories {

margin-top: var(--space-7);

}

.feed-bar {

display: flex;

flex-wrap: wrap;

align-items: center;

gap: var(--space-2) var(--space-4);

padding-bottom: var(--space-3);

}

.feed-bar .btn {

margin-left: auto;

}

.feed-state {

padding: var(--row-y-loose) 0;

border-top: 1px solid var(--color-rule);

}

.feed-state:empty {

padding: 0;

border-top: 0;

}

.state-title {

font-weight: 500;

}

.state-detail {

margin-top: var(--space-1);

font-size: 14px;

}

/* A story: its title and words in the serif, folded after four lines

.feed:not(:empty) {

border-bottom: 1px solid var(--color-rule);

}

.story {

padding: var(--space-6) 0;

border-top: 1px solid var(--color-rule);

}

.story-title {

font-family: var(--font-display);

font-size: 26px;

font-weight: 400;

line-height: 1.25;

overflow-wrap: anywhere;

}

.story-body {

font-family: var(--font-display);

font-size: 19px;

line-height: 1.7;

color: var(--color-ink);

white-space: pre-wrap;

overflow-wrap: anywhere;

}

.story-title + .story-body {

margin-top: var(--space-3);

}

.story-body.is-folded {

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 4;

line-clamp: 4;

overflow: hidden;

}

.story .story-more {

margin-top: var(--space-2);

font-size: 14px;

font-weight: 500;

}

.story-sign {

margin-top: var(--space-3);

font-family: var(--font-display);

font-size: 17px;

font-style: italic;

color: var(--color-ink-2);

}

.story-actions {

display: flex;

flex-wrap: wrap;

align-items: center;

gap: var(--space-2) var(--space-4);

margin-top: var(--space-4);

}

.story-actions .btn-text {

min-height: 28px;

}

.story-like {

gap: var(--space-2);

}

.story-like-count {

color: var(--color-pine);

}

.story-like:not([aria-pressed="true"]) .icon {

display: none;

}

.story-like[aria-pressed="true"],

.story-like[aria-pressed="true"]:hover {

background: var(--color-pine-3);

border-color: var(--color-pine);

color: var(--color-pine);

}

.feed-foot {

margin-top: var(--space-5);

}

.feed-foot:empty {

display: none;

}

/* The last word: an invitation to write the next one. */

.invite {

margin-top: var(--space-7);

padding: var(--space-6);

border: 1px solid var(--color-rule);

}

.invite-title {

margin-top: var(--space-3);

font-family: var(--font-display);

font-size: 28px;

font-weight: 400;

line-height: 1.2;

text-wrap: balance;

}

.invite-text {

margin-top: var(--space-3);

max-width: var(--measure);

color: var(--color-ink-2);

}

.invite .btn {

margin-top: var(--space-5);

}

.page-foot {

margin-top: var(--space-7);

padding-bottom: var(--space-7);

}

/* Wide enough: the title runs across the top, how we write here sits on

@media (min-width: 52rem) {

main.shell {

display: grid;

grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);

column-gap: var(--space-7);

align-items: start;

}

.page-head {

grid-column: 1 / -1;

}

.guidelines {

grid-column: 1;

grid-row: 2;

position: sticky;

top: var(--space-5);

}

.stories {

grid-column: 2;

grid-row: 2;

}

.invite {

grid-column: 2;

grid-row: 3;

}

/* As tall as the stories' bar beside it (its Refresh button), so the

.guidelines > h2 {

display: flex;

align-items: center;

min-height: 30px;

}

}

/* The share dialog is wider than the default: it holds a story. */

.share-dialog {

max-width: 36rem;

}

.dialog-head {

display: flex;

align-items: flex-start;

justify-content: space-between;

gap: var(--space-3);

}

.icon-btn {

display: inline-flex;

flex: none;

align-items: center;

justify-content: center;

width: 28px;

height: 28px;

margin: -4px -6px 0 0;

border-radius: var(--radius-xs);

color: var(--color-ink-2);

transition: color var(--dur-state) var(--ease-out-quint);

}

.icon-btn:hover {

color: var(--color-ink);

}

.share-dialog textarea.input {

min-height: 12rem;

}

.share-counter.is-near {

color: var(--color-ink);

}

</style>

<div id="page">

<!-- One short story from the feed, set large. The sentence here stands

<aside class="band-pine voice" aria-label="A voice from the community">

<div class="shell voice-inner">

<a class="meta arrow-link" href="options.html">

<svg class="icon icon-12 icon-left" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M13.5 8h-11M6.5 4l-4 4 4 4" /></svg>

Settings

</a>

<p class="meta voice-eyebrow">A voice from the community</p>

<figure class="voice-figure">

<span class="voice-mark" aria-hidden="true">“</span>

<div class="voice-body">

<blockquote class="voice-quote" id="voice-quote">You’re not alone. These are stories from people who have been where you are.</blockquote>

<figcaption class="meta voice-cite" id="voice-cite" hidden></figcaption>

<div class="voice-actions">

<button type="button" class="btn btn-primary" id="composer-btn" data-open-share>Share your story</button>

<button type="button" class="btn btn-ghost" id="voice-next" hidden>Read another →</button>

</div>

</div>

</figure>

</div>

</aside>

<main class="shell">

<header class="page-head">

<h1 class="title title-page">Community stories</h1>

<p class="lede">Anonymous stories from people quitting porn and rebuilding their lives. Read what helped them, and share what’s helping you. You’re not alone.</p>

<p class="meta tags">anonymous · reviewed · supportive</p>

</header>

<section class="guidelines" aria-labelledby="guidelines-head">

<h2 class="meta" id="guidelines-head">How we write here</h2>

<ol class="guideline-list">

<li class="guideline"><span class="index tnum" aria-hidden="true">01</span><span>Be kind and supportive. Don’t judge.</span></li>

<li class="guideline"><span class="index tnum" aria-hidden="true">02</span><span>Stay anonymous. Leave out names, places and anything else that could identify you.</span></li>

<li class="guideline"><span class="index tnum" aria-hidden="true">03</span><span>Keep it non-graphic. Write about recovery, not explicit detail.</span></li>

<li class="guideline"><span class="index tnum" aria-hidden="true">04</span><span>Every story is reviewed before it appears.</span></li>

</ol>

</section>

<section class="stories" aria-labelledby="stories-head">

<h2 class="visually-hidden" id="stories-head">Stories</h2>

<div class="feed-bar">

<p class="meta tnum" id="count" hidden></p>

<button type="button" class="btn btn-ghost btn-sm" id="refresh-btn">Refresh</button>

</div>

<div class="feed-state" id="feed-state" aria-live="polite"><p class="ink-2">Loading stories…</p></div>

<div class="feed" id="feed" aria-busy="true"></div>

<div class="feed-foot" id="feed-footer"></div>

</section>

<section class="invite band-sheet" aria-labelledby="invite-head">

<p class="meta">Before you write</p>

<h2 class="invite-title" id="invite-head">Your story could be the one someone needs tonight.</h2>

<p class="invite-text">It stays anonymous, and it’s read before it appears. You can share one a week.</p>

<button type="button" class="btn btn-primary" data-open-share>Share your story</button>

</section>

</main>

<footer class="shell meta page-foot">BlockNSFW · monolab</footer>

</div>

<!-- Short confirmations, such as Copied, for screen readers. -->

<p class="visually-hidden" id="announcer" role="status" aria-live="polite"></p>

<!-- Share dialog: write a story and send it for review. -->

<div class="dialog-scrim hidden" id="share-modal" aria-hidden="true">

<div class="dialog share-dialog" role="dialog" aria-modal="true" aria-labelledby="share-modal-title" aria-describedby="share-modal-desc" tabindex="-1">

<div class="dialog-head">

<h2 class="dialog-title" id="share-modal-title">Share your story</h2>

<button type="button" class="icon-btn" id="share-close" aria-label="Close">

<svg class="icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M3.5 3.5l9 9M12.5 3.5l-9 9" /></svg>

</button>

</div>

<p class="dialog-desc" id="share-modal-desc">Your story is anonymous and is reviewed before it appears. You can share one a week.</p>

<div class="dialog-body">

<div class="field">

<label class="field-label" for="share-title-input">Title (optional)</label>

<input type="text" class="input" id="share-title-input" maxlength="120"

placeholder="One year clean today" autocomplete="off" />

</div>

<div class="field">

<label class="field-label" for="share-content">Your story</label>

<textarea class="input" id="share-content" maxlength="2000" rows="8"

placeholder="What happened, what helped, and where you are now"

aria-describedby="share-counter share-error"></textarea>

<p class="field-hint mono tnum share-counter" id="share-counter">0 / 2000</p>

</div>

<p class="notice" id="share-status" role="status" tabindex="-1"></p>

<p class="field-error" id="share-error" role="alert"></p>

</div>

<div class="dialog-actions">

<button type="button" class="btn btn-ghost" id="share-cancel">Cancel</button>

<button type="button" class="btn btn-primary" id="share-submit">Post story</button>

</div>

</div>

</div>

<script src="shared/browser-key.js"></script>

<script src="appwrite-client.js"></script>

<script src="ui/icons.js"></script>

<script src="community.js"></script>