site 1.4.2: Pionaarr mods, player blue, short tiles, CUE logo, legal pages, local fonts
- advanced_waveforms listed as a Pionaarr mod; "ours" is "Pionaarr mod" everywhere. - The player's blue (title bar) instead of the orange; flat CUE key as logo and favicon. - Mod tiles: one emulator shot and one or two sentences each; 3-band shown (in testing). - No command line on the main page (it is in the docs); round BEAT DIVIDE keys for the LEDs. - Impressum and Datenschutzerklaerung (AT/DE); fonts served from assets/fonts (OFL). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Thiemo TizianiandClaude Opus 5.5 committed
1 parent
5ee521429b
commit
6ddc37bc66
31 files changed
+642
-251
No files matched your search
@@ -1,3 +1,13 @@
|
||||
/* fonts from this server (SIL Open Font License, assets/fonts/OFL-*.txt): no request to a font service */
|
||||
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/barlow-400.woff2") format("woff2"); }
|
||||
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/barlow-500.woff2") format("woff2"); }
|
||||
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/barlow-600.woff2") format("woff2"); }
|
||||
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/barlow-700.woff2") format("woff2"); }
|
||||
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/chakra-petch-600.woff2") format("woff2"); }
|
||||
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/chakra-petch-700.woff2") format("woff2"); }
|
||||
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/jetbrains-mono-500.woff2") format("woff2"); }
|
||||
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/jetbrains-mono-700.woff2") format("woff2"); }
|
||||
|
||||
/* CDJ-900NXS Mods — shared styles */
|
||||
:root {
|
||||
--bg: #0b0d12;
|
||||
@@ -8,7 +18,7 @@
|
||||
--text: #e8ebf2;
|
||||
--muted: #98a1b6;
|
||||
--faint: #6b7489;
|
||||
--accent: #ff5a1f; /* the deck's orange */
|
||||
--accent: #1a78e6; /* the player's blue (its title bar) */
|
||||
--accent-2: #2fd3ff; /* the deck's cyan */
|
||||
--ok: #3ddc84;
|
||||
--warn: #ffb020;
|
||||
@@ -65,11 +75,6 @@ kbd {
|
||||
.top .wrap { display: flex; align-items: center; gap: 16px; height: 64px; }
|
||||
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; letter-spacing: -.01em; }
|
||||
.brand:hover { text-decoration: none; }
|
||||
.brand .disc {
|
||||
width: 30px; height: 30px; border-radius: 50%;
|
||||
background: conic-gradient(from 0deg, var(--accent), #ffb020, var(--accent-2), #7a5cff, var(--accent));
|
||||
box-shadow: inset 0 0 0 7px var(--bg), inset 0 0 0 9px var(--line);
|
||||
}
|
||||
.tabs { display: flex; gap: 4px; margin-left: auto; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
|
||||
.tabs a {
|
||||
color: var(--muted); padding: 6px 16px; border-radius: 999px; font-weight: 600; font-size: .95rem;
|
||||
@@ -248,14 +253,22 @@ td:first-child { color: var(--text); white-space: nowrap; }
|
||||
|
||||
.leds { display: flex; gap: 18px; flex-wrap: wrap; margin: 14px 0; }
|
||||
.led { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .92rem; }
|
||||
.led i { width: 26px; height: 12px; border-radius: 4px; background: #2a2f3a; border: 1px solid #3a4150; display: inline-block; }
|
||||
/* a BEAT DIVIDE key: round, its label on it, the LED lighting the key */
|
||||
.led i {
|
||||
width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-grid; place-items: center;
|
||||
background: #2a2f3a; border: 1px solid #3a4150; color: #8a93a6;
|
||||
font: 700 .5rem/1 var(--mono); font-style: normal; letter-spacing: -.02em;
|
||||
}
|
||||
.led i.dim, .led i.blink, .led i.slow { color: #ffe2c8; border-color: #8a4a16; }
|
||||
.led i.dim { background: #6b3a12; box-shadow: 0 0 6px rgba(255, 120, 30, .25); }
|
||||
.led i.bright { background: #ff8a2a; box-shadow: 0 0 14px rgba(255, 138, 42, .8); }
|
||||
.led i.blink { animation: blink 1.2s steps(1) infinite; }
|
||||
.led i.slow { animation: blink-slow 1.6s steps(1) infinite; }
|
||||
@keyframes blink-slow { 0%, 50% { background: #ff8a2a; box-shadow: 0 0 8px rgba(255,138,42,.7); } 51%, 100% { background: #6b3a12; box-shadow: none; } }
|
||||
@keyframes blink {
|
||||
0%, 16% { background: #ff8a2a; box-shadow: 0 0 14px rgba(255,138,42,.8); }
|
||||
0%, 16% { background: #ff8a2a; box-shadow: 0 0 8px rgba(255,138,42,.7); }
|
||||
17%, 33% { background: #6b3a12; box-shadow: none; }
|
||||
34%, 50% { background: #ff8a2a; box-shadow: 0 0 14px rgba(255,138,42,.8); }
|
||||
34%, 50% { background: #ff8a2a; box-shadow: 0 0 8px rgba(255,138,42,.7); }
|
||||
51%, 100% { background: #6b3a12; box-shadow: none; }
|
||||
}
|
||||
|
||||
@@ -277,7 +290,7 @@ footer .ai .dot { width: 8px; height: 8px; border-radius: 50%; background: var(-
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.top .wrap { gap: 10px; }
|
||||
.brand span:not(.disc) { display: none; }
|
||||
.brand span:not(.cue-key) { display: none; }
|
||||
.tabs a { padding: 6px 12px; }
|
||||
.hero { padding: 44px 0 24px; }
|
||||
.vs { grid-template-columns: 1fr; }
|
||||
@@ -417,21 +430,25 @@ button.btn { font: inherit; font-weight: 700; cursor: pointer; }
|
||||
:root {
|
||||
--display: "Chakra Petch", "Barlow", system-ui, sans-serif;
|
||||
--sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
--lcd: #ff7a2a;
|
||||
--lcd: #5cb8ff;
|
||||
--lcd-green: #8dffb4;
|
||||
--beat: 0;
|
||||
}
|
||||
:root[data-theme="light"] { --lcd: #d9520c; --lcd-green: #0a8f45; }
|
||||
:root[data-theme="light"] { --lcd: #0061c5; --lcd-green: #0a8f45; --accent: #0061c5; }
|
||||
html { background: var(--bg); }
|
||||
body { background: transparent; font-size: 17px; }
|
||||
.bg-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
|
||||
h1, h2, h3, .brand, .tile .n { font-family: var(--display); }
|
||||
.hero::before { display: none; }
|
||||
|
||||
.brand .disc { animation: spin 1.8s linear infinite; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.brand .disc { background: repeating-radial-gradient(circle, #1a1d26 0 2px, #2a2f3c 2px 3px); box-shadow: inset 0 0 0 9px #11141b, 0 0 0 2px var(--accent); position: relative; }
|
||||
.brand .disc::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--accent); }
|
||||
/* the logo: the player's CUE key, its orange ring lit (at the cue point,
|
||||
while PLAY blinks) */
|
||||
.brand .cue-key {
|
||||
width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
|
||||
width: 30px; height: 30px; background: #16181d;
|
||||
box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #ff8a1f, 0 0 8px 3px rgba(255,138,31,.35);
|
||||
color: #eef0f4; font: 700 .6rem/1 var(--display); letter-spacing: .06em;
|
||||
}
|
||||
|
||||
.tabs { background: none; border: 0; gap: 2px; padding: 0; }
|
||||
.tabs a {
|
||||
@@ -451,7 +468,7 @@ h1, h2, h3, .brand, .tile .n { font-family: var(--display); }
|
||||
background: color-mix(in srgb, #000 55%, transparent);
|
||||
text-shadow: 0 0 calc(6px + 6px * var(--beat)) color-mix(in srgb, var(--lcd) 70%, transparent);
|
||||
}
|
||||
:root[data-theme="light"] .lcd { background: #fff8f2; }
|
||||
:root[data-theme="light"] .lcd { background: #f2f7ff; }
|
||||
.lcd i { width: 7px; height: 7px; border-radius: 50%; background: var(--lcd); opacity: calc(.35 + .65 * var(--beat)); }
|
||||
|
||||
.hero { padding: 64px 0 36px; }
|
||||
@@ -459,7 +476,8 @@ h1, h2, h3, .brand, .tile .n { font-family: var(--display); }
|
||||
font-size: clamp(2.8rem, 8vw, 5.6rem); line-height: .95; letter-spacing: .01em;
|
||||
text-transform: uppercase; margin: 22px 0 18px; font-weight: 700;
|
||||
}
|
||||
.hero h1 .r { color: var(--accent); }
|
||||
.hero h1 .r { color: #2f8cf5; }
|
||||
:root[data-theme="light"] .hero h1 .r { color: #0061c5; }
|
||||
.hero p.lead { font-size: 1.18rem; color: var(--muted); max-width: 680px; margin: 0 0 12px; }
|
||||
.hero p.lead + p.lead { margin-bottom: 26px; }
|
||||
.btn { border-radius: 8px; font-family: var(--display); letter-spacing: .03em; text-transform: uppercase; font-size: .92rem; }
|
||||
@@ -497,8 +515,7 @@ h2.section-title { text-transform: uppercase; letter-spacing: .02em; }
|
||||
.btn.play { padding: 7px 20px 7px 7px; gap: 12px; }
|
||||
.play-key {
|
||||
width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
|
||||
background: radial-gradient(circle at 50% 35%, #2a2d33, #121418 70%);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.5);
|
||||
background: #16181d;
|
||||
position: relative;
|
||||
}
|
||||
.play-key::before {
|
||||
@@ -512,6 +529,30 @@ h2.section-title { text-transform: uppercase; letter-spacing: .02em; }
|
||||
:root[data-theme="light"] .play-key::before { border-color: #8dffb4; box-shadow: 0 0 8px #8dffb4; }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.brand .disc { animation: none; }
|
||||
.play-key::before { animation: none; }
|
||||
}
|
||||
|
||||
/* ---- short mod tiles: one shot each, from the emulator ---- */
|
||||
.grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 16px; }
|
||||
.card { gap: 10px; padding: 18px; }
|
||||
.card-head { align-items: center; justify-content: space-between; }
|
||||
.card h3 { font-size: 1.15rem; text-transform: uppercase; }
|
||||
.card .by { margin-top: -6px; }
|
||||
.card .by code { font-size: .78rem; color: var(--faint); background: none; padding: 0; }
|
||||
.card p { font-size: .98rem; }
|
||||
.card .meta { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
|
||||
.tshot { margin: 0; background: #000; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
|
||||
.tshot img { display: block; width: 100%; height: 96px; object-fit: contain; image-rendering: pixelated; }
|
||||
.tshot figcaption {
|
||||
font: 700 .66rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
|
||||
padding: 7px 9px; color: #c9cfdb; background: #0d1017; border-top: 1px solid #1f2533;
|
||||
}
|
||||
.state.testing { color: var(--accent-2); }
|
||||
|
||||
/* ---- Impressum, Datenschutz ---- */
|
||||
.legal-page { max-width: 760px; padding-top: 48px; padding-bottom: 64px; }
|
||||
.legal-page h1 { font-size: clamp(2rem, 5vw, 2.8rem); text-transform: uppercase; margin: 0 0 12px; }
|
||||
.legal-page h2 { font-size: 1.15rem; margin: 30px 0 8px; text-transform: uppercase; letter-spacing: .02em; }
|
||||
.legal-page p, .legal-page li { color: var(--muted); }
|
||||
.legal-page ul { padding-left: 1.3em; }
|
||||
footer .legal { margin-top: 14px; font-size: .85rem; }
|
||||
Reference in new issue
Block a user