my take on a css reset, smashed together from a bunch of different sources
1@layer reset {
2 *,
3 *::before,
4 *::after {
5 box-sizing: border-box;
6 }
7
8 * {
9 margin: 0;
10 padding: 0;
11 }
12
13 html {
14 -webkit-font-smoothing: antialiased;
15 text-rendering: optimizespeed;
16 text-size-adjust: none;
17 color-scheme: dark light;
18 tab-size: 2;
19 scrollbar-gutter: stable;
20 interpolate-size: allow-keywords;
21 line-height: 1.5;
22 }
23
24 body {
25 margin: 0;
26 /* https://systemfontstack.com */
27 font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida
28 Console, monospace;
29 font-synthesis: none;
30 }
31
32 ul[role="list"],
33 ol[role="list"] {
34 list-style: none;
35 padding: 0;
36 }
37
38 ::marker {
39 line-height: 0;
40 }
41
42 :focus-visible {
43 outline-offset: 2px;
44 }
45
46 @media (prefers-reduced-motion: no-preference) {
47 html:focus-within {
48 scroll-behavior: smooth;
49 }
50 }
51
52 a {
53 color: inherit;
54 text-underline-offset: 0.2ex;
55 }
56
57 h1,
58 h2,
59 h3,
60 h4 {
61 text-wrap: balance;
62 }
63
64 a[href] {
65 -webkit-tap-highlight-color: transparent;
66 }
67
68 p,
69 h1,
70 h2,
71 h3,
72 h4,
73 h5,
74 h6 {
75 overflow-wrap: break-word;
76 }
77
78 p {
79 text-wrap: pretty;
80 }
81}