chore: use smol.css framework

Commit `132c3f9`

Eric Bower · 2024-01-14 12:30:58 -0500 EST

parent 4de794d

chore: use smol.css framework

2 files changed, +1, -381

M html/base.layout.tmpl

M static/main.css

M html/base.layout.tmpl

+1, -0

......@@ -10,6 +10,7 @@

    {{template "meta" .}}

    <link rel="stylesheet" href="https://pico.sh/smol.css" />
    <link rel="stylesheet" href="/main.css" />
  </head>
  <body>

M static/main.css

+0, -381

......@@ -1,376 +1,3 @@
*,
::before,
::after {
  box-sizing: border-box;
}

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
:-moz-focusring {
  outline: 1px dotted ButtonText;
}
:-moz-ui-invalid {
  box-shadow: none;
}

@media (prefers-color-scheme: light) {
  :root {
    --white: #6a737d;
    --code: #fff8d3;
    --code-border: #f0d547;
    --pre: #f6f8fa;
    --bg-color: #fff;
    --text-color: #24292f;
    --link-color: #005cc5;
    --visited: #6f42c1;
    --blockquote: #005cc5;
    --blockquote-bg: #fff;
    --hover: #d73a49;
    --grey: #ccc;
    --success: #388038;
    --error: #c02828;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --white: #f2f2f2;
    --code: #414558;
    --code-border: #252525;
    --pre: #252525;
    --bg-color: #282a36;
    --text-color: #f2f2f2;
    --link-color: #8be9fd;
    --visited: #bd93f9;
    --blockquote: #bd93f9;
    --blockquote-bg: #414558;
    --hover: #ff80bf;
    --grey: #414558;
    --success: #388038;
    --error: #c02828;
  }
}

html {
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  margin: 0 auto;
  max-width: 900px;
}

img {
  max-width: 100%;
  height: auto;
}

b,
strong {
  font-weight: bold;
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
    monospace;
  font-size: 0.8rem;
}

code,
kbd,
samp {
  background-color: var(--code);
  border: 1px solid var(--code-border);
}

pre > code {
  background-color: inherit;
  padding: 0;
  border: none;
}

code {
  border-radius: 0.3rem;
  padding: 0.15rem 0.2rem 0.05rem;
}

pre {
  border-radius: 5px;
  padding: 1rem;
  margin: 1rem 0;
  overflow-x: auto;
  background-color: var(--pre) !important;
}

small {
  font-size: 0.8rem;
}

summary {
  display: list-item;
}

h1,
h2,
h3 {
  margin: 0;
  padding: 0.6rem 0 0 0;
  border: 0;
  font-style: normal;
  font-weight: inherit;
  font-size: inherit;
}

hr {
  color: inherit;
  border: 0;
  margin: 0;
  height: 1px;
  background: var(--grey);
  margin: 1rem auto;
  text-align: center;
}

a {
  text-decoration: underline;
  color: var(--link-color);
}

a:hover,
a:visited:hover {
  color: var(--hover);
}

a:visited {
  color: var(--visited);
}

a.link-grey {
  text-decoration: underline;
  color: var(--white);
}

a.link-grey:visited {
  color: var(--white);
}

section {
  margin-bottom: 1.4rem;
}

section:last-child {
  margin-bottom: 0;
}

header {
  margin: 1rem auto;
}

p {
  margin: 0.8rem 0;
}

article {
  overflow-wrap: break-word;
}

blockquote {
  border-left: 5px solid var(--blockquote);
  background-color: var(--blockquote-bg);
  padding: 0.8rem;
  margin: 1rem 0;
}

blockquote > p {
  margin: 0;
}

ul,
ol {
  padding: 0 0 0 2rem;
  list-style-position: outside;
}

ul[style*="list-style-type: none;"] {
  padding: 0;
}

li {
  margin: 0.5rem 0;
}

li > pre {
  padding: 0;
}

footer {
  text-align: center;
  margin-bottom: 4rem;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

dd:not(:last-child) {
  margin-bottom: 0.5rem;
}

figure {
  margin: 0;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
    monospace;
}

.box {
  border-radius: 5px;
  padding: 1rem;
  margin: 1rem 0;
  overflow-x: auto;
  background-color: var(--pre) !important;
}

.color-green {
  color: var(--success);
}

.color-red {
  color: var(--error);
}

.text-grey {
  color: var(--grey);
}

.text-2xl {
  font-size: 1.85rem;
  line-height: 1.15;
}

.text-xl {
  font-size: 1.55rem;
  line-height: 1.15;
}

.text-lg {
  font-size: 1.35rem;
  line-height: 1.15;
}

.text-md {
  font-size: 1.15rem;
  line-height: 1.15;
}

.text-sm {
  font-size: 0.875rem;
}

.text-center {
  text-align: center;
}

.font-bold {
  font-weight: bold;
}

.font-italic {
  font-style: italic;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.m-0 {
  margin: 0;
}

.mt {
  margin-top: 0.5rem;
}

.mb {
  margin-bottom: 0.5rem;
}

.mt-lg {
  margin-top: 1.35rem;
}

.my {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-2 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-sm {
  margin-top: 5px;
  margin-bottom: 5px;
}

.mx {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-2 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.p-sm {
  padding: 0.5rem;
}

.justify-between {
  justify-content: space-between;
}

.flex-1 {
  flex: 1;
}

.gap {
  gap: 1rem;
}

.gap-xs {
  gap: 0.25rem;
}

.border-b {
  border-bottom: 1px solid #666;
}

.tree-size {
  width: 60px;
  text-align: right;

......@@ -385,14 +12,6 @@ figure {
}

@media only screen and (max-width: 900px) {
  body {
    padding: 1rem;
  }

  header {
    margin: 0;
  }

  .tree-commit {
    display: none;
  }

...	...		@@ -10,6 +10,7 @@
10	10
11	11		{{template "meta" .}}
12	12
	13	+	<link rel="stylesheet" href="https://pico.sh/smol.css" />
13	14		<link rel="stylesheet" href="/main.css" />
14	15		</head>
15	16		<body>

...	...		@@ -1,376 +1,3 @@
1		-	*,
2		-	::before,
3		-	::after {
4		-	box-sizing: border-box;
5		-	}
6		-
7		-	::-moz-focus-inner {
8		-	border-style: none;
9		-	padding: 0;
10		-	}
11		-	:-moz-focusring {
12		-	outline: 1px dotted ButtonText;
13		-	}
14		-	:-moz-ui-invalid {
15		-	box-shadow: none;
16		-	}
17		-
18		-	@media (prefers-color-scheme: light) {
19		-	:root {
20		-	--white: #6a737d;
21		-	--code: #fff8d3;
22		-	--code-border: #f0d547;
23		-	--pre: #f6f8fa;
24		-	--bg-color: #fff;
25		-	--text-color: #24292f;
26		-	--link-color: #005cc5;
27		-	--visited: #6f42c1;
28		-	--blockquote: #005cc5;
29		-	--blockquote-bg: #fff;
30		-	--hover: #d73a49;
31		-	--grey: #ccc;
32		-	--success: #388038;
33		-	--error: #c02828;
34		-	}
35		-	}
36		-
37		-	@media (prefers-color-scheme: dark) {
38		-	:root {
39		-	--white: #f2f2f2;
40		-	--code: #414558;
41		-	--code-border: #252525;
42		-	--pre: #252525;
43		-	--bg-color: #282a36;
44		-	--text-color: #f2f2f2;
45		-	--link-color: #8be9fd;
46		-	--visited: #bd93f9;
47		-	--blockquote: #bd93f9;
48		-	--blockquote-bg: #414558;
49		-	--hover: #ff80bf;
50		-	--grey: #414558;
51		-	--success: #388038;
52		-	--error: #c02828;
53		-	}
54		-	}
55		-
56		-	html {
57		-	background-color: var(--bg-color);
58		-	color: var(--text-color);
59		-	line-height: 1.5;
60		-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
61		-	Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
62		-	sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
63		-	-webkit-text-size-adjust: 100%;
64		-	-moz-tab-size: 4;
65		-	tab-size: 4;
66		-	}
67		-
68		-	body {
69		-	margin: 0 auto;
70		-	max-width: 900px;
71		-	}
72		-
73		-	img {
74		-	max-width: 100%;
75		-	height: auto;
76		-	}
77		-
78		-	b,
79		-	strong {
80		-	font-weight: bold;
81		-	}
82		-
83		-	code,
84		-	kbd,
85		-	samp,
86		-	pre {
87		-	font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
88		-	monospace;
89		-	font-size: 0.8rem;
90		-	}
91		-
92		-	code,
93		-	kbd,
94		-	samp {
95		-	background-color: var(--code);
96		-	border: 1px solid var(--code-border);
97		-	}
98		-
99		-	pre > code {
100		-	background-color: inherit;
101		-	padding: 0;
102		-	border: none;
103		-	}
104		-
105		-	code {
106		-	border-radius: 0.3rem;
107		-	padding: 0.15rem 0.2rem 0.05rem;
108		-	}
109		-
110		-	pre {
111		-	border-radius: 5px;
112		-	padding: 1rem;
113		-	margin: 1rem 0;
114		-	overflow-x: auto;
115		-	background-color: var(--pre) !important;
116		-	}
117		-
118		-	small {
119		-	font-size: 0.8rem;
120		-	}
121		-
122		-	summary {
123		-	display: list-item;
124		-	}
125		-
126		-	h1,
127		-	h2,
128		-	h3 {
129		-	margin: 0;
130		-	padding: 0.6rem 0 0 0;
131		-	border: 0;
132		-	font-style: normal;
133		-	font-weight: inherit;
134		-	font-size: inherit;
135		-	}
136		-
137		-	hr {
138		-	color: inherit;
139		-	border: 0;
140		-	margin: 0;
141		-	height: 1px;
142		-	background: var(--grey);
143		-	margin: 1rem auto;
144		-	text-align: center;
145		-	}
146		-
147		-	a {
148		-	text-decoration: underline;
149		-	color: var(--link-color);
150		-	}
151		-
152		-	a:hover,
153		-	a:visited:hover {
154		-	color: var(--hover);
155		-	}
156		-
157		-	a:visited {
158		-	color: var(--visited);
159		-	}
160		-
161		-	a.link-grey {
162		-	text-decoration: underline;
163		-	color: var(--white);
164		-	}
165		-
166		-	a.link-grey:visited {
167		-	color: var(--white);
168		-	}
169		-
170		-	section {
171		-	margin-bottom: 1.4rem;
172		-	}
173		-
174		-	section:last-child {
175		-	margin-bottom: 0;
176		-	}
177		-
178		-	header {
179		-	margin: 1rem auto;
180		-	}
181		-
182		-	p {
183		-	margin: 0.8rem 0;
184		-	}
185		-
186		-	article {
187		-	overflow-wrap: break-word;
188		-	}
189		-
190		-	blockquote {
191		-	border-left: 5px solid var(--blockquote);
192		-	background-color: var(--blockquote-bg);
193		-	padding: 0.8rem;
194		-	margin: 1rem 0;
195		-	}
196		-
197		-	blockquote > p {
198		-	margin: 0;
199		-	}
200		-
201		-	ul,
202		-	ol {
203		-	padding: 0 0 0 2rem;
204		-	list-style-position: outside;
205		-	}
206		-
207		-	ul[style*="list-style-type: none;"] {
208		-	padding: 0;
209		-	}
210		-
211		-	li {
212		-	margin: 0.5rem 0;
213		-	}
214		-
215		-	li > pre {
216		-	padding: 0;
217		-	}
218		-
219		-	footer {
220		-	text-align: center;
221		-	margin-bottom: 4rem;
222		-	}
223		-
224		-	dt {
225		-	font-weight: bold;
226		-	}
227		-
228		-	dd {
229		-	margin-left: 0;
230		-	}
231		-
232		-	dd:not(:last-child) {
233		-	margin-bottom: 0.5rem;
234		-	}
235		-
236		-	figure {
237		-	margin: 0;
238		-	}
239		-
240		-	.mono {
241		-	font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
242		-	monospace;
243		-	}
244		-
245		-	.box {
246		-	border-radius: 5px;
247		-	padding: 1rem;
248		-	margin: 1rem 0;
249		-	overflow-x: auto;
250		-	background-color: var(--pre) !important;
251		-	}
252		-
253		-	.color-green {
254		-	color: var(--success);
255		-	}
256		-
257		-	.color-red {
258		-	color: var(--error);
259		-	}
260		-
261		-	.text-grey {
262		-	color: var(--grey);
263		-	}
264		-
265		-	.text-2xl {
266		-	font-size: 1.85rem;
267		-	line-height: 1.15;
268		-	}
269		-
270		-	.text-xl {
271		-	font-size: 1.55rem;
272		-	line-height: 1.15;
273		-	}
274		-
275		-	.text-lg {
276		-	font-size: 1.35rem;
277		-	line-height: 1.15;
278		-	}
279		-
280		-	.text-md {
281		-	font-size: 1.15rem;
282		-	line-height: 1.15;
283		-	}
284		-
285		-	.text-sm {
286		-	font-size: 0.875rem;
287		-	}
288		-
289		-	.text-center {
290		-	text-align: center;
291		-	}
292		-
293		-	.font-bold {
294		-	font-weight: bold;
295		-	}
296		-
297		-	.font-italic {
298		-	font-style: italic;
299		-	}
300		-
301		-	.flex {
302		-	display: flex;
303		-	}
304		-
305		-	.items-center {
306		-	align-items: center;
307		-	}
308		-
309		-	.m-0 {
310		-	margin: 0;
311		-	}
312		-
313		-	.mt {
314		-	margin-top: 0.5rem;
315		-	}
316		-
317		-	.mb {
318		-	margin-bottom: 0.5rem;
319		-	}
320		-
321		-	.mt-lg {
322		-	margin-top: 1.35rem;
323		-	}
324		-
325		-	.my {
326		-	margin-top: 0.5rem;
327		-	margin-bottom: 0.5rem;
328		-	}
329		-
330		-	.my-2 {
331		-	margin-top: 1rem;
332		-	margin-bottom: 1rem;
333		-	}
334		-
335		-	.my-sm {
336		-	margin-top: 5px;
337		-	margin-bottom: 5px;
338		-	}
339		-
340		-	.mx {
341		-	margin-left: 0.5rem;
342		-	margin-right: 0.5rem;
343		-	}
344		-
345		-	.mx-2 {
346		-	margin-left: 1rem;
347		-	margin-right: 1rem;
348		-	}
349		-
350		-	.p-sm {
351		-	padding: 0.5rem;
352		-	}
353		-
354		-	.justify-between {
355		-	justify-content: space-between;
356		-	}
357		-
358		-	.flex-1 {
359		-	flex: 1;
360		-	}
361		-
362		-	.gap {
363		-	gap: 1rem;
364		-	}
365		-
366		-	.gap-xs {
367		-	gap: 0.25rem;
368		-	}
369		-
370		-	.border-b {
371		-	border-bottom: 1px solid #666;
372		-	}
373		-
374	1		.tree-size {
375	2		width: 60px;
376	3		text-align: right;

...	...		@@ -385,14 +12,6 @@ figure {
385	12		}
386	13
387	14		@media only screen and (max-width: 900px) {
388		-	body {
389		-	padding: 1rem;
390		-	}
391		-
392		-	header {
393		-	margin: 0;
394		-	}
395		-
396	15		.tree-commit {
397	16		display: none;
398	17		}

Commit 132c3f9

Commit `132c3f9`