an app to share curated trails
sidetrail.app
atproto
nextjs
react
rsc
1.TrailCard {
2 display: flex;
3 flex-direction: column;
4 gap: 0.75rem;
5}
6
7.TrailCard-title {
8 font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;
9 font-size: 1.125rem;
10 font-weight: 500;
11 color: var(--accent-color);
12 margin: 0;
13 text-transform: lowercase;
14 letter-spacing: -0.01em;
15 filter: var(--user-content-filter);
16}
17
18.TrailCard-description {
19 font-size: 0.9375rem;
20 line-height: 1.5;
21 color: var(--text-secondary);
22 margin: 0;
23 flex: 1;
24}
25
26.TrailCard-meta {
27 display: flex;
28 justify-content: space-between;
29 align-items: center;
30 font-size: 0.8125rem;
31 color: var(--text-tertiary);
32 padding-top: 0.5rem;
33 border-top: 1px solid var(--border-subtle);
34}
35
36.TrailCard-creator,
37.TrailCard-steps {
38 text-transform: lowercase;
39}
40
41.TrailCard-activity {
42 display: flex;
43 align-items: center;
44 gap: 0.375rem;
45}
46
47.TrailCard-walkers {
48 display: flex;
49 gap: 0.25rem;
50 align-items: center;
51 padding: 0.25rem 0.45rem;
52 border-radius: 12px;
53 position: relative;
54 isolation: isolate;
55}
56
57.TrailCard-walkers::before {
58 content: "";
59 position: absolute;
60 inset: 0;
61 background: var(--accent-color-transparent);
62 border: 1px solid var(--accent-color-transparent);
63 border-radius: 12px;
64 filter: var(--user-content-filter);
65 z-index: -1;
66 pointer-events: none;
67}