refactor CSS

1 files changed, 147 insertions, 0 deletions

diff --git a/css/base.css b/css/base.css
new file mode 100644
index 0000000..d81d724
--- /dev/null
+++ b/css/base.css
@@ -0,0 +1,147 @@
+:root {
+	--fg: black;
+	--bg: #fff8e7; /* cosmic latte */
+	--accent: #c588b0;
+}
+
+/* UTILITY CLASSES */
+.inline { display: inline; }
+.center { text-align: center; }
+.clearfix::after { clear: both; display: block; content: ""; }
+
+/* MAIN STYLE */
+body {
+	font: 100%/1.4 sans-serif;
+	color: var(--fg);
+	background-color: var(--bg);
+}
+header,
+section,
+article {
+	max-width: 45rem;
+	padding: 1rem;
+	margin: auto;
+}
+
+/* headers */
+h1 {
+	font: bold 200%/1 sans-serif;
+	margin: 0.5em 0 0 0;
+	border-bottom: 0.25em solid var(--accent);
+}
+h2 {
+	font: bold 168%/1 sans-serif;
+	margin: 0.5em 0 0 0;
+}
+h3 {
+	font: bold 141%/1 sans-serif;
+	margin: 0.5em 0 0 0;
+}
+h4 {
+	font: bold 119%/1 sans-serif;
+	margin: 0.5em 0 0 0;
+}
+
+/* images */
+figure {
+	border: 1px solid;
+	margin: auto;
+	padding: 0.5em;
+	text-align: center;
+	width: min-content;
+}
+figure.fullwidth {
+	width: initial;
+}
+figure.fullwidth > img {
+	max-width: 100%;
+}
+
+/* tables */
+table {
+	margin: 0.5em;
+}
+tr:nth-of-type(odd) {
+	background: var(--bg);
+}
+tr:nth-of-type(even) {
+	background: grey;
+}
+tr td:first-child {
+	white-space: nowrap;
+}
+td {
+	padding: 0 0.5em;
+}
+th {
+	border: 1px solid;
+	padding: 0 0.5em;
+}
+
+/* misc */
+a:hover,
+a:focus {
+	text-decoration: none;
+}
+section,
+article {
+	border-bottom: 1px solid;
+}
+pre,
+code {
+	font: 100%/1.25 monospace;
+}
+blockquote,
+pre {
+	margin: 1em;
+	border-left: 0.25em solid;
+	padding-left: 1em;
+}
+details {
+	border: 1px solid;
+	padding: 0.5em;
+}
+
+/* header */
+header > nav {
+	display: inline-block;
+}
+header > nav > ul {
+	list-style-type: none;
+	margin: 0 0 0.5em 0;
+	padding: 0;
+}
+header > nav > ul > li {
+	display: inline;
+}
+header > nav > ul > li > a {
+	padding: 0.5em;
+}
+header > nav a.active {
+	background: var(--accent);
+	color: var(--bg);
+}
+#decor-moons {
+	float: right;
+	user-select: none;
+	overflow: hidden;
+}
+
+/* dark mode */
+@media(prefers-color-scheme: dark) {
+	:root {
+		--fg: #fff8e7;
+		--bg: #1d2021;
+		--accent: #ddadcc;
+	}
+	body {
+		line-height: 1.5;
+		word-spacing: 0.1em;
+	}
+	a {
+		color: #cedeff;
+	}
+	a:visited {
+		color: #d4bff8;
+	}
+}