danabra.mov
an app to share curated trails
sidetrail.app
atproto
nextjs
react
rsc
1:root {
2 --text-primary: #000;
3 --text-secondary: #555;
4 --text-tertiary: #888;
5 --text-muted: #999;
6 --bg-primary: #fefefe;
7 --border-subtle: rgba(0, 0, 0, 0.08);
8 --user-content-filter: none;
9}
10
11@media (prefers-color-scheme: dark) {
12 :root {
13 --text-primary: rgba(255, 255, 255, 0.92);
14 --text-secondary: rgba(255, 255, 255, 0.75);
15 --text-tertiary: rgba(255, 255, 255, 0.55);
16 --text-muted: rgba(255, 255, 255, 0.45);
17 --bg-primary: #1b1a19;
18 --border-subtle: rgba(255, 255, 255, 0.12);
19 --user-content-filter: invert(93%) hue-rotate(180deg);
20 }
21}
22
23* {
24 box-sizing: border-box;
25}
26
27/* ========== TOUCH DEVICE FIXES ========== */
28
29a,
30button,
31[role="button"],
32input,
33select,
34textarea {
35 -webkit-tap-highlight-color: transparent;
36}
37
38a,
39button,
40[role="button"] {
41 touch-action: manipulation;
42}
43
44*:focus-visible {
45 outline-color: var(--accent-color, #5f8ec4);
46 outline-offset: 2px;
47}
48
49body {
50 margin: 0;
51 padding: 0;
52 font-family:
53 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
54 "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
55 -webkit-font-smoothing: antialiased;
56 -moz-osx-font-smoothing: grayscale;
57 background-color: var(--bg-primary);
58 color: var(--text-primary);
59 transition:
60 background-color 0.3s ease,
61 color 0.3s ease;
62}
63
64/* ========== SHIMMER / SKELETON LOADING STYLES ========== */
65
66@keyframes shimmer {
67 0% {
68 opacity: 1;
69 }
70 50% {
71 opacity: 0.5;
72 }
73 100% {
74 opacity: 1;
75 }
76}
77
78.skeleton {
79 background: rgba(0, 0, 0, 0.05);
80 animation: shimmer 2s ease-in-out infinite;
81 border-radius: 4px;
82}
83
84@media (prefers-color-scheme: dark) {
85 .skeleton {
86 background: rgba(255, 255, 255, 0.05);
87 }
88}