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");
+    }
+  }
+}

themes/ccchh/assets/scss/main.scss

@@ -0,0 +1,2 @@
+@import "variables.scss";
+@import "container.scss";

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;