Skip to content

feat: landing in four languages, author links and white icons #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Likemiens merged 1 commit into from
Nov 5, 2026
Merged

feat: landing in four languages, author links and white icons #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions site/404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,24 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Page not found · Marquee</title>
<title data-i18n="404.title">Page not found · Marquee</title>
<meta name="robots" content="noindex">
<meta name="theme-color" content="#181818">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<script src="/lang.js"></script>
<link rel="stylesheet" href="/styles.css">
<script src="/i18n.js" defer></script>
</head>
<body>
<main id="main" class="lost">
<a class="brand" href="/" aria-label="Marquee home">
<a class="brand" href="/" aria-label="Marquee home" data-i18n-attr="aria-label:brand.home">
<svg class="brand-mark" viewBox="0 0 40 32" aria-hidden="true"><path d="M20 2H31A7 7 0 0 1 38 9V23A7 7 0 0 1 31 30H9A7 7 0 0 1 2 23V9A7 7 0 0 1 9 2Z" pathLength="18"/><circle cx="20" cy="16" r="6"/></svg>
<span class="title-2">Marquee</span>
</a>
<p class="eyebrow caption-3">Error 404</p>
<h1 class="heading-2">This scene was cut.</h1>
<p class="body-3 lost-sub">The page you asked for is not on the program. The main stage is one click away.</p>
<a class="btn btn-rec button-md" href="/">Back to the main stage</a>
<p class="eyebrow caption-3" data-i18n="404.eyebrow">Error 404</p>
<h1 class="heading-2" data-i18n="404.h">This scene was cut.</h1>
<p class="body-3 lost-sub" data-i18n="404.sub">The page you asked for is not on the program. The main stage is one click away.</p>
<a class="btn btn-rec button-md" href="/" data-i18n="404.cta">Back to the main stage</a>
</main>
</body>
</html>
58 changes: 30 additions & 28 deletions site/brand/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,30 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Brand assets · Marquee</title>
<title data-i18n="brand.page">Brand assets · Marquee</title>
<meta name="description" content="The Marquee logo, app icon, colors and type, ready to download.">
<meta name="theme-color" content="#181818">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta property="og:title" content="Marquee brand assets">
<meta property="og:image" content="https://marquee-five-sigma.vercel.app/og.png">
<script src="/lang.js"></script>
<link rel="stylesheet" href="/styles.css">
<script src="/i18n.js" defer></script>
<script src="/main.js" defer></script>
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<a class="skip" href="#main" data-i18n="skip">Skip to content</a>
<header class="nav-wrap">
<nav class="nav" aria-label="Main">
<a class="brand" href="/" aria-label="Marquee home">
<nav class="nav" aria-label="Main" data-i18n-attr="aria-label:nav.label">
<a class="brand" href="/" aria-label="Marquee home" data-i18n-attr="aria-label:brand.home">
<svg class="brand-mark" viewBox="0 0 40 32" aria-hidden="true"><path d="M20 2H31A7 7 0 0 1 38 9V23A7 7 0 0 1 31 30H9A7 7 0 0 1 2 23V9A7 7 0 0 1 9 2Z" pathLength="18"/><circle cx="20" cy="16" r="6"/></svg>
<span class="title-2">Marquee</span>
</a>
<ul class="nav-links">
<li><a class="title-4" href="/" >Home</a></li>
<li><a class="title-4" href="/brand" aria-current="true">Brand</a></li>
<li><a class="title-4" href="/" data-i18n="brand.navHome">Home</a></li>
<li><a class="title-4" href="/brand" aria-current="true" data-i18n="brand.nav">Brand</a></li>
</ul>
<a class="btn btn-ghost btn-sm button-sm" href="https://github.com/Likemiens/openscreen">
<svg class="ico" aria-hidden="true"><use href="/icons.svg#i-github-logo"/></svg>GitHub
Expand All @@ -34,53 +36,53 @@

<main id="main" class="brand-page">
<header class="reveal">
<p class="eyebrow caption-3">Brand assets</p>
<h1 class="heading-2">A frame of bulbs around the record light</h1>
<p class="body-3">Up close the mark is a theatre marquee. At icon size it turns into the dotted marquee of a selection, which is exactly what the app draws when you pick an area. The red dot is the recorder's own Record button.</p>
<p class="eyebrow caption-3" data-i18n="f.brand">Brand assets</p>
<h1 class="heading-2" data-i18n="brand.h">A frame of bulbs around the record light</h1>
<p class="body-3" data-i18n="brand.intro">Up close the mark is a theatre marquee. At icon size it turns into the dotted marquee of a selection, which is exactly what the app draws when you pick an area. The red dot is the recorder's own Record button.</p>
</header>

<div class="assets">
<article class="asset reveal">
<div class="asset-art"><img src="/brand/mark.svg" width="160" height="128" alt="The Marquee mark: eighteen warm bulbs in a rounded frame around a red dot."></div>
<h2 class="heading-6">Mark</h2>
<p class="body-6">For dark backgrounds. Keep clear space of one bulb row around it.</p>
<div class="asset-art"><img src="/brand/mark.svg" width="160" height="128" alt="The Marquee mark: eighteen warm bulbs in a rounded frame around a red dot." data-i18n-attr="alt:brand.mark.alt"></div>
<h2 class="heading-6" data-i18n="brand.mark.h">Mark</h2>
<p class="body-6" data-i18n="brand.mark.p">For dark backgrounds. Keep clear space of one bulb row around it.</p>
<div class="asset-links"><a class="btn btn-ghost btn-sm button-sm" href="/brand/mark.svg" download>SVG</a></div>
</article>
<article class="asset reveal">
<div class="asset-art"><img src="/brand/app-icon.svg" width="176" height="176" alt="The Marquee app icon: the mark on a graphite rounded square."></div>
<h2 class="heading-6">App icon</h2>
<p class="body-6">Graphite squircle, the bulbs with a soft glow. Use the PNG where SVG is not accepted.</p>
<div class="asset-art"><img src="/brand/app-icon.svg" width="176" height="176" alt="The Marquee app icon: the mark on a graphite rounded square." data-i18n-attr="alt:brand.icon.alt"></div>
<h2 class="heading-6" data-i18n="brand.icon.h">App icon</h2>
<p class="body-6" data-i18n="brand.icon.p">Graphite squircle, the bulbs with a soft glow. Use the PNG where SVG is not accepted.</p>
<div class="asset-links"><a class="btn btn-ghost btn-sm button-sm" href="/brand/app-icon.svg" download>SVG</a><a class="btn btn-ghost btn-sm button-sm" href="/brand/app-icon-1024.png" download>PNG 1024</a></div>
</article>
<article class="asset reveal">
<div class="asset-art"><img src="/brand/lockup.svg" width="240" height="56" alt="The Marquee lockup: the mark next to the word Marquee."></div>
<h2 class="heading-6">Lockup</h2>
<p class="body-6">The mark with the name set in Geist Semibold, outlined, so it needs no font.</p>
<div class="asset-art"><img src="/brand/lockup.svg" width="240" height="56" alt="The Marquee lockup: the mark next to the word Marquee." data-i18n-attr="alt:brand.lockup.alt"></div>
<h2 class="heading-6" data-i18n="brand.lockup.h">Lockup</h2>
<p class="body-6" data-i18n="brand.lockup.p">The mark with the name set in Geist Semibold, outlined, so it needs no font.</p>
<div class="asset-links"><a class="btn btn-ghost btn-sm button-sm" href="/brand/lockup.svg" download>SVG</a><a class="btn btn-ghost btn-sm button-sm" href="/brand/lockup.png" download>PNG</a></div>
</article>
<article class="asset asset-wide reveal">
<div class="sign" data-bulbs="sign" data-sign aria-hidden="true"></div>
<h2 class="heading-6">The sign</h2>
<p class="body-6">The name in bulbs, five by seven, with the record light in the tail of the Q. It is for big moments: a finale, a cover, a social card.</p>
<h2 class="heading-6" data-i18n="brand.sign.h">The sign</h2>
<p class="body-6" data-i18n="brand.sign.p">The name in bulbs, five by seven, with the record light in the tail of the Q. It is for big moments: a finale, a cover, a social card.</p>
</article>
</div>

<section class="brand-colors reveal" aria-labelledby="colors-title">
<h2 id="colors-title" class="heading-6">Colors</h2>
<h2 id="colors-title" class="heading-6" data-i18n="brand.colors">Colors</h2>
<ul class="swatches">
<li class="swatch"><i class="sw-graphite"></i><span class="caption-5"><b>Graphite</b>#181818</span></li>
<li class="swatch"><i class="sw-bulb"></i><span class="caption-5"><b>Bulb</b>#FFE6B8</span></li>
<li class="swatch"><i class="sw-red"></i><span class="caption-5"><b>Record</b>#FF453A</span></li>
<li class="swatch"><i class="sw-blue"></i><span class="caption-5"><b>Action</b>#0A84FF</span></li>
<li class="swatch"><i class="sw-green"></i><span class="caption-5"><b>Saved</b>#30D158</span></li>
<li class="swatch"><i class="sw-graphite"></i><span class="caption-5"><b data-i18n="sw.graphite">Graphite</b>#181818</span></li>
<li class="swatch"><i class="sw-bulb"></i><span class="caption-5"><b data-i18n="sw.bulb">Bulb</b>#FFE6B8</span></li>
<li class="swatch"><i class="sw-red"></i><span class="caption-5"><b data-i18n="sw.record">Record</b>#FF453A</span></li>
<li class="swatch"><i class="sw-blue"></i><span class="caption-5"><b data-i18n="sw.action">Action</b>#0A84FF</span></li>
<li class="swatch"><i class="sw-green"></i><span class="caption-5"><b data-i18n="sw.saved">Saved</b>#30D158</span></li>
</ul>
</section>
</main>

<footer class="footer">
<div class="footer-bottom caption-5">
<p>© 2026 Likemiens. Released under the MIT license.</p>
<p>Type: Geist and Geist Mono, SIL Open Font License.</p>
<p data-i18n="footer.copy">© 2026 Likemiens. Released under the MIT license.</p>
<p data-i18n="brand.type">Type: Geist and Geist Mono, SIL Open Font License.</p>
</div>
</footer>
</body>
Expand Down
Loading
Loading