From 1cba65457086e9f7e2aa928bc02af12f3c38159a Mon Sep 17 00:00:00 2001
From: June <june@jsts.xyz>
Date: Thu, 25 Jan 2024 23:38:31 +0100
Subject: [PATCH] Provide container class to limit viewport depending on screen
 width

Also define the necessary variables for these breakpoints and viewports.
This way they can be used in other contexts as well.
---
 themes/ccchh/assets/scss/container.scss | 38 +++++++++++++++++++++++++
 themes/ccchh/assets/scss/main.scss      |  2 ++
 themes/ccchh/assets/scss/variables.scss | 33 +++++++++++++++++++++
 3 files changed, 73 insertions(+)
 create mode 100644 themes/ccchh/assets/scss/container.scss
 create mode 100644 themes/ccchh/assets/scss/variables.scss

diff --git a/themes/ccchh/assets/scss/container.scss b/themes/ccchh/assets/scss/container.scss
new file mode 100644
index 0000000..4c546ec
--- /dev/null
+++ b/themes/ccchh/assets/scss/container.scss
@@ -0,0 +1,38 @@
+// Provide a container class, which limits the viewport depending on the screen
+// width.
+// Taken from PicoCSS, see here:
+// https://github.com/picocss/pico/blob/v1.5.11/scss/layout/_container.scss
+
+.container {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: var(--spacing);
+  padding-left: var(--spacing);
+
+  @if map-get($breakpoints, "sm") {
+    @media (min-width: map-get($breakpoints, "sm")) {
+      max-width: map-get($viewports, "sm");
+      padding-right: 0;
+      padding-left: 0;
+    }
+  }
+
+  @if map-get($breakpoints, "md") {
+    @media (min-width: map-get($breakpoints, "md")) {
+      max-width: map-get($viewports, "md");
+    }
+  }
+
+  @if map-get($breakpoints, "lg") {
+    @media (min-width: map-get($breakpoints, "lg")) {
+      max-width: map-get($viewports, "lg");
+    }
+  }
+
+  @if map-get($breakpoints, "xl") {
+    @media (min-width: map-get($breakpoints, "xl")) {
+      max-width: map-get($viewports, "xl");
+    }
+  }
+}
diff --git a/themes/ccchh/assets/scss/main.scss b/themes/ccchh/assets/scss/main.scss
index e69de29..785bcd0 100644
--- a/themes/ccchh/assets/scss/main.scss
+++ b/themes/ccchh/assets/scss/main.scss
@@ -0,0 +1,2 @@
+@import "variables.scss";
+@import "container.scss";
diff --git a/themes/ccchh/assets/scss/variables.scss b/themes/ccchh/assets/scss/variables.scss
new file mode 100644
index 0000000..3ce3337
--- /dev/null
+++ b/themes/ccchh/assets/scss/variables.scss
@@ -0,0 +1,33 @@
+// Breakpoints and viewports for a responsive website.
+// Taken from Pico CSS, see here:
+// https://github.com/picocss/pico/blob/v1.5.11/scss/_variables.scss#L38
+
+// xs: Extra small (portrait phones)
+// sm: Small(landscape phones)
+// md: Medium(tablets)
+// lg: Large(desktops)
+// xl: Extra large (large desktops)
+
+// NOTE:
+// To provide an easy and fine styling on each breakpoint
+// we didn't use @each, @mixin or @include.
+// That means you need to edit each CSS selector file to add a breakpoint
+
+// Breakpoints
+// 'null' disable the breakpoint
+$breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+) !default;
+
+// Viewports
+$viewports: (
+  // 'null' disable the viewport on a breakpoint
+  sm: 510px,
+  md: 700px,
+  lg: 920px,
+  xl: 1130px
+) !default;