/** * Wavecave — terminal chrome & color schemes. * * The Gruvbox palette lives in theme.json (dark values). This file: * 1. Re-maps the custom + preset CSS variables for Gruvbox Light. * 2. Styles the terminal-flavored components (prompts, code windows, * flags, cards, lightbox) on top of those variables. * * Scheme resolution: * - Default: follows prefers-color-scheme (data-theme="auto"). * - Manual: data-theme="light"|"dark" on , set by theme-toggle.js. */ /* ------------------------------------------------------------------ */ /* 1. Light scheme variable overrides */ /* ------------------------------------------------------------------ */ :root { color-scheme: dark; } /* Manual override: light. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="light"], :root[data-theme="light"] body { /* (plain CSS expansion of the block above — kept in sync) */ --wp--custom--gb--bg-hard: #f9f5d7; --wp--custom--gb--bg: #fbf1c7; --wp--custom--gb--bg-soft: #f2e5bc; --wp--custom--gb--bg-1: #ebdbb2; --wp--custom--gb--bg-2: #d5c4a1; --wp--custom--gb--bg-3: #bdae93; --wp--custom--gb--bg-4: #a89984; --wp--custom--gb--fg-0: #282828; --wp--custom--gb--fg: #3c3836; --wp--custom--gb--fg-2: #504945; --wp--custom--gb--fg-3: #665c54; --wp--custom--gb--fg-4: #7c6f64; --wp--custom--gb--gray: #928374; --wp--custom--gb--red: #cc241d; --wp--custom--gb--green: #98971a; --wp--custom--gb--yellow: #d79921; --wp--custom--gb--blue: #458588; --wp--custom--gb--purple: #b16286; --wp--custom--gb--aqua: #689d6a; --wp--custom--gb--orange: #d65d0e; --wp--custom--gb--accent: #458588; --wp--custom--gb--link: #458588; --wp--custom--gb--link-hover: #d65d0e; --wp--custom--gb--selection-bg: #d5c4a1; --wp--custom--gb--selection-fg: #282828; --wp--custom--terminal--prompt-user: #79740e; --wp--custom--terminal--prompt-path: #458588; --wp--custom--terminal--prompt-symbol: #928374; --wp--custom--terminal--cursor: #79740e; --wp--preset--color--gb-bg-hard: #f9f5d7; --wp--preset--color--gb-bg: #fbf1c7; --wp--preset--color--gb-bg-soft: #f2e5bc; --wp--preset--color--gb-bg-1: #ebdbb2; --wp--preset--color--gb-bg-2: #d5c4a1; --wp--preset--color--gb-fg-0: #282828; --wp--preset--color--gb-fg: #3c3836; --wp--preset--color--gb-fg-2: #504945; --wp--preset--color--gb-fg-3: #665c54; --wp--preset--color--gb-fg-4: #7c6f64; --wp--preset--color--gb-gray: #928374; --wp--preset--color--gb-red: #cc241d; --wp--preset--color--gb-green: #98971a; --wp--preset--color--gb-yellow: #d79921; --wp--preset--color--gb-blue: #458588; --wp--preset--color--gb-purple: #b16286; --wp--preset--color--gb-aqua: #689d6a; --wp--preset--color--gb-orange: #d65d0e; } /* System preference: light (only when the user hasn't chosen). */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]), :root:not([data-theme="dark"]) body { --wp--custom--gb--bg-hard: #f9f5d7; --wp--custom--gb--bg: #fbf1c7; --wp--custom--gb--bg-soft: #f2e5bc; --wp--custom--gb--bg-1: #ebdbb2; --wp--custom--gb--bg-2: #d5c4a1; --wp--custom--gb--bg-3: #bdae93; --wp--custom--gb--bg-4: #a89984; --wp--custom--gb--fg-0: #282828; --wp--custom--gb--fg: #3c3836; --wp--custom--gb--fg-2: #504945; --wp--custom--gb--fg-3: #665c54; --wp--custom--gb--fg-4: #7c6f64; --wp--custom--gb--gray: #928374; --wp--custom--gb--red: #cc241d; --wp--custom--gb--green: #98971a; --wp--custom--gb--yellow: #d79921; --wp--custom--gb--blue: #458588; --wp--custom--gb--purple: #b16286; --wp--custom--gb--aqua: #689d6a; --wp--custom--gb--orange: #d65d0e; --wp--custom--gb--accent: #458588; --wp--custom--gb--link: #458588; --wp--custom--gb--link-hover: #d65d0e; --wp--custom--gb--selection-bg: #d5c4a1; --wp--custom--gb--selection-fg: #282828; --wp--custom--terminal--prompt-user: #79740e; --wp--custom--terminal--prompt-path: #458588; --wp--custom--terminal--prompt-symbol: #928374; --wp--custom--terminal--cursor: #79740e; --wp--preset--color--gb-bg-hard: #f9f5d7; --wp--preset--color--gb-bg: #fbf1c7; --wp--preset--color--gb-bg-soft: #f2e5bc; --wp--preset--color--gb-bg-1: #ebdbb2; --wp--preset--color--gb-bg-2: #d5c4a1; --wp--preset--color--gb-fg-0: #282828; --wp--preset--color--gb-fg: #3c3836; --wp--preset--color--gb-fg-2: #504945; --wp--preset--color--gb-fg-3: #665c54; --wp--preset--color--gb-fg-4: #7c6f64; --wp--preset--color--gb-gray: #928374; --wp--preset--color--gb-red: #cc241d; --wp--preset--color--gb-green: #98971a; --wp--preset--color--gb-yellow: #d79921; --wp--preset--color--gb-blue: #458588; --wp--preset--color--gb-purple: #b16286; --wp--preset--color--gb-aqua: #689d6a; --wp--preset--color--gb-orange: #d65d0e; } :root:not([data-theme="dark"]) { color-scheme: light; } } /* ------------------------------------------------------------------ */ /* 2. Base */ /* ------------------------------------------------------------------ */ ::selection { background: var(--wp--custom--gb--selection-bg); color: var(--wp--custom--gb--selection-fg); } body { transition: background-color 0.25s ease, color 0.25s ease; } /* Never let a stray wide element pan the page sideways (mobile). */ html, body { overflow-x: hidden; } @supports (overflow: clip) { html, body { overflow-x: clip; } } :focus-visible { outline: 2px solid var(--wp--custom--gb--link-hover); outline-offset: 2px; border-radius: 2px; } img { transition: filter 0.2s ease; } /* ------------------------------------------------------------------ */ /* 3. Header */ /* ------------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--wp--custom--gb--bg-2) !important; } .site-branding .prompt-part { margin: 0; font-size: 1rem; white-space: nowrap; } .site-branding .wp-block-site-title { font-size: 1rem; } .site-branding .wp-block-site-title a { color: var(--wp--custom--terminal--prompt-path); text-decoration: none; font-weight: 700; } .site-branding .wp-block-site-title a:hover { color: var(--wp--custom--gb--link-hover); } /* Navigation: mono links, pipe-adjacent spacing, accent hover. */ .site-nav a { color: var(--wp--custom--gb--fg-3); text-decoration: none; } .site-nav a:hover { color: var(--wp--custom--gb--link-hover); text-decoration: none; } .site-nav .current-menu-item > a, .site-nav a[aria-current="page"] { color: var(--wp--custom--gb--green); } .site-nav .current-menu-item > a::before, .site-nav a[aria-current="page"]::before { content: "▸ "; color: var(--wp--custom--gb--green); } /* Mobile overlay menu — compact dropdown panel anchored under the header. */ .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--custom--gb--bg-hard) !important; padding: 1rem 1.25rem !important; position: fixed; top: auto; bottom: auto; left: 0; right: 0; max-height: 50vh; overflow-y: auto; border-bottom: 1px solid var(--wp--custom--gb--bg-2); width: 100%; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0.75rem; display: flex !important; flex-direction: column; } .wp-block-navigation__responsive-container.is-menu-open a { color: var(--wp--custom--gb--fg-2) !important; font-size: 1rem; } /* Style the mobile menu toggle button as a terminal command. */ .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { font-family: var(--wp--preset--font-family--mono) !important; font-size: var(--wp--preset--font-size--small) !important; color: var(--wp--custom--gb--fg-3) !important; background: var(--wp--custom--gb--bg-soft) !important; border: 1px solid var(--wp--custom--gb--bg-2) !important; border-radius: 4px; padding: 0.3em 0.7em !important; cursor: pointer; } /* Keep the header slim on small screens: tighter padding, smaller logo. */ @media (max-width: 640px) { .site-header .wp-block-group.alignwide { gap: 0.5rem; } .site-branding .prompt-part, .site-branding .wp-block-site-title { font-size: 0.9rem; } } /* Theme toggle: looks like a command with a flag showing state. */ .theme-toggle { display: inline-flex; align-items: baseline; gap: 0.4em; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--small); color: var(--wp--custom--gb--fg-3); background: var(--wp--custom--gb--bg-soft); border: 1px solid var(--wp--custom--gb--bg-2); border-radius: 4px; padding: 0.3em 0.7em; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .theme-toggle:hover { color: var(--wp--custom--gb--link-hover); border-color: var(--wp--custom--gb--link-hover); } .theme-toggle__state { color: var(--wp--custom--gb--green); } /* ------------------------------------------------------------------ */ /* 4. Terminal typography */ /* ------------------------------------------------------------------ */ .prompt-user { color: var(--wp--custom--terminal--prompt-user); } .prompt-path { color: var(--wp--custom--terminal--prompt-path); } .prompt-symbol { color: var(--wp--custom--terminal--prompt-symbol); } .prompt-flag { color: var(--wp--custom--gb--orange); } .prompt-string { color: var(--wp--custom--gb--green); } .prompt-comment { color: var(--wp--custom--gb--gray); font-style: italic; } .prompt-filename { color: var(--wp--custom--gb--yellow); } .command-header { color: var(--wp--custom--gb--fg-3); margin-bottom: 0.25rem; } /* Blinking block cursor after the logo prompt. */ .terminal-cursor { display: inline-block; width: 0.6em; height: 1.1em; margin-left: 0.15em; vertical-align: text-bottom; background-color: var(--wp--custom--terminal--cursor); color: transparent; animation: wavecave-blink 1.2s step-end infinite; } @keyframes wavecave-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* ------------------------------------------------------------------ */ /* 5. Hero */ /* ------------------------------------------------------------------ */ .hero-terminal { position: relative; border: 1px solid var(--wp--custom--gb--bg-2) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18); overflow: hidden; } /* Window chrome: GNOME/Adwaita-style header bar — plain bar with a single circular close button on the right. Drawn with pure CSS so the colors follow the active Gruvbox scheme. */ .hero-terminal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1.75rem; border-bottom: 1px solid var(--wp--custom--gb--bg-2); border-radius: 8px 8px 0 0; background: linear-gradient(45deg, transparent 44%, var(--wp--custom--gb--fg-3) 44%, var(--wp--custom--gb--fg-3) 56%, transparent 56%) no-repeat right 16px center / 10px 10px, linear-gradient(-45deg, transparent 44%, var(--wp--custom--gb--fg-3) 44%, var(--wp--custom--gb--fg-3) 56%, transparent 56%) no-repeat right 16px center / 10px 10px, radial-gradient(circle 8px at calc(100% - 21px) 50%, var(--wp--custom--gb--bg-3) 96%, transparent 100%), var(--wp--custom--gb--bg-1); } /* Centered window title, GNOME-style. */ .hero-terminal::after { content: "user@wavecave: ~"; position: absolute; top: 0; left: 0; right: 0; height: 1.75rem; display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--mono); font-size: 0.65rem; font-weight: 700; color: var(--wp--custom--gb--fg-4); pointer-events: none; } .hero-headline { max-width: 22ch; font-size: clamp(1.75rem, 1.4rem + 1.75vw, 2.75rem) !important; } .hero-bio { max-width: 62ch; } /* ------------------------------------------------------------------ */ /* 6. Code blocks — terminal window */ /* ------------------------------------------------------------------ */ .wp-block-code { position: relative; border: 1px solid var(--wp--custom--gb--bg-2); overflow: hidden; } /* Title bar — GNOME header bar with a single close button. */ .wp-block-code::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2rem; border-bottom: 1px solid var(--wp--custom--gb--bg-2); border-radius: 6px 6px 0 0; background: linear-gradient(45deg, transparent 44%, var(--wp--custom--gb--fg-3) 44%, var(--wp--custom--gb--fg-3) 56%, transparent 56%) no-repeat right 12px center / 9px 9px, linear-gradient(-45deg, transparent 44%, var(--wp--custom--gb--fg-3) 44%, var(--wp--custom--gb--fg-3) 56%, transparent 56%) no-repeat right 12px center / 9px 9px, radial-gradient(circle 7px at calc(100% - 16.5px) 50%, var(--wp--custom--gb--bg-3) 96%, transparent 100%), var(--wp--custom--gb--bg-1); } .wp-block-code code { display: block; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--wp--custom--gb--bg-3) transparent; } /* "filename" label + copy button (injected by code-copy.js). */ .code-window-label { position: absolute; top: 0; left: 14px; right: 110px; height: 2rem; display: flex; align-items: center; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); color: var(--wp--custom--gb--fg-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } .code-copy-button { position: absolute; top: 0.2rem; right: 2.3rem; height: 1.6rem; display: inline-flex; align-items: center; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); color: var(--wp--custom--gb--fg-3); background: transparent; border: 1px solid var(--wp--custom--gb--bg-3); border-radius: 4px; padding: 0 0.6em; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .code-copy-button:hover { color: var(--wp--custom--gb--link-hover); border-color: var(--wp--custom--gb--link-hover); } .code-copy-button.is-copied { color: var(--wp--custom--gb--green); border-color: var(--wp--custom--gb--green); } /* ------------------------------------------------------------------ */ /* 7. Quotes, dividers, flags */ /* ------------------------------------------------------------------ */ /* Block style: Terminal Comment for core/quote. */ .wp-block-quote.is-style-terminal-comment { border-left: none; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--small); color: var(--wp--custom--gb--fg-3); background: var(--wp--custom--gb--bg-soft); padding: 1rem 1.25rem; border-radius: 4px; } .wp-block-quote.is-style-terminal-comment p::before { content: "# "; color: var(--wp--custom--gb--gray); } .wp-block-quote.is-style-terminal-comment cite { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); color: var(--wp--custom--gb--gray); } /* Block style: Terminal Divider for core/separator. */ .wp-block-separator.is-style-terminal-divider { border: none !important; border-top: none !important; background: none !important; height: auto; margin-top: 2rem; margin-bottom: 2rem; } .wp-block-separator.is-style-terminal-divider::before { content: "# ────────────────────────────────────────────────────────────────────────────────"; display: block; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); color: var(--wp--custom--gb--bg-2); white-space: nowrap; overflow: hidden; } /* Tags styled as CLI flags: --controls --python --linux */ .terminal-flags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .terminal-flags a, .terminal-flags span { display: inline-block; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); color: var(--wp--custom--gb--aqua); background: var(--wp--custom--gb--bg-1); border: 1px solid var(--wp--custom--gb--bg-2); border-radius: 3px; padding: 0.15em 0.55em; text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease; } .terminal-flags a::before, .terminal-flags span::before { content: "--"; color: var(--wp--custom--gb--gray); } .terminal-flags a:hover { color: var(--wp--custom--gb--link-hover); border-color: var(--wp--custom--gb--link-hover); text-decoration: none; } /* ------------------------------------------------------------------ */ /* 8. Cards & listings */ /* ------------------------------------------------------------------ */ .project-card { border: 1px solid var(--wp--custom--gb--bg-2) !important; height: 100%; transition: border-color 0.15s ease, transform 0.15s ease; } .project-card:hover { border-color: var(--wp--custom--gb--bg-3); transform: translateY(-2px); } .project-card .wp-block-post-title a:hover { color: var(--wp--custom--gb--link-hover); } .post-list-item .wp-block-post-title a, .post-index-item .wp-block-post-title a { color: var(--wp--custom--gb--fg-0); } .post-list-item .wp-block-post-title, .post-index-item .wp-block-post-title { font-size: clamp(1.35rem, 1.2rem + 0.75vw, 1.75rem) !important; } /* Excerpt: match prototype — smaller, lower contrast (fg-3), tighter. */ .post-list-item .wp-block-post-excerpt, .post-index-item .wp-block-post-excerpt { font-size: var(--wp--preset--font-size--small) !important; color: var(--wp--custom--gb--fg-3) !important; line-height: 1.65 !important; } .post-list-item .wp-block-post-excerpt__excerpt, .post-index-item .wp-block-post-excerpt__excerpt { font-size: var(--wp--preset--font-size--small) !important; color: var(--wp--custom--gb--fg-3) !important; line-height: 1.65 !important; } /* "cat post.md →" link: mono, small — matches prototype. */ .post-list-item .wp-block-post-excerpt__more-link, .post-index-item .wp-block-post-excerpt__more-link { font-family: var(--wp--preset--font-family--mono) !important; font-size: var(--wp--preset--font-size--x-small) !important; } /* Resume bullets: match prototype body size, not the tiny WP default. */ .resume-bullets { font-size: var(--wp--preset--font-size--medium) !important; line-height: 1.75 !important; } /* Resume tagline: fg-3 color to match prototype. */ .resume-tagline { color: var(--wp--custom--gb--fg-3) !important; } /* Command headers: use small (13px) consistently — the prototype used 14px but WordPress's small preset is 13px; close enough and consistent. */ .command-header { font-size: var(--wp--preset--font-size--small) !important; } /* Resume section headers (# --- experience ---): match prototype 18px. */ .command-header .resume-section-name { font-size: var(--wp--preset--font-size--medium) !important; } .post-list-item .wp-block-post-title a:hover, .post-index-item .wp-block-post-title a:hover { color: var(--wp--custom--gb--link); } .meta-sep { margin: 0; } .meta-reading-time { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); color: var(--wp--custom--gb--gray); } .section-more a { text-decoration: none; } .section-more a:hover { text-decoration: underline; } /* ------------------------------------------------------------------ */ /* 9. Photography */ /* ------------------------------------------------------------------ */ .photo-grid .wp-block-image img, .photo-teaser__img img { border-radius: 4px; cursor: zoom-in; } .photo-grid .wp-block-image:hover img, .photo-teaser__img:hover img { filter: brightness(1.08); } .photo-grid figcaption { display: flex; flex-direction: column; gap: 0.1rem; text-align: left; } .exif-line { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); color: var(--wp--custom--gb--fg-4); } .exif-loc { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); color: var(--wp--custom--gb--gray); font-style: italic; } /* Lightbox */ .wavecave-lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; background: color-mix(in srgb, var(--wp--custom--gb--bg-hard) 92%, transparent); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .wavecave-lightbox.is-open { opacity: 1; visibility: visible; } .wavecave-lightbox img { max-width: 92vw; max-height: 80vh; border-radius: 4px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); cursor: zoom-out; } .wavecave-lightbox__caption { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); color: var(--wp--custom--gb--fg-3); text-align: center; max-width: 80vw; } .wavecave-lightbox__close, .wavecave-lightbox__prev, .wavecave-lightbox__next { font-family: var(--wp--preset--font-family--mono); font-size: 1rem; color: var(--wp--custom--gb--fg-3); background: transparent; border: 1px solid var(--wp--custom--gb--bg-3); border-radius: 4px; padding: 0.3em 0.7em; cursor: pointer; } .wavecave-lightbox__close:hover, .wavecave-lightbox__prev:hover, .wavecave-lightbox__next:hover { color: var(--wp--custom--gb--link-hover); border-color: var(--wp--custom--gb--link-hover); } .wavecave-lightbox__close { position: absolute; top: 1.25rem; right: 1.25rem; } .wavecave-lightbox__prev, .wavecave-lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); } .wavecave-lightbox__prev { left: 1.25rem; } .wavecave-lightbox__next { right: 1.25rem; } .wavecave-lightbox__prev[hidden], .wavecave-lightbox__next[hidden] { display: none; } /* ------------------------------------------------------------------ */ /* 10. Resume */ /* ------------------------------------------------------------------ */ .resume-section-header { color: var(--wp--custom--gb--fg-3); border-bottom: 1px solid var(--wp--custom--gb--bg-2); padding-bottom: 0.4rem; } .resume-section-name { color: var(--wp--custom--gb--yellow); font-weight: 700; } .resume-entry__head h3 { margin: 0; } .resume-dates { margin: 0; white-space: nowrap; } .resume-bullets li { margin-bottom: 0.35rem; } .resume-card { border: 1px solid var(--wp--custom--gb--bg-2); } .resume-contact { list-style: none; padding-left: 0; } .resume-contact li { padding: 0.15rem 0; } @media (max-width: 781px) { .resume-columns { flex-wrap: wrap !important; } .resume-columns .wp-block-column { flex-basis: 100% !important; } } /* ------------------------------------------------------------------ */ /* 11. 404 */ /* ------------------------------------------------------------------ */ .error-terminal { border: 1px solid var(--wp--custom--gb--bg-2); position: relative; } .error-terminal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1.75rem; border-bottom: 1px solid var(--wp--custom--gb--bg-2); border-radius: 8px 8px 0 0; background: linear-gradient(45deg, transparent 44%, var(--wp--custom--gb--fg-3) 44%, var(--wp--custom--gb--fg-3) 56%, transparent 56%) no-repeat right 16px center / 10px 10px, linear-gradient(-45deg, transparent 44%, var(--wp--custom--gb--fg-3) 44%, var(--wp--custom--gb--fg-3) 56%, transparent 56%) no-repeat right 16px center / 10px 10px, radial-gradient(circle 8px at calc(100% - 21px) 50%, var(--wp--custom--gb--bg-3) 96%, transparent 100%), var(--wp--custom--gb--bg-1); } .error-terminal::after { content: "user@wavecave: ~"; position: absolute; top: 0; left: 0; right: 0; height: 1.75rem; display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--mono); font-size: 0.65rem; font-weight: 700; color: var(--wp--custom--gb--fg-4); pointer-events: none; } .error-links { list-style: none; padding-left: 0; } .error-links li { padding: 0.2rem 0; } /* ------------------------------------------------------------------ */ /* 12. Footer */ /* ------------------------------------------------------------------ */ .site-footer a { color: var(--wp--custom--gb--fg-3); } .site-footer a:hover { color: var(--wp--custom--gb--link-hover); } .footer-social .wp-social-link a { padding: 0; } .footer-social .wp-social-link svg { width: 1.25rem; height: 1.25rem; transition: transform 0.15s ease; } .footer-social .wp-social-link a:hover svg { transform: translateY(-2px); } /* ------------------------------------------------------------------ */ /* 13. Vinyl set list */ /* ------------------------------------------------------------------ */ .set-row { margin: 0; white-space: nowrap; overflow-x: auto; scrollbar-width: thin; } .set-perm { color: var(--wp--custom--gb--fg-4); } .set-size { color: var(--wp--custom--gb--blue); } .set-date { color: var(--wp--custom--gb--gray); } /* ------------------------------------------------------------------ */ /* 14. Small screens */ /* ------------------------------------------------------------------ */ @media (max-width: 600px) { /* Let long command lines wrap like a terminal line-continuation instead of clipping them behind a hidden scrollbar. */ .command-header, .set-row { white-space: normal; overflow-wrap: anywhere; } .hero-headline { max-width: none; } .wavecave-lightbox__prev { left: 0.5rem; } .wavecave-lightbox__next { right: 0.5rem; } }