1
Fork 0
faq-accordion/styles.css
Leonardo Devai 145294f84f Review and modernize all 42 projects to the updated standard
Pinned 2026 toolchains (Go 1.26, Rust 1.98/edition 2024, Python 3.14 + uv, Node 24,
Zig 0.16, NixOS 26.05), postgres 18 / mongo 8, lockfiles built from, non-root
runtimes, .dockerignore, per-project LICENSE, READMEs with the git.devai.io clone
line, checkout@v7 CI. Security fixes in the legacy Rust APIs (any-password login,
self-assigned admin, hard-coded JWT secret), JWT alg/exp/sub enforcement across the
blog series, safe markdown links in the frontends, and many smaller bugs — every
project was built, run and exercised end to end.

Adds scripts/publish.sh + a CI publish job that splits every folder into its own
repo at git.devai.io/templates/<folder>.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01128fhuZbgivaSJvtMf4s1G
2026-09-27 21:10:38 +02:00

128 lines
2.3 KiB
CSS
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

:root {
color-scheme: light dark;
--accent: #06b6d4;
--bg: #0b0c0e;
--surface: #14161a;
--border: rgba(255, 255, 255, 0.09);
--text: #e7e9ee;
--muted: #9aa0ac;
--radius: 16px;
--shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
}
@media (prefers-color-scheme: light) {
:root {
--bg: #f5f7f9;
--surface: #ffffff;
--border: rgba(0, 0, 0, 0.08);
--text: #14161a;
--muted: #5b626e;
--shadow: 0 24px 50px -28px rgba(20, 22, 26, 0.28);
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100dvh;
display: grid;
place-items: center;
padding: 24px;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
color: var(--text);
background:
radial-gradient(1000px 500px at 50% -10%, rgba(6, 182, 212, 0.16), transparent 60%),
var(--bg);
}
.card {
width: 100%;
max-width: 460px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 28px;
}
h1 {
margin: 0 0 4px;
font-size: 1.35rem;
}
.sub {
margin: 0 0 16px;
color: var(--muted);
font-size: 0.9rem;
}
.item {
border-top: 1px solid var(--border);
}
.item:last-child {
border-bottom: 1px solid var(--border);
}
.question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 0;
font: inherit;
font-weight: 600;
text-align: left;
color: var(--text);
background: transparent;
border: none;
cursor: pointer;
}
.question:hover {
color: var(--accent);
}
.question:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 8px;
}
.icon {
flex-shrink: 0;
font-size: 1.3rem;
color: var(--accent);
transition: transform 0.25s ease;
}
/* A "+" rotated 45° becomes an "×" — a tidy open/close indicator. */
.item.open .icon {
transform: rotate(45deg);
}
/* Collapsed by default. max-height animates the slide; visibility hides the
closed answer from screen readers too, and waits for the slide to finish. */
.answer {
max-height: 0;
overflow: hidden;
visibility: hidden;
transition: max-height 0.3s ease, visibility 0.3s;
}
.item.open .answer {
max-height: 200px;
visibility: visible;
}
.answer p {
margin: 0;
padding: 0 0 16px;
color: var(--muted);
font-size: 0.9rem;
line-height: 1.5;
}