@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@100..900&display=swap'); /* Table of contents -------------------------------------------------- - Theme values - Grid - Base Styles - Typography - Links - Code - Spacing - Utilities - Motion - Misc */ /* Theme values -------------------------------------------------- */ :root { --slate-bg: #3f4d61; --slate-accent: #535f71; --slate-accent-rim: #7b8492; --slate-accent-hover: #606c7c; --slate-accent-hover-rim: #929aa6; --slate-accent-strong: #657080; --slate-accent-strong-rim: #a2a8b2; --slate-grid: #ffffff; --slate-ink: #f2f5fa; --slate-ink-strong: #ffffff; --slate-muted: #c0c7cd; --slate-line: rgba(255, 255, 255, .3); --slate-surface: rgba(255, 255, 255, .055); --slate-radius: 18px; --slate-ease: cubic-bezier(.2, .7, .2, 1); } /* Grid -------------------------------------------------- LinkStack nests the page in .container > .row > .column, prints the share button before that container and the credit after the links inside it. The three wrappers are dropped to `display: contents`, so every page element becomes a direct flex item of and `order` can put the share button under the last link and the credit under the share button. then carries the page box: 560px of content, whatever the wrappers do. -------------------------------------------------- */ body > .container, .row, .column, .columns { display: contents; } /* Reading order on the page: links, share button, credit */ .sharediv { order: 1; } .column > .container { order: 2; } /* Everything the background grid must stay behind */ .column > * { position: relative; z-index: 1; } /* A container that is not the page wrapper, the credit one, keeps its box */ .container { width: 100%; max-width: 560px; margin: 0 auto; box-sizing: border-box; } .row, .column, .columns { width: 100%; margin-left: 0; box-sizing: border-box; } /* the admin bar lays its items out with floats, it must not inherit the centring */ #linkstack-adminbar { text-align: left; } /* Base Styles -------------------------------------------------- */ html { font-size: 100%; color-scheme: dark; background-color: var(--slate-bg); } body { display: flex; flex-direction: column; width: 100%; max-width: 600px; /* the admin bar sets its own margin-top from a later stylesheet */ margin: 0 auto; padding: 52px 20px 40px; min-height: 100vh; box-sizing: border-box; font-size: 18px; line-height: 24px; font-weight: 300; text-align: center; } /* For devices larger than 550px */ @media (min-width: 550px) { body { padding: 64px 20px 48px; } } /* Background grid */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .10; background-image: linear-gradient(var(--slate-grid) 1px, transparent 1px), linear-gradient(90deg, var(--slate-grid) 1px, transparent 1px); background-size: 64px 64px; animation: slateDrift 9s linear infinite; will-change: background-position; -webkit-mask-image: radial-gradient(77% 60.5% at 50% 20%, #000 0%, transparent 100%); mask-image: radial-gradient(77% 60.5% at 50% 20%, #000 0%, transparent 100%); } footer, main, .content { position: relative; z-index: 1; } /* Typography -------------------------------------------------- */ h1, h2, h3, .name, #name { color: var(--slate-ink); font-weight: 800; letter-spacing: -.04em; text-align: center; text-wrap: pretty; } h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.05; } h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.15; } /* Larger than phablet */ @media (min-width: 550px) { h1 { font-size: 38px; } } /* The verification badge carries margin: 5px on all four sides, from a