Implement blog page, add a few links

4 files changed, 42 insertions, 1 deletions

diff --git a/assets/css/base.scss b/assets/css/base.scss
index eaa64bc..189acc1 100644
--- a/assets/css/base.scss
+++ b/assets/css/base.scss
@@ -4,6 +4,7 @@
 @import "markup/render-heading.scss";
 
 @import "partials/header.scss";
+@import "partials/article.scss";
 @import "partials/footer.scss";
 
 html,
@@ -19,6 +20,13 @@ body {
 	flex-direction: column;
 }
 
+h1, h2, h3, h4, h5, h6 {
+	font-family: var(--font-heading);
+	line-height: 1.25;
+	margin-top: 0;
+	margin-bottom: 0.6em;	
+}
+
 h1 {
 	font-weight: 900;
 }
@@ -34,6 +42,7 @@ a {
 
 main {
 	max-width: 80ch;
+	width: 100%;
 	margin: 0 auto;
 	padding: 1rem;
 
diff --git a/assets/css/fonts.scss b/assets/css/fonts.scss
index c771f4b..a07f8f7 100644
--- a/assets/css/fonts.scss
+++ b/assets/css/fonts.scss
@@ -12,4 +12,12 @@
 	font-weight: 100 900;
 	font-display: swap;
 	src: url('/fonts/aleo-italic.ttf') format('truetype-variations');
+}
+
+@font-face {
+	font-family: 'Rubik';
+	font-style: normal;
+	font-weight: 100 900;
+	font-display: swap;
+	src: url('/fonts/rubik.ttf') format('truetype-variations');
 }
\ No newline at end of file
diff --git a/assets/css/partials/article.scss b/assets/css/partials/article.scss
new file mode 100644
index 0000000..c35669e
--- /dev/null
+++ b/assets/css/partials/article.scss
@@ -0,0 +1,22 @@
+article {
+	max-width: 70ch;
+	margin: 0 auto;
+	font-size: 1.25rem;
+
+	>* {
+		margin-top: 0;
+		margin-bottom: 1.75rem;
+	}
+
+	h1 {
+		font-size: 3.5rem;
+		line-height: 1;
+		margin-bottom: 1rem;
+	}
+
+	p.meta {
+		display: block;
+		font-size: 0.85rem;
+		margin-bottom: 1rem;
+	}
+}
\ No newline at end of file
diff --git a/assets/css/root.scss b/assets/css/root.scss
index 88d8614..9ffc849 100644
--- a/assets/css/root.scss
+++ b/assets/css/root.scss
@@ -1,9 +1,11 @@
 :root {
 	font-size: 16px;
 	font-weight: 400;
-	font-family: 'Aleo', consolas;
+	font-family: 'Rubik', sans-serif;
 	line-height: 1.5;
 
+	--font-heading: 'Aleo', "Roboto Slab", sans-serif;
+
 	--accent-1: hsl(152, 90%, 20%);
 	--accent-2: hsl(152, 90%, 30%);
 	--accent-3: hsl(152, 90%, 40%);