an app to share curated trails
sidetrail.app
atproto
nextjs
react
rsc
1.SegmentTabs {
2 display: flex;
3 gap: 3rem;
4 margin-bottom: 1.5rem;
5 padding: 0 1rem;
6 overflow-x: auto;
7 -webkit-overflow-scrolling: touch;
8 scrollbar-width: none;
9 -ms-overflow-style: none;
10}
11
12.SegmentTabs::-webkit-scrollbar {
13 display: none;
14}
15
16@media (max-width: 480px) {
17 .SegmentTabs {
18 gap: 1.5rem;
19 }
20}
21
22.SegmentTabs-tab {
23 background: transparent;
24 border: none;
25 padding: 0.5rem 0;
26 font-size: 1.125rem;
27 color: var(--text-tertiary);
28 cursor: pointer;
29 text-transform: lowercase;
30 font-weight: 400;
31 font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;
32 text-decoration: none;
33 position: relative;
34}
35
36@media (hover: hover) {
37 .SegmentTabs-tab:hover {
38 color: var(--text-secondary);
39 }
40 .SegmentTabs-tab--active:hover {
41 color: var(--text-primary);
42 }
43}
44
45.SegmentTabs-tab--active,
46.SegmentTabs-tabText--pending {
47 color: var(--text-primary);
48}
49
50@media (max-width: 480px) {
51 .SegmentTabs-tab {
52 font-size: 1rem;
53 white-space: nowrap;
54 }
55}
56
57.SegmentTabs-tabText--pending {
58 animation: segmentTab-pulse 2s 200ms ease-in-out infinite;
59}
60
61@keyframes segmentTab-pulse {
62 0%,
63 100% {
64 opacity: 1;
65 }
66 50% {
67 opacity: 0.8;
68 }
69}