style(prose): read.css file

Commit `05dc0b4`

Eric Bower · 2026-10-02 23:45:04 -0400 EDT

parent fa998ee

style(prose): read.css file

4 files changed, +2, -859

M pkg/apps/prose/api.go

M pkg/apps/prose/html/read.page.tmpl

R pkg/apps/prose/public/read.css

D pkg/apps/prose/public/smol.css

M pkg/apps/prose/api.go

+1, -0

......@@ -879,6 +879,7 @@ func serveFile(file string, contentType string) http.HandlerFunc {

func createStaticRoutes() []router.Route {
	return []router.Route{
		router.NewRoute("GET", "/read.css", serveFile("read.css", "text/css")),
		router.NewRoute("GET", "/reset.css", serveFile("reset.css", "text/css")),
		router.NewRoute("GET", "/syntax.css", serveFile("syntax.css", "text/css")),
		router.NewRoute("GET", "/card.png", serveFile("card.png", "image/png")),

M pkg/apps/prose/html/read.page.tmpl

+1, -1

......@@ -25,7 +25,7 @@
<meta itemprop="image" content="https://{{.Site.Domain}}/card.png" />
<meta property="og:image" content="https://{{.Site.Domain}}/card.png" />

<link rel="stylesheet" href="/smol-v2.css" />
<link rel="stylesheet" href="/read.css" />
{{end}}

{{define "attrs"}}{{end}}

R pkg/apps/prose/public/smol-v2.css => pkg/apps/prose/public/read.css

+0, -0

D pkg/apps/prose/public/smol.css

+0, -858

......@@ -1,858 +0,0 @@
*,
::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 {
    --main-hue: 250;
    --white: #2e3f53;
    --white-light: #cfe0f4;
    --white-dark: #6c6a6a;
    --code: #52576f;
    --pre: #e1e7ee;
    --bg-color: #f4f4f4;
    --text-color: #24292f;
    --link-color: #005cc5;
    --visited: #6f42c1;
    --blockquote: #005cc5;
    --blockquote-bg: #cfe0f4;
    --hover: #c11e7a;
    --grey: #ccc;
    --grey-light: #6a708e;
    --shadow: #e8e8e8;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-hue: 250;
    --white: #f2f2f2;
    --white-light: #f2f2f2;
    --white-dark: #e8e8e8;
    --code: #414558;
    --pre: #252525;
    --bg-color: #282a36;
    --text-color: #f2f2f2;
    --link-color: #8be9fd;
    --visited: #bd93f9;
    --blockquote: #bd93f9;
    --blockquote-bg: #353548;
    --hover: #ff80bf;
    --grey: #414558;
    --grey-light: #6a708e;
    --shadow: #252525;
  }
}

html {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-size: 18px;
  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;
  -o-tab-size: 4;
  tab-size: 4;
}

body {
  margin: 0 auto;
}

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;
}

code,
kbd,
samp {
  border: 2px solid var(--code);
}

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

code {
  font-size: 90%;
  border-radius: 0.3rem;
  padding: 0.1rem 0.3rem;
}

pre {
  font-size: 14px;
  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;
  cursor: pointer;
}

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

path {
  fill: var(--text-color);
  stroke: var(--text-color);
}

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

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

a:hover,
a:visited:hover {
  text-decoration: underline;
  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.5rem 0;
}

article {
  overflow-wrap: break-word;
}

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

blockquote > p {
  margin: 0;
}

blockquote code {
  border: 1px solid var(--blockquote);
}

ul,
ol {
  padding: 0 0 0 1rem;
  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;
}

.container {
  max-width: 50em;
  width: 100%;
}

.container-sm {
  max-width: 40em;
  width: 100%;
}

.container-center {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

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

.link-alt-adj,
.link-alt-adj:visited,
.link-alt-adj:visited:hover,
.link-alt-adj:hover {
  color: var(--link-color);
  text-decoration: none;
}

.link-alt-adj:visited:hover,
.link-alt-adj:hover {
  text-decoration: underline;
}

.link-alt-hover,
.link-alt-hover:visited,
.link-alt-hover:visited:hover,
.link-alt-hover:hover {
  color: var(--hover);
  text-decoration: none;
}

.link-alt-hover:visited:hover,
.link-alt-hover:hover {
  text-decoration: underline;
}

.link-alt,
.link-alt:visited,
.link-alt:visited:hover,
.link-alt:hover {
  color: var(--white);
  text-decoration: none;
}

.link-alt:visited:hover,
.link-alt:hover {
  text-decoration: underline;
}

.text-3xl {
  font-size: 2.5rem;
}

.text-2xl {
  font-size: 1.9rem;
  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-xs {
  font-size: 0.775rem;
}

.cursor-pointer {
  cursor: pointer;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.border {
  border: 2px solid var(--grey-light);
}

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

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

.text-underline {
  border-bottom: 3px solid var(--text-color);
  padding-bottom: 3px;
}

.text-hdr {
  color: var(--hover);
}

.text-underline-hdr {
  border-bottom: 3px solid var(--hover);
  padding-bottom: 3px;
}

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

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

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.max-w-half {
  max-width: 50%;
}

.h-screen {
  height: 100vh;
}

.w-screen {
  width: 100vw;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

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

.m-0 {
  margin: 0;
}

.mt {
  margin-top: 0.5rem;
}

.mt-2 {
  margin-top: 1rem;
}

.mt-4 {
  margin-top: 2rem;
}

.mt-8 {
  margin-top: 4rem;
}

.mb {
  margin-bottom: 0.5rem;
}

.mb-2 {
  margin-bottom: 1rem;
}

.mb-4 {
  margin-bottom: 2rem;
}

.mb-8 {
  margin-bottom: 4rem;
}

.mb-16 {
  margin-bottom: 8rem;
}

.mr {
  margin-right: 0.5rem;
}

.ml-sm {
  margin-left: 0.25rem;
}

.ml {
  margin-left: 0.5rem;
}

.pt-0 {
  padding-top: 0;
}

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

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

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

.my-8 {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

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

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

.m-1 {
  margin: 0.5rem;
}

.p-1 {
  padding: 0.5rem;
}

.p-0 {
  padding: 0;
}

.px-2 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-4 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-4 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-8 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

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

.justify-center {
  justify-content: center;
}

.gap {
  gap: 0.5rem;
}

.gap-2 {
  gap: 1rem;
}

.group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.group-2 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.group-h {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.flex-1 {
  flex: 1;
}

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

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

.justify-end {
  justify-content: end;
}

.font-grey-light {
  color: var(--grey-light);
}

.hidden {
  display: none;
}

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

/* ==== MARKDOWN ==== */

.md h1,
.md h2,
.md h3,
.md h4 {
  padding: 0;
  margin: 1.5rem 0 0.9rem 0;
  font-weight: bold;
}

.md h1 a,
.md h2 a,
.md h3 a,
.md h4 a {
  color: var(--grey-light);
  text-decoration: none;
}

.md h1 {
  font-size: 1.6rem;
  line-height: 1.15;
  border-bottom: 2px solid var(--grey);
  padding-bottom: 0.7rem;
}

.md h2 {
  font-size: 1.3rem;
  line-height: 1.15;
  color: var(--white-dark);
}

.md h3 {
  font-size: 1.2rem;
  color: var(--white-dark);
}

.md h4 {
  font-size: 1rem;
  color: var(--white-dark);
}

/* ==== HELPERS ==== */

.logo-header {
  line-height: 1;
  display: inline-block;
  background-color: #FF79C6;
  background-image: linear-gradient(to right, #FF5555, #FF79C6, #F8F859);
  color: transparent;
  background-clip: text;
  border: 3px solid #FF79C6;
  padding: 8px 10px 10px 10px;
  border-radius: 10px;
  box-shadow: 0px 5px 0px 0px var(--shadow);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

.btn {
  border: 2px solid var(--link-color);
  color: var(--link-color);
  padding: 0.4rem 1rem;
  font-weight: bold;
  display: inline-block;
}

.btn-link,
.btn-link:visited {
  border: 2px solid var(--link-color);
  color: var(--link-color);
  padding: 0.4rem 1rem;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
}

.btn-link:visited:hover,
.btn-link:hover {
  border: 2px solid var(--hover);
}

.btn-link-alt,
.btn-link-alt:visited {
  border: 2px solid var(--white);
  color: var(--white);
}

.box {
  border: 2px solid var(--grey-light);
  padding: 0.5rem 0.75rem;
}

.box-sm {
  border: 2px solid var(--grey-light);
  padding: 0.15rem 0.35rem;
}

.box-alert {
  border: 2px solid var(--hover);
  padding: 0.5rem 0.75rem;
}

.box-sm-alert {
  border: 2px solid var(--hover);
  padding: 0.15rem 0.35rem;
}

.list-none {
  list-style-type: none;
}

.list-disc {
  list-style-type: disc;
}

.list-decimal {
  list-style-type: decimal;
}

.pill {
  border: 1px solid var(--link-color);
  color: var(--link-color);
}

.pill-alert {
  border: 1px solid var(--hover);
  color: var(--hover);
}

.pill-info {
  border: 1px solid var(--visited);
  color: var(--visited);
}

@media only screen and (max-width: 40em) {
  body {
    padding: 0 1rem;
  }

  header {
    margin: 0;
  }

  .flex-collapse {
    flex-direction: column;
  }
}

/* was: main.css */

body {
  max-width: var(--body-max-width, 720px);
}

table {
  display: block;
  max-width: fit-content;
  margin: 0 auto;
  overflow-x: auto;
  white-space: nowrap;
  border-spacing: 10px;
  border-collapse: separate;
}

.post-date {
  width: 110px;
}

.layout-aside {
  max-width: 50rem;
}

.layout-aside aside {
  width: 200px;
}

.layout-aside img {
  border-radius: 5px;
}

#readme {
  display: none;
}

.albums {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(auto-fill, 200px);
  grid-row-gap: 0.5rem;
  grid-column-gap: 1rem;
}

.thumbnail-container {
  position: relative;
  background-color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3px;
  min-height: 200px;
}

.thumbnail {
  z-index: 1;
  object-fit: contain;
  max-width: 200px;
  height: auto;
}

#toc {
  margin: 0;
}

.thumbnail-link {
  z-index: 1;
}

@media only screen and (max-width: 600px) {
  .layout-aside main {
    flex-direction: column;
  }

  aside {
    display: none;
  }

  #readme {
    display: block;
  }

  .albums {
    grid-template-columns: repeat(1, 1fr);
    justify-content: center;
  }
}

...	...		@@ -879,6 +879,7 @@ func serveFile(file string, contentType string) http.HandlerFunc {
879	879
880	880		func createStaticRoutes() []router.Route {
881	881		return []router.Route{
	882	+	router.NewRoute("GET", "/read.css", serveFile("read.css", "text/css")),
882	883		router.NewRoute("GET", "/reset.css", serveFile("reset.css", "text/css")),
883	884		router.NewRoute("GET", "/syntax.css", serveFile("syntax.css", "text/css")),
884	885		router.NewRoute("GET", "/card.png", serveFile("card.png", "image/png")),

...	...		@@ -25,7 +25,7 @@
25	25		<meta itemprop="image" content="https://{{.Site.Domain}}/card.png" />
26	26		<meta property="og:image" content="https://{{.Site.Domain}}/card.png" />
27	27
28		-	<link rel="stylesheet" href="/smol-v2.css" />
	28	+	<link rel="stylesheet" href="/read.css" />
29	29		{{end}}
30	30
31	31		{{define "attrs"}}{{end}}

...	...		@@ -1,858 +0,0 @@
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		-	--main-hue: 250;
21		-	--white: #2e3f53;
22		-	--white-light: #cfe0f4;
23		-	--white-dark: #6c6a6a;
24		-	--code: #52576f;
25		-	--pre: #e1e7ee;
26		-	--bg-color: #f4f4f4;
27		-	--text-color: #24292f;
28		-	--link-color: #005cc5;
29		-	--visited: #6f42c1;
30		-	--blockquote: #005cc5;
31		-	--blockquote-bg: #cfe0f4;
32		-	--hover: #c11e7a;
33		-	--grey: #ccc;
34		-	--grey-light: #6a708e;
35		-	--shadow: #e8e8e8;
36		-	}
37		-	}
38		-
39		-	@media (prefers-color-scheme: dark) {
40		-	:root {
41		-	--main-hue: 250;
42		-	--white: #f2f2f2;
43		-	--white-light: #f2f2f2;
44		-	--white-dark: #e8e8e8;
45		-	--code: #414558;
46		-	--pre: #252525;
47		-	--bg-color: #282a36;
48		-	--text-color: #f2f2f2;
49		-	--link-color: #8be9fd;
50		-	--visited: #bd93f9;
51		-	--blockquote: #bd93f9;
52		-	--blockquote-bg: #353548;
53		-	--hover: #ff80bf;
54		-	--grey: #414558;
55		-	--grey-light: #6a708e;
56		-	--shadow: #252525;
57		-	}
58		-	}
59		-
60		-	html {
61		-	background-color: var(--bg-color);
62		-	color: var(--text-color);
63		-	font-size: 18px;
64		-	line-height: 1.5;
65		-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
66		-	Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
67		-	sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
68		-	-webkit-text-size-adjust: 100%;
69		-	-moz-tab-size: 4;
70		-	-o-tab-size: 4;
71		-	tab-size: 4;
72		-	}
73		-
74		-	body {
75		-	margin: 0 auto;
76		-	}
77		-
78		-	img {
79		-	max-width: 100%;
80		-	height: auto;
81		-	}
82		-
83		-	b,
84		-	strong {
85		-	font-weight: bold;
86		-	}
87		-
88		-	code,
89		-	kbd,
90		-	samp,
91		-	pre {
92		-	font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
93		-	monospace;
94		-	}
95		-
96		-	code,
97		-	kbd,
98		-	samp {
99		-	border: 2px solid var(--code);
100		-	}
101		-
102		-	pre > code {
103		-	background-color: inherit;
104		-	padding: 0;
105		-	border: none;
106		-	}
107		-
108		-	code {
109		-	font-size: 90%;
110		-	border-radius: 0.3rem;
111		-	padding: 0.1rem 0.3rem;
112		-	}
113		-
114		-	pre {
115		-	font-size: 14px;
116		-	border-radius: 5px;
117		-	padding: 1rem;
118		-	margin: 1rem 0;
119		-	overflow-x: auto;
120		-	background-color: var(--pre) !important;
121		-	}
122		-
123		-	small {
124		-	font-size: 0.8rem;
125		-	}
126		-
127		-	summary {
128		-	display: list-item;
129		-	cursor: pointer;
130		-	}
131		-
132		-	h1,
133		-	h2,
134		-	h3,
135		-	h4 {
136		-	margin: 0;
137		-	padding: 0.5rem 0 0 0;
138		-	border: 0;
139		-	font-style: normal;
140		-	font-weight: inherit;
141		-	font-size: inherit;
142		-	}
143		-
144		-	path {
145		-	fill: var(--text-color);
146		-	stroke: var(--text-color);
147		-	}
148		-
149		-	hr {
150		-	color: inherit;
151		-	border: 0;
152		-	margin: 0;
153		-	height: 2px;
154		-	background: var(--grey);
155		-	margin: 1rem auto;
156		-	text-align: center;
157		-	}
158		-
159		-	a {
160		-	text-decoration: none;
161		-	color: var(--link-color);
162		-	}
163		-
164		-	a:hover,
165		-	a:visited:hover {
166		-	text-decoration: underline;
167		-	color: var(--hover);
168		-	}
169		-
170		-	a:visited {
171		-	color: var(--visited);
172		-	}
173		-
174		-	a.link-grey {
175		-	text-decoration: underline;
176		-	color: var(--white);
177		-	}
178		-
179		-	a.link-grey:visited {
180		-	color: var(--white);
181		-	}
182		-
183		-	section {
184		-	margin-bottom: 1.4rem;
185		-	}
186		-
187		-	section:last-child {
188		-	margin-bottom: 0;
189		-	}
190		-
191		-	header {
192		-	margin: 1rem auto;
193		-	}
194		-
195		-	p {
196		-	margin: 0.5rem 0;
197		-	}
198		-
199		-	article {
200		-	overflow-wrap: break-word;
201		-	}
202		-
203		-	blockquote {
204		-	border-left: 5px solid var(--blockquote);
205		-	background-color: var(--blockquote-bg);
206		-	padding: 0.5rem 0.75rem;
207		-	margin: 0.5rem 0;
208		-	}
209		-
210		-	blockquote > p {
211		-	margin: 0;
212		-	}
213		-
214		-	blockquote code {
215		-	border: 1px solid var(--blockquote);
216		-	}
217		-
218		-	ul,
219		-	ol {
220		-	padding: 0 0 0 1rem;
221		-	list-style-position: outside;
222		-	}
223		-
224		-	ul[style*="list-style-type: none;"] {
225		-	padding: 0;
226		-	}
227		-
228		-	li {
229		-	margin: 0.5rem 0;
230		-	}
231		-
232		-	li > pre {
233		-	padding: 0;
234		-	}
235		-
236		-	footer {
237		-	text-align: center;
238		-	margin-bottom: 4rem;
239		-	}
240		-
241		-	dt {
242		-	font-weight: bold;
243		-	}
244		-
245		-	dd {
246		-	margin-left: 0;
247		-	}
248		-
249		-	dd:not(:last-child) {
250		-	margin-bottom: 0.5rem;
251		-	}
252		-
253		-	figure {
254		-	margin: 0;
255		-	}
256		-
257		-	.container {
258		-	max-width: 50em;
259		-	width: 100%;
260		-	}
261		-
262		-	.container-sm {
263		-	max-width: 40em;
264		-	width: 100%;
265		-	}
266		-
267		-	.container-center {
268		-	width: 100%;
269		-	height: 100%;
270		-	display: flex;
271		-	justify-content: center;
272		-	}
273		-
274		-	.mono {
275		-	font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
276		-	monospace;
277		-	}
278		-
279		-	.link-alt-adj,
280		-	.link-alt-adj:visited,
281		-	.link-alt-adj:visited:hover,
282		-	.link-alt-adj:hover {
283		-	color: var(--link-color);
284		-	text-decoration: none;
285		-	}
286		-
287		-	.link-alt-adj:visited:hover,
288		-	.link-alt-adj:hover {
289		-	text-decoration: underline;
290		-	}
291		-
292		-	.link-alt-hover,
293		-	.link-alt-hover:visited,
294		-	.link-alt-hover:visited:hover,
295		-	.link-alt-hover:hover {
296		-	color: var(--hover);
297		-	text-decoration: none;
298		-	}
299		-
300		-	.link-alt-hover:visited:hover,
301		-	.link-alt-hover:hover {
302		-	text-decoration: underline;
303		-	}
304		-
305		-	.link-alt,
306		-	.link-alt:visited,
307		-	.link-alt:visited:hover,
308		-	.link-alt:hover {
309		-	color: var(--white);
310		-	text-decoration: none;
311		-	}
312		-
313		-	.link-alt:visited:hover,
314		-	.link-alt:hover {
315		-	text-decoration: underline;
316		-	}
317		-
318		-	.text-3xl {
319		-	font-size: 2.5rem;
320		-	}
321		-
322		-	.text-2xl {
323		-	font-size: 1.9rem;
324		-	line-height: 1.15;
325		-	}
326		-
327		-	.text-xl {
328		-	font-size: 1.55rem;
329		-	line-height: 1.15;
330		-	}
331		-
332		-	.text-lg {
333		-	font-size: 1.35rem;
334		-	line-height: 1.15;
335		-	}
336		-
337		-	.text-md {
338		-	font-size: 1.15rem;
339		-	line-height: 1.15;
340		-	}
341		-
342		-	.text-sm {
343		-	font-size: 0.875rem;
344		-	}
345		-
346		-	.text-xs {
347		-	font-size: 0.775rem;
348		-	}
349		-
350		-	.cursor-pointer {
351		-	cursor: pointer;
352		-	}
353		-
354		-	.w-full {
355		-	width: 100%;
356		-	}
357		-
358		-	.h-full {
359		-	height: 100%;
360		-	}
361		-
362		-	.border {
363		-	border: 2px solid var(--grey-light);
364		-	}
365		-
366		-	.text-left {
367		-	text-align: left;
368		-	}
369		-
370		-	.text-center {
371		-	text-align: center;
372		-	}
373		-
374		-	.text-underline {
375		-	border-bottom: 3px solid var(--text-color);
376		-	padding-bottom: 3px;
377		-	}
378		-
379		-	.text-hdr {
380		-	color: var(--hover);
381		-	}
382		-
383		-	.text-underline-hdr {
384		-	border-bottom: 3px solid var(--hover);
385		-	padding-bottom: 3px;
386		-	}
387		-
388		-	.font-bold {
389		-	font-weight: bold;
390		-	}
391		-
392		-	.font-italic {
393		-	font-style: italic;
394		-	}
395		-
396		-	.inline {
397		-	display: inline;
398		-	}
399		-
400		-	.inline-block {
401		-	display: inline-block;
402		-	}
403		-
404		-	.max-w-half {
405		-	max-width: 50%;
406		-	}
407		-
408		-	.h-screen {
409		-	height: 100vh;
410		-	}
411		-
412		-	.w-screen {
413		-	width: 100vw;
414		-	}
415		-
416		-	.flex {
417		-	display: flex;
418		-	}
419		-
420		-	.flex-col {
421		-	flex-direction: column;
422		-	}
423		-
424		-	.items-center {
425		-	align-items: center;
426		-	}
427		-
428		-	.m-0 {
429		-	margin: 0;
430		-	}
431		-
432		-	.mt {
433		-	margin-top: 0.5rem;
434		-	}
435		-
436		-	.mt-2 {
437		-	margin-top: 1rem;
438		-	}
439		-
440		-	.mt-4 {
441		-	margin-top: 2rem;
442		-	}
443		-
444		-	.mt-8 {
445		-	margin-top: 4rem;
446		-	}
447		-
448		-	.mb {
449		-	margin-bottom: 0.5rem;
450		-	}
451		-
452		-	.mb-2 {
453		-	margin-bottom: 1rem;
454		-	}
455		-
456		-	.mb-4 {
457		-	margin-bottom: 2rem;
458		-	}
459		-
460		-	.mb-8 {
461		-	margin-bottom: 4rem;
462		-	}
463		-
464		-	.mb-16 {
465		-	margin-bottom: 8rem;
466		-	}
467		-
468		-	.mr {
469		-	margin-right: 0.5rem;
470		-	}
471		-
472		-	.ml-sm {
473		-	margin-left: 0.25rem;
474		-	}
475		-
476		-	.ml {
477		-	margin-left: 0.5rem;
478		-	}
479		-
480		-	.pt-0 {
481		-	padding-top: 0;
482		-	}
483		-
484		-	.my {
485		-	margin-top: 0.5rem;
486		-	margin-bottom: 0.5rem;
487		-	}
488		-
489		-	.my-2 {
490		-	margin-top: 1rem;
491		-	margin-bottom: 1rem;
492		-	}
493		-
494		-	.my-4 {
495		-	margin-top: 2rem;
496		-	margin-bottom: 2rem;
497		-	}
498		-
499		-	.my-8 {
500		-	margin-top: 4rem;
501		-	margin-bottom: 4rem;
502		-	}
503		-
504		-	.mx {
505		-	margin-left: 0.5rem;
506		-	margin-right: 0.5rem;
507		-	}
508		-
509		-	.mx-2 {
510		-	margin-left: 1rem;
511		-	margin-right: 1rem;
512		-	}
513		-
514		-	.m-1 {
515		-	margin: 0.5rem;
516		-	}
517		-
518		-	.p-1 {
519		-	padding: 0.5rem;
520		-	}
521		-
522		-	.p-0 {
523		-	padding: 0;
524		-	}
525		-
526		-	.px-2 {
527		-	padding-left: 1rem;
528		-	padding-right: 1rem;
529		-	}
530		-
531		-	.px-4 {
532		-	padding-left: 2rem;
533		-	padding-right: 2rem;
534		-	}
535		-
536		-	.py {
537		-	padding-top: 0.5rem;
538		-	padding-bottom: 0.5rem;
539		-	}
540		-
541		-	.py-2 {
542		-	padding-top: 1rem;
543		-	padding-bottom: 1rem;
544		-	}
545		-
546		-	.py-4 {
547		-	padding-top: 2rem;
548		-	padding-bottom: 2rem;
549		-	}
550		-
551		-	.py-8 {
552		-	padding-top: 4rem;
553		-	padding-bottom: 4rem;
554		-	}
555		-
556		-	.justify-between {
557		-	justify-content: space-between;
558		-	}
559		-
560		-	.justify-center {
561		-	justify-content: center;
562		-	}
563		-
564		-	.gap {
565		-	gap: 0.5rem;
566		-	}
567		-
568		-	.gap-2 {
569		-	gap: 1rem;
570		-	}
571		-
572		-	.group {
573		-	display: flex;
574		-	flex-direction: column;
575		-	gap: 0.5rem;
576		-	}
577		-
578		-	.group-2 {
579		-	display: flex;
580		-	flex-direction: column;
581		-	gap: 1rem;
582		-	}
583		-
584		-	.group-h {
585		-	display: flex;
586		-	gap: 0.5rem;
587		-	align-items: center;
588		-	}
589		-
590		-	.flex-1 {
591		-	flex: 1;
592		-	}
593		-
594		-	.items-end {
595		-	align-items: end;
596		-	}
597		-
598		-	.items-start {
599		-	align-items: start;
600		-	}
601		-
602		-	.justify-end {
603		-	justify-content: end;
604		-	}
605		-
606		-	.font-grey-light {
607		-	color: var(--grey-light);
608		-	}
609		-
610		-	.hidden {
611		-	display: none;
612		-	}
613		-
614		-	.align-right {
615		-	text-align: right;
616		-	}
617		-
618		-	/* ==== MARKDOWN ==== */
619		-
620		-	.md h1,
621		-	.md h2,
622		-	.md h3,
623		-	.md h4 {
624		-	padding: 0;
625		-	margin: 1.5rem 0 0.9rem 0;
626		-	font-weight: bold;
627		-	}
628		-
629		-	.md h1 a,
630		-	.md h2 a,
631		-	.md h3 a,
632		-	.md h4 a {
633		-	color: var(--grey-light);
634		-	text-decoration: none;
635		-	}
636		-
637		-	.md h1 {
638		-	font-size: 1.6rem;
639		-	line-height: 1.15;
640		-	border-bottom: 2px solid var(--grey);
641		-	padding-bottom: 0.7rem;
642		-	}
643		-
644		-	.md h2 {
645		-	font-size: 1.3rem;
646		-	line-height: 1.15;
647		-	color: var(--white-dark);
648		-	}
649		-
650		-	.md h3 {
651		-	font-size: 1.2rem;
652		-	color: var(--white-dark);
653		-	}
654		-
655		-	.md h4 {
656		-	font-size: 1rem;
657		-	color: var(--white-dark);
658		-	}
659		-
660		-	/* ==== HELPERS ==== */
661		-
662		-	.logo-header {
663		-	line-height: 1;
664		-	display: inline-block;
665		-	background-color: #FF79C6;
666		-	background-image: linear-gradient(to right, #FF5555, #FF79C6, #F8F859);
667		-	color: transparent;
668		-	background-clip: text;
669		-	border: 3px solid #FF79C6;
670		-	padding: 8px 10px 10px 10px;
671		-	border-radius: 10px;
672		-	box-shadow: 0px 5px 0px 0px var(--shadow);
673		-	background-size: 100%;
674		-	-webkit-background-clip: text;
675		-	-moz-background-clip: text;
676		-	-webkit-text-fill-color: transparent;
677		-	-moz-text-fill-color: transparent;
678		-	}
679		-
680		-	.btn {
681		-	border: 2px solid var(--link-color);
682		-	color: var(--link-color);
683		-	padding: 0.4rem 1rem;
684		-	font-weight: bold;
685		-	display: inline-block;
686		-	}
687		-
688		-	.btn-link,
689		-	.btn-link:visited {
690		-	border: 2px solid var(--link-color);
691		-	color: var(--link-color);
692		-	padding: 0.4rem 1rem;
693		-	text-decoration: none;
694		-	font-weight: bold;
695		-	display: inline-block;
696		-	}
697		-
698		-	.btn-link:visited:hover,
699		-	.btn-link:hover {
700		-	border: 2px solid var(--hover);
701		-	}
702		-
703		-	.btn-link-alt,
704		-	.btn-link-alt:visited {
705		-	border: 2px solid var(--white);
706		-	color: var(--white);
707		-	}
708		-
709		-	.box {
710		-	border: 2px solid var(--grey-light);
711		-	padding: 0.5rem 0.75rem;
712		-	}
713		-
714		-	.box-sm {
715		-	border: 2px solid var(--grey-light);
716		-	padding: 0.15rem 0.35rem;
717		-	}
718		-
719		-	.box-alert {
720		-	border: 2px solid var(--hover);
721		-	padding: 0.5rem 0.75rem;
722		-	}
723		-
724		-	.box-sm-alert {
725		-	border: 2px solid var(--hover);
726		-	padding: 0.15rem 0.35rem;
727		-	}
728		-
729		-	.list-none {
730		-	list-style-type: none;
731		-	}
732		-
733		-	.list-disc {
734		-	list-style-type: disc;
735		-	}
736		-
737		-	.list-decimal {
738		-	list-style-type: decimal;
739		-	}
740		-
741		-	.pill {
742		-	border: 1px solid var(--link-color);
743		-	color: var(--link-color);
744		-	}
745		-
746		-	.pill-alert {
747		-	border: 1px solid var(--hover);
748		-	color: var(--hover);
749		-	}
750		-
751		-	.pill-info {
752		-	border: 1px solid var(--visited);
753		-	color: var(--visited);
754		-	}
755		-
756		-	@media only screen and (max-width: 40em) {
757		-	body {
758		-	padding: 0 1rem;
759		-	}
760		-
761		-	header {
762		-	margin: 0;
763		-	}
764		-
765		-	.flex-collapse {
766		-	flex-direction: column;
767		-	}
768		-	}
769		-
770		-	/* was: main.css */
771		-
772		-	body {
773		-	max-width: var(--body-max-width, 720px);
774		-	}
775		-
776		-	table {
777		-	display: block;
778		-	max-width: fit-content;
779		-	margin: 0 auto;
780		-	overflow-x: auto;
781		-	white-space: nowrap;
782		-	border-spacing: 10px;
783		-	border-collapse: separate;
784		-	}
785		-
786		-	.post-date {
787		-	width: 110px;
788		-	}
789		-
790		-	.layout-aside {
791		-	max-width: 50rem;
792		-	}
793		-
794		-	.layout-aside aside {
795		-	width: 200px;
796		-	}
797		-
798		-	.layout-aside img {
799		-	border-radius: 5px;
800		-	}
801		-
802		-	#readme {
803		-	display: none;
804		-	}
805		-
806		-	.albums {
807		-	width: 100%;
808		-	display: grid;
809		-	grid-template-columns: repeat(3, 1fr);
810		-	grid-template-rows: repeat(auto-fill, 200px);
811		-	grid-row-gap: 0.5rem;
812		-	grid-column-gap: 1rem;
813		-	}
814		-
815		-	.thumbnail-container {
816		-	position: relative;
817		-	background-color: #000;
818		-	display: flex;
819		-	flex-direction: column;
820		-	align-items: center;
821		-	justify-content: center;
822		-	padding: 3px;
823		-	min-height: 200px;
824		-	}
825		-
826		-	.thumbnail {
827		-	z-index: 1;
828		-	object-fit: contain;
829		-	max-width: 200px;
830		-	height: auto;
831		-	}
832		-
833		-	#toc {
834		-	margin: 0;
835		-	}
836		-
837		-	.thumbnail-link {
838		-	z-index: 1;
839		-	}
840		-
841		-	@media only screen and (max-width: 600px) {
842		-	.layout-aside main {
843		-	flex-direction: column;
844		-	}
845		-
846		-	aside {
847		-	display: none;
848		-	}
849		-
850		-	#readme {
851		-	display: block;
852		-	}
853		-
854		-	.albums {
855		-	grid-template-columns: repeat(1, 1fr);
856		-	justify-content: center;
857		-	}
858		-	}

Commit 05dc0b4

Commit `05dc0b4`