Mirror of
Add text overflow handling to title style (#2)
* Add text overflow handling to title style
* fix: dots always visible
* feat: swap date and type
* fix: missing direction
* fix: styling
* Refactor archive list to use list items
authored by
Felix Schneider
and committed by
GitHub
91270d43
7cd72338
+41
-29
+41
-29
src/pages/archive.astro
+41
-29
src/pages/archive.astro
···
14
14
<Layout title="Archive | npmx.digest">
15
15
<h1 class="page-title">Archives</h1>
16
16
17
-
<div class="archive-list">
17
+
<ul class="archive-list">
18
18
{
19
19
sortedPosts.map(({ data, id }) => {
20
20
const displayDate = formatDate(data.date);
21
21
const postUrl = `/posts/${id}`;
22
22
23
23
return (
24
-
<a href={postUrl} class="archive-item">
25
-
<span class="date">{displayDate}</span>
26
-
<span class="title">{data.title}</span>
27
-
<span class="dot" />
28
-
<span class={`type ${data.type}`}>{data.type}</span>
29
-
</a>
24
+
<li class="archive-row">
25
+
<a href={postUrl} class="archive-item">
26
+
<span class={`type ${data.type}`} aria-label={`Post type: ${data.type}`}>{data.type}</span>
27
+
<span class="title">{data.title}</span>
28
+
<span class="dot" aria-hidden="true" />
29
+
<time datetime={data.date.toISOString()} class="date">{displayDate}</time>
30
+
</a>
31
+
</li>
30
32
);
31
33
})
32
34
}
33
-
</div>
35
+
</ul>
34
36
</Layout>
35
37
36
38
<style>
···
43
45
.archive-list {
44
46
display: flex;
45
47
flex-direction: column;
48
+
list-style: none;
49
+
padding: 0;
50
+
margin: 0;
51
+
}
52
+
53
+
.archive-row {
54
+
width: 100%;
46
55
}
47
56
48
57
.archive-item {
···
59
68
color: var(--accent);
60
69
}
61
70
62
-
.date {
63
-
font-family: monospace;
64
-
width: 120px;
65
-
flex-shrink: 0;
66
-
font-size: 0.85rem;
67
-
}
68
-
69
-
.title {
70
-
color: var(--text);
71
-
}
72
-
73
71
.type {
72
+
width: 65px;
73
+
flex-shrink: 0;
74
74
font-size: 0.75rem;
75
75
text-transform: capitalize;
76
-
margin-left: 1rem;
77
76
font-weight: 600;
77
+
margin-right: 0.5rem;
78
78
}
79
79
80
-
.daily {
81
-
color: #fbbf24;
82
-
}
83
-
.midday {
84
-
color: #f97316;
85
-
}
86
-
.nightly {
87
-
color: #818cf8;
80
+
.daily { color: #fbbf24; }
81
+
.midday { color: #f97316; }
82
+
.nightly { color: #818cf8; }
83
+
84
+
.title {
85
+
color: var(--text);
86
+
white-space: nowrap;
87
+
overflow: hidden;
88
+
text-overflow: ellipsis;
89
+
flex-shrink: 1;
90
+
min-width: 0;
88
91
}
89
92
90
93
.dot {
91
94
align-self: center;
92
95
flex-grow: 1;
96
+
min-width: 20px;
93
97
border-bottom: 1px dotted #333;
94
-
margin: 0.2rem 1rem 0;
98
+
margin: 0.2rem 0.5rem 0;
99
+
}
100
+
101
+
.date {
102
+
font-family: monospace;
103
+
width: 90px;
104
+
text-align: right;
105
+
flex-shrink: 0;
106
+
font-size: 0.85rem;
95
107
}
96
108
</style>