vixalien.tngl.sh
my website
chore: add background to posts
+70
-34
+70
-11
src/components/PostsIndex.astro
+70
-11
src/components/PostsIndex.astro
···
1
1
---
2
2
import { getCollection } from "astro:content";
3
3
import PrettyDate from "./PrettyDate.astro";
4
-
import Tags from "./Tags.astro";
4
+
// import Tags from "./Tags.astro";
5
5
import type { CollectionEntry } from "astro:content";
6
6
7
7
const posts = (await getCollection("blog")).sort(
···
39
39
description: snippet,
40
40
publish_date,
41
41
hero_image,
42
-
tags,
42
+
// tags,
43
43
},
44
44
}) => (
45
-
<p>
45
+
<a class="post" href={`/blog/${id}`}>
46
46
{hero_image ? (
47
-
<a href={`/blog/${id}`} class="post-image" aria-label={title}>
48
-
<img src={hero_image} alt={title} />
49
-
</a>
47
+
<img class="post-image" src={hero_image} alt={title} />
50
48
) : null}
51
-
<a href={`/blog/${id}`} class="post-title">
52
-
<span>{title} →</span>
53
-
</a>
49
+
<h3 class="post-title">
50
+
<span>{title}</span> <span class="post-arrow">→</span>
51
+
</h3>
54
52
<br />
55
53
<small class="intro-meta">
56
54
{/* {author && <span>{author || ""} at </span>} */}
···
59
57
<br />
60
58
<span>{snippet}</span>
61
59
<br />
62
-
<Tags tags={tags} />
63
-
</p>
60
+
{/* <Tags tags={tags} /> */}
61
+
</a>
64
62
),
65
63
)}
66
64
</>
···
68
66
})
69
67
}
70
68
</div>
69
+
70
+
<style>
71
+
.post {
72
+
--padding: 12px;
73
+
--link: var(--fg);
74
+
--link-bg: #abd5ff;
75
+
--link-bg-hover: #7ebfff;
76
+
77
+
background-color: var(--link-bg);
78
+
border-radius: 12px;
79
+
padding: var(--padding);
80
+
margin-inline: calc(-1 * var(--padding));
81
+
display: block;
82
+
margin-bottom: 2em;
83
+
border-bottom: none;
84
+
transition: 0.3s background-color;
85
+
}
86
+
87
+
@media screen and (prefers-color-scheme: dark) {
88
+
.post {
89
+
--link-bg: #153e68;
90
+
--link-bg-hover: #2c6fb8;
91
+
--fg: white;
92
+
}
93
+
}
94
+
95
+
.post:hover {
96
+
background-color: var(--link-bg-hover);
97
+
}
98
+
99
+
.post-arrow {
100
+
display: inline-block;
101
+
transition: 0.3s translate;
102
+
}
103
+
104
+
.post:hover .post-arrow,
105
+
.post:focus .post-arrow {
106
+
translate: 10px;
107
+
}
108
+
109
+
.post .post-title {
110
+
font-size: 1.1em;
111
+
font-weight: 900;
112
+
border-bottom-width: 2px;
113
+
margin: 0;
114
+
color: inherit;
115
+
}
116
+
117
+
.post a.post-image {
118
+
border-bottom: none;
119
+
}
120
+
121
+
.post .post-image {
122
+
width: 100%;
123
+
aspect-ratio: 16/9;
124
+
overflow: hidden;
125
+
object-fit: cover;
126
+
border-radius: 6px;
127
+
margin-bottom: 0.5em;
128
+
}
129
+
</style>
-23
src/styles/global.css
-23
src/styles/global.css
···
120
120
max-width: calc(100vw - calc(var(--padding-right) + var(--padding-left)));
121
121
}
122
122
123
-
.posts > p {
124
-
margin-bottom: 2em;
125
-
}
126
-
127
-
.posts > p a.post-title {
128
-
font-size: 1.1em;
129
-
font-weight: 900;
130
-
border-bottom-width: 2px;
131
-
}
132
-
133
-
.posts > p a.post-image {
134
-
border-bottom: none;
135
-
}
136
-
137
-
.posts > p a.post-image img {
138
-
width: 100%;
139
-
aspect-ratio: 16/9;
140
-
overflow: hidden;
141
-
object-fit: cover;
142
-
border-radius: 6px;
143
-
margin-bottom: 0.5em;
144
-
}
145
-
146
123
.container {
147
124
max-width: var(--max-width);
148
125
padding: 30px 20px;