My personal website.
entomoviscera.online
1---
2const { url, title, time } = Astro.props;
3---
4
5<a href={url}>
6 <div class="decorativetab"></div>
7 <article>
8 <h3>{title}</h3>
9 <time class="barcodetext" datetime={time}>{time}</time>
10 </article>
11</a>
12
13<style>
14 a {
15 display: flex;
16 border: 10px double;
17 text-decoration: none;
18 margin-bottom: 13px;
19 }
20
21 a:last-child {
22 margin-bottom: 0;
23 }
24
25 article {
26 flex: 1 1;
27 padding: 13px 15px;
28 overflow: hidden;
29 }
30
31 article h3 {
32 white-space: nowrap;
33 overflow: hidden;
34 text-overflow: ellipsis;
35 }
36
37 time {
38 font-weight: bold;
39 font-size: 2rem;
40 }
41
42 .decorativetab {
43 width: 16px;
44 border-right: 10px double;
45 transition: width 200ms;
46 }
47
48 a:hover {
49 color: var(--yellow);
50 }
51
52 a:hover .decorativetab {
53 width: 64px;
54 }
55
56 @media (prefers-reduced-motion: reduce) {
57 .decorativetab {
58 transition: 0;
59 }
60 }
61</style>