View this page as Raw (2016 brutalist) Neubrutalist (2021+) Stop the ticker

CONCRETE CLUB

a zine + collective for people who like websites that look like websites

Manifesto (v0.3, unfinished)

A button is a button. It should look like it can be pressed.
Links are blue and underlined because that is what links are.
The browser already has a default stylesheet. We are not ashamed of it.
Every page should load on a train going through a tunnel.
Show the grid. Then ignore it on purpose.

fig. 1 — "Stack", risograph, 2 colours

Back issues

All issues, newest first
#	Title	Pages	Status
07	Default Stylesheet	32	new
06	Visited Links Are Purple	28	in stock
05	The Fold Does Not Exist	24	sold out
04	Times New Roman, Again	20	sold out

Events

THU 19:00 Open studio. View-source night. free
SAT 14:00 Riso printing workshop 6 spots
SUN Closed. Go outside.

Join (it's free, there are no perks)

Guestbook (latest 3)

anna_k — 2 days ago: finally a site that doesn't ask me about cookies before I can read it
m. — last week: the table is beautiful. please never change the table.
a printer — last month: bring more green ink to the riso night

← prev · Plain Pages Webring · random · next →

<fieldset class="cc__switch" data-trait="toggle"> <legend>View this page as</legend> <span><input type="radio" name="cc-variant" id="cc-raw" value="raw" checked> <label for="cc-raw">Raw <small>(2016 brutalist)</small></label></span> <span><input type="radio" name="cc-variant" id="cc-neo" value="neo"> <label for="cc-neo">Neubrutalist <small>(2021+)</small></label></span> <span class="cc__still"><input type="checkbox" id="cc-still"> <label for="cc-still">Stop the ticker</label></span> </fieldset>

.cc:has(#cc-neo:checked) { --ink: #111; --paper: #fffdf5; --link: #111; --visited: #111; --face: 'Arial Black', 'Helvetica Neue', Inter, system-ui, sans-serif; --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --border: 3px solid #111; --shadow: 6px 6px 0 #111; --radius: 12px; background: #fde047; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 500; }

.cc__btn { padding: 12px 28px; border: var(--border); border-radius: 8px; background: #ff6b9d; color: #111; font: 900 18px var(--face); box-shadow: 5px 5px 0 #111; cursor: pointer; transition: transform 80ms, box-shadow 80ms; } .cc__btn:hover { background: #fb923c; } /* Pressing removes the offset: the button slides into its own shadow. */ .cc__btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 #111; }

.cc__ticker { overflow: hidden; border: var(--border); background: #000; color: #0f0; font: 14px/28px var(--mono); white-space: nowrap; } .cc__ticker-track { display: inline-flex; animation: e15-marquee 40s linear infinite; } .cc:has(#cc-still:checked) .cc__ticker-track { animation-play-state: paused; }