Something went wrong. Try again.
Fork of Chiri for Astro for my blog forked from quillmatiq.com/augment
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211@import './fonts.css';@import './post.css';
:root { /* Min Content Width */ --content-width: 25rem;
/* Typography */ --sans: Inter, -apple-system, BlinkMacSystemFont, sans-serif; --serif: Besley, Baskerville, Georgia, 'Times New Roman', Times, serif; --mono: 'SF Mono', SFMono-Regular, monospace;
--font-size-s: 0.8125rem; --font-size-m: 0.9375rem; --font-size-l: 1.0625rem;
--font-weight-light: 350; --font-weight-regular: 400; --font-weight-bold: 500;
--spacing-s: -0.08em; --spacing-m: -0.02em;
/* Light Mode Colors (Default) */ --bg: #ffffff; --text-primary: rgba(0, 0, 0, 0.85); --text-secondary: rgba(0, 0, 0, 0.4); --text-tertiary: rgba(0, 0, 0, 0.24); --border: rgba(0, 0, 0, 0.1); --selection: rgba(0, 0, 0, 0.08); --code-bg: rgba(0, 0, 0, 0.04); --mark: #f3ffc4;
/* Syntax Theme */ --astro-code-foreground: rgba(0, 0, 0, 0.85); --astro-code-background: rgba(0, 0, 0, 0.03); --astro-code-token-constant: rgba(0, 0, 0, 0.85); --astro-code-token-string: rgba(0, 0, 0, 0.85); --astro-code-token-comment: rgba(0, 0, 0, 0.35); --astro-code-token-keyword: rgba(0, 0, 0, 0.55); --astro-code-token-parameter: rgba(0, 0, 0, 0.85); --astro-code-token-function: rgba(0, 0, 0, 0.85); --astro-code-token-string-expression: rgba(0, 0, 0, 0.55); --astro-code-token-punctuation: rgba(0, 0, 0, 0.55); --astro-code-token-link: rgba(0, 0, 0, 0.55);}
/* Light Mode (Explicit) */html.light { --bg: #ffffff; --text-primary: rgba(0, 0, 0, 0.85); --text-secondary: rgba(0, 0, 0, 0.4); --text-tertiary: rgba(0, 0, 0, 0.24); --border: rgba(0, 0, 0, 0.1); --selection: rgba(0, 0, 0, 0.08); --code-bg: rgba(0, 0, 0, 0.04); --mark: #f3ffc4;
/* Syntax Theme */ --astro-code-foreground: rgba(0, 0, 0, 0.85); --astro-code-background: rgba(0, 0, 0, 0.03); --astro-code-token-constant: rgba(0, 0, 0, 0.85); --astro-code-token-string: rgba(0, 0, 0, 0.85); --astro-code-token-comment: rgba(0, 0, 0, 0.35); --astro-code-token-keyword: rgba(0, 0, 0, 0.5); --astro-code-token-parameter: rgba(0, 0, 0, 0.85); --astro-code-token-function: rgba(0, 0, 0, 0.85); --astro-code-token-string-expression: rgba(0, 0, 0, 0.55); --astro-code-token-punctuation: rgba(0, 0, 0, 0.55); --astro-code-token-link: rgba(0, 0, 0, 0.55);}
/* Dark Mode (Explicit) */html.dark { --bg: #1c1c1c; --text-primary: rgba(255, 255, 255, 0.9); --text-secondary: rgba(255, 255, 255, 0.4); --text-tertiary: rgba(255, 255, 255, 0.24); --border: rgba(255, 255, 255, 0.1); --selection: rgba(255, 255, 255, 0.08); --code-bg: rgba(255, 255, 255, 0.04); --mark: #545b37;
/* Syntax Theme */ --astro-code-foreground: rgba(255, 255, 255, 0.9); --astro-code-background: rgba(255, 255, 255, 0.03); --astro-code-token-constant: rgba(255, 255, 255, 0.9); --astro-code-token-string: rgba(255, 255, 255, 0.9); --astro-code-token-comment: rgba(255, 255, 255, 0.35); --astro-code-token-keyword: rgba(255, 255, 255, 0.55); --astro-code-token-parameter: rgba(255, 255, 255, 0.9); --astro-code-token-function: rgba(255, 255, 255, 0.9); --astro-code-token-string-expression: rgba(255, 255, 255, 0.55); --astro-code-token-punctuation: rgba(255, 255, 255, 0.55); --astro-code-token-link: rgba(255, 255, 255, 0.55);}
html { background-color: var(--bg); scroll-behavior: smooth; scrollbar-gutter: stable; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s ease-out;}
body { font-family: var(--sans); font-feature-settings: 'ss03' 1; font-size: var(--font-size-m); line-height: 1.75; color: var(--text-primary); margin: 0; min-height: 100vh; display: flex; flex-direction: column; box-sizing: border-box; letter-spacing: var(--spacing-m); padding: 6rem 1.5rem 1.5rem 1.5rem; overscroll-behavior-y: contain; text-autospace: normal; text-spacing-trim: space-first; text-rendering: optimizeLegibility; font-synthesis: none; word-wrap: break-word; overflow-wrap: break-word;}
@media (max-width: 768px) { body { padding: 4rem 1.35rem 1.35rem 1.35rem; }}
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }}
::selection { background-color: var(--selection);}
:focus:not(:focus-visible) { outline: none;}
:focus-visible { outline: 1.5px dashed var(--text-tertiary); border-radius: 0.25rem;}
body[data-width] { max-width: var(--content-width);}
body[data-centered='true'] { margin: 0 auto;}
main { flex: 1; display: flex; flex-direction: column; box-sizing: border-box;}
.date { margin: 0; font-weight: var(--font-weight-light); color: var(--text-secondary); opacity: 0.75; flex-shrink: 0; letter-spacing: var(--spacing-s); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'zero' 0, 'cv01' 1, 'cv02' 1, 'calt' 1, 'ss03' 1, 'ordn' 1;}
.date .month { letter-spacing: var(--spacing-m);}
.sr-only { border: 0; padding: 0; margin: 0; position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;}
mark { background-color: #fef08a;}