openvibers/openvibe.space Commits
Event template: filled buttons on the deeper pink (#171)
Changes
@@@ -23,7 +23,7 @@.hero p { color: var(--muted); font-size: 1.15rem; margin: 0 auto 26px; max-width: 46ch; }.facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }.facts span { padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 600; font-size: .95rem; }-- .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 1rem system-ui, sans-serif; text-decoration: none; cursor: pointer; }++ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--accent-text); color: var(--on-accent); font: 700 1rem system-ui, sans-serif; text-decoration: none; cursor: pointer; }.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }section { padding-block: 48px; }h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 20px; }@@@ -12,6 +12,7 @@ const read = (id) => fs.readFileSync(path.join(__dirname, '..', 'templates', 'spconst event = read('site-event');assert.match(event, /--accent-text:\s*#b8326f;/, 'the event page has the readable text pink on white');++assert.match(event, /\.btn \{[^}]*background: var\(--accent-text\); color: var\(--on-accent\);/, 'its filled buttons carry white on the deep pink (5.6:1), not on #d9468a (4.0:1)');assert.match(event, /@media \(prefers-color-scheme: dark\)[^{]*\{[^}]*--accent-text:\s*#ff7ab6;/, 'and the brighter pink on the dark page');assert.match(event, /\.date \{[^}]*color: var\(--accent-text\)/, 'the date uses the text pink');assert.match(event, /\.timeline time \{[^}]*color: var\(--accent-text\)/, 'the event times use the text pink');
@@ -23,7 +23,7 @@
@@ -23,7 +23,7 @@
.hero p { color: var(--muted); font-size: 1.15rem; margin: 0 auto 26px; max-width: 46ch; }
.hero p { color: var(--muted); font-size: 1.15rem; margin: 0 auto 26px; max-width: 46ch; }
.facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.facts span { padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 600; font-size: .95rem; }
.facts span { padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 600; font-size: .95rem; }
- .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 1rem system-ui, sans-serif; text-decoration: none; cursor: pointer; }
+ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--accent-text); color: var(--on-accent); font: 700 1rem system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
section { padding-block: 48px; }
section { padding-block: 48px; }
h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 20px; }
h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 20px; }
@@ -12,6 +12,7 @@ const read = (id) => fs.readFileSync(path.join(__dirname, '..', 'templates', 'sp
@@ -12,6 +12,7 @@ const read = (id) => fs.readFileSync(path.join(__dirname, '..', 'templates', 'sp
const event = read('site-event');
const event = read('site-event');
assert.match(event, /--accent-text:\s*#b8326f;/, 'the event page has the readable text pink on white');
assert.match(event, /--accent-text:\s*#b8326f;/, 'the event page has the readable text pink on white');
+assert.match(event, /\.btn \{[^}]*background: var\(--accent-text\); color: var\(--on-accent\);/, 'its filled buttons carry white on the deep pink (5.6:1), not on #d9468a (4.0:1)');
assert.match(event, /@media \(prefers-color-scheme: dark\)[^{]*\{[^}]*--accent-text:\s*#ff7ab6;/, 'and the brighter pink on the dark page');
assert.match(event, /@media \(prefers-color-scheme: dark\)[^{]*\{[^}]*--accent-text:\s*#ff7ab6;/, 'and the brighter pink on the dark page');
assert.match(event, /\.date \{[^}]*color: var\(--accent-text\)/, 'the date uses the text pink');
assert.match(event, /\.date \{[^}]*color: var\(--accent-text\)/, 'the date uses the text pink');
assert.match(event, /\.timeline time \{[^}]*color: var\(--accent-text\)/, 'the event times use the text pink');
assert.match(event, /\.timeline time \{[^}]*color: var\(--accent-text\)/, 'the event times use the text pink');