accidental.cc
offline-first, p2p synced, atproto enabled, feed reader
1/*
2 https://frontendmasters.com/blog/the-coyier-css-starter/
3
4 custom:
5 - body, removed padding
6 - default font size = 14px
7*/
8
9@layer reset {
10 html {
11 font:
12 clamp(1rem, 1rem + 0.5vw, 2rem) / 1.4 system-ui,
13 sans-serif;
14 tab-size: 2;
15 hanging-punctuation: first allow-end last;
16 word-break: break-word;
17 }
18
19 body {
20 margin: 0;
21 padding: 0;
22 }
23
24 *,
25 *::before,
26 *::after {
27 box-sizing: border-box;
28 }
29
30 h1,
31 h2 {
32 font-weight: 900;
33 letter-spacing: -0.02rem;
34 }
35 h1,
36 h2,
37 h3 {
38 line-height: 1.1;
39 }
40 h1,
41 h2,
42 h3,
43 h4,
44 h5,
45 h6 /* FUTURE :heading */ {
46 text-wrap: balance;
47 margin-block-start: 0;
48 }
49
50 p,
51 li,
52 dd {
53 text-wrap: pretty;
54 }
55
56 a {
57 text-underline-offset: 2px;
58 &:not(:is(:hover, :focus)) {
59 text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
60 }
61 }
62
63 sub,
64 sup {
65 font-size: 75%;
66 line-height: 0;
67 position: relative;
68 vertical-align: baseline;
69 }
70 sub {
71 inset-block-end: -0.25em;
72 }
73 sup {
74 inset-block-start: -0.5em;
75 }
76
77 ul,
78 ol,
79 dl {
80 margin: 0;
81 padding: 0;
82 list-style-position: inside;
83 ul,
84 ol,
85 dl {
86 padding-inline-start: 2ch;
87 }
88 }
89
90 img,
91 video,
92 iframe {
93 display: block;
94 max-inline-size: 100%;
95 block-size: auto;
96 border-style: none;
97 }
98
99 figure {
100 inline-size: fit-content;
101 margin-inline: auto;
102 }
103 figcaption {
104 contain: inline-size;
105 font-size: 90%;
106 }
107
108 input,
109 select,
110 textarea,
111 button {
112 font: inherit;
113 /* FUTURE: appearance: base; */
114 }
115 label {
116 display: block;
117 }
118 input:not(:where([type='submit'], [type='checkbox'], [type='radio'], [type='button'], [type='reset'])) {
119 inline-size: 100%;
120 }
121 button,
122 input:where([type='submit'], [type='reset'], [type='button']) {
123 background: CanvasText;
124 color: Canvas;
125 border: 1px solid transparent;
126 }
127 textarea {
128 field-sizing: content;
129 min-block-size: 5lh;
130 inline-size: 100%;
131 max-inline-size: 100%;
132 }
133
134 pre,
135 code,
136 kbd,
137 samp {
138 font-family: ui-monospace, SFMono-Regular, monospace;
139 }
140 pre {
141 white-space: pre-wrap;
142 background: CanvasText;
143 color: Canvas;
144 padding: 1.5rem;
145 }
146
147 svg {
148 fill: currentColor;
149 }
150
151 [aria-disabled='true' i],
152 [disabled] {
153 cursor: not-allowed;
154 }
155 [disabled],
156 label:has(input[disabled]) {
157 opacity: 0.5;
158
159 [disabled] {
160 opacity: 1;
161 }
162 }
163
164 hr {
165 border-style: solid;
166 border-width: 1px 0 0;
167 color: inherit;
168 height: 0;
169 overflow: visible;
170 margin-block: 2.5rem;
171 }
172
173 :target {
174 scroll-margin: 3rlh;
175 }
176
177 table {
178 caption-side: bottom;
179 border-collapse: collapse;
180 td {
181 font-size: 90%;
182 }
183 td,
184 th {
185 word-break: normal;
186 border: 1px solid gray;
187 padding: 0.5rem;
188 }
189 }
190 [role='region'][aria-labelledby][tabindex] {
191 overflow: auto;
192 }
193 caption {
194 font-size: 90%;
195 }
196
197 [hidden] {
198 display: none !important;
199 }
200 .screenreader-only:not(:focus):not(:active) {
201 clip: rect(0 0 0 0);
202 clip-path: inset(50%);
203 height: 1px;
204 overflow: hidden;
205 position: absolute;
206 white-space: nowrap;
207 width: 1px;
208 }
209 :focus-visible {
210 outline-offset: 2px;
211 }
212
213 @media (prefers-reduced-motion: no-preference) {
214 @view-transition {
215 navigation: auto;
216 }
217
218 html {
219 interpolate-size: allow-keywords;
220 &:focus-within {
221 scroll-behavior: smooth;
222 }
223 }
224 }
225}