Something went wrong. Try again.
slides from July atproto.la meetup talk on an atmospheric cms
Something went wrong. Try again.
3.4 kB · 141 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142/* ------------------------------------------------------------------ * * Chalkboard theme — a black slate + hand-chalked headings. * Ejected: no external Slidev theme; these globals drive the whole look * over the minimal `default` base. Mirrors the Sten editor's chalk * metaphor, inverted to a real (dark) board. * ------------------------------------------------------------------ */
:root { --chalk-bg: #0e0f10; /* the slate — near-black */ --chalk-ink: #f2efe6; /* chalk white */ --chalk-dim: #bdb9ad; /* faded chalk */ --chalk-faint: #6f6b61; /* chalk dust */ --chalk-line: #34332e; /* a rubbed rule */
--chalk-font: "Chalkboard SE", "Chalkboard", "Kalam", cursive; --body-font: "Poppins", system-ui, -apple-system, sans-serif;
/* Slidev theme hooks */ --slidev-theme-primary: var(--chalk-ink);}
/* The whole board is black, whatever the layout. */html,body,#app,.slidev-page,.slidev-layout { background: var(--chalk-bg) !important;}
::selection { background: var(--chalk-ink); color: var(--chalk-bg);}
.slidev-layout { color: var(--chalk-ink); font-family: var(--body-font); font-weight: 300;}
/* --- Chalked headings ------------------------------------------------ */.slidev-layout h1,.slidev-layout h2,.slidev-layout h3,.slidev-layout h4,.slidev-layout h5,.slidev-layout h6 { font-family: var(--chalk-font); color: var(--chalk-ink); font-weight: 700; letter-spacing: 0.02em; /* the soft edge chalk leaves on slate */ text-shadow: 0 0 1px rgba(242, 239, 230, 0.25);}
.slidev-layout h1 { font-size: 2.7rem; line-height: 1.15; margin-bottom: 0.6em;}
.slidev-layout h2 { font-size: 1.9rem;}
/* Section / statement dividers: make the single heading the whole board. */.slidev-layout.section h1,.slidev-layout.statement h1 { font-size: 3.4rem;}
/* --- Body copy ------------------------------------------------------- */.slidev-layout p,.slidev-layout li { color: var(--chalk-ink); font-weight: 300;}
.slidev-layout strong { color: var(--chalk-ink); font-weight: 600;}
.slidev-layout em { color: var(--chalk-ink); font-style: italic;}
/* --- Links: chalk-underlined, never a hue ---------------------------- */.slidev-layout a { color: var(--chalk-ink); text-decoration: none; border-bottom: 1px solid var(--chalk-line); transition: border-color 0.2s ease;}.slidev-layout a:hover { border-bottom-color: var(--chalk-ink);}
/* --- Code: chalk-handwritten, flat, sharp ---------------------------- */.slidev-layout code { font-family: var(--chalk-font); color: var(--chalk-ink); background: rgba(242, 239, 230, 0.07); padding: 0.1em 0.35em; border-radius: 0; /* sharp corners, like the editor */}.slidev-layout pre { background: rgba(242, 239, 230, 0.05) !important; border: 1px solid var(--chalk-line); border-radius: 0;}
/* --- Chalk rules & muted marks --------------------------------------- */.slidev-layout hr { border: none; border-top: 1px solid var(--chalk-line);}.slidev-layout blockquote { border-left: 2px solid var(--chalk-line); color: var(--chalk-dim);}
/* Presenter/utility: keep the faint marks legible on slate. */.slidev-layout .opacity-60,.slidev-layout .opacity-70 { color: var(--chalk-dim);}
.slidev-layout h1 + p { opacity: 1;}
.slidev-layout ifram { pointer-events: none;}
.slidev-slide-container { background-color: var(--chalk-bg) !important;}