@font-face { font-family: 'Jacquard 12'; src: url('Jacquard12-Regular.ttf'); } /* ---- base element styling: plain semantic HTML looks right with no classes ---- */ html, body { margin: 0; padding: 0; background-color: black; color: white; font-family: system-ui, sans-serif; } /* add class="page" to for hand-written content pages (reading-width column) */ body.page { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 700px; margin: 0 auto; padding: 30px 20px 80px; box-sizing: border-box; } h1, h2, h3, h4, h5, h6 { font-weight: 600; color: white; } h1 { font-family: "Jacquard 12"; font-weight: 500; font-size: 48px; } h2 { font-size: 32px; } h3 { font-size: 24px; } h4, h5, h6 { font-size: 20px; } p { color: rgba(255, 255, 255, 0.85); } a { color: #9ad1ff; } a:visited { color: #c3a6ff; } img { max-width: 100%; display: block; border-radius: 6px; } blockquote { border-left: 3px solid rgba(255, 255, 255, 0.3); margin: 0; padding-left: 16px; color: rgba(255, 255, 255, 0.7); } ul, ol { color: rgba(255, 255, 255, 0.85); padding-left: 24px; } li { margin: 4px 0; } button { font-family: inherit; } /* ported blog posts land in a code block with its own inline syntax colors — just keep it from overflowing the reading column horizontally */ .highlight { overflow-x: auto; border-radius: 6px; margin: 16px 0; } .highlight pre { margin: 0; padding: 12px 16px; } /* ---- reusable components ---- */ .title { font-size: 68px; font-weight: 500; font-family: "Jacquard 12"; color: white; } .menu { display: flex; flex-direction: column; gap: 14px; align-items: center; width: 100%; max-width: 320px; margin: 0 auto; } .menu-btn, .btn { display: block; width: 100%; box-sizing: border-box; padding: 14px 20px; color: white; font-size: 20px; font-weight: 600; text-align: center; text-decoration: underline; cursor: pointer; touch-action: manipulation; } .btn { display: inline-block; width: auto; } .menu-btn:active, .btn:active { background: rgba(255, 255, 255, 0.16); } /* optional: add to an image-based button (e.g. an wrapping an ) for a hover/press tint, since background-color doesn't affect image pixels */ .img-btn { transition: filter 0.15s ease; } .img-btn:hover { filter: brightness(0.8) saturate(1.4); } .img-btn:active { filter: brightness(0.85); } .menu-label { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.6); margin: 18px 0 4px; } /* ported blog post byline — date + tags, see pages/dogfooding.html */ .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.5); font-size: 14px; margin: -8px 0 28px; } .post-meta .tag { border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; padding: 2px 10px; } /* embedding a decker export inline in a page — see pages/template.html. Fixed at the deck's native 512x342 (1x): decker's own player only does crisp integer-multiple scaling outside of fullscreen, so a fluid/fractional container just gets letterboxed inside itself. Use the fullscreen button for a fill-the-screen view (that path uses fractional scaling). */ .decker-wrap { position: relative; width: 512px; height: 342px; max-width: 100%; margin: 0 auto; } .decker-embed { width: 100%; height: 100%; border: none; display: block; } .decker-fullscreen-btn { position: absolute; right: 8px; bottom: 8px; z-index: 1; padding: 3px 10px; border: none; border-radius: 6px; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 14px; cursor: pointer; touch-action: manipulation; } /* expandable "made with Decker" note — pair with a .decker-embed, see pages/welcome.html */ .decker-note { width: 512px; max-width: 100%; box-sizing: border-box; margin: 12px auto 0; padding: 10px 14px; } .decker-note summary { cursor: pointer; font-size: 16px; font-weight: 600; touch-action: manipulation; } .decker-note p { margin: 10px 0 0; font-size: 15px; }