forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
1---
2import FormattedDate from '@/components/widgets/FormattedDate.astro'
3import type { PostListProps } from '@/types'
4import { themeConfig } from '@/config'
5
6const { posts } = Astro.props as PostListProps
7---
8
9<ul>
10 {
11 posts.map((post) => (
12 <li>
13 <a href={`/${post.id}/`}>
14 <div class={`post-item ${!themeConfig.date.dateOnRight ? 'date-left' : ''}`}>
15 {!themeConfig.date.dateOnRight && (
16 <p class="date font-features">
17 <FormattedDate date={post.data.pubDate} context="list" />
18 </p>
19 )}
20 <p class="title">{post.data.title}</p>
21 {themeConfig.date.dateOnRight && (
22 <div class={themeConfig.general.postListDottedDivider ? 'dotted-divider' : 'divider'} />
23 )}
24 {themeConfig.date.dateOnRight && (
25 <p class="date font-features">
26 <FormattedDate date={post.data.pubDate} context="list" />
27 </p>
28 )}
29 </div>
30 </a>
31 </li>
32 ))
33 }
34</ul>
35<div class="placeholder"></div>
36
37<style>
38 ul {
39 padding: 0;
40 margin: 0;
41 list-style-type: none;
42 display: flex;
43 flex-direction: column;
44 gap: 0;
45 }
46
47 a {
48 color: var(--text-primary);
49 display: block;
50 text-decoration: none;
51 transition: opacity 0.15s ease-out;
52 }
53
54 @media (hover: hover) and (pointer: fine) {
55 ul:hover a {
56 opacity: 0.4;
57 }
58
59 ul:hover a:hover {
60 opacity: 1;
61 }
62
63 ul:hover a:hover .divider {
64 background-color: var(--text-tertiary);
65 opacity: 0.75;
66 }
67 ul:hover a:hover .dotted-divider {
68 color: var(--text-secondary);
69 }
70 ul:hover a:hover .date {
71 color: var(--text-secondary);
72 opacity: 1;
73 }
74 }
75
76 .post-item {
77 height: 2.75rem;
78 display: flex;
79 justify-content: space-between;
80 align-items: center;
81 gap: 0.75rem;
82 }
83
84 .post-item.date-left {
85 justify-content: flex-start;
86 }
87
88 .post-item.date-left .title {
89 flex: 1 1 auto;
90 min-width: 0;
91 }
92
93 .post-item.date-left .date {
94 margin-right: 0.75rem;
95 }
96
97 .title {
98 margin: 0;
99 flex-shrink: 1;
100 min-width: 0;
101 white-space: nowrap;
102 overflow: hidden;
103 text-overflow: ellipsis;
104 }
105
106 .date {
107 margin: 0;
108 color: var(--text-secondary);
109 opacity: 0.75;
110 letter-spacing: var(--spacing-s);
111 flex-shrink: 0;
112 white-space: nowrap;
113 }
114
115 .divider {
116 flex: 1 1 auto;
117 min-width: 3rem;
118 margin: 0 0.25rem;
119 height: 0.5px;
120 background-color: var(--border);
121 }
122
123 .dotted-divider {
124 flex: 1 1 3rem;
125 min-width: 3rem;
126 max-width: 100%;
127 text-align: end;
128 letter-spacing: 5px;
129 height: 1.675rem;
130 overflow: hidden;
131 color: var(--text-tertiary);
132 opacity: 0.75;
133 }
134
135 .dotted-divider::after {
136 content: '·····························································································································································';
137 pointer-events: none;
138 }
139
140 .placeholder {
141 height: 3rem;
142 }
143</style>