Something went wrong. Try again.
a reactive (signals based) hypermedia web framework (wip) stormlightlabs.github.io/volt
hypermedia frontend signals
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237/* ========================================================================== *//* Typography & Inline Elements *//* *//* See variables.css for fonts. *//* ========================================================================== */
/** * Headings hierarchy * - Uses modular scale for harmonious sizing * - Tighter line-height for larger text improves readability */h1, h2, h3, h4, h5, h6 { font-weight: 700; font-family: var(--font-display); line-height: var(--line-height-tight); color: var(--color-text); margin-top: var(--space-2xl); margin-bottom: var(--space-md); letter-spacing: -0.02em;}
h1 { font-size: var(--font-size-5xl); margin-top: 0;}
h2 { font-size: var(--font-size-4xl);}
h3 { font-size: var(--font-size-3xl);}
h4 { font-size: var(--font-size-2xl);}
h5 { font-size: var(--font-size-xl);}
h6 { font-size: var(--font-size-lg); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em;}
p { margin-bottom: var(--space-lg); max-width: var(--content-width);}
/** * First paragraph after headings - No top margin * * Inspired by tufte.css */h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { margin-top: 0;}
/** * Links * * Uses accent color with underline */a { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--transition-fast);}
a:hover { color: var(--color-accent-hover);}
a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm);}
em { font-style: italic;}
strong { font-weight: 700;}
mark { background-color: var(--color-mark); padding: 0.1em 0.2em; border-radius: var(--radius-sm);}
/** * Subscript and superscript * * Prevents them from affecting line height */sub, sup { font-size: 0.75em; line-height: 0; position: relative; vertical-align: baseline;}
sup { top: -0.5em;}
sub { bottom: -0.25em;}
/** * Small text * Also used for Tufte-style sidenotes (see sidenotes section) */small { font-size: var(--font-size-sm); color: var(--color-text-muted);}
/** * Blockquote styling * Left border for visual distinction, italic for emphasis */blockquote { margin: var(--space-xl) 0; padding: var(--space-md) var(--space-lg); border-left: 4px solid var(--color-accent); background-color: var(--color-bg-alt); font-style: italic; color: var(--color-text-muted); max-width: var(--content-width); border-radius: var(--radius-sm);}
blockquote p:last-child { margin-bottom: 0;}
/** * Citation element */cite { font-style: normal; font-size: var(--font-size-sm); color: var(--color-text-muted);}
blockquote cite::before { /* em dash */ content: "— ";}
/** * Inline code * * Monospace font with subtle background */code { font-family: var(--font-mono); font-size: 0.9em; padding: 0.15em 0.4em; color: var(--color-text); background-color: var(--color-code-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm);}
/** * Keyboard input * * Styled like keys on a keyboard */kbd { font-family: var(--font-mono); font-size: 0.9em; padding: 0.15em 0.4em; background-color: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: 0 1px 0 var(--color-border), 0 0 0 2px var(--color-bg) inset;}
samp { font-family: var(--font-mono); font-size: 0.9em;}
var { font-family: var(--font-mono); font-style: normal; font-weight: 600;}
/** * Preformatted code blocks * * Horizontal scrolling for overflow, no word wrap */pre { margin: var(--space-xl) 0; padding: var(--space-lg); color: var(--color-text); background-color: var(--color-code-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow-x: auto; max-width: var(--content-width); line-height: var(--line-height-base);}
pre code { padding: 0; color: inherit; background: none; border: none; font-size: 0.875rem;}
hr { margin: var(--space-3xl) auto; border: none; border-top: 1px solid var(--color-border); max-width: 50%;}