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 article {
22 flex: 1 1;
23 padding: 13px 15px;
24 overflow: hidden;
25 }
26
27 article h3 {
28 white-space: nowrap;
29 overflow: hidden;
30 text-overflow: ellipsis;
31 }
32
33 time {
34 font-weight: bold;
35 font-size: 2rem;
36 }
37
38 .decorativetab {
39 width: 16px;
40 border-right: 10px double;
41 transition: width 200ms;
42 }
43
44 a:hover {
45 color: var(--yellow);
46 }
47
48 a:hover .decorativetab {
49 width: 64px;
50 }
51
52 @media (prefers-reduced-motion: reduce) {
53 .decorativetab {
54 transition: none;
55 }
56 }
57</style>