mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
Youssef
c20fc5dd09
The theme that shipped in the first cut was quiet to a fault: outside the hero, its pages fell back to ruled prose. This revision gives the theme a constructive vocabulary and tightens the site integration around it. Theme (grid.md, rewritten): - A marks kit: period square, 3px bar, register crosshair, quarter-disc, stepped bars, dot module, border arrows, 45-degree diagonal, and giant cropped numerals, all locked to the column tracks. - The plate: at most one full-bleed flooded band per page as the poster moment, rails continuing across it. - A signal-ink axis: one ink per page, signal red (default), ultramarine, or surface-only signal yellow; two pages in a run never share the ink. - Section-object law: a band that is only prose has failed the theme. - Asymmetric occupancy (prose capped at 6 of 12 columns) and structural whitespace; grid-snapped hover geometry and an optional ticker. Site: - grid-01 example replaced with signal, a Basel poster festival page built on the revised theme; thumb regenerated at the 1400-wide full-page convention (the first cut shipped a 1600x1000 viewport crop that broke the hover scroll). - Grid tokens: serif slot resolves to the grotesk (the theme has no serif), doubled comment opener fixed, description updated. - Landing: grid headings follow the theme's lowercase display voice; hero copy updated to the signal-ink language. - main.js: grid added to THEME_GENRES (missing in the first cut). Consistency sweep the first cut missed: - custom-theme.md catalog lists still said 20 themes; now 21 with Grid. - components.css banner comment still said 20 themes.
218 lines
9.6 KiB
HTML
218 lines
9.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>signal, basel 2027</title>
|
|
<meta name="description" content="signal is the international poster and graphic design festival in Basel, 5 to 26 June 2027. Six strands, five venues, all within twelve minutes of Messeplatz on foot." />
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23fbfbfd'/%3E%3Crect x='6' y='6' width='13' height='13' fill='%23cf2e21'/%3E%3Cline x1='23' y1='2' x2='23' y2='30' stroke='%23d9dade' stroke-width='1'/%3E%3Cline x1='28' y1='2' x2='28' y2='30' stroke='%23d9dade' stroke-width='1'/%3E%3C/svg%3E" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<div class="rails" aria-hidden="true"></div>
|
|
|
|
<header class="topbar">
|
|
<div class="shell topbar__grid">
|
|
<a class="topbar__mark" href="#top">signal<span class="period period--sm" aria-hidden="true"></span></a>
|
|
<nav class="topbar__nav" aria-label="page">
|
|
<a href="#programme">programme</a>
|
|
<a href="#exhibitions">exhibitions</a>
|
|
<a href="#tickets">tickets</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="top">
|
|
|
|
<!-- 1 · hero -->
|
|
<section class="hero">
|
|
<div class="shell hero__grid">
|
|
<div class="hero__type">
|
|
<h1 class="display">signal<span class="period" aria-hidden="true"></span></h1>
|
|
<p class="label hero__meta">international poster and graphic design festival</p>
|
|
<p class="label hero__meta">basel · 5 to 26 june 2027</p>
|
|
</div>
|
|
<div class="hero__comp" role="img" aria-label="abstract poster composition built from quarter circles, stepped bars, a diagonal rule, and a registration mark">
|
|
<div class="comp">
|
|
<span class="comp__qdisc comp__qdisc--red"></span>
|
|
<span class="comp__qdisc comp__qdisc--ink"></span>
|
|
<span class="comp__diag"><i></i></span>
|
|
<span class="comp__steps">
|
|
<i></i><i></i><i></i><i></i>
|
|
</span>
|
|
<span class="register comp__register"><i></i></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2 · ticker -->
|
|
<div class="ticker" tabindex="0" aria-label="venues and dates, scrolling; hover or focus to pause">
|
|
<div class="ticker__track">
|
|
<span class="ticker__run">
|
|
hall five, messeplatz · opening 5 june · kaserne basel · workshops daily · voltahalle · screenings 21:00 · bahnhof sbb passage · type in transit · dreispitz · open studios, weekends · hall three · the print floor ·
|
|
</span>
|
|
<span class="ticker__run" aria-hidden="true">
|
|
hall five, messeplatz · opening 5 june · kaserne basel · workshops daily · voltahalle · screenings 21:00 · bahnhof sbb passage · type in transit · dreispitz · open studios, weekends · hall three · the print floor ·
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3 · programme index -->
|
|
<section class="programme" id="programme">
|
|
<span class="numeral programme__numeral" aria-hidden="true">27</span>
|
|
<div class="shell programme__grid">
|
|
<div class="programme__head">
|
|
<h2 class="section-title">programme</h2>
|
|
<p class="programme__lede">six strands run in parallel across the city. every venue sits within twelve minutes of messeplatz on foot.</p>
|
|
</div>
|
|
<ol class="index">
|
|
<li class="index__row">
|
|
<a class="index__link" href="#tickets">
|
|
<span class="index__title">posters in public</span>
|
|
<span class="label index__meta">hall five · 5 to 26 june</span>
|
|
<span class="index__mark index__mark--qdisc" aria-hidden="true"></span>
|
|
</a>
|
|
</li>
|
|
<li class="index__row">
|
|
<a class="index__link" href="#tickets">
|
|
<span class="index__title">the swiss wall</span>
|
|
<span class="label index__meta">kaserne basel · 5 to 12 june</span>
|
|
<span class="index__mark index__mark--arrow" aria-hidden="true"></span>
|
|
</a>
|
|
</li>
|
|
<li class="index__row">
|
|
<a class="index__link" href="#tickets">
|
|
<span class="index__title">type in transit</span>
|
|
<span class="label index__meta">bahnhof sbb passage · all festival</span>
|
|
<span class="index__mark index__mark--qdisc" aria-hidden="true"></span>
|
|
</a>
|
|
</li>
|
|
<li class="index__row">
|
|
<a class="index__link" href="#tickets">
|
|
<span class="index__title">night screenings</span>
|
|
<span class="label index__meta">voltahalle · 21:00 daily</span>
|
|
<span class="index__mark index__mark--arrow" aria-hidden="true"></span>
|
|
</a>
|
|
</li>
|
|
<li class="index__row">
|
|
<a class="index__link" href="#tickets">
|
|
<span class="index__title">open studios</span>
|
|
<span class="label index__meta">dreispitz · weekends</span>
|
|
<span class="index__mark index__mark--qdisc" aria-hidden="true"></span>
|
|
</a>
|
|
</li>
|
|
<li class="index__row">
|
|
<a class="index__link" href="#tickets">
|
|
<span class="index__title">the print floor</span>
|
|
<span class="label index__meta">hall three · 5 to 26 june</span>
|
|
<span class="index__mark index__mark--arrow" aria-hidden="true"></span>
|
|
</a>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 4 · the plate -->
|
|
<section class="plate" aria-label="festival claim">
|
|
<span class="plate__numeral" aria-hidden="true">40</span>
|
|
<span class="plate__qdisc" aria-hidden="true"></span>
|
|
<div class="shell plate__grid">
|
|
<p class="plate__claim">three weeks, forty rooms, one grid<span class="period period--paper" aria-hidden="true"></span></p>
|
|
<p class="label plate__meta">basel · 5 to 26 june 2027</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 5 · exhibitions -->
|
|
<section class="exhibitions" id="exhibitions">
|
|
<div class="shell exhibitions__grid">
|
|
<div class="exhibitions__text">
|
|
<h2 class="section-title">exhibitions</h2>
|
|
<p>forty rooms across five buildings hold the printed work: two hundred posters from thirty countries, hung on a single modular system that repeats in every room.</p>
|
|
<p>the hanging grid is drawn on the walls in pencil and left visible. what you see is the system and the work at once, which is the point of the festival.</p>
|
|
</div>
|
|
<div class="figures">
|
|
<figure class="figure">
|
|
<div class="figure__art figure__art--dots" aria-hidden="true"></div>
|
|
<figcaption class="label">fig. 1 · the hanging module</figcaption>
|
|
</figure>
|
|
<figure class="figure">
|
|
<div class="figure__art figure__art--arrows" aria-hidden="true">
|
|
<i></i><i></i><i></i>
|
|
</div>
|
|
<figcaption class="label">fig. 2 · wayfinding, hall five</figcaption>
|
|
</figure>
|
|
<figure class="figure">
|
|
<div class="figure__art figure__art--steps" aria-hidden="true">
|
|
<i></i><i></i><i></i><i></i><i></i>
|
|
</div>
|
|
<figcaption class="label">fig. 3 · rooms per building</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 6 · tickets -->
|
|
<section class="tickets" id="tickets">
|
|
<div class="shell tickets__grid">
|
|
<div class="tickets__text">
|
|
<h2 class="section-title">tickets</h2>
|
|
<p>one pass opens every venue. evenings cover the screenings only. students and anyone under 26 enter free with id, all three weeks.</p>
|
|
<p><a class="tickets__link" href="mailto:tickets@signal-basel.ch">tickets@signal-basel.ch</a></p>
|
|
</div>
|
|
<div class="spec">
|
|
<table class="spec__table">
|
|
<caption class="label spec__caption">admission · summer 2027</caption>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="label">pass</th>
|
|
<th scope="col" class="label">access</th>
|
|
<th scope="col" class="label">chf</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">day</th>
|
|
<td>all venues, one day</td>
|
|
<td class="spec__num">28</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">festival</th>
|
|
<td>all venues, all three weeks</td>
|
|
<td class="spec__num">90</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">evening</th>
|
|
<td>voltahalle screenings, from 20:00</td>
|
|
<td class="spec__num">14</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">under 26</th>
|
|
<td>everything, with id</td>
|
|
<td class="spec__num">0</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<div class="shell footer__grid">
|
|
<span class="register footer__register" aria-hidden="true"><i></i></span>
|
|
<p class="label">signal · basel</p>
|
|
<p class="label">riehenring 60, 4058 basel</p>
|
|
<p class="label"><a href="mailto:hello@signal-basel.ch">hello@signal-basel.ch</a></p>
|
|
<p class="label footer__colophon">set in archivo on a twelve column grid</p>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|