/* lynlyn.moe — terminal-flavored small web * * THEMES: each theme is one [data-theme="…"] block of tokens, nothing else. * To add a flavor (frappé, mocha, latte…): copy the block, swap the hex * values from https://catppuccin.com/palette, set data-theme on . */ @font-face { font-family: "Martian Mono"; src: url("assets/fonts/martian-mono-var.woff2") format("woff2"); font-weight: 100 800; font-stretch: 75% 100%; font-display: swap; } [data-theme="macchiato"] { --base: #24273a; --mantle: #1e2030; --crust: #181926; --surface0: #363a4f; --surface1: #494d64; --overlay0: #6e738d; --subtext0: #a5adcb; --text: #cad3f5; --pink: #f5bde6; --mauve: #c6a0f6; --red: #ed8796; --peach: #f5a97f; --yellow: #eed49f; --green: #a6da95; --teal: #8bd5ca; --blue: #8aadf4; --lavender: #b7bdf8; } * { margin: 0; padding: 0; box-sizing: border-box; } html { color-scheme: dark; } body { background: var(--crust); background-image: radial-gradient(ellipse 120% 80% at 50% -10%, var(--base) 0%, var(--mantle) 60%, var(--crust) 100%); background-attachment: fixed; color: var(--text); font-family: "Martian Mono", monospace; font-variation-settings: 'wdth' 75, 'wght' 440; font-size: 14px; line-height: 1.7; min-height: 100vh; } /* CRT scanlines, very faint */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, transparent 0 2px, rgba(24, 25, 38, 0.22) 2px 3px); z-index: 1; } .term { max-width: 76ch; margin: 0 auto; padding: 3rem 1.25rem 2rem; } ::selection { background: var(--pink); color: var(--crust); } a { color: var(--pink); text-decoration: underline dotted; text-underline-offset: 3px; } a:hover { background: var(--pink); color: var(--crust); text-decoration: none; } strong { font-variation-settings: 'wdth' 75, 'wght' 700; color: var(--lavender); } /* ---- banner ---- */ .ascii { font-family: inherit; font-size: clamp(9px, 2.6vw, 16px); line-height: 1.08; overflow: hidden; background: linear-gradient(120deg, var(--pink), var(--mauve) 55%, var(--lavender)); -webkit-background-clip: text; background-clip: text; color: transparent; } .ascii .moe { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--mauve); -webkit-text-fill-color: var(--mauve); } .tagline { color: var(--subtext0); margin-top: 0.75rem; } /* ---- prompt blocks ---- */ .block, footer { margin-top: 2.5rem; } .ps1 { white-space: nowrap; overflow-x: auto; } .user { color: var(--mauve); font-variation-settings: 'wdth' 75, 'wght' 640; } .path { color: var(--blue); } .dollar { color: var(--green); } .cmd { color: var(--text); } .out { margin-top: 0.6rem; padding-left: 1ch; border-left: 2px solid var(--surface0); } .out > * + * { margin-top: 0.8rem; } .h-md { color: var(--peach); font-variation-settings: 'wdth' 75, 'wght' 700; } .dim { color: var(--overlay0); } .small { font-size: 12px; } .todo { color: var(--yellow); } /* ---- socials ---- */ .socials { border-collapse: collapse; } .socials td { padding: 0.15rem 1ch 0.15rem 0; vertical-align: top; } .tag { font-variation-settings: 'wdth' 75, 'wght' 640; } .t-peach { color: var(--peach); } .t-blue { color: var(--blue); } .t-mauve { color: var(--mauve); } .t-teal { color: var(--teal); } .t-yellow { color: var(--yellow); } .t-lavender { color: var(--lavender); } .t-green { color: var(--green); } /* ---- key blocks (identity page) ---- */ .keyblock { font-family: inherit; font-size: 12px; line-height: 1.6; overflow-x: auto; background: var(--mantle); border: 1px solid var(--surface0); padding: 0.6rem 0.8rem; } /* ---- badges ---- */ .stickers { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; position: relative; z-index: 2; /* above the body::before scanline overlay */ } .stickers img { image-rendering: pixelated; display: block; } .stickers a { display: block; line-height: 0; } .stickers a:hover { background: none; outline: 2px solid var(--pink); } .friends-head { margin-top: 1.2rem; } .slot { width: 88px; height: 31px; border: 1px dashed var(--surface1); color: var(--overlay0); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; } /* ---- footer cursor ---- */ .cursor::after { content: "▊"; color: var(--pink); animation: blink 1.1s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } /* ---- load choreography: sections appear as if the shell is catching up ---- */ /* fill backwards, not both: a persisting fill would keep each section a stacking context and trap .stickers under the scanline overlay */ .reveal { animation: rise 0.45s ease-out backwards; } .reveal:nth-child(1) { animation-delay: 0.05s; } .reveal:nth-child(2) { animation-delay: 0.25s; } .reveal:nth-child(3) { animation-delay: 0.45s; } .reveal:nth-child(4) { animation-delay: 0.65s; } .reveal:nth-child(5) { animation-delay: 0.85s; } .reveal:nth-child(6) { animation-delay: 1.05s; } .reveal:nth-child(7) { animation-delay: 1.25s; } @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* first command types itself */ .typed { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 6ch; animation: type 0.5s steps(6) 0.35s both; } @keyframes type { from { width: 0; } } @media (prefers-reduced-motion: reduce) { .reveal, .typed, .cursor::after { animation: none; } .typed { width: auto; } }