an app to share curated trails
sidetrail.app
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 transition: color 0.2s ease;
30 text-transform: lowercase;
31 font-weight: 400;
32 font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;
33 text-decoration: none;
34 position: relative;
35}
36
37@media (hover: hover) {
38 .SegmentTabs-tab:hover:not(.SegmentTabs-tab--active) {
39 color: var(--text-secondary);
40 }
41}
42
43.SegmentTabs-tab:active:not(.SegmentTabs-tab--active) {
44 color: var(--text-secondary);
45 transition-duration: 0.05s;
46}
47
48.SegmentTabs-tab--active {
49 color: var(--text-primary);
50 font-weight: 500;
51}
52
53@media (max-width: 480px) {
54 .SegmentTabs-tab {
55 font-size: 1rem;
56 white-space: nowrap;
57 }
58}