/* singhangad.in — base styles (all pages) */ /* ── Animations ──────────────────────────────────────────── */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-out { to { opacity: 0; } } /* Sticky footer — body is a flex column so footer always sits at or below the viewport bottom when content is short, and scrolls naturally when long. */ body { display: flex; flex-direction: column; min-height: 100dvh; } .site-header { flex-shrink: 0; } #main { flex: 1 0 auto; } .site-footer { flex-shrink: 0; } /* Page entrance — main fades in on every load. */ #main { animation: fadeIn 0.22s ease both; } /* Pre-command line — injected by site.js inside
right before the h1, at the same position the old ./page breadcrumbs occupied. Matches the visual weight of the former mono-small dim path text. */ .pre-cmd { font-size: 11px; letter-spacing: 0.06em; color: var(--dim); margin-bottom: 0; } .pre-cmd::before { content: "$ "; color: var(--accent); } /* Scroll-reveal base: JS adds .will-animate then toggles .animated in view */ .will-animate { opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; /* invisible elements must not absorb clicks */ } .will-animate.animated { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Respect prefers-reduced-motion globally */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } main { animation: none; } .will-animate { opacity: 1; transform: none; transition: none; pointer-events: auto; } } /* Theme transition — site.js briefly adds .theme-transitioning on on toggle. Wrapped in not-reduced-motion so this never fires for users who prefer no motion. */ @media not (prefers-reduced-motion: reduce) { html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important; } } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: fallback; font-weight: 400; src: url('./fonts/jetbrains-mono-400.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: fallback; font-weight: 500; src: url('./fonts/jetbrains-mono-500.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: fallback; font-weight: 600; src: url('./fonts/jetbrains-mono-600.woff2') format('woff2'); } /* ════════════════════════════════════════════════════════════ Color palettes — each defines all CSS custom properties for both light and dark themes. site.js + theme-init.js set data-palette and data-theme on ; the right block wins via attribute selector specificity. ════════════════════════════════════════════════════════════ */ /* ── forest (original site theme) ── */ :root[data-palette="forest"][data-theme="light"] { --bg:#f4f2ec; --fg:#1a1f1c; --dim:#7a7f7a; --faint:#9ea3a0; --accent:#2f7a3e; --line:#e3e0d6; --line-strong:#d4d0c2; --card:#ffffff; --selection:#2f7a3e; --selection-fg:#f4f2ec; } :root[data-palette="forest"][data-theme="dark"] { --bg:#0b0f0d; --fg:#d8e4dc; --dim:#6b7a72; --faint:#4d5a53; --accent:#8bd17c; --line:#1a241f; --line-strong:#243029; --card:#0f1512; --selection:#8bd17c; --selection-fg:#0b0f0d; } /* ── solarized ── */ :root[data-palette="solarized"][data-theme="light"] { --bg:#fdf6e3; --fg:#586e75; --dim:#657b83; --faint:#93a1a1; --accent:#268bd2; --line:#eee8d5; --line-strong:#ccc4aa; --card:#eee8d5; --selection:#268bd2; --selection-fg:#fdf6e3; } :root[data-palette="solarized"][data-theme="dark"] { --bg:#002b36; --fg:#93a1a1; --dim:#657b83; --faint:#586e75; --accent:#268bd2; --line:#073642; --line-strong:#0d4759; --card:#073642; --selection:#268bd2; --selection-fg:#002b36; } /* ── dracula ── */ :root[data-palette="dracula"][data-theme="light"] { --bg:#f8f8f2; --fg:#282a36; --dim:#6272a4; --faint:#a0a8c0; --accent:#6272a4; --line:#ddd8f0; --line-strong:#b5aee0; --card:#f0eefe; --selection:#6272a4; --selection-fg:#f8f8f2; } :root[data-palette="dracula"][data-theme="dark"] { --bg:#282a36; --fg:#f8f8f2; --dim:#6272a4; --faint:#44475a; --accent:#bd93f9; --line:#44475a; --line-strong:#6272a4; --card:#21222c; --selection:#bd93f9; --selection-fg:#282a36; } /* ── nord ── */ :root[data-palette="nord"][data-theme="light"] { --bg:#eceff4; --fg:#2e3440; --dim:#4c566a; --faint:#81a1c1; --accent:#5e81ac; --line:#d8dee9; --line-strong:#b0c0d8; --card:#e5e9f0; --selection:#5e81ac; --selection-fg:#eceff4; } :root[data-palette="nord"][data-theme="dark"] { --bg:#2e3440; --fg:#d8dee9; --dim:#81a1c1; --faint:#4c566a; --accent:#88c0d0; --line:#3b4252; --line-strong:#434c5e; --card:#3b4252; --selection:#88c0d0; --selection-fg:#2e3440; } /* ── gruvbox ── */ :root[data-palette="gruvbox"][data-theme="light"] { --bg:#fbf1c7; --fg:#3c3836; --dim:#7c6f64; --faint:#a89984; --accent:#79740e; --line:#ebdbb2; --line-strong:#d5c4a1; --card:#f2e5bc; --selection:#79740e; --selection-fg:#fbf1c7; } :root[data-palette="gruvbox"][data-theme="dark"] { --bg:#282828; --fg:#ebdbb2; --dim:#928374; --faint:#504945; --accent:#b8bb26; --line:#3c3836; --line-strong:#504945; --card:#32302f; --selection:#b8bb26; --selection-fg:#282828; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); } html { scroll-behavior: smooth; scroll-padding-top: 80px; /* keep anchor targets clear of sticky header */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE / Edge legacy */ } html::-webkit-scrollbar { display: none; } /* Chrome / Safari / Opera */ body { font-family: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: var(--base-fs, 14px); line-height: 1.6; letter-spacing: -0.01em; font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; } ::selection { background: var(--selection); color: var(--selection-fg); } a { color: inherit; text-decoration: none; } a.underline { border-bottom: 1px dashed var(--line-strong); padding-bottom: 1px; transition: border-color .15s, color .15s; } @media (hover: hover) { a.underline:hover { border-color: var(--accent); color: var(--accent); } } /* Layout */ .wrap { max-width: 880px; margin: 0 auto; padding: 0 32px; } .wrap-narrow { max-width: 720px; } .wrap-post { max-width: 1060px; } /* Header / nav */ .site-header { padding: 22px 0; border-bottom: 1px dashed var(--line); position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); z-index: 50; } .site-header .row { display: flex; align-items: center; gap: 14px; font-size: 13px; } .site-header .brand { color: var(--accent); font-weight: 600; } .site-header .spacer { flex: 1; } .site-header nav a { color: var(--dim); transition: color .15s; padding: 4px 2px; } .site-header nav a.active { color: var(--fg); } .site-header nav a.active::before { content: "./"; color: var(--accent); } @media (hover: hover) { .site-header nav a:hover { color: var(--fg); } } .site-header nav { display: flex; gap: 18px; } /* Font size control */ .term-btn { background: var(--line); border: 1px solid var(--line-strong); color: var(--fg); cursor: pointer; font-family: inherit; font-size: 11px; padding: 4px 7px; transition: .15s; line-height: 1; } @media (hover: hover) { .term-btn:hover { background: var(--card); border-color: var(--accent); color: var(--accent); } } .term-btn-nav { display: none; } .font-sizer { display: inline-flex; gap: 0; } .font-btn { background: transparent; border: 1px solid var(--line-strong); color: var(--dim); cursor: pointer; font-family: inherit; font-size: 11px; padding: 4px 7px; transition: .15s; line-height: 1; } .font-btn:first-child { border-right: none; } @media (hover: hover) { .font-btn:hover { color: var(--fg); border-color: var(--accent); } } /* Text helpers */ .dim { color: var(--dim); } .faint { color: var(--faint); } .acc { color: var(--accent); } .mono-small { font-size: 11px; letter-spacing: 0.06em; } .prompt::before { content: "$ "; color: var(--accent); } .comment::before { content: "# "; color: var(--dim); } .comment { color: var(--dim); } .cursor { display: inline-block; width: 8px; height: 15px; background: var(--accent); vertical-align: -2px; margin-left: 2px; animation: blink 1.1s steps(1) infinite; } /* Scaled cursor for large headings — uses em so it matches any font size */ .cursor-title { display: inline-block; width: 0.52em; height: 0.82em; background: var(--accent); vertical-align: -0.08em; margin-left: 0.05em; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* Command line injected by the page-title typewriter — replaces the old ./path breadcrumb, sits directly above the h1 heading. */ .page-cmd { color: var(--dim); font-size: 12px; letter-spacing: 0.03em; margin-bottom: 8px; min-height: 1.5em; /* reserve space before text is typed to prevent layout shift */ } .page-cmd::before { content: "$ "; color: var(--accent); } /* Section dividers & headings */ .section { padding: 48px 0; border-top: 1px dashed var(--line); } .section:first-of-type { border-top: none; } .section-head { display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: 11px; letter-spacing: 0.1em; margin-bottom: 28px; } .section-head .n { color: var(--accent); } .section-head::after { content: ""; flex: 1; border-top: 1px dashed var(--line); } .section-head .more { color: var(--dim); font-size: 11px; border: none; } .section-head .more:hover { color: var(--accent); } h1, h2, h3 { font-family: inherit; font-weight: 600; letter-spacing: -0.02em; margin: 0; } h1.display { font-size: 28px; margin-bottom: 6px; } h1.display-xl { font-size: 36px; letter-spacing: -0.03em; margin-bottom: 10px; } /* Chips & buttons */ .chip { display: inline-block; padding: 2px 8px; border: 1px solid var(--line-strong); font-size: 11px; color: var(--dim); } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line-strong); color: var(--fg); font-family: inherit; font-size: 12px; cursor: pointer; background: transparent; transition: .15s; } @media (hover: hover) { .btn:hover { border-color: var(--accent); color: var(--accent); } } .btn .arr { color: var(--accent); } .btn-filled { background: var(--line); border-color: var(--line-strong); } @media (hover: hover) { .btn-filled:hover { background: var(--card); border-color: var(--accent); color: var(--accent); } } @media (hover: hover) { .btn-filled:hover .arr { color: var(--accent); } } .kbd { font-size: 10px; padding: 1px 5px; border: 1px solid var(--line-strong); color: var(--dim); border-radius: 2px; } /* Tables / rows — key-value pairs */ .kv { display: flex; padding: 5px 0; border-bottom: 1px dashed var(--line); } .kv .k { width: 130px; flex-shrink: 0; color: var(--dim); } .kv .v { flex: 1; } .kv:last-child { border-bottom: none; } /* List items with year/date prefix */ .entry { padding: 14px 0; border-bottom: 1px dashed var(--line); display: grid; grid-template-columns: 110px 1fr auto; gap: 18px; align-items: start; transition: transform 0.18s ease; } .entry:last-child { border-bottom: none; } .entry .when { color: var(--accent); font-size: 12px; padding-top: 2px; } .entry .title { font-weight: 500; } .entry-body { min-width: 0; } .entry-summary { color: var(--dim); font-size: 12px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .entry .meta { color: var(--dim); font-size: 12px; margin-top: 3px; } .entry .trail { color: var(--dim); font-size: 11px; padding-top: 2px; } .entry.as-link { cursor: pointer; } @media (hover: hover) { .entry:hover .title { color: var(--accent); } .entry.as-link:hover { transform: translateX(3px); } } /* Post header (blog posts, talk detail, about) */ .post-header { padding: 68px 0 28px; border-bottom: 1px dashed var(--line); margin-bottom: 32px; } .post-header .crumbs { color: var(--dim); font-size: 12px; margin-bottom: 18px; } .post-header .title { font-size: 26px; margin-top: 14px; margin-bottom: 12px; } .post-header .meta { color: var(--dim); font-size: 12px; display: flex; gap: 14px; flex-wrap: wrap; } .post-header .post-tags { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; } /* Footer */ .site-footer { border-top: 1px dashed var(--line); padding: 22px 0; font-size: 12px; color: var(--dim); } .site-footer .row { display: flex; gap: 18px; align-items: center; justify-content: center; flex-wrap: wrap; } .site-footer .footer-hint { margin-top: 10px; } /* Cookie consent banner */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: color-mix(in srgb, var(--card) 96%, transparent); backdrop-filter: blur(8px); border-top: 1px dashed var(--line-strong); padding: 12px 0; } .cookie-inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .cookie-text { flex: 1; font-size: 12px; margin: 0; min-width: 200px; } .cookie-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .cookie-decline-btn { color: var(--dim); border-color: var(--line); } .cookie-decline-btn:hover { color: var(--fg); border-color: var(--line-strong); } @media (max-width: 720px) { .cookie-inner { flex-direction: column; align-items: flex-start; gap: 10px; } } /* Skip link */ .skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 10px; background: var(--fg); color: var(--bg); padding: 8px 12px; z-index: 100; } /* Utility / layout helpers */ .page-start { padding-top: 68px; } .mt-8 { margin-top: 8px; } .section-sm-top { padding-top: 24px; } .section-sm-bottom { padding-bottom: 24px; } .text-right { text-align: right; } .page-nav { margin-top: 48px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; } /* ── Mobile ──────────────────────────────────────────────── */ @media (max-width: 720px) { html { scroll-padding-top: 100px; } /* mobile header is two rows (~90px); bump offset */ body { font-size: max(11px, calc(var(--base-fs, 14px) - 1px)); } .wrap { padding-left: 18px; padding-right: 18px; } .site-header { padding: 14px 0; } .site-header .row { flex-wrap: wrap; row-gap: 10px; font-size: 12px; } .site-header .spacer { display: none; } .branch-info { display: none; } .site-header nav { order: 3; width: 100%; gap: 14px; padding-top: 4px; border-top: 1px dashed var(--line); } /* >_ A- A+ sit together at the right of the header row */ .term-btn-header { margin-left: auto; } .term-btn-nav { display: none; } .section { padding: 36px 0; } .kv { flex-direction: column; gap: 2px; padding: 8px 0; } .kv .k { width: auto; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; } .entry { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; } .entry .when { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; } .entry .trail { font-size: 11px; color: var(--dim); opacity: 0.7; } .page-start { padding-top: 44px; } .post-header { padding: 44px 0 20px; margin-bottom: 24px; } .post-header .title { font-size: 22px; } .site-footer .row { flex-wrap: wrap; gap: 10px; font-size: 11px; } } @media (max-width: 480px) { .wrap { padding-left: 14px; padding-right: 14px; } .btn { padding: 6px 10px; font-size: 11px; } } /* ── Hidden terminal easter egg (press ` to open) ───────────────────────── */ /* ── Terminal shared ────────────────────────────────────────────────────── */ #term-overlay[hidden] { display: none; } #term-window { background: var(--card); border: 1px dashed var(--line-strong); display: flex; flex-direction: column; overflow: hidden; } #term-head { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px dashed var(--line); flex-shrink: 0; background: color-mix(in srgb, var(--card) 85%, #000 15%); } .term-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; } #term-close { background: #dc322f; cursor: pointer; } #term-minimize { background: #c8a600; cursor: pointer; } #term-title { flex: 1; text-align: center; font-size: 11px; color: var(--dim); } #term-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 2px; overscroll-behavior: contain; } #term-output { flex: 1; font-size: 13px; line-height: 1.6; } .term-line { margin: 1px 0; } .term-cmd { color: var(--dim); } .term-cmd .t-ps1 { color: var(--accent); } #term-input-row { display: flex; align-items: center; gap: 0; margin-top: 8px; flex-shrink: 0; } #term-form { display: contents; } #term-ps1 { color: var(--accent); font-size: 13px; flex-shrink: 0; } #term-input { flex: 1; background: transparent; border: none; outline: none; color: var(--fg); font-family: inherit; font-size: 13px; caret-color: var(--accent); } #term-input::-webkit-search-cancel-button, #term-input::-webkit-search-decoration { -webkit-appearance: none; display: none; } .t-acc { color: var(--accent); } .t-dim { color: var(--dim); } .t-link { color: var(--accent); border-bottom: 1px dashed var(--accent); } @media (hover: hover) { .t-link:hover { opacity: 0.8; } } /* Desktop: bottom-right collapsible sheet */ @keyframes termSlideUp { from { transform: translateY(110%); } to { transform: translateY(0); } } @keyframes termSlideDown { from { transform: translateY(0); } to { transform: translateY(110%); } } /* Slide animations — apply on all viewports */ #term-overlay:not([hidden]) #term-window:not(.term-closing) { animation: termSlideUp 0.32s cubic-bezier(0.34, 1.12, 0.64, 1) both; } #term-window.term-closing { animation: termSlideDown 0.22s cubic-bezier(0.4, 0, 1, 1) forwards; } #term-window.term-no-transition #term-body { transition: none !important; } @media (min-width: 721px) { #term-overlay { position: fixed; z-index: 201; bottom: 0; right: 24px; display: flex; align-items: flex-end; } #term-window { width: 440px; max-height: 40vh; border-radius: 6px 6px 0 0; border-bottom: none; box-shadow: 0 -4px 24px rgba(0,0,0,0.25); } #term-head { cursor: pointer; user-select: none; } /* Collapse / expand with height + fade instead of display:none */ #term-window #term-body { max-height: calc(40vh - 40px); transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, padding-top 0.28s cubic-bezier(0.4, 0, 0.2, 1), padding-bottom 0.28s cubic-bezier(0.4, 0, 0.2, 1); } #term-window.term-minimized #term-body { max-height: 0; overflow: hidden; opacity: 0; padding-top: 0; padding-bottom: 0; } } /* Mobile: bottom sheet — same pattern as desktop but full-width */ @media (max-width: 720px) { #term-overlay { position: fixed; bottom: 0; left: 0; right: 0; z-index: 201; display: flex; align-items: flex-end; } /* When expanded: extend to full screen and show blurred backdrop */ #term-overlay:has(#term-window:not(.term-minimized)) { inset: 0; background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(8px); } #term-window { width: calc(100% - 24px); margin: 0 12px; max-height: 65vh; border-radius: 10px 10px 0 0; border-bottom: none; box-shadow: 0 -4px 24px rgba(0,0,0,0.3); } #term-window #term-body { max-height: calc(65vh - 40px); transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, padding-top 0.28s cubic-bezier(0.4, 0, 0.2, 1), padding-bottom 0.28s cubic-bezier(0.4, 0, 0.2, 1); } #term-window.term-minimized #term-body { max-height: 0; overflow: hidden; opacity: 0; padding-top: 0; padding-bottom: 0; } #term-head { cursor: pointer; user-select: none; } }