@pressy-pub/typography 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +5 -0
- package/dist/index.js +8 -0
- package/dist/index.js.map +1 -0
- package/package.json +34 -0
- package/src/fluid.css +85 -0
- package/src/prose.css +299 -0
- package/src/themes/dark.css +49 -0
- package/src/themes/light.css +42 -0
- package/src/themes/sepia.css +49 -0
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Typography package exports\n// CSS files are imported directly via package exports\n\nexport const themes = ['light', 'dark', 'sepia'] as const\nexport type Theme = typeof themes[number]\n\nexport const defaultTheme: Theme = 'light'\n"],"mappings":";AAGO,IAAM,SAAS,CAAC,SAAS,QAAQ,OAAO;AAGxC,IAAM,eAAsB;","names":[]}
|
package/package.json
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@pressy-pub/typography",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Typography CSS preset for Pressy",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"module": "./dist/index.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"import": "./dist/index.js"
|
|
13
|
+
},
|
|
14
|
+
"./prose.css": "./src/prose.css",
|
|
15
|
+
"./fluid.css": "./src/fluid.css",
|
|
16
|
+
"./themes/*.css": "./src/themes/*.css"
|
|
17
|
+
},
|
|
18
|
+
"publishConfig": {
|
|
19
|
+
"access": "public"
|
|
20
|
+
},
|
|
21
|
+
"files": [
|
|
22
|
+
"dist",
|
|
23
|
+
"src/**/*.css"
|
|
24
|
+
],
|
|
25
|
+
"devDependencies": {
|
|
26
|
+
"tsup": "^8.0.0",
|
|
27
|
+
"typescript": "^5.3.0"
|
|
28
|
+
},
|
|
29
|
+
"scripts": {
|
|
30
|
+
"build": "tsup",
|
|
31
|
+
"dev": "tsup --watch",
|
|
32
|
+
"typecheck": "tsc --noEmit"
|
|
33
|
+
}
|
|
34
|
+
}
|
package/src/fluid.css
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
/* Pressy Fluid Typography - Responsive type scale */
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
/* Fluid type scale using clamp() */
|
|
5
|
+
/* Base size scales from 16px (1rem) to 20px (1.25rem) */
|
|
6
|
+
--font-size-base: clamp(1rem, 0.875rem + 0.5vw, 1.25rem);
|
|
7
|
+
|
|
8
|
+
/* Scale ratio: 1.2 (minor third) */
|
|
9
|
+
--font-size-xs: clamp(0.694rem, 0.625rem + 0.35vw, 0.868rem);
|
|
10
|
+
--font-size-sm: clamp(0.833rem, 0.75rem + 0.4vw, 1.042rem);
|
|
11
|
+
--font-size-lg: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
|
|
12
|
+
--font-size-xl: clamp(1.44rem, 1.26rem + 0.72vw, 1.8rem);
|
|
13
|
+
--font-size-2xl: clamp(1.728rem, 1.512rem + 0.86vw, 2.16rem);
|
|
14
|
+
--font-size-3xl: clamp(2.074rem, 1.815rem + 1.03vw, 2.592rem);
|
|
15
|
+
--font-size-4xl: clamp(2.488rem, 2.177rem + 1.24vw, 3.11rem);
|
|
16
|
+
|
|
17
|
+
/* Line heights */
|
|
18
|
+
--line-height-tight: 1.25;
|
|
19
|
+
--line-height-snug: 1.375;
|
|
20
|
+
--line-height-normal: 1.5;
|
|
21
|
+
--line-height-prose: 1.6;
|
|
22
|
+
--line-height-relaxed: 1.75;
|
|
23
|
+
--line-height-loose: 2;
|
|
24
|
+
|
|
25
|
+
/* Letter spacing */
|
|
26
|
+
--letter-spacing-tighter: -0.05em;
|
|
27
|
+
--letter-spacing-tight: -0.025em;
|
|
28
|
+
--letter-spacing-normal: 0em;
|
|
29
|
+
--letter-spacing-wide: 0.025em;
|
|
30
|
+
--letter-spacing-wider: 0.05em;
|
|
31
|
+
--letter-spacing-widest: 0.1em;
|
|
32
|
+
|
|
33
|
+
/* Font stacks */
|
|
34
|
+
--font-prose: Georgia, 'Times New Roman', Times, serif;
|
|
35
|
+
--font-heading: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
36
|
+
--font-mono: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, monospace;
|
|
37
|
+
|
|
38
|
+
/* Spacing scale based on font size */
|
|
39
|
+
--space-xs: calc(var(--font-size-base) * 0.25);
|
|
40
|
+
--space-sm: calc(var(--font-size-base) * 0.5);
|
|
41
|
+
--space-md: calc(var(--font-size-base) * 1);
|
|
42
|
+
--space-lg: calc(var(--font-size-base) * 1.5);
|
|
43
|
+
--space-xl: calc(var(--font-size-base) * 2);
|
|
44
|
+
--space-2xl: calc(var(--font-size-base) * 3);
|
|
45
|
+
--space-3xl: calc(var(--font-size-base) * 4);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* Apply base font size to html */
|
|
49
|
+
html {
|
|
50
|
+
font-size: var(--font-size-base);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* Prevent font size changes on orientation change in iOS */
|
|
54
|
+
html {
|
|
55
|
+
-webkit-text-size-adjust: 100%;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Improve text rendering */
|
|
59
|
+
body {
|
|
60
|
+
-webkit-font-smoothing: antialiased;
|
|
61
|
+
-moz-osx-font-smoothing: grayscale;
|
|
62
|
+
text-rendering: optimizeLegibility;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* Responsive adjustments for very small screens */
|
|
66
|
+
@media (max-width: 320px) {
|
|
67
|
+
:root {
|
|
68
|
+
--font-size-base: 0.9375rem; /* 15px minimum */
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* Increase base size for large displays */
|
|
73
|
+
@media (min-width: 1920px) {
|
|
74
|
+
:root {
|
|
75
|
+
--font-size-base: 1.25rem; /* Cap at 20px */
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* Print styles */
|
|
80
|
+
@media print {
|
|
81
|
+
:root {
|
|
82
|
+
--font-size-base: 12pt;
|
|
83
|
+
--line-height-prose: 1.5;
|
|
84
|
+
}
|
|
85
|
+
}
|
package/src/prose.css
ADDED
|
@@ -0,0 +1,299 @@
|
|
|
1
|
+
/* Pressy Prose Styles - Reading-optimized typography */
|
|
2
|
+
|
|
3
|
+
.pressy-prose {
|
|
4
|
+
/* Base reading styles */
|
|
5
|
+
max-width: 65ch;
|
|
6
|
+
margin-inline: auto;
|
|
7
|
+
padding-inline: var(--prose-padding, 1.5rem);
|
|
8
|
+
font-family: var(--font-prose, Georgia, 'Times New Roman', serif);
|
|
9
|
+
font-size: var(--font-size-base);
|
|
10
|
+
line-height: var(--line-height-prose, 1.6);
|
|
11
|
+
color: var(--color-text);
|
|
12
|
+
|
|
13
|
+
/* Smooth text rendering */
|
|
14
|
+
-webkit-font-smoothing: antialiased;
|
|
15
|
+
-moz-osx-font-smoothing: grayscale;
|
|
16
|
+
text-rendering: optimizeLegibility;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* Headings */
|
|
20
|
+
.pressy-prose h1,
|
|
21
|
+
.pressy-prose h2,
|
|
22
|
+
.pressy-prose h3,
|
|
23
|
+
.pressy-prose h4,
|
|
24
|
+
.pressy-prose h5,
|
|
25
|
+
.pressy-prose h6 {
|
|
26
|
+
font-family: var(--font-heading, system-ui, -apple-system, sans-serif);
|
|
27
|
+
font-weight: 600;
|
|
28
|
+
line-height: 1.25;
|
|
29
|
+
margin-top: 2em;
|
|
30
|
+
margin-bottom: 0.5em;
|
|
31
|
+
color: var(--color-heading);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.pressy-prose h1 {
|
|
35
|
+
font-size: var(--font-size-3xl);
|
|
36
|
+
margin-top: 0;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.pressy-prose h2 {
|
|
40
|
+
font-size: var(--font-size-2xl);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.pressy-prose h3 {
|
|
44
|
+
font-size: var(--font-size-xl);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.pressy-prose h4 {
|
|
48
|
+
font-size: var(--font-size-lg);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* Paragraphs */
|
|
52
|
+
.pressy-prose p {
|
|
53
|
+
margin-block: 1.25em;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* First paragraph after heading - no top margin */
|
|
57
|
+
.pressy-prose h1 + p,
|
|
58
|
+
.pressy-prose h2 + p,
|
|
59
|
+
.pressy-prose h3 + p,
|
|
60
|
+
.pressy-prose h4 + p {
|
|
61
|
+
margin-top: 0;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* Paragraph indentation (book style) */
|
|
65
|
+
.pressy-prose.indent-paragraphs p + p {
|
|
66
|
+
text-indent: 1.5em;
|
|
67
|
+
margin-top: 0;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* Drop cap for chapter openings */
|
|
71
|
+
.pressy-prose .drop-cap::first-letter,
|
|
72
|
+
.pressy-prose[data-drop-cap] > p:first-of-type::first-letter {
|
|
73
|
+
float: left;
|
|
74
|
+
font-size: 3.5em;
|
|
75
|
+
line-height: 0.8;
|
|
76
|
+
padding-right: 0.1em;
|
|
77
|
+
font-weight: 700;
|
|
78
|
+
color: var(--color-accent);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* Links */
|
|
82
|
+
.pressy-prose a {
|
|
83
|
+
color: var(--color-link);
|
|
84
|
+
text-decoration: underline;
|
|
85
|
+
text-underline-offset: 0.15em;
|
|
86
|
+
text-decoration-thickness: 1px;
|
|
87
|
+
transition: color 0.15s ease;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.pressy-prose a:hover {
|
|
91
|
+
color: var(--color-link-hover);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* Blockquotes */
|
|
95
|
+
.pressy-prose blockquote {
|
|
96
|
+
border-left: 3px solid var(--color-border);
|
|
97
|
+
margin-inline: 0;
|
|
98
|
+
padding-left: 1.5em;
|
|
99
|
+
font-style: italic;
|
|
100
|
+
color: var(--color-text-muted);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.pressy-prose blockquote p:first-child {
|
|
104
|
+
margin-top: 0;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.pressy-prose blockquote p:last-child {
|
|
108
|
+
margin-bottom: 0;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* Lists */
|
|
112
|
+
.pressy-prose ul,
|
|
113
|
+
.pressy-prose ol {
|
|
114
|
+
padding-left: 1.5em;
|
|
115
|
+
margin-block: 1.25em;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.pressy-prose li {
|
|
119
|
+
margin-block: 0.5em;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.pressy-prose li::marker {
|
|
123
|
+
color: var(--color-text-muted);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/* Nested lists */
|
|
127
|
+
.pressy-prose ul ul,
|
|
128
|
+
.pressy-prose ol ol,
|
|
129
|
+
.pressy-prose ul ol,
|
|
130
|
+
.pressy-prose ol ul {
|
|
131
|
+
margin-block: 0.5em;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
/* Code */
|
|
135
|
+
.pressy-prose code {
|
|
136
|
+
font-family: var(--font-mono, 'SF Mono', Menlo, monospace);
|
|
137
|
+
font-size: 0.875em;
|
|
138
|
+
background: var(--color-code-bg);
|
|
139
|
+
padding: 0.2em 0.4em;
|
|
140
|
+
border-radius: 0.25em;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.pressy-prose pre {
|
|
144
|
+
font-family: var(--font-mono, 'SF Mono', Menlo, monospace);
|
|
145
|
+
font-size: 0.875em;
|
|
146
|
+
background: var(--color-code-bg);
|
|
147
|
+
padding: 1em 1.5em;
|
|
148
|
+
border-radius: 0.5em;
|
|
149
|
+
overflow-x: auto;
|
|
150
|
+
margin-block: 1.5em;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.pressy-prose pre code {
|
|
154
|
+
background: none;
|
|
155
|
+
padding: 0;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/* Horizontal rule */
|
|
159
|
+
.pressy-prose hr {
|
|
160
|
+
border: none;
|
|
161
|
+
border-top: 1px solid var(--color-border);
|
|
162
|
+
margin-block: 3em;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/* Scene break (centered asterisks) */
|
|
166
|
+
.pressy-prose hr.scene-break {
|
|
167
|
+
border: none;
|
|
168
|
+
text-align: center;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.pressy-prose hr.scene-break::before {
|
|
172
|
+
content: '* * *';
|
|
173
|
+
color: var(--color-text-muted);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
/* Images */
|
|
177
|
+
.pressy-prose img {
|
|
178
|
+
max-width: 100%;
|
|
179
|
+
height: auto;
|
|
180
|
+
display: block;
|
|
181
|
+
margin-block: 2em;
|
|
182
|
+
border-radius: 0.5em;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.pressy-prose figure {
|
|
186
|
+
margin-inline: 0;
|
|
187
|
+
margin-block: 2em;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.pressy-prose figcaption {
|
|
191
|
+
font-size: var(--font-size-sm);
|
|
192
|
+
color: var(--color-text-muted);
|
|
193
|
+
text-align: center;
|
|
194
|
+
margin-top: 0.75em;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/* Tables */
|
|
198
|
+
.pressy-prose table {
|
|
199
|
+
width: 100%;
|
|
200
|
+
border-collapse: collapse;
|
|
201
|
+
margin-block: 2em;
|
|
202
|
+
font-size: var(--font-size-sm);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.pressy-prose th,
|
|
206
|
+
.pressy-prose td {
|
|
207
|
+
border: 1px solid var(--color-border);
|
|
208
|
+
padding: 0.75em 1em;
|
|
209
|
+
text-align: left;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.pressy-prose th {
|
|
213
|
+
background: var(--color-bg-subtle);
|
|
214
|
+
font-weight: 600;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
/* Strong and emphasis */
|
|
218
|
+
.pressy-prose strong {
|
|
219
|
+
font-weight: 600;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.pressy-prose em {
|
|
223
|
+
font-style: italic;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
/* Small text */
|
|
227
|
+
.pressy-prose small {
|
|
228
|
+
font-size: var(--font-size-sm);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
/* Subscript and superscript */
|
|
232
|
+
.pressy-prose sub,
|
|
233
|
+
.pressy-prose sup {
|
|
234
|
+
font-size: 0.75em;
|
|
235
|
+
line-height: 0;
|
|
236
|
+
position: relative;
|
|
237
|
+
vertical-align: baseline;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.pressy-prose sup {
|
|
241
|
+
top: -0.5em;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.pressy-prose sub {
|
|
245
|
+
bottom: -0.25em;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
/* Footnote references */
|
|
249
|
+
.pressy-prose .footnote-ref {
|
|
250
|
+
font-size: 0.75em;
|
|
251
|
+
vertical-align: super;
|
|
252
|
+
text-decoration: none;
|
|
253
|
+
color: var(--color-link);
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
/* Footnotes section */
|
|
257
|
+
.pressy-prose .footnotes {
|
|
258
|
+
font-size: var(--font-size-sm);
|
|
259
|
+
border-top: 1px solid var(--color-border);
|
|
260
|
+
margin-top: 3em;
|
|
261
|
+
padding-top: 1.5em;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
/* Aside / Margin notes */
|
|
265
|
+
.pressy-prose aside {
|
|
266
|
+
font-size: var(--font-size-sm);
|
|
267
|
+
color: var(--color-text-muted);
|
|
268
|
+
border-left: 2px solid var(--color-accent);
|
|
269
|
+
padding-left: 1em;
|
|
270
|
+
margin-block: 1.5em;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
/* CSS fragmentation rules for paginated mode — keep elements together on one page */
|
|
274
|
+
.pressy-prose figure,
|
|
275
|
+
.pressy-prose pre,
|
|
276
|
+
.pressy-prose blockquote,
|
|
277
|
+
.pressy-prose .pressy-callout,
|
|
278
|
+
.pressy-prose .pressy-aside,
|
|
279
|
+
.pressy-prose .pressy-footnote-tooltip,
|
|
280
|
+
.pressy-prose table {
|
|
281
|
+
break-inside: avoid;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.pressy-prose h1,
|
|
285
|
+
.pressy-prose h2,
|
|
286
|
+
.pressy-prose h3,
|
|
287
|
+
.pressy-prose h4,
|
|
288
|
+
.pressy-prose h5,
|
|
289
|
+
.pressy-prose h6 {
|
|
290
|
+
break-after: avoid;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
/* Wide content (images, code blocks that need more space) */
|
|
294
|
+
@media (min-width: 80ch) {
|
|
295
|
+
.pressy-prose .wide {
|
|
296
|
+
margin-inline: calc(-1 * ((100vw - 65ch) / 4));
|
|
297
|
+
max-width: none;
|
|
298
|
+
}
|
|
299
|
+
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/* Pressy Dark Theme */
|
|
2
|
+
|
|
3
|
+
[data-theme="dark"] {
|
|
4
|
+
/* Background colors */
|
|
5
|
+
--color-bg: #1a1a1a;
|
|
6
|
+
--color-bg-subtle: #242424;
|
|
7
|
+
--color-bg-muted: #2d2d2d;
|
|
8
|
+
|
|
9
|
+
/* Text colors */
|
|
10
|
+
--color-text: #e0e0e0;
|
|
11
|
+
--color-text-muted: #a0a0a0;
|
|
12
|
+
--color-heading: #ffffff;
|
|
13
|
+
|
|
14
|
+
/* Accent colors */
|
|
15
|
+
--color-accent: #e0e0e0;
|
|
16
|
+
--color-link: #66b3ff;
|
|
17
|
+
--color-link-hover: #99ccff;
|
|
18
|
+
|
|
19
|
+
/* UI colors */
|
|
20
|
+
--color-border: #404040;
|
|
21
|
+
--color-code-bg: #2d2d2d;
|
|
22
|
+
|
|
23
|
+
/* Selection */
|
|
24
|
+
--color-selection-bg: rgba(102, 179, 255, 0.3);
|
|
25
|
+
--color-selection-text: inherit;
|
|
26
|
+
|
|
27
|
+
/* Shadows (more subtle in dark mode) */
|
|
28
|
+
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
29
|
+
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
|
|
30
|
+
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
|
|
31
|
+
|
|
32
|
+
/* Apply to element */
|
|
33
|
+
background-color: var(--color-bg);
|
|
34
|
+
color: var(--color-text);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
[data-theme="dark"] ::selection {
|
|
38
|
+
background-color: var(--color-selection-bg);
|
|
39
|
+
color: var(--color-selection-text);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* Reduce image brightness in dark mode for less eye strain */
|
|
43
|
+
[data-theme="dark"] img {
|
|
44
|
+
opacity: 0.9;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
[data-theme="dark"] img:hover {
|
|
48
|
+
opacity: 1;
|
|
49
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
/* Pressy Light Theme */
|
|
2
|
+
|
|
3
|
+
:root,
|
|
4
|
+
[data-theme="light"] {
|
|
5
|
+
/* Background colors */
|
|
6
|
+
--color-bg: #ffffff;
|
|
7
|
+
--color-bg-subtle: #f8f9fa;
|
|
8
|
+
--color-bg-muted: #e9ecef;
|
|
9
|
+
|
|
10
|
+
/* Text colors */
|
|
11
|
+
--color-text: #212529;
|
|
12
|
+
--color-text-muted: #6c757d;
|
|
13
|
+
--color-heading: #1a1a1a;
|
|
14
|
+
|
|
15
|
+
/* Accent colors */
|
|
16
|
+
--color-accent: #212529;
|
|
17
|
+
--color-link: #0066cc;
|
|
18
|
+
--color-link-hover: #004499;
|
|
19
|
+
|
|
20
|
+
/* UI colors */
|
|
21
|
+
--color-border: #dee2e6;
|
|
22
|
+
--color-code-bg: #f1f3f5;
|
|
23
|
+
|
|
24
|
+
/* Selection */
|
|
25
|
+
--color-selection-bg: rgba(0, 102, 204, 0.2);
|
|
26
|
+
--color-selection-text: inherit;
|
|
27
|
+
|
|
28
|
+
/* Shadows */
|
|
29
|
+
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
30
|
+
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
|
|
31
|
+
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
[data-theme="light"] {
|
|
35
|
+
background-color: var(--color-bg);
|
|
36
|
+
color: var(--color-text);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
[data-theme="light"] ::selection {
|
|
40
|
+
background-color: var(--color-selection-bg);
|
|
41
|
+
color: var(--color-selection-text);
|
|
42
|
+
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/* Pressy Sepia Theme - Classic book reading feel */
|
|
2
|
+
|
|
3
|
+
[data-theme="sepia"] {
|
|
4
|
+
/* Background colors - warm paper tones */
|
|
5
|
+
--color-bg: #f4ecd8;
|
|
6
|
+
--color-bg-subtle: #ebe3cf;
|
|
7
|
+
--color-bg-muted: #e2d9c5;
|
|
8
|
+
|
|
9
|
+
/* Text colors - warm brown tones */
|
|
10
|
+
--color-text: #433422;
|
|
11
|
+
--color-text-muted: #6b5a47;
|
|
12
|
+
--color-heading: #2d2418;
|
|
13
|
+
|
|
14
|
+
/* Accent colors - muted brown/orange */
|
|
15
|
+
--color-accent: #433422;
|
|
16
|
+
--color-link: #8b4513;
|
|
17
|
+
--color-link-hover: #a0522d;
|
|
18
|
+
|
|
19
|
+
/* UI colors */
|
|
20
|
+
--color-border: #d4c9b5;
|
|
21
|
+
--color-code-bg: #ebe3cf;
|
|
22
|
+
|
|
23
|
+
/* Selection - warm highlight */
|
|
24
|
+
--color-selection-bg: rgba(139, 69, 19, 0.2);
|
|
25
|
+
--color-selection-text: inherit;
|
|
26
|
+
|
|
27
|
+
/* Shadows - warm tinted */
|
|
28
|
+
--shadow-sm: 0 1px 2px rgba(67, 52, 34, 0.08);
|
|
29
|
+
--shadow-md: 0 4px 6px rgba(67, 52, 34, 0.1);
|
|
30
|
+
--shadow-lg: 0 10px 15px rgba(67, 52, 34, 0.15);
|
|
31
|
+
|
|
32
|
+
/* Apply to element */
|
|
33
|
+
background-color: var(--color-bg);
|
|
34
|
+
color: var(--color-text);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
[data-theme="sepia"] ::selection {
|
|
38
|
+
background-color: var(--color-selection-bg);
|
|
39
|
+
color: var(--color-selection-text);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* Warm filter for images in sepia mode */
|
|
43
|
+
[data-theme="sepia"] img {
|
|
44
|
+
filter: sepia(10%);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
[data-theme="sepia"] img:hover {
|
|
48
|
+
filter: sepia(0%);
|
|
49
|
+
}
|