/* --------------------------------------------------------------------------- Tigraine — clean, typographic theme. Light + dark via prefers-color-scheme, overridable with a data-theme attribute on . --------------------------------------------------------------------------- */ :root { --bg: #fdfdfc; --surface: #ffffff; --fg: #1f2328; --muted: #6a737d; --border: #e6e6e3; --accent: #b5411b; /* warm rust — distinct, not the default blue */ --accent-fg: #ffffff; --code-bg: #f5f3ef; --code-fg: #24292f; --selection: #f6d9cd; --measure: 44rem; --radius: 8px; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --font-serif: Georgia, Cambria, "Times New Roman", serif; } /* Dark palette: applied when the OS prefers dark (unless forced light), and always when data-theme=dark. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #16181d; --surface: #1c1f26; --fg: #e6e6e3; --muted: #9aa0a6; --border: #2b2f37; --accent: #e8825f; --accent-fg: #16181d; --code-bg: #21252d; --code-fg: #e6e6e3; --selection: #4a2c22; } } :root[data-theme="dark"] { --bg: #16181d; --surface: #1c1f26; --fg: #e6e6e3; --muted: #9aa0a6; --border: #2b2f37; --accent: #e8825f; --accent-fg: #16181d; --code-bg: #21252d; --code-fg: #e6e6e3; --selection: #4a2c22; } * { box-sizing: border-box; } html { font-size: 17px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); line-height: 1.65; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } ::selection { background: var(--selection); } .wrap { width: 100%; max-width: 62rem; margin: 0 auto; padding: 0 1.25rem; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-fg); padding: .5rem 1rem; } .skip-link:focus { left: 0; z-index: 10; } /* ---- Header ---- */ .site-header { border-bottom: 1px solid var(--border); background: var(--surface); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.1rem; padding-bottom: 1.1rem; flex-wrap: wrap; } .brand { display: flex; flex-direction: column; } .site-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); } .site-title:hover { text-decoration: none; color: var(--accent); } .site-tagline { margin: .1rem 0 0; color: var(--muted); font-size: .85rem; } .site-nav { display: flex; align-items: center; gap: 1.25rem; } .site-nav a { color: var(--fg); font-size: .95rem; } .site-nav a:hover { color: var(--accent); text-decoration: none; } .theme-toggle { width: 2rem; height: 2rem; border: 1px solid var(--border); border-radius: 999px; background: transparent; cursor: pointer; font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; color: var(--fg); } .theme-toggle:hover { border-color: var(--accent); } /* ---- Main / content ---- */ main.wrap { padding-top: 2.5rem; padding-bottom: 3.5rem; } .list-header { max-width: var(--measure); margin: 0 auto 2rem; } .list-header h1 { font-size: 1.8rem; margin: 0 0 .25rem; letter-spacing: -0.02em; } .list-subtitle { color: var(--muted); margin: 0; } .post-list { max-width: var(--measure); margin: 0 auto; } .post-summary { padding: 0 0 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--border); } .post-summary:last-child { border-bottom: 0; } .post-title { font-size: 1.6rem; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 .5rem; } .post-title a { color: var(--fg); } .post-title a:hover { color: var(--accent); text-decoration: none; } .post-meta { color: var(--muted); font-size: .85rem; margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; } .post-meta .tags { display: inline-flex; flex-wrap: wrap; gap: .4rem; } .tag { font-size: .8rem; color: var(--muted); } .tag:hover { color: var(--accent); text-decoration: none; } .read-more { font-size: .9rem; font-weight: 600; } /* Truncate long summaries on the index without a server-side excerpt. */ .post-summary .post-body { max-height: 22rem; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); } /* ---- Single post ---- */ .post-full, .page { max-width: var(--measure); margin: 0 auto; } .post-header { margin-bottom: 2rem; } .post-full .post-title { font-size: 2.2rem; } .post-footer { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .filed-under { color: var(--muted); font-size: .85rem; } .post-nav { max-width: var(--measure); margin: 2.5rem auto 0; } /* ---- Post body typography ---- */ .post-body { font-size: 1.06rem; } .post-body p { margin: 0 0 1.3rem; } .post-body h1, .post-body h2, .post-body h3, .post-body h4 { line-height: 1.3; letter-spacing: -0.01em; margin: 2.2rem 0 .8rem; } .post-body h2 { font-size: 1.5rem; } .post-body h3 { font-size: 1.25rem; } .post-body img { max-width: 100%; height: auto; border-radius: var(--radius); } .post-body a { text-decoration: underline; text-underline-offset: 2px; } .post-body blockquote { margin: 1.5rem 0; padding: .3rem 1.2rem; border-left: 3px solid var(--accent); color: var(--muted); font-style: italic; } .post-body ul, .post-body ol { padding-left: 1.4rem; margin: 0 0 1.3rem; } .post-body li { margin: .3rem 0; } .post-body hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; } .post-body code { font-family: var(--font-mono); font-size: .88em; background: var(--code-bg); color: var(--code-fg); padding: .15em .4em; border-radius: 4px; } .post-body pre { background: var(--code-bg); color: var(--code-fg); padding: 1rem 1.1rem; border-radius: var(--radius); overflow-x: auto; margin: 0 0 1.4rem; font-size: .9rem; line-height: 1.5; } .post-body pre code { background: none; padding: 0; font-size: inherit; } .post-body table { border-collapse: collapse; width: 100%; margin: 0 0 1.4rem; font-size: .95rem; } .post-body th, .post-body td { border: 1px solid var(--border); padding: .5rem .7rem; text-align: left; } /* ---- Archive ---- */ .archive-tags, .archive-months { max-width: var(--measure); margin: 0 auto 2.5rem; } .tag-cloud { display: flex; flex-wrap: wrap; gap: .5rem; } .tag-cloud .tag { border: 1px solid var(--border); border-radius: 999px; padding: .25rem .7rem; font-size: .85rem; } .tag-cloud .tag:hover { border-color: var(--accent); } .tag-count, .month-count { color: var(--muted); font-size: .78em; } .month-list { list-style: none; padding: 0; margin: 0; columns: 2; } .month-list li { margin: .25rem 0; break-inside: avoid; } /* ---- Pages ---- */ .page h1 { font-size: 2rem; letter-spacing: -0.02em; } .page h2 { margin-top: 2rem; } .link-list { list-style: none; padding: 0; } .link-list li { margin: .35rem 0; } .muted { color: var(--muted); } /* ---- Pagination ---- */ .pagination { max-width: var(--measure); margin: 3rem auto 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .pagination a { font-weight: 600; } .pagination .disabled { color: var(--muted); opacity: .5; } .page-status { color: var(--muted); font-size: .85rem; } /* ---- Footer ---- */ .site-footer { border-top: 1px solid var(--border); color: var(--muted); font-size: .85rem; padding: 2rem 0; } .site-footer a { color: var(--muted); } .site-footer a:hover { color: var(--accent); } .empty { color: var(--muted); text-align: center; padding: 3rem 0; } .error-page { max-width: var(--measure); margin: 3rem auto; text-align: center; } .error-page h1 { font-size: 4rem; margin: 0; color: var(--accent); } @media (max-width: 640px) { html { font-size: 16px; } .header-inner { flex-direction: column; align-items: flex-start; } .month-list { columns: 1; } .post-full .post-title { font-size: 1.7rem; } }