learn and share notes on atproto (wip) 馃
malfestio.stormlightlabs.org/
readability
solid
axum
atproto
srs
1@import "tailwindcss";
2@plugin "@egoist/tailwindcss-icons";
3
4@font-face {
5 font-family: "Mattern";
6 src: url("/fonts/Mattern-Regular.otf") format("opentype"),
7 url("/fonts/Mattern-Regular.ttf") format("truetype");
8 font-weight: 400;
9 font-style: normal;
10 font-display: swap;
11}
12
13@theme {
14 --font-display: "Mattern", serif;
15 --font-body: "Figtree Variable", sans-serif;
16
17 /* Spacing Tokens - 16px grid */
18 --spacing-xs: 4px;
19 --spacing-sm: 8px;
20 --spacing-md: 12px;
21 --spacing-base: 16px;
22 --spacing-lg: 24px;
23 --spacing-xl: 32px;
24 --spacing-2xl: 48px;
25 --spacing-3xl: 64px;
26 --spacing-4xl: 96px;
27
28 /* Elevation Layers */
29 --layer-00: #161616;
30 --layer-01: #1e1e1e;
31 --layer-02: #262626;
32 --layer-03: #2c2c2c;
33 --layer-04: #323232;
34
35 /* Elevation Shadows - Subtle depth */
36 --shadow-01: 0 1px 2px rgba(0, 0, 0, 0.1);
37 --shadow-02: 0 2px 4px rgba(0, 0, 0, 0.15);
38 --shadow-03: 0 4px 8px rgba(0, 0, 0, 0.2);
39 --shadow-04: 0 8px 16px rgba(0, 0, 0, 0.25);
40
41 /* Motion Tokens */
42 --duration-instant: 100ms;
43 --duration-fast: 150ms;
44 --duration-normal: 250ms;
45 --duration-slow: 350ms;
46 --duration-slower: 500ms;
47
48 --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
49 --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
50 --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
51 --easing-sharp: cubic-bezier(0.4, 0, 0.6, 1);
52
53 --density-multiplier: 1;
54}
55
56* {
57 @apply font-body;
58}
59
60h1,
61h2,
62h3,
63h4,
64h5,
65h6 {
66 @apply font-display;
67}
68
69.grid-pattern {
70 background-size: 32px 32px;
71 background-image: linear-gradient(
72 to right,
73 rgba(85, 85, 85, 0.3) 1px,
74 transparent 1px
75 ),
76 linear-gradient(to bottom, rgba(85, 85, 85, 0.3) 1px, transparent 1px);
77}
78
79/* Elevation Utilities - Carbon-inspired layering */
80.surface-00 {
81 background-color: var(--layer-00);
82}
83
84.surface-01 {
85 background-color: var(--layer-01);
86 box-shadow: var(--shadow-01);
87}
88
89.surface-02 {
90 background-color: var(--layer-02);
91 box-shadow: var(--shadow-02);
92}
93
94.surface-03 {
95 background-color: var(--layer-03);
96 box-shadow: var(--shadow-03);
97}
98
99.surface-04 {
100 background-color: var(--layer-04);
101 box-shadow: var(--shadow-04);
102}
103
104/* Density Utilities - Applied to container elements */
105.density-compact {
106 --density-multiplier: 0.75;
107}
108
109.density-comfortable {
110 --density-multiplier: 1;
111}
112
113.density-spacious {
114 --density-multiplier: 1.25;
115}
116
117.transition-standard {
118 transition-duration: var(--duration-normal);
119 transition-timing-function: var(--easing-standard);
120}
121
122.transition-fast {
123 transition-duration: var(--duration-fast);
124 transition-timing-function: var(--easing-standard);
125}
126
127.transition-slow {
128 transition-duration: var(--duration-slow);
129 transition-timing-function: var(--easing-decelerate);
130}
131
132@keyframes pulse {
133 0%,
134 100% {
135 opacity: 1;
136 }
137 50% {
138 opacity: 0.5;
139 }
140}
141
142@keyframes shimmer {
143 0% {
144 background-position: -200% 0;
145 }
146 100% {
147 background-position: 200% 0;
148 }
149}
150
151@keyframes breathe {
152 0%,
153 100% {
154 transform: scale(1);
155 }
156 50% {
157 transform: scale(1.02);
158 }
159}
160
161.animate-pulse {
162 animation: pulse 2s ease-in-out infinite;
163}
164
165.animate-shimmer {
166 background: linear-gradient(
167 90deg,
168 var(--layer-01) 0%,
169 var(--layer-02) 50%,
170 var(--layer-01) 100%
171 );
172 background-size: 200% 100%;
173 animation: shimmer 1.5s ease-in-out infinite;
174}
175
176.animate-breathe {
177 animation: breathe 3s ease-in-out infinite;
178}
179
180.press-effect:active {
181 transform: scale(0.97);
182 transition: transform var(--duration-instant) var(--easing-sharp);
183}