initial commit

assets/pico/scss/layout/_container.scss

@@ -0,0 +1,33 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/container") and $enable-classes {
+  /**
+   * Container
+   */
+
+  .container,
+  .container-fluid {
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    padding-right: var(#{$css-var-prefix}spacing);
+    padding-left: var(#{$css-var-prefix}spacing);
+  }
+
+  .container {
+    $first-breakpoint: true;
+    @each $key, $values in $breakpoints {
+      @if $values {
+        @media (min-width: map.get($values, "breakpoint")) {
+          max-width: map.get($values, "viewport");
+          @if $first-breakpoint {
+            $first-breakpoint: false;
+            padding-right: 0;
+            padding-left: 0;
+          }
+        }
+      }
+    }
+  }
+}

assets/pico/scss/layout/_document.scss

@@ -0,0 +1,52 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/document") {
+  /**
+   * Document
+   * Content-box & Responsive typography
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Add border box sizing in all browsers (opinionated)
+  // 2. Backgrounds do not repeat by default (opinionated)
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box; // 1
+    background-repeat: no-repeat; // 2
+  }
+
+  // 1. Add text decoration inheritance in all browsers (opinionated)
+  // 2. Add vertical alignment inheritance in all browsers (opinionated)
+  ::before,
+  ::after {
+    text-decoration: inherit; // 1
+    vertical-align: inherit; // 2
+  }
+
+  // 1. Change the line height in all browsers (opinionated)
+  // 2. Breaks words to prevent overflow in all browsers (opinionated)
+  // 3. Use a 4-space tab width in all browsers (opinionated)
+  // 4. Remove the grey highlight on links in iOS (opinionated)
+  // 5. Prevent adjustments of font size after orientation changes in iOS
+  :where(:root) {
+    -webkit-tap-highlight-color: transparent; // 4
+    -webkit-text-size-adjust: 100%; // 5
+    text-size-adjust: 100%; // 5
+    background-color: var(#{$css-var-prefix}background-color);
+    color: var(#{$css-var-prefix}color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+    font-size: var(#{$css-var-prefix}font-size);
+    line-height: var(#{$css-var-prefix}line-height); // 1
+    font-family: var(#{$css-var-prefix}font-family);
+    text-underline-offset: var(#{$css-var-prefix}text-underline-offset);
+    text-rendering: optimizeLegibility;
+    overflow-wrap: break-word; // 2
+    tab-size: 4; // 3
+  }
+}

assets/pico/scss/layout/_grid.scss

@@ -0,0 +1,26 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/grid") and $enable-classes {
+  /**
+   * Grid
+   * Minimal grid system with auto-layout columns
+   */
+
+  .grid {
+    grid-column-gap: var(#{$css-var-prefix}grid-column-gap);
+    grid-row-gap: var(#{$css-var-prefix}grid-row-gap);
+    display: grid;
+    grid-template-columns: 1fr;
+
+    @if map.get($breakpoints, "md") {
+      @media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
+        grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
+      }
+    }
+
+    & > * {
+      min-width: 0; // HACK for childs in overflow
+    }
+  }
+}

assets/pico/scss/layout/_landmarks.scss

@@ -0,0 +1,62 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/landmarks") {
+  /**
+   * Landmarks
+   */
+
+  // Reboot based on :
+  // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Remove the margin in all browsers (opinionated)
+  body {
+    width: 100%;
+    margin: 0; // 1
+  }
+
+  // Render the `main` element consistently in IE
+  main {
+    display: block;
+  }
+
+  // Pico
+  // ––––––––––––––––––––
+  #{$parent-selector} #{$semantic-root-element} {
+    > header,
+    > main,
+    > footer {
+      // <header>, <main>, <footer> as containers
+      @if $enable-semantic-container {
+        $first-breakpoint: true;
+        width: 100%;
+        margin-right: auto;
+        margin-left: auto;
+        padding: var(#{$css-var-prefix}block-spacing-vertical)
+          var(#{$css-var-prefix}block-spacing-horizontal);
+
+        @if $enable-viewport {
+          @each $key, $values in $breakpoints {
+            @if $values {
+              @media (min-width: map.get($values, "breakpoint")) {
+                max-width: map.get($values, "viewport");
+                @if $first-breakpoint {
+                  $first-breakpoint: false;
+                  padding-right: 0;
+                  padding-left: 0;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      // Regular vertical spacings for <header>, <main>, <footer>
+      @else {
+        padding-block: var(#{$css-var-prefix}block-spacing-vertical);
+      }
+    }
+  }
+}

assets/pico/scss/layout/_overflow-auto.scss

@@ -0,0 +1,12 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/overflow-auto") and $enable-classes {
+  /**
+   * Overflow auto
+   */
+
+  #{$parent-selector} .overflow-auto {
+    overflow: auto;
+  }
+}

assets/pico/scss/layout/_section.scss

@@ -0,0 +1,12 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "layout/section") {
+  /**
+   * Section
+   */
+
+  #{$parent-selector} section {
+    margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
+  }
+}