BIG progress

4 files changed, 114 insertions, 0 deletions

diff --git a/styles/colors.css b/styles/colors.css
new file mode 100644
index 0000000..afe051f
--- /dev/null
+++ b/styles/colors.css
@@ -0,0 +1,13 @@
+:root {
+	--almond: #F4DEC9;
+	--heliotrope-gray: #A69CAC;
+	--purple-navy: #474973;
+	--oxford-blue: #161B33;
+	--xiketic: #0D0C1A;
+	--magnolia: #EFE9F4;
+	--fire-opal: #EE6352;
+
+	--bg: var(--xiketic);
+	--fg: var(--almond);
+}
+
diff --git a/styles/globals.css b/styles/globals.css
index d633303..6c5bf7f 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,5 +1,44 @@
 html, body {
 	padding: 0;
 	margin: 0;
+
+	background-color: var(--bg);
+	color: var(--fg);
+}
+
+::selection {
+	background-color: var(--fire-opal);
+}
+
+h1, h2, h3 {
+	font-weight: 700;
+	margin: 0;
+}
+
+h1 { font-size: 64px; }
+h2 { font-size: 48px; }
+h3 { font-size: 32px; }
+
+.subtile {
+	font-style: italic;
+	opacity: .75;
+	color: var(--heliotrope-gray);
+}
+
+.contentWrapper a {
+	color: var(--fire-opal);
+	text-decoration: none;
+	position: relative;
+	display: inline-block;
+}
+
+.contentWrapper a::after {
+	content: '';
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	height: 1px;
+	background-color: var(--fire-opal);
 }
 
diff --git a/styles/layout.css b/styles/layout.css
new file mode 100644
index 0000000..e223b11
--- /dev/null
+++ b/styles/layout.css
@@ -0,0 +1,40 @@
+.centeredPage {
+	max-width: calc(700px + 24px + 200px);
+	margin: 0 auto;
+	margin-top: 96px;
+	padding: 0 24px;
+
+	display: grid;
+	gap: 24px;
+	grid-template-columns: 200px 1fr;
+	grid-auto-rows: auto;
+}
+
+.titleWrapper {
+	grid-column: 2;
+	grid-row: 1;
+}
+.titleWrapper > * { margin: 0; }
+
+.navAreaWrapper {
+	grid-column: 1;
+	grid-row: 2;
+}
+.navAreaWrapper > .sticky {
+	position: sticky;
+	top: 24px;
+}
+
+.contentWrapper {
+	grid-column: 2;
+	grid-row: 2;
+}
+.contentWrapper > * {
+	margin: 0;
+	margin-bottom: 24px;
+}
+
+.contentWrapper p {
+	text-align: justify;
+}
+
diff --git a/styles/navbarItem.css b/styles/navbarItem.css
new file mode 100644
index 0000000..843f510
--- /dev/null
+++ b/styles/navbarItem.css
@@ -0,0 +1,22 @@
+.navbarItem {
+	display: block;
+
+	background-color: var(--oxford-blue);
+	color: var(--almond);
+
+	text-decoration: none;
+
+	padding: 8px;
+	border-radius: 8px;
+	margin-bottom: 12px;
+}
+
+.navbarItem span {
+	vertical-align: super;
+	line-height: 0;
+	margin-left: 8px;
+}
+
+.navbarItem > div {
+	height: 24px;
+}