1 files changed, 210 insertions, 0 deletions
diff --git a/assets/stylesheets/style.css b/assets/stylesheets/style.css
new file mode 100644
index 0000000..2253b65
--- /dev/null
+++ b/assets/stylesheets/style.css
@@ -0,0 +1,210 @@
+html {
+	background: #222;
+}
+body {
+	margin: 0;
+	color: white;
+	font-family: "Noto Serif", serif;
+	text-underline-offset: 2.25px;
+	overflow-x: hidden;
+}
+
+/* header */
+header {
+	display: grid;
+	grid-template-columns: 1fr auto 1fr;
+	background: #333;
+	padding: 5px 10px;
+	gap: 1em;
+	user-select: none;
+	position: sticky;
+	top: 0;
+	z-index: 100
+}
+
+#title {
+	text-align: center;
+}
+
+#menu {
+	margin-left: auto;
+	display: flex;
+	gap: 3ex;
+}
+
+header a {
+	color: white;
+	position: relative;
+	width: fit-content;
+}
+
+header a:hover {
+	text-decoration: none;
+}
+
+header a:hover::after {
+	content: "";
+	background: #309a00;
+	position: absolute;
+	display: block;
+	bottom: -.3em;
+	left: -1ex;
+	height: 3px;
+	width: calc(100% + 2ex);
+}
+
+/* page */
+main, footer{
+	max-width: 900px;
+	margin: 1.5em auto;
+	padding-inline: 3ex;
+}
+
+#publishing {
+	text-align: right;
+	color: #555;
+}
+#publishing a { color: #555 }
+#publishing a:not(:last-child)::after { content: "," }
+
+footer span,
+#copyright, #theme-copyright {
+	text-align: center;
+	display: block;
+	margin: .25em;
+	color: #6a6a6a;
+}
+
+/* elements */
+hr {
+	color: #555;
+	margin: 2em 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	text-align: center;
+}
+
+a {
+	color: lightgreen;
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+/* images */
+img, figcaption {
+	margin: auto;
+	display: block;
+	width: fit-content;
+	max-width: 60%;
+	color: #ddd;
+}
+
+/* tables */
+table {
+	border-collapse: collapse;
+}
+
+tr:nth-child(even) {
+	background: #252525;
+}
+
+th {
+	background: #333;
+	border-right: 1.5px solid #222;
+	padding: .25em;
+}
+
+td:not(.img) {
+	padding-inline: .75ex;
+}
+
+td:not(:last-child) {
+	border-right: 1.5px solid #2b2b2b;
+}
+
+td.img {
+	border: none;
+}
+
+/* highlighted code */
+.chroma {
+	background: none;
+}
+
+div.chroma {
+	overflow: scroll;
+}
+
+.chroma .lntable {
+	margin: auto;
+	width: fit-content;
+}
+.chroma code {
+	margin: 0 1ex;
+}
+
+.chroma ::selection {
+	background: #444;
+}
+
+:not(.chroma span)::selection {
+	background: green;
+	color: white;
+}
+
+pre {
+	tab-size: 4;
+	-webkit-text-size-adjust: 100%;
+	overflow: scroll;
+}
+
+ol, ul, pre code {
+	margin: auto;
+	display: block;
+	width: fit-content;
+	max-width: 100%;
+}
+
+/* youtube iframe shortcode */
+div.yt-4x3 iframe {
+	display: block;
+	aspect-ratio: 4/3;
+	max-width: 600px;
+	width: 100%;
+	margin: 2em auto;
+	border: 0;
+}
+
+/* utility classes */
+.monodate, .monospace { font-family: monospace }
+.bold { font-weight: bold }
+.nowrap { white-space: nowrap }
+.overflow-box { overflow: scroll }
+.alpha-ol ol { list-style-type: lower-alpha }
+
+@media (max-width: 1000px) {
+	header {
+		grid-template-columns: auto auto;
+		grid-template-areas:
+			"home quicklinks"
+			"title title"
+		;
+	}
+	#title {
+		text-align: center;
+		display: block;
+		width: 100%;
+		order: 3;
+		grid-area: title;
+	}
+	ol, ul, pre code {
+		margin-left: 0;
+	}
+	img, figcaption {
+		max-width: 95%;
+	}
+}