Feat: website WIP and new words
This commit is contained in:
BIN
website/public/Cagire.png
Normal file
BIN
website/public/Cagire.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
BIN
website/public/SpaceMono-Bold.woff2
Normal file
BIN
website/public/SpaceMono-Bold.woff2
Normal file
Binary file not shown.
BIN
website/public/SpaceMono-Regular.woff2
Normal file
BIN
website/public/SpaceMono-Regular.woff2
Normal file
Binary file not shown.
BIN
website/public/favicon.ico
Normal file
BIN
website/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
@@ -14,65 +14,28 @@ toggle.addEventListener('click', () => {
|
||||
const light = root.classList.contains('light');
|
||||
toggle.textContent = light ? 'DARK' : 'LIGHT';
|
||||
localStorage.setItem('theme', light ? 'light' : 'dark');
|
||||
highlightForth();
|
||||
});
|
||||
|
||||
function highlightForth() {
|
||||
const words = ['note', 'sound', 'lpf', 'hpf', 'chorus', 'verb', 'distort', 'speed'];
|
||||
const notes = ['c4'];
|
||||
const chords = ['min7'];
|
||||
const samples = ['kkick', 'sine', 'saw'];
|
||||
const isLight = document.documentElement.classList.contains('light');
|
||||
const numColor = isLight ? '#a855f7' : '#e8a0e8';
|
||||
const dotColor = isLight ? '#0284c7' : '#7dd3fc';
|
||||
const wordColor = isLight ? '#65a30d' : '#a3e635';
|
||||
const noteColor = isLight ? '#d97706' : '#fbbf24';
|
||||
const chordColor = isLight ? '#15803d' : '#4ade80';
|
||||
const sampleColor = isLight ? '#dc2626' : '#f87171';
|
||||
document.querySelectorAll('pre').forEach(pre => {
|
||||
const text = pre.dataset.source || pre.textContent;
|
||||
pre.dataset.source = text;
|
||||
pre.innerHTML = text
|
||||
.split(/(\s+)/)
|
||||
.map(t => {
|
||||
if (t === '.') return `<span style="color:${dotColor}">.</span>`;
|
||||
if (/^-?\d+\.?\d*$/.test(t)) return `<span style="color:${numColor}">${t}</span>`;
|
||||
if (words.includes(t)) return `<span style="color:${wordColor}">${t}</span>`;
|
||||
if (notes.includes(t)) return `<span style="color:${noteColor}">${t}</span>`;
|
||||
if (chords.includes(t)) return `<span style="color:${chordColor}">${t}</span>`;
|
||||
if (samples.includes(t)) return `<span style="color:${sampleColor}">${t}</span>`;
|
||||
return t;
|
||||
})
|
||||
.join('');
|
||||
});
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', highlightForth);
|
||||
} else {
|
||||
highlightForth();
|
||||
}
|
||||
|
||||
const kofiModal = document.getElementById('kofi-modal');
|
||||
const kofiFrame = document.getElementById('kofi-frame');
|
||||
|
||||
document.querySelectorAll('.downloads-table a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
if (sessionStorage.getItem('kofi-dismissed')) return;
|
||||
kofiFrame.src = 'https://ko-fi.com/raphaelbubo/?hidefeed=true&widget=true&embed=true';
|
||||
kofiModal.showModal();
|
||||
document.querySelectorAll('.example-cell').forEach(cell => {
|
||||
cell.addEventListener('click', () => {
|
||||
const video = cell.querySelector('video');
|
||||
const wasExpanded = cell.classList.contains('expanded');
|
||||
document.querySelectorAll('.example-cell.expanded').forEach(c => {
|
||||
c.classList.remove('expanded');
|
||||
c.querySelector('video').pause();
|
||||
});
|
||||
if (!wasExpanded) {
|
||||
cell.classList.add('expanded');
|
||||
video.play();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
kofiModal.addEventListener('close', () => {
|
||||
sessionStorage.setItem('kofi-dismissed', '1');
|
||||
kofiFrame.src = 'about:blank';
|
||||
});
|
||||
|
||||
document.getElementById('kofi-close').addEventListener('click', () => {
|
||||
kofiModal.close();
|
||||
});
|
||||
|
||||
kofiModal.addEventListener('click', (e) => {
|
||||
if (e.target === kofiModal) kofiModal.close();
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
document.querySelectorAll('.example-cell.expanded').forEach(c => {
|
||||
c.classList.remove('expanded');
|
||||
c.querySelector('video').pause();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,6 +1,15 @@
|
||||
@font-face {
|
||||
font-family: 'CozetteVector';
|
||||
src: url('/CozetteVector.ttf') format('truetype');
|
||||
font-family: 'Space Mono';
|
||||
src: url('/SpaceMono-Regular.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 {
|
||||
@@ -20,14 +29,28 @@
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'CozetteVector', monospace;
|
||||
font-family: 'Space Mono', monospace;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
line-height: 1.3;
|
||||
font-size: 0.9rem;
|
||||
font-size: clamp(0.9rem, 0.75rem + 0.75vw, 1.15rem);
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
image-rendering: pixelated;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -35,11 +58,18 @@ h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--text-muted);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--text);
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: 1rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.15rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid var(--text-muted);
|
||||
}
|
||||
|
||||
p { margin: 0.25rem 0; }
|
||||
@@ -59,11 +89,47 @@ ul {
|
||||
|
||||
li { margin: 0.1rem 0; }
|
||||
|
||||
pre {
|
||||
.examples-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem 0 2rem;
|
||||
}
|
||||
|
||||
.example-cell {
|
||||
aspect-ratio: 1;
|
||||
overflow: hidden;
|
||||
background: var(--surface);
|
||||
padding: 0.5rem;
|
||||
overflow-x: auto;
|
||||
margin: 0.25rem 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.example-cell video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.example-cell.expanded {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 100;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
aspect-ratio: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.example-cell.expanded video {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.downloads-table {
|
||||
@@ -91,69 +157,34 @@ pre {
|
||||
}
|
||||
|
||||
.note {
|
||||
color: var(--text-muted);
|
||||
color: var(--text-dim);
|
||||
font-size: 0.8rem;
|
||||
font-style: italic;
|
||||
background: var(--surface);
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.note::before {
|
||||
content: '→ ';
|
||||
}
|
||||
|
||||
.note a {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.support {
|
||||
background: var(--surface);
|
||||
padding: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
.colophon {
|
||||
margin-top: 3rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--text-muted);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.colophon a {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.support a {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
#kofi-modal {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--text-muted);
|
||||
border-radius: 0;
|
||||
padding: 1rem;
|
||||
max-width: 420px;
|
||||
width: 90vw;
|
||||
}
|
||||
|
||||
#kofi-modal::backdrop {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
#kofi-modal p {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
#kofi-frame {
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 570px;
|
||||
}
|
||||
|
||||
#kofi-close {
|
||||
font-family: 'CozetteVector', monospace;
|
||||
background: none;
|
||||
color: var(--text-muted);
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font-size: inherit;
|
||||
text-decoration: underline;
|
||||
display: block;
|
||||
margin: 0.5rem auto 0;
|
||||
}
|
||||
|
||||
#kofi-close:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
#theme-toggle {
|
||||
font-family: 'CozetteVector', monospace;
|
||||
font-family: 'Space Mono', monospace;
|
||||
background: none;
|
||||
color: var(--text-muted);
|
||||
border: none;
|
||||
|
||||
Reference in New Issue
Block a user