forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
style: support dotted postlist divider & minor colors
+56
-4
+42
-4
src/components/widgets/PostList.astro
+42
-4
src/components/widgets/PostList.astro
···
18
18
</p>
19
19
)}
20
20
<p class="title">{post.data.title}</p>
21
-
{themeConfig.date.dateOnRight && <div class="divider" />}
21
+
{themeConfig.date.dateOnRight && (
22
+
<div
23
+
class={themeConfig.general.postListDottedDivider ? 'dotted-divider' : 'divider'}
24
+
/>
25
+
)}
22
26
{themeConfig.date.dateOnRight && (
23
27
<p class="date font-features">
24
28
<FormattedDate date={post.data.pubDate} context="list" />
···
57
61
ul:hover a:hover {
58
62
opacity: 1;
59
63
}
64
+
65
+
ul:hover a:hover .divider {
66
+
background-color: var(--text-tertiary);
67
+
opacity: 0.75;
68
+
}
69
+
ul:hover a:hover .dotted-divider {
70
+
color: var(--text-secondary);
71
+
}
72
+
ul:hover a:hover .date {
73
+
color: var(--text-secondary);
74
+
opacity: 1;
75
+
}
60
76
}
61
77
62
78
.post-item {
···
64
80
display: flex;
65
81
justify-content: space-between;
66
82
align-items: center;
67
-
gap: 1rem;
83
+
gap: 0.75rem;
68
84
}
69
85
70
86
.post-item.date-left {
···
78
94
79
95
.title {
80
96
margin: 0;
97
+
flex-shrink: 1;
98
+
min-width: 0;
81
99
white-space: nowrap;
82
100
overflow: hidden;
83
101
text-overflow: ellipsis;
···
86
104
.date {
87
105
margin: 0;
88
106
color: var(--text-secondary);
107
+
opacity: 0.75;
89
108
letter-spacing: var(--spacing-s);
90
109
flex-shrink: 0;
110
+
white-space: nowrap;
91
111
}
92
112
93
113
.divider {
94
-
flex: 1;
95
-
min-width: 24px;
114
+
flex: 1 1 auto;
115
+
min-width: 3rem;
116
+
margin: 0 0.25rem;
96
117
height: 0.5px;
97
118
background-color: var(--border);
119
+
}
120
+
121
+
.dotted-divider {
122
+
flex: 1 1 3rem;
123
+
min-width: 3rem;
124
+
max-width: 100%;
125
+
text-align: end;
126
+
letter-spacing: 5px;
127
+
height: 1.675rem;
128
+
overflow: hidden;
129
+
color: var(--text-tertiary);
130
+
opacity: 0.75;
131
+
}
132
+
133
+
.dotted-divider::after {
134
+
content: '·····························································································································································';
135
+
pointer-events: none;
98
136
}
99
137
100
138
.placeholder {
+1
src/config.ts
+1
src/config.ts
···
15
15
contentWidth: '35rem', // Content area width
16
16
centeredLayout: true, // Use centered layout (false for left-aligned)
17
17
themeToggle: false, // Show theme toggle button (uses system theme by default)
18
+
postListDottedDivider: false, // Show dotted divider in post list
18
19
footer: true, // Show footer
19
20
fadeAnimation: true // Enable fade animations
20
21
},
src/content/posts/_assets/dotted-divider.png
src/content/posts/_assets/dotted-divider.png
This is a binary file and will not be displayed.
+6
src/content/posts/theme-guide.md
+6
src/content/posts/theme-guide.md
···
45
45
centeredLayout: true,
46
46
// Show theme toggle button (uses system theme by default)
47
47
themeToggle: false,
48
+
// Show dotted divider in post list
49
+
postListDottedDivider: false,
48
50
// Show footer
49
51
footer: true,
50
52
// Enable fade animations
···
98
100
- Theme Toggle
99
101
100
102
103
+
104
+
- Dotted Divider
105
+
106
+
101
107
102
108
- Date on Left Side
103
109
+1
src/styles/global.css
+1
src/styles/global.css