From 475e4b3c1b228d943509e1fdfadcf1543228a3ca Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Mon, 28 Mar 2022 14:12:06 +0200
Subject: [PATCH] Add responsive containers to page components.

---
 source/scss/components/_page-footer.scss |  4 ++++
 source/scss/components/_page-header.scss |  4 ++++
 source/scss/components/_page-main.scss   |  4 ++++
 source/scss/mixins.scss                  | 12 ++++++++++++
 4 files changed, 24 insertions(+)
 create mode 100644 source/scss/mixins.scss

diff --git a/source/scss/components/_page-footer.scss b/source/scss/components/_page-footer.scss
index b4ec6f7..b4e3938 100644
--- a/source/scss/components/_page-footer.scss
+++ b/source/scss/components/_page-footer.scss
@@ -1,3 +1,7 @@
+@use 'mixins';
+
 .page-footer {
+  @include mixins.responsive-container;
+
   margin-top: 1rem;
 }
diff --git a/source/scss/components/_page-header.scss b/source/scss/components/_page-header.scss
index 613eaa6..c39f993 100644
--- a/source/scss/components/_page-header.scss
+++ b/source/scss/components/_page-header.scss
@@ -1,3 +1,7 @@
+@use 'mixins';
+
 .page-header {
+  @include mixins.responsive-container;
+
   padding: 1rem;
 }
diff --git a/source/scss/components/_page-main.scss b/source/scss/components/_page-main.scss
index ce03574..1ce5dd1 100644
--- a/source/scss/components/_page-main.scss
+++ b/source/scss/components/_page-main.scss
@@ -1,4 +1,8 @@
+@use 'mixins';
+
 .page-main {
+  @include mixins.responsive-container;
+
   padding: 1rem;
 
   .contact-links {
diff --git a/source/scss/mixins.scss b/source/scss/mixins.scss
new file mode 100644
index 0000000..685eb16
--- /dev/null
+++ b/source/scss/mixins.scss
@@ -0,0 +1,12 @@
+$medium-breakpoint: 900px;
+$large-breakpoint: 1200px;
+
+@mixin responsive-container {
+  margin-left: auto;
+  margin-right: auto;
+  width: $large-breakpoint;
+
+  @media (max-width: $large-breakpoint) {
+    width: 100%;
+  }
+}