an app to share curated trails
sidetrail.app
1.BackButton {
2 background: none;
3 border: none;
4 padding: 0.5rem 0;
5 font-family: inherit;
6 text-decoration: none;
7 color: #666;
8 font-size: 0.875rem;
9 transition: all 0.2s ease;
10 text-transform: lowercase;
11 cursor: pointer;
12 display: block;
13 width: 100%;
14 text-align: center;
15}
16
17@media (hover: hover) {
18 .BackButton:hover {
19 color: var(--accent-color);
20 }
21}
22
23.BackButton:active {
24 color: var(--accent-color);
25 transition-duration: 0.05s;
26}
27
28.BackButton-top {
29 width: 100vw;
30 align-self: center;
31 margin: -2rem 0 1rem;
32 padding: 2.5rem 0 0.5rem;
33 transition:
34 background 0.2s ease,
35 text-decoration 0.2s ease;
36}
37
38@media (hover: hover) {
39 .BackButton-top:hover {
40 background: linear-gradient(
41 to bottom,
42 color-mix(in srgb, var(--accent-color) 12%, transparent),
43 transparent
44 );
45 text-decoration: underline;
46 text-decoration-color: var(--accent-color);
47 }
48}
49
50.BackButton-top:active {
51 text-decoration: underline;
52 text-decoration-color: var(--accent-color);
53 transition-duration: 0.05s;
54}