MARGINES — redakcyjny magazyn miejski

<header><a class="masthead" href="#start">margines.</a><nav aria-label="Nawigacja"><a href="#czytelnia">Czytelnia</a><a href="#numer">W numerze</a></nav><span>Magazyn o miejscach i ludziach</span></header><main><section class="cover" id="start"><div class="cover-copy"><p class="issue">Wydanie tematyczne / Miasto po godzinach</p><h1>Życie między<br>budynkami.</h1><p>Najciekawsze historie nie zawsze trafiają na pierwszą stronę. Czasem wystarczy skręcić w boczną ulicę.</p><a href="#czytelnia">Otwórz czytelnię</a></div><figure class="city-art"><svg viewBox="0 0 550 600" role="img" aria-label="Graficzna ilustracja miejskich kamienic i przechodnia"><rect width="550" height="600" fill="#a41446"/><circle cx="390" cy="155" r="98" fill="#f6d9e2"/><path d="M0 260L125 185V550H0ZM160 100L300 160V550H160ZM330 310L455 250V550H330ZM470 200L550 235V550H470Z" fill="#f6d9e2"/><g fill="#a41446"><path d="M30 285H65V335H30ZM82 260H107V315H82ZM30 370H65V420H30ZM82 350H107V400H82ZM190 165H225V220H190ZM245 188H275V242H245ZM190 265H225V320H190ZM245 288H275V342H245ZM190 365H225V420H190ZM245 388H275V442H245ZM355 335H390V380H355ZM410 310H438V355H410ZM355 415H390V460H355ZM410 390H438V435H410Z"/></g><path d="M0 570L550 500V600H0" fill="#50233a"/><g fill="#50233a"><circle cx="310" cy="428" r="14"/><path d="M301 448L326 452L335 498L318 505L325 550H313L300 503L285 548H273L293 490Z"/></g><path d="M0 90Q170 180 550 45M0 115Q170 205 550 70" fill="none" stroke="#50233a" stroke-width="2"/></svg><figcaption>Spacer zaczyna się tam, gdzie kończy się pośpiech.</figcaption></figure></section><section class="reading" id="czytelnia"><div class="contents"><p>Czytelnia</p><h2>Wybierz<br>swój wątek.</h2><div role="group" aria-label="Eseje"><button data-story="0" aria-pressed="true">O ławkach i rozmowach</button><button data-story="1" aria-pressed="false">Miasto po deszczu</button><button data-story="2" aria-pressed="false">Sklep na rogu</button></div></div><article aria-live="polite"><span id="story-meta">Esej / 2 min czytania</span><h3 id="story-title">O ławkach i rozmowach</h3><p id="story-intro">Ławka jest małą obietnicą: możesz tu zostać, nawet jeśli niczego nie kupisz. W mieście pełnym witryn i zamkniętych drzwi to całkiem dużo.</p><p id="story-body">Najlepsze ławki stoją trochę z boku. Widać z nich ludzi, ale nie trzeba schodzić nikomu z drogi. Ktoś odkłada torbę. Ktoś kończy książkę. Z dwóch samotnych chwil może powstać rozmowa.</p><p class="byline">Tekst: redakcja Marginesu</p></article></section><section class="issue-list" id="numer"><h2>Ten numer jest o zauważaniu.</h2><p>O cieniu drzew na chodniku. O sklepach, które znają swoich sąsiadów. O małych decyzjach zmieniających wspólną przestrzeń.</p><div><span>Rozmowy</span><span>Spacery</span><span>Fotografie</span><span>Eseje</span></div></section></main><footer><strong>margines.</strong><span>Jest miejsce na inną perspektywę.</span></footer>

*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input{touch-action:manipulation}button,a{color:inherit}button{cursor:pointer}a{text-underline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:5px}button{min-height:44px}svg{display:block;max-width:100%}p{line-height:1.65;max-width:62ch}h1,h2,p,figure{margin:0}header,footer{display:flex;align-items:center;justify-content:space-between;gap:20px}nav{display:flex;flex-wrap:wrap;gap:24px}nav a{min-height:44px;display:flex;align-items:center}h2{font-size:clamp(28px,4vw,52px);line-height:1.12}section{scroll-margin-top:24px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(max-width:650px){header,footer{align-items:flex-start;flex-wrap:wrap}nav{gap:16px}}
body{background:#f6d9e2;color:#50233a;font-family:Georgia,"Times New Roman",serif}header{padding:24px 5%;border-bottom:1px solid #a41446}.masthead{font-size:36px;letter-spacing:-2px;font-weight:bold;text-decoration:none}header>span,nav{font:13px Arial,sans-serif}.cover{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:6%;padding:55px 5% 60px}.issue{font:13px Arial,sans-serif;color:#a41446}.cover h1{font-size:clamp(52px,6.7vw,105px);line-height:1.06;font-weight:normal;letter-spacing:-4px;margin:28px 0}.cover-copy>p:not(.issue){font-size:20px;max-width:35ch}.cover-copy>a{display:inline-block;margin-top:32px;padding:12px 0;font:700 15px Arial,sans-serif}.city-art svg{width:100%;max-height:560px}.city-art figcaption{font:12px/1.5 Arial,sans-serif;margin-top:12px}.reading{padding:70px 7%;display:grid;grid-template-columns:1fr 1.5fr;gap:12%;background:#fff9fa;border-top:1px solid #a41446;border-bottom:1px solid #a41446}.contents>p{font:13px Arial,sans-serif;margin-bottom:20px}.contents h2{font-weight:normal}.contents [role="group"]{display:flex;flex-direction:column;margin-top:30px}.contents button{background:none;color:#50233a;border:0;border-bottom:1px solid #c8a5b2;text-align:left;padding:18px 0;font:15px Arial,sans-serif}.contents button[aria-pressed="true"]{font-weight:bold;color:#a41446;border-bottom:3px solid #a41446}.reading article>span,.byline{font:12px Arial,sans-serif}.reading h3{font-size:clamp(28px,3vw,42px);font-weight:normal;margin:18px 0 24px}.reading article p{font-size:19px;line-height:1.85;margin-bottom:22px}.reading article p.byline{font:12px Arial,sans-serif;margin:30px 0 0}.issue-list{padding:70px 7%;max-width:1100px;margin:auto;text-align:center}.issue-list h2{font-weight:normal}.issue-list>p{margin:25px auto;font-size:20px}.issue-list>div{display:flex;flex-wrap:wrap;justify-content:center;gap:25px;font:14px Arial,sans-serif;border-top:1px solid #a41446;padding-top:28px}footer{padding:24px 5%;background:#a41446;color:#fff9fa}footer strong{font-size:28px}footer span{font:12px Arial,sans-serif}@media(max-width:700px){header>span{display:none}.cover,.reading{grid-template-columns:1fr;gap:38px}.cover{padding-top:35px}.cover h1{font-size:58px;letter-spacing:-3px}.city-art{max-width:430px}.reading{padding:45px 7%}.contents h2 br{display:none}.contents [role="group"]{margin-top:15px}.reading article p{font-size:18px}}

$(function(){
const stories=[['O ławkach i rozmowach','Ławka jest małą obietnicą: możesz tu zostać, nawet jeśli niczego nie kupisz. W mieście pełnym witryn i zamkniętych drzwi to całkiem dużo.','Najlepsze ławki stoją trochę z boku. Widać z nich ludzi, ale nie trzeba schodzić nikomu z drogi. Ktoś odkłada torbę. Ktoś kończy książkę. Z dwóch samotnych chwil może powstać rozmowa.'],['Miasto po deszczu','Po deszczu znajoma ulica zmienia proporcje. Kałuża mieści całą kamienicę, a światła tramwaju rysują na asfalcie drugie tory.','Przechodnie wybierają nowe ścieżki między mokrymi płytami. Ktoś podaje komuś parasol. Pod markizą piekarni przez kilka minut istnieje mała poczekalnia bez rozkładu jazdy.'],['Sklep na rogu','Nie każdy sklep jest tylko miejscem zakupów. W niektórych wiadomo, kto lubi chleb mocniej wypieczony i komu odłożyć ostatnią gazetę.','Takie miejsca przechowują pamięć okolicy. Zmieniają się szyldy i rozkład półek, ale krótkie rozmowy przy ladzie wciąż łączą sąsiadów, którzy inaczej mijaliby się bez słowa.']];$('[data-story]').on('click',function(){const story=stories[Number($(this).attr('data-story'))];$('[data-story]').attr('aria-pressed','false');$(this).attr('aria-pressed','true');$('#story-title').text(story[0]);$('#story-intro').text(story[1]);$('#story-body').text(story[2]);});
});