forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
1@import './fonts.css';
2@import './post.css';
3
4:root {
5 /* Min Content Width */
6 --content-width: 25rem;
7
8 /* Typography */
9 --sans:
10 Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
11 Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
12 --serif: Besley, Baskerville, Georgia, Cambria, 'Times New Roman', Times, serif;
13 --mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
14
15 --font-size-s: 0.8125rem;
16 --font-size-m: 0.9375rem;
17 --font-size-l: 1.0625rem;
18
19 --font-weight-light: 350;
20 --font-weight-regular: 400;
21 --font-weight-bold: 500;
22
23 --spacing-s: -0.08em;
24 --spacing-m: -0.02em;
25
26 /* Light Mode Colors (Default) */
27 --bg: #ffffff;
28 --text-primary: rgba(0, 0, 0, 0.85);
29 --text-secondary: rgba(0, 0, 0, 0.4);
30 --text-tertiary: rgba(0, 0, 0, 0.24);
31 --border: rgba(0, 0, 0, 0.1);
32 --selection: rgba(0, 0, 0, 0.08);
33 --code-bg: rgba(0, 0, 0, 0.04);
34 --mark: #f3ffc4;
35
36 /* Syntax Theme */
37 --astro-code-foreground: rgba(0, 0, 0, 0.85);
38 --astro-code-background: rgba(0, 0, 0, 0.03);
39 --astro-code-token-constant: rgba(0, 0, 0, 0.85);
40 --astro-code-token-string: rgba(0, 0, 0, 0.85);
41 --astro-code-token-comment: rgba(0, 0, 0, 0.35);
42 --astro-code-token-keyword: rgba(0, 0, 0, 0.55);
43 --astro-code-token-parameter: rgba(0, 0, 0, 0.85);
44 --astro-code-token-function: rgba(0, 0, 0, 0.85);
45 --astro-code-token-string-expression: rgba(0, 0, 0, 0.55);
46 --astro-code-token-punctuation: rgba(0, 0, 0, 0.55);
47 --astro-code-token-link: rgba(0, 0, 0, 0.55);
48}
49
50/* Light Mode (Explicit) */
51html.light {
52 --bg: #ffffff;
53 --text-primary: rgba(0, 0, 0, 0.85);
54 --text-secondary: rgba(0, 0, 0, 0.4);
55 --text-tertiary: rgba(0, 0, 0, 0.24);
56 --border: rgba(0, 0, 0, 0.1);
57 --selection: rgba(0, 0, 0, 0.08);
58 --code-bg: rgba(0, 0, 0, 0.04);
59 --mark: #f3ffc4;
60
61 /* Syntax Theme */
62 --astro-code-foreground: rgba(0, 0, 0, 0.85);
63 --astro-code-background: rgba(0, 0, 0, 0.03);
64 --astro-code-token-constant: rgba(0, 0, 0, 0.85);
65 --astro-code-token-string: rgba(0, 0, 0, 0.85);
66 --astro-code-token-comment: rgba(0, 0, 0, 0.35);
67 --astro-code-token-keyword: rgba(0, 0, 0, 0.5);
68 --astro-code-token-parameter: rgba(0, 0, 0, 0.85);
69 --astro-code-token-function: rgba(0, 0, 0, 0.85);
70 --astro-code-token-string-expression: rgba(0, 0, 0, 0.55);
71 --astro-code-token-punctuation: rgba(0, 0, 0, 0.55);
72 --astro-code-token-link: rgba(0, 0, 0, 0.55);
73}
74
75/* Dark Mode (Explicit) */
76html.dark {
77 --bg: #1c1c1c;
78 --text-primary: rgba(255, 255, 255, 0.9);
79 --text-secondary: rgba(255, 255, 255, 0.4);
80 --text-tertiary: rgba(255, 255, 255, 0.24);
81 --border: rgba(255, 255, 255, 0.1);
82 --selection: rgba(255, 255, 255, 0.08);
83 --code-bg: rgba(255, 255, 255, 0.04);
84 --mark: #545b37;
85
86 /* Syntax Theme */
87 --astro-code-foreground: rgba(255, 255, 255, 0.9);
88 --astro-code-background: rgba(255, 255, 255, 0.03);
89 --astro-code-token-constant: rgba(255, 255, 255, 0.9);
90 --astro-code-token-string: rgba(255, 255, 255, 0.9);
91 --astro-code-token-comment: rgba(255, 255, 255, 0.35);
92 --astro-code-token-keyword: rgba(255, 255, 255, 0.55);
93 --astro-code-token-parameter: rgba(255, 255, 255, 0.9);
94 --astro-code-token-function: rgba(255, 255, 255, 0.9);
95 --astro-code-token-string-expression: rgba(255, 255, 255, 0.55);
96 --astro-code-token-punctuation: rgba(255, 255, 255, 0.55);
97 --astro-code-token-link: rgba(255, 255, 255, 0.55);
98}
99
100html {
101 background-color: var(--bg);
102 scroll-behavior: smooth;
103 scrollbar-gutter: stable;
104 overscroll-behavior-y: contain;
105 -webkit-overflow-scrolling: touch;
106}
107
108body {
109 font-family: var(--sans);
110 font-feature-settings: 'ss03' 1;
111 font-size: var(--font-size-m);
112 text-autospace: normal;
113 text-rendering: optimizeLegibility;
114 line-height: 1.75;
115 color: var(--text-primary);
116 font-display: swap;
117 word-wrap: break-word;
118 overflow-wrap: break-word;
119 margin: 0;
120 min-height: 100vh;
121 display: flex;
122 flex-direction: column;
123 box-sizing: border-box;
124 letter-spacing: var(--spacing-m);
125 padding: 6rem 1.5rem 1.5rem 1.5rem;
126 overscroll-behavior-y: contain;
127 transition: background-color 0.2s ease-out;
128}
129
130@media (max-width: 768px) {
131 body {
132 padding: 4rem 1.35rem 1.35rem 1.35rem;
133 }
134}
135
136@media (prefers-reduced-motion: reduce) {
137 * {
138 animation-duration: 0.01ms !important;
139 transition-duration: 0.01ms !important;
140 animation-iteration-count: 1 !important;
141 scroll-behavior: auto !important;
142 }
143}
144
145::selection {
146 background-color: var(--selection);
147}
148
149:focus {
150 outline: 2px solid var(--text-tertiary);
151 outline-offset: 2px;
152}
153
154:focus:not(:focus-visible) {
155 outline: none;
156}
157
158:focus-visible {
159 outline: 2px solid var(--text-tertiary);
160 outline-offset: 2px;
161}
162
163body[data-width] {
164 max-width: var(--content-width);
165}
166
167body[data-centered='true'] {
168 margin: 0 auto;
169}
170
171main {
172 flex: 1;
173 display: flex;
174 flex-direction: column;
175 box-sizing: border-box;
176}
177
178.date {
179 margin: 0;
180 font-weight: var(--font-weight-light);
181 color: var(--text-secondary);
182 opacity: 0.75;
183 flex-shrink: 0;
184 letter-spacing: var(--spacing-s);
185 font-variant-numeric: tabular-nums;
186 font-feature-settings:
187 'tnum' 1,
188 'zero' 0,
189 'cv01' 1,
190 'cv02' 1,
191 'calt' 1,
192 'ss03' 1,
193 'ordn' 1;
194}
195
196.date .month {
197 letter-spacing: var(--spacing-m);
198}
199
200.sr-only {
201 border: 0;
202 padding: 0;
203 margin: 0;
204 position: absolute !important;
205 height: 1px;
206 width: 1px;
207 overflow: hidden;
208 clip: rect(1px 1px 1px 1px);
209 clip: rect(1px, 1px, 1px, 1px);
210 clip-path: inset(50%);
211 white-space: nowrap;
212}