From 82d527113c0960b6ec3f8f89892e360b8356e866 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sun, 28 Jan 2024 02:51:24 -0800
Subject: feat(html): static css

---
 static/styles/risotto/layout.css | 57 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 static/styles/risotto/layout.css

(limited to 'static/styles/risotto/layout.css')

diff --git a/static/styles/risotto/layout.css b/static/styles/risotto/layout.css
new file mode 100644
index 00000000..d7dbe23f
--- /dev/null
+++ b/static/styles/risotto/layout.css
@@ -0,0 +1,57 @@
+/* 1rem = 16px by default */
+
+.page {
+	max-width: 64rem;
+	margin: 1rem auto;
+	display: grid;
+	grid-template-areas:
+		'header'
+		'body'
+		'aside'
+		'footer';
+	grid-template-columns: minmax(0, 1fr); /* https://css-tricks.com/preventing-a-grid-blowout/ */
+	grid-row-gap: 2rem;
+}
+
+@media (min-width: 45rem) {
+	.page {
+		grid-template-areas:
+			'header  header'
+			'body    aside'
+			'footer  footer';
+		grid-template-columns: minmax(0, 1fr) 15rem;
+		grid-column-gap: 2rem;
+	}
+}
+
+/* Header */
+.page__header {
+	grid-area: header;
+	display: flex;
+}
+
+.page__logo {
+	flex-shrink: 0;
+}
+
+.page__nav {
+	flex-grow: 1;
+}
+
+/* Body + aside */
+.page__body {
+	grid-area: body;
+	background-color: var(--off-bg);
+	box-shadow: 0 0 0 1rem var(--off-bg);
+	overflow-wrap: break-word;
+}
+
+.page__aside {
+	grid-area: aside;
+	color: var(--off-fg);
+}
+
+/* Footer */
+.page__footer {
+	grid-area: footer;
+}
-- 
cgit v1.2.3