danabra.mov
an app to share curated trails
sidetrail.app
atproto
nextjs
react
rsc
fix overflow on mobile
+31
-8
+1
-1
app/(home)/drafts/DraftsClientPage.tsx
+1
-1
app/(home)/drafts/DraftsClientPage.tsx
+8
-1
app/(home)/walking/HomeWalkingPill.css
+8
-1
app/(home)/walking/HomeWalkingPill.css
···
80
display: flex;
81
align-items: center;
82
gap: 0;
83
}
84
85
.HomeWalkingPill-dotWrapper {
86
display: flex;
87
align-items: center;
88
}
89
90
.HomeWalkingPill-dot {
91
width: 12px;
92
height: 12px;
93
border-radius: 50%;
94
transition: all 0.3s ease;
95
}
96
···
121
122
.HomeWalkingPill-line {
123
width: 20px;
124
height: 2px;
125
background-color: rgba(0, 0, 0, 0.08);
126
-
margin: 0 4px;
127
}
128
129
@media (prefers-color-scheme: dark) {
···
80
display: flex;
81
align-items: center;
82
gap: 0;
83
+
min-width: 0;
84
+
flex: 1 1 0;
85
}
86
87
.HomeWalkingPill-dotWrapper {
88
display: flex;
89
align-items: center;
90
+
flex-shrink: 1;
91
+
min-width: 0;
92
}
93
94
.HomeWalkingPill-dot {
95
width: 12px;
96
height: 12px;
97
border-radius: 50%;
98
+
flex-shrink: 0;
99
transition: all 0.3s ease;
100
}
101
···
126
127
.HomeWalkingPill-line {
128
width: 20px;
129
+
min-width: 2px;
130
height: 2px;
131
background-color: rgba(0, 0, 0, 0.08);
132
+
margin: 0 2px;
133
+
flex-shrink: 1;
134
}
135
136
@media (prefers-color-scheme: dark) {
+22
-6
app/at/(trail)/[handle]/trail/[rkey]/TrailProgress.css
+22
-6
app/at/(trail)/[handle]/trail/[rkey]/TrailProgress.css
···
28
display: flex;
29
align-items: center;
30
gap: 0;
31
}
32
33
.TrailProgress-nodeWrapper {
34
display: flex;
35
align-items: center;
36
}
37
38
.TrailProgress-node {
39
width: 8px;
40
height: 8px;
41
border-radius: 50%;
42
-
transition: all 0.4s ease;
43
position: relative;
44
}
45
46
.TrailProgress-node--clickable {
···
92
box-shadow: 0 0 0 4px var(--accent-color-transparent);
93
}
94
50% {
95
-
box-shadow: 0 0 0 5px var(--accent-color-transparent);
96
}
97
}
98
···
123
124
.TrailProgress-line {
125
width: 14px;
126
height: 2px;
127
background-color: rgba(0, 0, 0, 0.08);
128
-
margin: 0 2px;
129
-
flex-shrink: 0;
130
}
131
132
@media (prefers-color-scheme: dark) {
···
199
200
.TrailProgress-line {
201
width: 18px;
202
-
margin: 0 3px;
203
}
204
}
205
···
209
gap: 2rem;
210
}
211
212
.TrailProgress-node {
213
width: 12px;
214
height: 12px;
···
220
221
.TrailProgress-line {
222
width: 24px;
223
-
margin: 0 4px;
224
}
225
226
.TrailProgress-statusWalking,
···
28
display: flex;
29
align-items: center;
30
gap: 0;
31
+
min-width: 0;
32
+
flex: 1 1 0;
33
+
justify-content: center;
34
}
35
36
.TrailProgress-nodeWrapper {
37
display: flex;
38
align-items: center;
39
+
flex-shrink: 1;
40
+
min-width: 0;
41
}
42
43
.TrailProgress-node {
44
width: 8px;
45
height: 8px;
46
border-radius: 50%;
47
+
transition:
48
+
transform 0.2s ease,
49
+
opacity 0.2s ease,
50
+
box-shadow 0.2s ease;
51
position: relative;
52
+
flex-shrink: 0;
53
}
54
55
.TrailProgress-node--clickable {
···
101
box-shadow: 0 0 0 4px var(--accent-color-transparent);
102
}
103
50% {
104
+
box-shadow: 0 0 0 6px var(--accent-color-transparent);
105
}
106
}
107
···
132
133
.TrailProgress-line {
134
width: 14px;
135
+
min-width: 2px;
136
height: 2px;
137
background-color: rgba(0, 0, 0, 0.08);
138
+
margin: 0 1px;
139
+
flex-shrink: 1;
140
}
141
142
@media (prefers-color-scheme: dark) {
···
209
210
.TrailProgress-line {
211
width: 18px;
212
+
min-width: 3px;
213
+
margin: 0 2px;
214
}
215
}
216
···
220
gap: 2rem;
221
}
222
223
+
.TrailProgress-path {
224
+
flex: 0 1 auto;
225
+
}
226
+
227
.TrailProgress-node {
228
width: 12px;
229
height: 12px;
···
235
236
.TrailProgress-line {
237
width: 24px;
238
+
min-width: 4px;
239
+
margin: 0 3px;
240
}
241
242
.TrailProgress-statusWalking,