poops 1.0.7 → 1.0.9

package/example/dist/css/styles.css

@@ -1,89 +1,6 @@
-/* poops v1.0.7 | https://github.com/stamat/poops | MIT License */
-/*
- * SIZES
- */
-/*
- * ORIENTATIONS - 'orientation label': (property)
- */
-/*
- * BREAKPOINTS - 'size label': (min, max)
- */
-/*
- * CONTAINER + GRID
- */
-/*
- * COLORS
- */
-/*
- * TYPOGRAPHY
- */
-/*
- * > If a font-size has not been set on any of the <p>'s ancestors,
- *   then 1em will equal the default browser font-size, which is usually 16px.
- *   So, by default 1em is equivalent to 16px.
- *   - https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#ems
- */
-/*
- * Breakpoint: $container-breakpoint
- *
- * (font-size, letter-spacing, line-height, font-weight, text-transform)
- */
-/* stylelint-disable */
-/*
- * Removes unit from a provided value
- *
- * @param $value (string): e.g. `16px`
- * @return (number): e.g. `16`
- */
-/*
- * Converts PX to EM values
- * @see utils/_config.scss for $base-font-size
- *
- * @param $value (string): e.g. `16px`
- * @return (string): e.g. `1em`
- */
-/*
- * Converts PX to REM values (document root relative EM)
- * @see utils/_config.scss for $base-font-size
- *
- * @param $value (string): e.g. `16px`
- * @return (string): e.g. `1rem`
- */
-/* stylelint-disable */ /*
- * Generates media query via provided predefined breakpoint map item without
- * @media. Used by `breakpoint` mixin.
- * @see utils/_config.scss $breakpoints. $breakpoints is a globally defined var.
- *
- * @param $size: breakpoint map item name ('', sm, md, lg, xl, xxl)
- * @param $explicit: (boolean | optional) for generating min-max queries
- *
- * @return (string) e.g. `only screen and (min-width: 1366px)` or `only screen and (min-width: 1366px) and (max-width: 1679px)`
- */
-/*
- * Mixin for generating media queries. Uses `generate-breakpoint` function
- * @see utils/_config.scss $breakpoints. $breakpoints is a globally defined var.
- *
- * @param $size: (string) breakpoint map item name ('', sm, md, lg, xl, xxl)
- * @param $explicit: (boolean | optional) for generating min-max queries
- */
-/*
- * Mixin for generating generic utility classes. E.g. `.t-32` => `top: 32px`
- * Uses `generate-breakpoint` function.
- * @see utils/_config.scss $breakpoints. $breakpoints is a globally defined var.
- * @see utils/_config.scss $orientations. $orientations is a globally defined
- * var.
- *
- * @param $pref: (string) base class name
- * @param $property: (string) css property name
- * @param $values: (list | map) list or a map of property values
- * @param $unit: (string) value unit
- * @param $suff: (string) generated class name suffix
- * @param $orientations: (map | optional) map of orientation property variations
- * @param $responsive: (boolean | optional) whether to generate responsive classes
- */
-/* stylelint-disable max-nesting-depth */
-/* stylelint-enable */
-/* stylelint-disable */
+/* poops v1.0.8 | https://github.com/stamat/poops | MIT License */
+@charset "UTF-8";
+/*! Sulphuris 🜍 1.0.4 */
 .border, .border-y, .border-x, .border-r, .border-l, .border-b, .border-t {
   border-color: currentcolor;
   border-style: solid;
@@ -495,28 +412,29 @@ button.reset,
   justify-content: center;
   min-height: 56px;
   padding: 16px 32px;
-  transition:  color 250ms cubic-bezier(0.86, 0, 0.07, 1), background 250ms cubic-bezier(0.86, 0, 0.07, 1);
+  transition: color 250ms cubic-bezier(0.86, 0, 0.07, 1), background 250ms cubic-bezier(0.86, 0, 0.07, 1);
 }
+
 @media only screen and (min-width: 1024px) {
   .btn:hover {
     background-color: #1a1a1d;
   }
 }
-
 .btn-inverted {
   background-color: #1a1a1d;
 }
+
 @media only screen and (min-width: 1024px) {
   .btn-inverted:hover {
     background-color: #f6c026;
   }
 }
-
 .btn-outline {
   background: transparent;
   border: solid 2px #1a1a1d;
   color: #1a1a1d;
 }
+
 @media only screen and (min-width: 1024px) {
   .btn-outline:hover {
     background-color: #1a1a1d;
@@ -527,13 +445,13 @@ button.reset,
   border-color: #fff;
   color: #fff;
 }
+
 @media only screen and (min-width: 1024px) {
   .btn-outline.btn-inverted:hover {
     background-color: #fff;
     color: #1a1a1d;
   }
 }
-
 .text-black {
   color: #1a1a1d;
 }
@@ -708,6 +626,7 @@ h1, .h1 {
   line-height: 1;
   font-weight: bold;
 }
+
 @media only screen and (min-width: 1024px) {
   h1, .h1 {
     font-size: 6rem;
@@ -716,13 +635,13 @@ h1, .h1 {
     font-weight: bold;
   }
 }
-
 h2, .h2 {
   font-size: 3rem;
   letter-spacing: 0;
   line-height: 1;
   font-weight: bold;
 }
+
 @media only screen and (min-width: 1024px) {
   h2, .h2 {
     font-size: 4rem;
@@ -731,13 +650,13 @@ h2, .h2 {
     font-weight: bold;
   }
 }
-
 h3, .h3 {
   font-size: 2rem;
   letter-spacing: 0.015625rem;
   line-height: 1;
   font-weight: bold;
 }
+
 @media only screen and (min-width: 1024px) {
   h3, .h3 {
     font-size: 3rem;
@@ -746,13 +665,13 @@ h3, .h3 {
     font-weight: bold;
   }
 }
-
 h4, .h4 {
   font-size: 1.5rem;
   letter-spacing: 0;
   line-height: 1;
   font-weight: bold;
 }
+
 @media only screen and (min-width: 1024px) {
   h4, .h4 {
     font-size: 2rem;
@@ -761,13 +680,13 @@ h4, .h4 {
     font-weight: bold;
   }
 }
-
 h5, .h5 {
   font-size: 1.25rem;
   letter-spacing: 0.009375rem;
   line-height: 1;
   font-weight: bold;
 }
+
 @media only screen and (min-width: 1024px) {
   h5, .h5 {
     font-size: 1.5rem;
@@ -776,13 +695,13 @@ h5, .h5 {
     font-weight: bold;
   }
 }
-
 h6, .h6 {
   font-size: 1rem;
   letter-spacing: 0.009375rem;
   line-height: 1;
   font-weight: bold;
 }
+
 @media only screen and (min-width: 1024px) {
   h6, .h6 {
     font-size: 1.25rem;
@@ -791,7 +710,6 @@ h6, .h6 {
     font-weight: bold;
   }
 }
-
 .p1 {
   font-size: 1.5rem;
   letter-spacing: 0.01875rem;
@@ -1234,11 +1152,11 @@ h6 {
 }
 
 .hide-native-scrollbar {
-  -ms-overflow-style: none; /* IE 11 */
-  scrollbar-width: none; /* FF 64 */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
 
-.hide-native-scrollbar::-webkit-scrollbar { /* WebKit */
+.hide-native-scrollbar::-webkit-scrollbar {
   display: none;
 }
 
@@ -1255,94 +1173,52 @@ h6 {
 }
 
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-/* stylelint-disable */
-/* Document
-   ========================================================================== */
-/**
- * Prevent adjustments of font size after orientation changes in iOS.
- */
 html {
   -webkit-text-size-adjust: 100%;
 }
 
-/* Sections
-   ========================================================================== */
-/**
- * Remove the margin in all browsers.
- */
 body {
   margin: 0;
 }
 
-/**
- * Render the `main` element consistently in IE.
- */
 main {
   display: block;
 }
 
-/* Grouping content
-   ========================================================================== */
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
 hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
 }
 
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
 pre,
 code,
 kbd,
 samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
+  font-family: monospace, monospace;
+  font-size: 1em;
 }
 
-/* Text-level semantics
-   ========================================================================== */
-/**
- * Remove the gray background on active links in IE 10.
- */
 a {
   background-color: transparent;
 }
 
-/**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
 abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
+  border-bottom: none;
+  text-decoration: underline;
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
 }
 
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
 b,
 strong {
   font-weight: bolder;
 }
 
-/**
- * Add the correct font size in all browsers.
- */
 small {
   font-size: 80%;
 }
 
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
 sub,
 sup {
   font-size: 75%;
@@ -1359,53 +1235,31 @@ sup {
   top: -0.5em;
 }
 
-/* Embedded content
-   ========================================================================== */
-/**
- * Remove the border on images inside links in IE 10.
- */
 img {
   border-style: none;
 }
 
-/* Forms
-   ========================================================================== */
-/**
- * 1. Change the font styles in all browsers.
- * 2. Remove the margin in Firefox and Safari.
- */
 button,
 input,
 optgroup,
 select,
 textarea {
-  font-family: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
 }
 
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
 button,
-input { /* 1 */
+input {
   overflow: visible;
 }
 
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
 button,
-select { /* 1 */
+select {
   text-transform: none;
 }
 
-/**
- * Correct the inability to style clickable types in iOS and Safari.
- */
 button,
 [type=button],
 [type=reset],
@@ -1413,9 +1267,6 @@ button,
   -webkit-appearance: button;
 }
 
-/**
- * Remove the inner border and padding in Firefox.
- */
 button::-moz-focus-inner,
 [type=button]::-moz-focus-inner,
 [type=reset]::-moz-focus-inner,
@@ -1424,9 +1275,6 @@ button::-moz-focus-inner,
   padding: 0;
 }
 
-/**
- * Restore the focus styles unset by the previous rule.
- */
 button:-moz-focusring,
 [type=button]:-moz-focusring,
 [type=reset]:-moz-focusring,
@@ -1434,106 +1282,60 @@ button:-moz-focusring,
   outline: 1px dotted ButtonText;
 }
 
-/**
- * Correct the padding in Firefox.
- */
 fieldset {
   padding: 0.35em 0.75em 0.625em;
 }
 
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
 legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
 }
 
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
 progress {
   vertical-align: baseline;
 }
 
-/**
- * Remove the default vertical scrollbar in IE 10+.
- */
 textarea {
   overflow: auto;
 }
 
-/**
- * 1. Add the correct box sizing in IE 10.
- * 2. Remove the padding in IE 10.
- */
 [type=checkbox],
 [type=radio] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
+  box-sizing: border-box;
+  padding: 0;
 }
 
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
 [type=number]::-webkit-inner-spin-button,
 [type=number]::-webkit-outer-spin-button {
   height: auto;
 }
 
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
 [type=search] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
 }
 
-/**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
 [type=search]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
 ::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
+  -webkit-appearance: button;
+  font: inherit;
 }
 
-/* Interactive
-   ========================================================================== */
-/*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
 details {
   display: block;
 }
 
-/*
- * Add the correct display in all browsers.
- */
 summary {
   display: list-item;
 }
 
-/* Misc
-   ========================================================================== */
-/**
- * Add the correct display in IE 10+.
- */
 template {
   display: none;
 }
@@ -1547,6 +1349,7 @@ template {
   margin-left: -8px;
   margin-right: -8px;
 }
+
 @media only screen and (min-width: 1024px) {
   .grid-gutter {
     margin-left: -16px;
@@ -1559,6 +1362,7 @@ template {
   padding-left: 8px;
   padding-right: 8px;
 }
+
 @media only screen and (min-width: 1024px) {
   .grid-gutter.container {
     margin-left: auto;
@@ -1571,13 +1375,13 @@ template {
   padding-left: 8px;
   padding-right: 8px;
 }
+
 @media only screen and (min-width: 1024px) {
   .grid-gutter > [class*=col-] {
     padding-left: 16px;
     padding-right: 16px;
   }
 }
-
 .col-1 {
   width: 8.3333333333%;
 }
@@ -1819,6 +1623,7 @@ template {
 .col-offset-0 {
   margin-left: 0%;
 }
+
 .grid-reverse .col-offset-0 {
   margin-left: auto;
   margin-right: 0%;
@@ -1827,6 +1632,7 @@ template {
 .col-offset-1 {
   margin-left: 8.3333333333%;
 }
+
 .grid-reverse .col-offset-1 {
   margin-left: auto;
   margin-right: 8.3333333333%;
@@ -1835,6 +1641,7 @@ template {
 .col-offset-2 {
   margin-left: 16.6666666667%;
 }
+
 .grid-reverse .col-offset-2 {
   margin-left: auto;
   margin-right: 16.6666666667%;
@@ -1843,6 +1650,7 @@ template {
 .col-offset-3 {
   margin-left: 25%;
 }
+
 .grid-reverse .col-offset-3 {
   margin-left: auto;
   margin-right: 25%;
@@ -1851,6 +1659,7 @@ template {
 .col-offset-4 {
   margin-left: 33.3333333333%;
 }
+
 .grid-reverse .col-offset-4 {
   margin-left: auto;
   margin-right: 33.3333333333%;
@@ -1859,6 +1668,7 @@ template {
 .col-offset-5 {
   margin-left: 41.6666666667%;
 }
+
 .grid-reverse .col-offset-5 {
   margin-left: auto;
   margin-right: 41.6666666667%;
@@ -1867,6 +1677,7 @@ template {
 .col-offset-6 {
   margin-left: 50%;
 }
+
 .grid-reverse .col-offset-6 {
   margin-left: auto;
   margin-right: 50%;
@@ -1875,6 +1686,7 @@ template {
 .col-offset-7 {
   margin-left: 58.3333333333%;
 }
+
 .grid-reverse .col-offset-7 {
   margin-left: auto;
   margin-right: 58.3333333333%;
@@ -1883,6 +1695,7 @@ template {
 .col-offset-8 {
   margin-left: 66.6666666667%;
 }
+
 .grid-reverse .col-offset-8 {
   margin-left: auto;
   margin-right: 66.6666666667%;
@@ -1891,6 +1704,7 @@ template {
 .col-offset-9 {
   margin-left: 75%;
 }
+
 .grid-reverse .col-offset-9 {
   margin-left: auto;
   margin-right: 75%;
@@ -1899,6 +1713,7 @@ template {
 .col-offset-10 {
   margin-left: 83.3333333333%;
 }
+
 .grid-reverse .col-offset-10 {
   margin-left: auto;
   margin-right: 83.3333333333%;
@@ -1907,6 +1722,7 @@ template {
 .col-offset-11 {
   margin-left: 91.6666666667%;
 }
+
 .grid-reverse .col-offset-11 {
   margin-left: auto;
   margin-right: 91.6666666667%;
@@ -2346,112 +2162,112 @@ template {
   flex-grow: 1;
   max-width: 138.6666666667px;
 }
+
 @media only screen and (min-width: 1024px) {
   .col-1-max {
     max-width: 133.3333333333px;
   }
 }
-
 .col-2-max {
   flex-grow: 1;
   max-width: 277.3333333333px;
 }
+
 @media only screen and (min-width: 1024px) {
   .col-2-max {
     max-width: 266.6666666667px;
   }
 }
-
 .col-3-max {
   flex-grow: 1;
   max-width: 416px;
 }
+
 @media only screen and (min-width: 1024px) {
   .col-3-max {
     max-width: 400px;
   }
 }
-
 .col-4-max {
   flex-grow: 1;
   max-width: 554.6666666667px;
 }
+
 @media only screen and (min-width: 1024px) {
   .col-4-max {
     max-width: 533.3333333333px;
   }
 }
-
 .col-5-max {
   flex-grow: 1;
   max-width: 693.3333333333px;
 }
+
 @media only screen and (min-width: 1024px) {
   .col-5-max {
     max-width: 666.6666666667px;
   }
 }
-
 .col-6-max {
   flex-grow: 1;
   max-width: 832px;
 }
+
 @media only screen and (min-width: 1024px) {
   .col-6-max {
     max-width: 800px;
   }
 }
-
 .col-7-max {
   flex-grow: 1;
   max-width: 970.6666666667px;
 }
+
 @media only screen and (min-width: 1024px) {
   .col-7-max {
     max-width: 933.3333333333px;
   }
 }
-
 .col-8-max {
   flex-grow: 1;
   max-width: 1109.3333333333px;
 }
+
 @media only screen and (min-width: 1024px) {
   .col-8-max {
     max-width: 1066.6666666667px;
   }
 }
-
 .col-9-max {
   flex-grow: 1;
   max-width: 1248px;
 }
+
 @media only screen and (min-width: 1024px) {
   .col-9-max {
     max-width: 1200px;
   }
 }
-
 .col-10-max {
   flex-grow: 1;
   max-width: 1386.6666666667px;
 }
+
 @media only screen and (min-width: 1024px) {
   .col-10-max {
     max-width: 1333.3333333333px;
   }
 }
-
 .col-11-max {
   flex-grow: 1;
   max-width: 1525.3333333333px;
 }
+
 @media only screen and (min-width: 1024px) {
   .col-11-max {
     max-width: 1466.6666666667px;
   }
 }
-
 .grid-reverse {
   flex-direction: row-reverse;
 }
@@ -16851,13 +16667,13 @@ template {
   padding-left: 16px;
   padding-right: 16px;
 }
+
 @media only screen and (min-width: 1024px) {
   .container {
     padding-left: 56px;
     padding-right: 56px;
   }
 }
-
 .flex-row {
   flex-direction: row;
 }
@@ -17662,4 +17478,8 @@ code.terminal::before {
 a {
   color: #824F2D;
 }
+
+body {
+  padding-bottom: 32px;
+}
 /*# sourceMappingURL=styles.css.map */