From 5ad2cb5fd0ff73db8263dda792e69508873f1de2 Mon Sep 17 00:00:00 2001
From: Sam Anthony <sam@samanthony.xyz>
Date: Sat, 23 Apr 2022 18:17:12 -0230
Subject: add index page

---
 htdocs/css/style.css  | 69 +++++++++++++++++++++++++++++++++++++++++++++++++++
 htdocs/css/syntax.css | 19 ++++++++++++++
 2 files changed, 88 insertions(+)
 create mode 100644 htdocs/css/style.css
 create mode 100644 htdocs/css/syntax.css

(limited to 'htdocs/css')

diff --git a/htdocs/css/style.css b/htdocs/css/style.css
new file mode 100644
index 0000000..1c6db7c
--- /dev/null
+++ b/htdocs/css/style.css
@@ -0,0 +1,69 @@
+:root {
+	--fg-color: white;
+	--bg-color: black;
+	--highlight-color: #4acaa4;
+}
+
+/* General */
+body {
+	background-color: var(--bg-color);
+	color: var(--fg-color);
+
+	font-family: sans-serif;
+}
+
+.hanging-indent {
+	padding-left: 2em;
+	text-index: -2em;
+}
+
+/* Links */
+a {
+	color: var(--highlight-color);
+	text-decoration: none;
+}
+a:hover { text-decoration: underline 0.055em; }
+
+/* Headers */
+header :first-child { margin-bottom: 0px; }
+header hr {
+	margin: 0px;
+	color: var(--fg-color);
+}
+
+/* Quotes */
+blockquote p { margin: 0px; }
+blockquote p:first-child { font-style: italic; }
+blockquote p:nth-child(2) {
+	text-indent: 2em;
+}
+
+/* Lists */
+ul { padding-left: 2em; }
+
+/* Nav */
+body { margin: 0px; }
+nav { background-color: var(--highlight-color); }
+nav a {
+	margin-left: 0.2em;
+
+	font-size: 1.6em;
+	font-weight: normal;
+
+	color: var(--fg-color);
+}
+nav a:first-child .label { font-weight: bold; }
+nav .label { font-size: 0.7em; }
+nav .this-section { font-style: italic; }
+nav hr {
+	margin: 0px;
+	color: var(--fg-color);
+}
+
+/* Main page content */
+main {
+	margin: auto;
+	max-width: 80em;
+	padding-left: 1em;
+	padding-right: 1em;
+}
diff --git a/htdocs/css/syntax.css b/htdocs/css/syntax.css
new file mode 100644
index 0000000..f425178
--- /dev/null
+++ b/htdocs/css/syntax.css
@@ -0,0 +1,19 @@
+code {
+	border: 0.055em solid var(--highlight-color);
+	border-radius: 0.5em;
+	padding-top: 0.2em;
+	padding-bottom: 0.1em;
+	padding-left: 0.5em;
+	padding-right: 0.5em;
+
+	display: inline-block;
+	vertical-align: middle;
+
+	background-color: #282828;
+}
+
+/* HTML */
+/* Tag */ code[data-lang="html"] .t { color: var(--highlight-color); }
+/* Element */ code[data-lang="html"] .e { color: #9b5712; }
+/* AttributeName */ code[data-lang="html"] .an { color: #91931b; }
+/* AttributeValue */ code[data-lang="html"] .av { color: red; }
-- 
cgit v1.2.3