Fork of Chiri for Astro for my blog
style: increase post spacing
+32
-44
+17
-29
src/content/posts/theme-guide.md
+17
-29
src/content/posts/theme-guide.md
···
9
9
10
10
## Basic Commands
11
11
12
-
- `pnpm new <title` - Create a new post (use `_title` for drafts)
12
+
- `pnpm new <title>` - Create a new post (use `_title` for drafts)
13
13
- `pnpm update-theme` - Update the theme to the latest version
14
14
15
15
## Main Files & Directories
16
16
17
17
- `src/content/about/about.md` - Edit the about section of the index page. Leave it empty if you don't want any content.
18
18
- `src/content/posts/` - All blog posts are stored here
19
-
- `src/config.ts` - Configure main site info and settings ↓
20
-
21
-
- Site Info
19
+
- `src/config.ts` - Configure main site info and settings
22
20
23
21
```ts
22
+
// Site Info
23
+
24
24
site: {
25
25
// Site domain
26
26
website: 'https://astro-chiri.netlify.app/',
···
35
35
},
36
36
```
37
37
38
-
- General Settings
39
-
40
38
```ts
39
+
// General Settings
40
+
41
41
general: {
42
42
// Content area width
43
43
contentWidth: '35rem',
···
54
54
},
55
55
```
56
56
57
-
- Date Settings
58
-
59
57
```ts
58
+
// Date Settings
59
+
60
60
date: {
61
61
// Date format: YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
62
62
dateFormat: 'YYYY-MM-DD',
···
67
67
},
68
68
```
69
69
70
-
- Post Settings
70
+
```ts
71
+
// Post Settings
71
72
72
-
```ts
73
73
post: {
74
74
// Show reading time in posts
75
75
readingTime: false,
···
99
99
100
100
You can configure the theme via `shikiConfig` in `astro.config.ts`.
101
101
102
-
For more details: [Syntax Highlighting | Astro Docs](https://docs.astro.build/en/guides/syntax-highlighting/)
102
+
More details: [Syntax Highlighting | Astro Docs](https://docs.astro.build/en/guides/syntax-highlighting/)
103
103
104
104
```ts
105
105
import { defineConfig } from 'astro/config'
···
119
119
120
120
## Preview of Some Features
121
121
122
-
- Theme Toggle
123
-
124
-
122
+
125
123
126
-
- Dotted Divider
124
+
127
125
128
-
126
+
129
127
130
-
- Date on Left Side
128
+
131
129
132
-
130
+
133
131
134
-
- Table of Contents
135
-
136
-
137
-
138
-
- Reading Time
139
-
140
-
141
-
142
-
- Copy Code Button
143
-
144
-
132
+
+15
-15
src/styles/post.css
+15
-15
src/styles/post.css
···
16
16
}
17
17
18
18
.prose .title h1 {
19
-
margin: 0 0 0.25rem 0;
19
+
margin: 0 0 0.375rem 0;
20
20
}
21
21
22
22
/* Headings (h1-h5)
···
29
29
font-size: var(--font-size-m);
30
30
font-weight: var(--font-weight-bold);
31
31
line-height: 1.75;
32
-
margin: 3.25em 0 1em 0;
32
+
margin: 3.75em 0 1.75em 0;
33
33
}
34
34
35
35
/* Bold text */
···
61
61
/* Paragraphs */
62
62
.prose p {
63
63
line-height: 1.75;
64
-
margin-bottom: 1.25em;
64
+
margin: 1.75em 0;
65
65
}
66
66
67
67
/* Tables */
···
70
70
width: 100%;
71
71
border-collapse: separate;
72
72
border-spacing: 0;
73
-
margin: 1.25em 0;
73
+
margin: 1.75em 0;
74
74
font-size: var(--font-size-m);
75
75
border: 1px solid var(--border);
76
76
border-radius: 8px;
···
106
106
max-width: 100%;
107
107
height: auto;
108
108
display: block;
109
-
margin: 1.25em 0;
109
+
margin: 2em 0;
110
110
}
111
111
112
112
.img-placeholder {
···
130
130
}
131
131
132
132
.prose figure {
133
-
margin-bottom: 1.25em;
133
+
margin-bottom: 2em;
134
134
text-align: center;
135
135
}
136
136
137
137
.prose figure img {
138
-
margin-bottom: 0.75em;
138
+
margin-bottom: 1em;
139
139
}
140
140
141
141
.prose figure figcaption {
···
146
146
147
147
.prose p > img {
148
148
position: relative;
149
-
margin-bottom: 1.25em;
149
+
margin-bottom: 2em;
150
150
}
151
151
152
152
.prose p > img::after {
···
166
166
text-align: center;
167
167
color: var(--text-secondary);
168
168
font-size: var(--font-size-s);
169
-
margin-bottom: 1.25em;
169
+
margin-bottom: 2em;
170
170
}
171
171
172
172
/* Inline code */
···
188
188
/* Blockquotes */
189
189
.prose blockquote {
190
190
border-left: 1.5px solid var(--border);
191
-
margin: 0 0 1.25em 0.125em;
191
+
margin: 0 0 1.75em 0.125em;
192
192
padding: 0 0 0 1.5em;
193
193
text-align: left;
194
194
}
···
207
207
list-style-type: none;
208
208
padding-left: 0;
209
209
margin-left: 1rem;
210
-
margin-bottom: 1.25em;
210
+
margin-bottom: 1.75em;
211
211
line-height: 1.75;
212
212
}
213
213
···
247
247
list-style-position: outside;
248
248
padding-left: 0;
249
249
margin-left: 1.25rem;
250
-
margin-bottom: 1.25em;
250
+
margin-bottom: 1.75em;
251
251
counter-reset: item;
252
252
}
253
253
···
359
359
360
360
/* Horizontal rule */
361
361
.prose hr {
362
-
margin: 2.5em 0;
362
+
margin: 3.75em 0;
363
363
height: auto;
364
364
border: none;
365
365
background: none;
···
457
457
background-color: var(--astro-code-background);
458
458
border-radius: 8px;
459
459
padding: 1.25em 1.5em;
460
-
margin: 1.25em 0;
460
+
margin: 2em 0;
461
461
overflow-x: auto;
462
462
}
463
463
···
498
498
/* Ensure display math is centered */
499
499
.katex-display {
500
500
text-align: center;
501
-
margin: 1.5em 0;
501
+
margin: 1.75em 0;
502
502
}
503
503
504
504
/* Reset any conflicting styles that might interfere with KaTeX */