initial mistakeHEADmain

1 files changed, 70 insertions, 0 deletions

diff --git a/app/assets/stylesheets/layout/_sectioning.scss b/app/assets/stylesheets/layout/_sectioning.scss
new file mode 100644
index 0000000..00d73c5
--- /dev/null
+++ b/app/assets/stylesheets/layout/_sectioning.scss
@@ -0,0 +1,70 @@
+/**
+ * Sectioning
+ * Container and responsive spacings for header, main, footer
+ */
+
+// 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
+// ––––––––––––––––––––
+
+// Render the `main` element consistently in IE
+main {
+  display: block;
+}
+
+// Pico
+// ––––––––––––––––––––
+
+// 1. Remove the margin in all browsers (opinionated)
+#{$semantic-root-element} {
+  width: 100%;
+  margin: 0; // 1
+
+  > header,
+  > main,
+  > footer {
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+
+    // Semantic container
+    @if $enable-semantic-container {
+      padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
+
+      // Centered viewport
+      @if $enable-viewport {
+        @if map-get($breakpoints, "sm") and $enable-viewport {
+          @media (min-width: map-get($breakpoints, "sm")) {
+            max-width: map-get($viewports, "sm");
+            padding-right: 0;
+            padding-left: 0;
+          }
+        }
+
+        @if map-get($breakpoints, "md") and $enable-viewport {
+          @media (min-width: map-get($breakpoints, "md")) {
+            max-width: map-get($viewports, "md");
+          }
+        }
+
+        @if map-get($breakpoints, "lg") and $enable-viewport {
+          @media (min-width: map-get($breakpoints, "lg")) {
+            max-width: map-get($viewports, "lg");
+          }
+        }
+
+        @if map-get($breakpoints, "xl") and $enable-viewport {
+          @media (min-width: map-get($breakpoints, "xl")) {
+            max-width: map-get($viewports, "xl");
+          }
+        }
+      }
+    }
+
+    // Semantic container
+    @else {
+      padding: var(--block-spacing-vertical) 0;
+    }
+  }
+}