More development

6 files changed, 135 insertions, 0 deletions

diff --git a/assets/css/base.scss b/assets/css/base.scss
new file mode 100644
index 0000000..eaa64bc
--- /dev/null
+++ b/assets/css/base.scss
@@ -0,0 +1,41 @@
+@import "fonts.scss";
+@import "root.scss";
+
+@import "markup/render-heading.scss";
+
+@import "partials/header.scss";
+@import "partials/footer.scss";
+
+html,
+body {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
+
+h1 {
+	font-weight: 900;
+}
+
+a {
+	color: var(--accent-500);
+}
+
+#main-footer-separator {
+	flex-grow: 1;
+	flex-shrink: 0;
+}
+
+main {
+	max-width: 80ch;
+	margin: 0 auto;
+	padding: 1rem;
+
+	font-size: 1.25rem;
+}
\ No newline at end of file
diff --git a/assets/css/fonts.scss b/assets/css/fonts.scss
new file mode 100644
index 0000000..c771f4b
--- /dev/null
+++ b/assets/css/fonts.scss
@@ -0,0 +1,15 @@
+@font-face {
+	font-family: 'Aleo';
+	font-style: normal;
+	font-weight: 100 900;
+	font-display: swap;
+	src: url('/fonts/aleo.ttf') format('truetype-variations');
+}
+
+@font-face {
+	font-family: 'Aleo';
+	font-style: italic;
+	font-weight: 100 900;
+	font-display: swap;
+	src: url('/fonts/aleo-italic.ttf') format('truetype-variations');
+}
\ No newline at end of file
diff --git a/assets/css/markup/render-heading.scss b/assets/css/markup/render-heading.scss
new file mode 100644
index 0000000..4fa23a8
--- /dev/null
+++ b/assets/css/markup/render-heading.scss
@@ -0,0 +1,13 @@
+main {
+	h1, h2, h3, h4, h5, h6 {
+		a {
+			color: var(--accent-1);
+			font-weight: 900;
+			text-decoration: none;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/assets/css/partials/footer.scss b/assets/css/partials/footer.scss
new file mode 100644
index 0000000..6affeac
--- /dev/null
+++ b/assets/css/partials/footer.scss
@@ -0,0 +1,10 @@
+footer {
+	background-color: #333;
+	color: white;
+
+	padding: 0.5rem 1rem;
+
+	a {
+		color: var(--accent-7);
+	}
+}
\ No newline at end of file
diff --git a/assets/css/partials/header.scss b/assets/css/partials/header.scss
new file mode 100644
index 0000000..df26fc0
--- /dev/null
+++ b/assets/css/partials/header.scss
@@ -0,0 +1,42 @@
+header {
+	background-color: var(--accent-5);
+	color: black;
+
+	display: flex;
+	flex-direction: horizontal;
+	align-items: center;
+	justify-content: space-between;
+
+	padding: 1rem 2rem;
+	margin-bottom: 1rem;
+
+	h1 {
+		font-size: 2rem;
+		margin: 0;
+		font-weight: 900;
+		letter-spacing: 0.15rem;
+
+		a {
+			text-decoration: none;
+		}
+	}
+
+	p {
+		font-size: 1.2rem;
+		font-weight: 300;
+	}
+
+	nav > a {
+		text-decoration: none;
+		font-weight: 900;
+		font-size: 1.2rem;
+		text-transform: uppercase;
+		letter-spacing: 0.1rem;
+		margin: 0 0.5rem;
+		transition: color 0.2s ease-in-out;
+
+		&:hover {
+			color: var(--accent-dark);
+		}
+	}
+}
\ No newline at end of file
diff --git a/assets/css/root.scss b/assets/css/root.scss
new file mode 100644
index 0000000..88d8614
--- /dev/null
+++ b/assets/css/root.scss
@@ -0,0 +1,14 @@
+:root {
+	font-size: 16px;
+	font-weight: 400;
+	font-family: 'Aleo', consolas;
+	line-height: 1.5;
+
+	--accent-1: hsl(152, 90%, 20%);
+	--accent-2: hsl(152, 90%, 30%);
+	--accent-3: hsl(152, 90%, 40%);
+	--accent-4: hsl(152, 90%, 50%);
+	--accent-5: hsl(152, 90%, 60%);
+	--accent-6: hsl(152, 90%, 70%);
+	--accent-7: hsl(152, 90%, 80%);
+}
\ No newline at end of file