website.git

diff --git a/mkfile b/mkfile
new file mode 100644
index 0000000000000000000000000000000000000000..a96d34fa37123eb48bed90eb71e2189b360cf2d7
--- /dev/null
+++ b/mkfile
@@ -0,0 +1,7 @@
+all:V: website
+
+static/style.css: static_raw/style.css
+	minify static_raw/style.css >static/style.css
+
+website: argon.go main.go router.go `echo static/* static/favicon/* templates/*`
+	CGO_ENABLED=0 go build -ldflags '-extldflags "-static"'




diff --git a/static/style.css b/static/style.css
deleted file mode 100644
index df45a015ac0dc3458b608684c41b7b929d33d7a9..0000000000000000000000000000000000000000
--- a/static/style.css
+++ /dev/null
@@ -1,196 +0,0 @@
-:root {
-	--accent: #745016;
-	--accent-hover: #000000;
-	--toa: #ffffff;
-	--text: #292929;
-	--bg: #fafafa;
-	--border: #737373;
-	--link: #005b85;
-	--link-on-dark: #1ab6ff;
-	--visited: #680bea;
-	--terminal-bg: #292929;
-	--terminal-text: #cdb360;
-	--dark-bg: #212121;
-	--text-on-dark: #fafafa;
-	--yellow: #db9d3b;
-	--black: #292929;
-}
-
-@media (prefers-color-scheme: dark) {
-	:root {
-		--accent: #db9d3b;
-		--accent-hover: #ffffff;
-		--toa: #000000;
-		--text: #fafafa;
-		--bg: #292929;
-		--border: #919191;
-		--link: #38c0ff;
-		--link-on-dark: #1ab6ff;
-		--visited: #c7a4f9;
-		--terminal-bg: #292929;
-		--terminal-text: #cdb360;
-		--dark-bg: #212121;
-		--text-on-dark: #fafafa;
-		--yellow: #db9d3b;
-		--black: #292929;
-	}
-}
-
-* {
-	box-sizing: border-box;
-	color: var(--text);
-	background: var(--bg);
-}
-
-a {
-	color: var(--link);
-	text-decoration-color: var(--link);
-}
-
-a:visited {
-	color: var(--visited);
-	text-decoration-color: var(--visited);
-}
-
-a:hover, a:focus, a:visited:focus, a:visited:hover {
-	color: var(--accent);
-	text-decoration-color: var(--accent);
-}
-
-p {
-	max-width: 80ch;
-	font-family: "IBM Plex Serif", serif;
-}
-
-pre {
-	font-family: Iosevka, monospace;
-	background: var(--terminal-bg);
-	color: var(--terminal-text);
-	overflow: scroll;
-	white-space: pre;
-	max-width: 80ch;
-	border: 2px solid var(--border);
-	display: block;
-	padding: 1rem;
-	margin-bottom: 1rem;
-}
-
-code {
-	font-family: Iosevka, monospace;
-	background: var(--terminal-bg);
-	color: var(--terminal-text);
-	overflow: scroll;
-	white-space: pre;
-}
-
-section {
-	margin-bottom: 2rem;
-	width: 85%;
-	background: var(--dark-bg);
-	color: var(--text-on-dark);
-	padding-left: 1rem;
-	padding-right: 1rem;
-	padding-bottom: .5rem;
-}
-
-section > h3 {
-	background: var(--dark-bg);
-	color: var(--link-on-dark);
-	padding: .5rem 0;
-	display: block;
-	border-bottom: 1px solid #e9ecef;
-	display: flex;
-	flex-wrap: wrap;
-}
-
-section > p {
-	margin-top: .5rem;
-	font-size: 1rem;
-	background: var(--dark-bg);
-	color: var(--text-on-dark);
-}
-
-button, input[type=submit] {
-	background: var(--accent);
-	color: var(--toa);
-	border: var(--text) 1px solid;
-	cursor: pointer;
-}
-
-button:hover, button:active, button:focus,
-input[type=submit]:hover, input[type=submit]:active, input[type=submit]:focus {
-	background: var(--accent-hover);
-}
-
-button > a, button > a:hover, button > a:focus, button > a:visited:focus, button > a:visited:hover{
-	background: inherit;
-	color: var(--toa);
-	text-decoration: none;
-}
-
-h1, h2, h3, h4, h5, h6 {
-	font-family: "Fira Sans", sans-serif;
-}
-
-body {
-	margin: 1rem;
-	display: flex;
-	flex-wrap: wrap;
-}
-
-header {
-	font-weight: bold;
-	width: 100%;
-	font-size: 3rem;
-	font-family: "Fira Sans", sans-serif;
-}
-
-nav {
-	width: 100%;
-	margin-bottom: 2rem;
-	font-family: Iosevka, monospace;
-}
-
-nav > ul {
-	margin: .5rem 0;
-	padding: 0;
-	list-style-type: none;
-}
-
-nav > ul > li {
-	display: inline;
-}
-
-main {
-	max-width: 92%;
-	flex-grow: 11;
-	margin: 0 1rem 2rem 1rem;
-}
-
-input {
-	border: var(--border) 1px solid;
-	display: block;
-	margin: .25rem 0 .75rem 0;
-}
-
-label {
-	display: block;
-	font-family: "Fira Sans", sans-serif;
-}
-
-aside {
-	width: 200px;
-	flex-grow: 1;
-}
-
-aside > a {
-	display: block;
-	font-family: Iosevka, monospace;
-	margin-top: .1rem;
-	margin-bottom: 1rem;
-}
-
-.warning * {
-	background: var(--yellow);
-	color: var(--black);
-}




diff --git a/static_raw/style.css b/static_raw/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..33dff00307f19096d7ddc098c61b6acd151d856a
--- /dev/null
+++ b/static_raw/style.css
@@ -0,0 +1,219 @@
+:root {
+	--accent: #745016;
+	--accent-hover: #000000;
+	--toa: #ffffff;
+	--text: #292929;
+	--bg: #fafafa;
+	--border: #737373;
+	--link: #005b85;
+	--link-on-dark: #1ab6ff;
+	--visited: #680bea;
+	--terminal-bg: #292929;
+	--terminal-text: #cdb360;
+	--dark-bg: #212121;
+	--text-on-dark: #fafafa;
+	--yellow: #db9d3b;
+	--black: #292929;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--accent: #db9d3b;
+		--accent-hover: #ffffff;
+		--toa: #000000;
+		--text: #fafafa;
+		--bg: #292929;
+		--border: #919191;
+		--link: #38c0ff;
+		--link-on-dark: #1ab6ff;
+		--visited: #c7a4f9;
+		--terminal-bg: #292929;
+		--terminal-text: #cdb360;
+		--dark-bg: #212121;
+		--text-on-dark: #fafafa;
+		--yellow: #db9d3b;
+		--black: #292929;
+	}
+}
+
+* {
+	box-sizing: border-box;
+	color: var(--text);
+	background: var(--bg);
+}
+
+a {
+	color: var(--link);
+	text-decoration-color: var(--link);
+}
+
+a:visited {
+	color: var(--visited);
+	text-decoration-color: var(--visited);
+}
+
+a:hover, a:focus, a:visited:focus, a:visited:hover {
+	color: var(--accent);
+	text-decoration-color: var(--accent);
+}
+
+p {
+	max-width: 80ch;
+	font-family: "IBM Plex Serif", serif;
+}
+
+pre {
+	font-family: Iosevka, monospace;
+	background: var(--terminal-bg);
+	color: var(--terminal-text);
+	overflow: scroll;
+	white-space: pre;
+	max-width: 80ch;
+	border: 2px solid var(--border);
+	display: block;
+	padding: 1rem;
+	margin-bottom: 1rem;
+}
+
+code {
+	font-family: Iosevka, monospace;
+	background: var(--terminal-bg);
+	color: var(--terminal-text);
+	overflow: scroll;
+	white-space: pre;
+}
+
+section {
+	margin-bottom: 2rem;
+	width: 85%;
+	background: var(--dark-bg);
+	color: var(--text-on-dark);
+	padding-left: 1rem;
+	padding-right: 1rem;
+	padding-bottom: .5rem;
+}
+
+section > a {
+	text-decoration: none;
+}
+
+section > a > h3 {
+	background: var(--dark-bg);
+	color: var(--link-on-dark);
+	padding: .5rem 0;
+	border-bottom: 1px solid #e9ecef;
+	display: flex;
+	flex-wrap: wrap;
+	text-decoration: underline;
+}
+
+section > a:hover > h3,
+section > a:focus > h3,
+section > a:visited:focus > h3,
+section > a:visited:hover > h3 {
+	color: var(--accent);
+}
+
+section > a:visited > h3 {
+	color: var(--visited);
+}
+
+section > a > p {
+	margin-top: .5rem;
+	font-size: 1rem;
+	background: var(--dark-bg);
+	color: var(--text-on-dark);
+}
+
+button, input[type=submit] {
+	background: var(--accent);
+	color: var(--toa);
+	border: var(--text) 1px solid;
+	cursor: pointer;
+}
+
+button:hover, button:active, button:focus,
+input[type=submit]:hover, input[type=submit]:active, input[type=submit]:focus {
+	background: var(--accent-hover);
+}
+
+button > a, button > a:hover, button > a:focus, button > a:visited:focus, button > a:visited:hover{
+	background: inherit;
+	color: var(--toa);
+	text-decoration: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	font-family: "Fira Sans", sans-serif;
+}
+
+body {
+	margin: 1rem;
+	display: flex;
+	flex-wrap: wrap;
+}
+
+header {
+	font-weight: bold;
+	width: 100%;
+	font-size: 3rem;
+	font-family: "Fira Sans", sans-serif;
+}
+
+nav {
+	width: 100%;
+	margin-bottom: 2rem;
+	font-family: Iosevka, monospace;
+}
+
+nav > ul {
+	margin: .5rem 0;
+	padding: 0;
+	list-style-type: none;
+}
+
+nav > ul > li {
+	display: inline;
+}
+
+main {
+	max-width: 92%;
+	flex-grow: 11;
+	margin: 0 1rem 2rem 1rem;
+}
+
+input {
+	border: var(--border) 1px solid;
+	display: block;
+	margin: .25rem 0 .75rem 0;
+}
+
+label {
+	display: block;
+	font-family: "Fira Sans", sans-serif;
+}
+
+aside {
+	width: 200px;
+	flex-grow: 1;
+}
+
+aside > a {
+	display: block;
+	font-family: Iosevka, monospace;
+	margin-top: .1rem;
+	margin-bottom: .5rem;
+}
+
+aside > label {
+	display: block;
+	padding-top: 1rem;
+}
+aside > hr + label {
+	padding-top: 0;
+}
+
+.warning * {
+	background: var(--yellow);
+	color: var(--black);
+}