A Astro blog hosted on Vercel
claycow.com
1:root {
2 font-family:
3 Helvetica Neue,
4 Helvetica,
5 sans-serif;
6
7 color-scheme: light dark;
8}
9
10@media (prefers-color-scheme: dark) {
11 body {
12 --rosewater: #f5e0dc;
13 --flamingo: #f2cdcd;
14 --pink: #f5c2e7;
15 --mauve: #cba6f7;
16 --red: #f38ba8;
17 --maroon: #eba0ac;
18 --peach: #fab387;
19 --yellow: #f9e2af;
20 --green: #a6e3a1;
21 --teal: #94e2d5;
22 --sky: #89dceb;
23 --sapphire: #74c7ec;
24 --blue: #89b4fa;
25 --lavender: #b4befe;
26 --text: #cdd6f4;
27 --subtext1: #bac2de;
28 --subtext0: #a6adc8;
29 --overlay2: #9399b2;
30 --overlay1: #7f849c;
31 --overlay0: #6c7086;
32 --surface2: #585b70;
33 --surface1: #45475a;
34 --surface0: #313244;
35 --base: #1e1e2e;
36 --mantle: #181825;
37 --crust: #11111b;
38 }
39}
40
41@media (prefers-color-scheme: light) {
42 body {
43 --rosewater: #dc8a78;
44 --flamingo: #dd7878;
45 --pink: #ea76cb;
46 --mauve: #8839ef;
47 --red: #d20f39;
48 --maroon: #e64553;
49 --peach: #fe640b;
50 --yellow: #df8e1d;
51 --green: #40a02b;
52 --teal: #179299;
53 --sky: #04a5e5;
54 --sapphire: #209fb5;
55 --blue: #1e66f5;
56 --lavender: #7287fd;
57 --text: #4c4f69;
58 --subtext1: #5c5f77;
59 --subtext0: #6c6f85;
60 --overlay2: #7c7f93;
61 --overlay1: #8c8fa1;
62 --overlay0: #9ca0b0;
63 --surface2: #acb0be;
64 --surface1: #bcc0cc;
65 --surface0: #ccd0da;
66 --base: #eff1f5;
67 --mantle: #e6e9ef;
68 --crust: #dce0e8;
69 }
70}
71
72body {
73 display: flex;
74 flex-direction: column;
75 background-color: var(--crust);
76 font-size: 1rem;
77 color: var(--text);
78 min-height: 100vh;
79 margin: 0;
80
81 padding: 0 2rem;
82}
83
84main {
85 display: flex;
86 flex-direction: column;
87 align-items: center;
88 align-self: center;
89 flex-grow: 1;
90 width: clamp(200px, 100%, 1028px);
91}
92
93h2 {
94 color: var(--red);
95}
96
97h3 {
98 color: var(--yellow);
99}
100
101h4 {
102 color: var(--green);
103}
104
105h5 {
106 color: var(--blue);
107}
108
109h6 {
110 color: var(--mauve);
111}
112
113pre {
114 padding: 1rem;
115 border-radius: 0.5rem;
116}
117
118a {
119 color: var(--blue);
120}
121
122h1,
123h2,
124h3,
125h4,
126h5,
127h6,
128p,
129hr,
130img,
131figure,
132iframe,
133ul {
134 margin: 1rem 0;
135}
136
137blockquote {
138 border-left: solid 0.5rem var(--text);
139 padding: 0.25rem 1rem;
140}
141
142img {
143 border-radius: 0.5rem;
144 width: 100%;
145}
146
147iframe {
148 border-radius: 0.5rem;
149 border: none;
150}
151
152figure {
153 margin: 0;
154}
155
156figure > img {
157 margin-bottom: 0;
158}
159
160figure > figcaption {
161 color: var(--subtext0);
162 font-size: small;
163}
164
165figure > figcaption > p {
166 margin-top: 0;
167}
168
169@media only screen and (max-width: 600px) {
170 body {
171 padding: 0 1rem;
172 }
173}
174
175@font-face {
176 font-family: 'Atkinson';
177 src: url('/fonts/atkinson-regular.woff') format('woff');
178 font-weight: 400;
179 font-style: normal;
180 font-display: swap;
181}
182
183@font-face {
184 font-family: 'Atkinson';
185 src: url('/fonts/atkinson-bold.woff') format('woff');
186 font-weight: 700;
187 font-style: normal;
188 font-display: swap;
189}
190
191.sr-only {
192 border: 0;
193 padding: 0;
194 margin: 0;
195 position: absolute !important;
196 height: 1px;
197 width: 1px;
198 overflow: hidden;
199 /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
200 clip: rect(1px 1px 1px 1px);
201 /* maybe deprecated but we need to support legacy browsers */
202 clip: rect(1px, 1px, 1px, 1px);
203 /* modern browsers, clip-path works inwards from each corner */
204 clip-path: inset(50%);
205 /* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space */
206 white-space: nowrap;
207}