blob: 3301ad211659a2aa3db011cab0ba579f892ec775 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
---
interface Props {
title: string;
date: string;
url: string;
content: string;
headerElement?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "h7";
}
const { title, date, url, content, headerElement = "h2" } = Astro.props;
const H = headerElement;
---
<section class="article-preview">
<span class="date">{date}</span>
<H class="title"><a href={url}>{title}</a></H>
<p class="content">
{content}
</p>
<p>... <a class="mono-link" href="{{ .link }}">Read more</a></p>
</section>
<style>
.article-preview {
font-size: 0.95em;
padding-inline: 0.5em;
padding-block: 0.5em;
& > p {
font-size: 0.9em;
line-height: 1.4;
margin-inline-start: 0.3em;
margin-block: 0;
}
& > .title {
margin-block-start: 0;
margin-block-end: 0.3em;
}
& > .date {
font-size: small;
margin-top: 0.25em;
float: right;
color: hsl(0, 0%, 25%);
}
& > .content {
overflow: hidden;
height: 3lh;
}
}
html[data-theme="dark"] {
& .article-preview {
background-color: hsl(0, 0%, 3%);
& > .date {
color: hsl(0, 0%, 75%);
}
}
}
hr.article-preview-hr {
border: none;
border-top: 1.5px dashed currentColor;
}
</style>
|
