diff --git a/website/public/VCR_OSD_MONO_1.001.woff2 b/website/public/VCR_OSD_MONO_1.001.woff2 new file mode 100644 index 0000000..929406a Binary files /dev/null and b/website/public/VCR_OSD_MONO_1.001.woff2 differ diff --git a/website/public/script.js b/website/public/script.js index c303a45..9c7b49b 100644 --- a/website/public/script.js +++ b/website/public/script.js @@ -31,6 +31,20 @@ document.querySelectorAll('.example-cell').forEach(cell => { }); }); +const featureDesc = document.getElementById('feature-desc'); +document.querySelectorAll('.feature-tags button').forEach(btn => { + btn.addEventListener('click', () => { + const wasActive = btn.classList.contains('active'); + document.querySelectorAll('.feature-tags button.active').forEach(b => b.classList.remove('active')); + if (wasActive) { + featureDesc.textContent = ''; + } else { + btn.classList.add('active'); + featureDesc.textContent = btn.dataset.desc; + } + }); +}); + document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { document.querySelectorAll('.example-cell.expanded').forEach(c => { diff --git a/website/public/style.css b/website/public/style.css index bf17d05..fd8e447 100644 --- a/website/public/style.css +++ b/website/public/style.css @@ -1,17 +1,10 @@ @font-face { - font-family: 'Space Mono'; - src: url('/SpaceMono-Regular.woff2') format('woff2'); + font-family: 'VCR OSD Mono'; + src: url('/VCR_OSD_MONO_1.001.woff2') format('woff2'); font-weight: 400; font-display: swap; } -@font-face { - font-family: 'Space Mono'; - src: url('/SpaceMono-Bold.woff2') format('woff2'); - font-weight: 700; - font-display: swap; -} - :root { --bg: #000; --surface: #121212; @@ -29,14 +22,14 @@ } body { - font-family: 'Space Mono', monospace; + font-family: 'VCR OSD Mono', monospace; background: var(--bg); color: var(--text); max-width: 800px; margin: 0 auto; padding: 1rem; line-height: 1.3; - font-size: clamp(0.9rem, 0.75rem + 0.75vw, 1.15rem); + font-size: clamp(1rem, 0.85rem + 0.75vw, 1.3rem); } header { @@ -72,11 +65,14 @@ h2 { border-bottom: 1px solid var(--text-muted); } -p { margin: 0.25rem 0; } +p { + margin: 0.25rem 0; + text-align: justify; +} video { max-width: 100%; - margin: 0.5rem 0; + margin: 2rem 0 0.5rem 0; display: block; } @@ -87,7 +83,10 @@ ul { margin: 0.25rem 0; } -li { margin: 0.1rem 0; } +li { + margin: 0.1rem 0; + text-align: justify; +} .examples-grid { display: grid; @@ -173,6 +172,50 @@ li { margin: 0.1rem 0; } color: var(--text-muted); } +.features { + margin: 0.25rem 0; +} + +.feature-tags { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; +} + +.feature-tags button { + font-family: 'VCR OSD Mono', monospace; + font-size: 0.85em; + background: var(--surface); + color: var(--text-muted); + border: 1px solid transparent; + padding: 0.2rem 0.5rem; + cursor: pointer; +} + +.feature-tags button:hover { + color: var(--text); + border-color: var(--text-muted); +} + +.feature-tags button.active { + color: var(--text); + border-color: var(--text); +} + +.feature-desc { + color: var(--text-dim); + margin-top: 0.75rem; + padding: 0.75rem; + background: var(--surface); + border-left: 2px solid var(--text-muted); + text-align: left; + line-height: 1.5; +} + +.feature-desc:empty { + display: none; +} + .colophon { margin-top: 3rem; padding-top: 1rem; @@ -185,7 +228,7 @@ li { margin: 0.1rem 0; } } #theme-toggle { - font-family: 'Space Mono', monospace; + font-family: 'VCR OSD Mono', monospace; background: none; color: var(--text-muted); border: none; diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro index d50e5ff..1625455 100644 --- a/website/src/pages/index.astro +++ b/website/src/pages/index.astro @@ -78,22 +78,35 @@

All releases are available on GitHub. You can also compile the software yourself by getting it from Cargo!

- -

About

Cagire is a step sequencer where each step contains a Forth script instead of typical note data. When the sequencer reaches a step, it runs the associated script. Scripts can produce sound, trigger samples, apply effects, or do nothing at all. You are free to define what your scripts will do. Cagire includes a built-in audio engine called Doux. No external software is needed to make sound. It comes with oscillators, sample players, filters, reverb, delay, distortion, and more.

-

Features

- +

Features (click to learn more!)

+
+
+ + + + + + + + + + + + + + + +
+
+

Live Coding

-

Live coding is a technique where a programmer writes code in real-time in front of an audience. It is a way to experiment with code, to share things and thoughts openly, to express yourself through code. It can be technical, poetical, weird, preferably all at once. Live coding can be used to create music, visual art, and other forms of media. Live coding is an autotelic activity: doing it is its own reward. There are no errors, only fun. Learn more at TOPLAP or livecoding.fr.

+

Live coding is a technique where a programmer writes code in real-time in front of an audience. It is a way to experiment with code, to share openly, to express yourself through code. It can be technical, poetical, weird, preferably all at once. Live coding can be used to create music, visual art, and other forms of media. Live coding is an autotelic activity: doing it is its own reward. There are no errors, only fun. Learn more at TOPLAP or livecoding.fr.

+ +

BuboBubo · Audio engine: Doux · GitHub · AGPL-3.0 ·