From ba36dca6e17a5ea5c0447aecaf800180322722d1 Mon Sep 17 00:00:00 2001
From: spongycake <outlegend_hutlet@aleeas.com>
Date: Fri, 28 Jan 2022 12:21:24 +0000
Subject: [PATCH] +container, full-width-container

Container's max-width was reflected to setting $container-page-width found within settings.

Container makes use of $gutter-half from settings for easier coding and
consistency.

Container now makes use of media queries. We add and subtract margins based on screen size. In particular, we register margin gutters when the viewport width is within the container-page-width.

.full-width-container is set to 100% width, expanding fully for each screen size. This additional class is expected to be used for content outside of textual information e.g. artwork.
---
 src/scss/_container.scss | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/scss/_container.scss b/src/scss/_container.scss
index 828477c..81515ab 100644
--- a/src/scss/_container.scss
+++ b/src/scss/_container.scss
@@ -1,6 +1,22 @@
+// Container 
 .container {
-	max-width:1000px;
-	margin:22px auto;
-	@include padding-left(15px);
-@include	padding-right(15px);
+  max-width: $container-page-width;
+  // On desktop screens, when screen size is greater than the actual width of the page
+  // then content is centred instead of adding gutters 
+  margin-left: auto;
+  margin-right: auto;
+  // As soon as the viewport is less than page width plus both gutters,
+  // then add gutter spacing to container   
+  @include mq.mq($until: $container-page-width + $gutter * 2) {
+    margin-left: $gutter-half;
+    margin-right: $gutter-half;
+  }
 }
+// Full width container
+.full-width-container {
+    max-width: 100%;
+    margin-left: $gutter-half;
+    margin-right: $gutter-half;
+}
+
+