From ae348cceba32f5f9c95f2dfa862c5295e7c56570 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn?= Date: Thu, 24 Jun 2021 22:59:11 +0200 Subject: [PATCH] adding --- dist/index.html | 21 +- dist/plain-ui.css | 3951 +++++++++++++++++++++--- src/scss/_core.scss | 3 +- src/scss/_variables.scss | 24 - src/scss/components/_button.scss | 8 +- src/scss/core/_content.scss | 16 + src/scss/core/_heading.scss | 18 + src/scss/core/helpers/_sizing.scss | 11 - src/scss/{core => }/helpers/_core.scss | 25 + src/scss/layout/_flex.scss | 1 - src/scss/layout/_masonry.scss | 39 +- src/scss/plain-ui.scss | 6 +- src/scss/{views => themes}/_dark.scss | 0 src/scss/{views => themes}/_light.scss | 0 14 files changed, 3658 insertions(+), 465 deletions(-) create mode 100644 src/scss/core/_content.scss delete mode 100644 src/scss/core/helpers/_sizing.scss rename src/scss/{core => }/helpers/_core.scss (90%) rename src/scss/{views => themes}/_dark.scss (100%) rename src/scss/{views => themes}/_light.scss (100%) diff --git a/dist/index.html b/dist/index.html index eb87663..a3cdafd 100644 --- a/dist/index.html +++ b/dist/index.html @@ -8,7 +8,6 @@ - @@ -330,40 +329,40 @@
-
-
+
+
food truck yr franzen pabst
-
-
+
+
food truck yr franzen pabst
-
-
+
+
food truck yr franzen pabst
-
-
+
+
food truck yr franzen pabst
-
-
+
+
food truck yr franzen pabst diff --git a/dist/plain-ui.css b/dist/plain-ui.css index 0d49536..a478447 100644 --- a/dist/plain-ui.css +++ b/dist/plain-ui.css @@ -15,465 +15,3531 @@ font-style: normal; font-display: swap; } -/** - * functions - * - * - * @author Björn Hase, Tentakelfabrik - * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/crispy-css - * - */ -/** - * strip unit from value - * - * @param {mixed} $value - * @return {number} - * - */ -/** - * get value of key "default" in map - * - * @param {map} $value - * @return {boolean|unit} - * - */ -/** - * factor - * - * - * - * @param {integer} $x - * @return {float} - * - */ -/** - * mixins - * - * - * @author Björn Hase, Tentakelfabrik - * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/plain-ui-css - * - */ -/** - * Clear Floats - * - * - * - */ -/** - * clear styles from list - * - * - */ -/** - * media-queries as mixins - * based on breakpoints from variables - * - * - * - */ -/** - * Set property and his value for each Breakpoint - * - * ( - * $plain-ui__md: 10px - * ) - * - * - * @param {css} $property - * @param {map} $breakpoints - * @param {Boolean} $important [false] - * - */ -/** - * Set property and his value with an factor for each Breakpoint - * - * ( - * $plain-ui__md: 10px - * ) - * - * @param {css} $property - * @param {number} $factor - * @param {map} $breakpoints - * @param {Boolean} $important [false] - * - */ -/** - * Set font-size from Breakpoints, use for calculating difference from font-size and default font-size - * - * ( - * $plain-ui__md: 1rem - * ) - * - * @param {map} $breakpoints - * @param {unit} $font-size - * @param {unit} $default - * @param {Boolean} $important [false] - * - */ -/** - * variables - * - * - * - * @author Björn Hase, Tentakelfabrik - * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/plain-ui-css - * - */ -/** - * breakpoints - * - */ -/** - * fonts - * - */ -/** - * colors - * - * - */ -/** - * padding & margin - * - */ -/** - * heading - * - */ -/** - * z-index - * - */ -/** - * core - * - * - * @author Björn Hase, Tentakelfabrik - * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/crispy-css - * - */ -/** - * normalize - * - * Thanks to https://necolas.github.io/normalize.css/, use a lot from them - * - * @author Björn Hase, Tentakelfabrik - * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/crispy-css - * - */ -/** - * Heading - * - * - * @author Björn Hase, Tentakelfabrik - * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/crispy-css - * - */ -/** - * typograhy - * - * @author Björn Hase, Tentakelfabrik - * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/crispy-css - * - */ -html { - font-size: 100%; - line-height: 1.15; - -webkit-text-size-adjust: 100%; +:root { + --reflex-columns: 12; + --reflex-grid-spacing: 15px; + --reflex-xs: 576px; + --reflex-sm: 768px; + --reflex-md: 992px; + --reflex-lg: 1200px; + --reflex-xlg: 1600px; + --reflex-xxs-max: 575px; + --reflex-xs-max: 767px; + --reflex-sm-max: 991px; + --reflex-md-max: 1199px; + --reflex-lg-max: 1599px; } -body, -html { - margin: 0; - height: 100%; +.container, +.container-full { + box-sizing: border-box; + width: 100%; + margin-right: auto; + margin-left: auto; + padding-right: 30px; + padding-left: 30px; +} +.container .grid, +.container-full .grid { + margin-right: -15px; + margin-left: -15px; } -html, -legend { - box-sizing: border-box; +@media (min-width: 576px) { + .container { + max-width: 576px; + } +} +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} +@media (min-width: 992px) { + .container { + max-width: 992px; + } +} +@media (min-width: 1200px) { + .container { + max-width: 1200px; + } +} +@media (min-width: 1600px) { + .container { + max-width: 1600px; + } } -main { +.grid { + box-sizing: border-box; display: block; + display: flex; + flex-wrap: wrap; + padding: 0; + margin: 0 auto; + position: relative; + letter-spacing: -0.31em; + *letter-spacing: normal; + word-spacing: -0.43em; + list-style-type: none; +} +.grid::before, .grid::after { + box-sizing: border-box; + letter-spacing: normal; + word-spacing: normal; + white-space: normal; } -*, -*::after, -*::before { - box-sizing: inherit; +[class*=col-] { + box-sizing: border-box; + letter-spacing: normal; + word-spacing: normal; + white-space: normal; + position: relative; + width: 100%; + vertical-align: top; + padding: 15px; + display: inline-block; + *display: inline; + zoom: 1; +} +[class*=col-]::before, [class*=col-]::after { + box-sizing: border-box; + letter-spacing: normal; + word-spacing: normal; + white-space: normal; +} +[class*=col-] .grid { + flex: 1 1 auto; + margin: -15px; } -table { - border-collapse: collapse; - border-spacing: 0; +.col-12 { + width: 100%; + *width: 99.9%; } -figcaption { - margin: 10px 0; +.col-11 { + width: 91.6666666667%; + *width: 91.5666666667%; } -/** - * form elements - * - * - */ -button, -input, -optgroup, -select, -textarea { - margin: 0; +.col-10 { + width: 83.3333333333%; + *width: 83.2333333333%; } -button, -select { - text-transform: none; +.col-9 { + width: 75%; + *width: 74.9%; } -button, -[type=button], -[type=reset], -[type=submit] { - -webkit-appearance: button; +.col-8 { + width: 66.6666666667%; + *width: 66.5666666667%; } -button::-moz-focus-inner, -[type=button]::-moz-focus-inner, -[type=reset]::-moz-focus-inner, -[type=submit]::-moz-focus-inner { - border-style: none; - padding: 0; +.col-7 { + width: 58.3333333333%; + *width: 58.2333333333%; +} + +.col-6 { + width: 50%; + *width: 49.9%; +} + +.col-5 { + width: 41.6666666667%; + *width: 41.5666666667%; +} + +.col-4 { + width: 33.3333333333%; + *width: 33.2333333333%; +} + +.col-3 { + width: 25%; + *width: 24.9%; +} + +.col-2 { + width: 16.6666666667%; + *width: 16.5666666667%; +} + +.col-1 { + width: 8.3333333333%; + *width: 8.2333333333%; +} + +@media (min-width: 576px) { + .col-xs-12 { + width: 100%; + *width: 99.9%; + } + + .col-xs-11 { + width: 91.6666666667%; + *width: 91.5666666667%; + } + + .col-xs-10 { + width: 83.3333333333%; + *width: 83.2333333333%; + } + + .col-xs-9 { + width: 75%; + *width: 74.9%; + } + + .col-xs-8 { + width: 66.6666666667%; + *width: 66.5666666667%; + } + + .col-xs-7 { + width: 58.3333333333%; + *width: 58.2333333333%; + } + + .col-xs-6 { + width: 50%; + *width: 49.9%; + } + + .col-xs-5 { + width: 41.6666666667%; + *width: 41.5666666667%; + } + + .col-xs-4 { + width: 33.3333333333%; + *width: 33.2333333333%; + } + + .col-xs-3 { + width: 25%; + *width: 24.9%; + } + + .col-xs-2 { + width: 16.6666666667%; + *width: 16.5666666667%; + } + + .col-xs-1 { + width: 8.3333333333%; + *width: 8.2333333333%; + } +} +@media (min-width: 768px) { + .col-sm-12 { + width: 100%; + *width: 99.9%; + } + + .col-sm-11 { + width: 91.6666666667%; + *width: 91.5666666667%; + } + + .col-sm-10 { + width: 83.3333333333%; + *width: 83.2333333333%; + } + + .col-sm-9 { + width: 75%; + *width: 74.9%; + } + + .col-sm-8 { + width: 66.6666666667%; + *width: 66.5666666667%; + } + + .col-sm-7 { + width: 58.3333333333%; + *width: 58.2333333333%; + } + + .col-sm-6 { + width: 50%; + *width: 49.9%; + } + + .col-sm-5 { + width: 41.6666666667%; + *width: 41.5666666667%; + } + + .col-sm-4 { + width: 33.3333333333%; + *width: 33.2333333333%; + } + + .col-sm-3 { + width: 25%; + *width: 24.9%; + } + + .col-sm-2 { + width: 16.6666666667%; + *width: 16.5666666667%; + } + + .col-sm-1 { + width: 8.3333333333%; + *width: 8.2333333333%; + } +} +@media (min-width: 992px) { + .col-md-12 { + width: 100%; + *width: 99.9%; + } + + .col-md-11 { + width: 91.6666666667%; + *width: 91.5666666667%; + } + + .col-md-10 { + width: 83.3333333333%; + *width: 83.2333333333%; + } + + .col-md-9 { + width: 75%; + *width: 74.9%; + } + + .col-md-8 { + width: 66.6666666667%; + *width: 66.5666666667%; + } + + .col-md-7 { + width: 58.3333333333%; + *width: 58.2333333333%; + } + + .col-md-6 { + width: 50%; + *width: 49.9%; + } + + .col-md-5 { + width: 41.6666666667%; + *width: 41.5666666667%; + } + + .col-md-4 { + width: 33.3333333333%; + *width: 33.2333333333%; + } + + .col-md-3 { + width: 25%; + *width: 24.9%; + } + + .col-md-2 { + width: 16.6666666667%; + *width: 16.5666666667%; + } + + .col-md-1 { + width: 8.3333333333%; + *width: 8.2333333333%; + } +} +@media (min-width: 1200px) { + .col-lg-12 { + width: 100%; + *width: 99.9%; + } + + .col-lg-11 { + width: 91.6666666667%; + *width: 91.5666666667%; + } + + .col-lg-10 { + width: 83.3333333333%; + *width: 83.2333333333%; + } + + .col-lg-9 { + width: 75%; + *width: 74.9%; + } + + .col-lg-8 { + width: 66.6666666667%; + *width: 66.5666666667%; + } + + .col-lg-7 { + width: 58.3333333333%; + *width: 58.2333333333%; + } + + .col-lg-6 { + width: 50%; + *width: 49.9%; + } + + .col-lg-5 { + width: 41.6666666667%; + *width: 41.5666666667%; + } + + .col-lg-4 { + width: 33.3333333333%; + *width: 33.2333333333%; + } + + .col-lg-3 { + width: 25%; + *width: 24.9%; + } + + .col-lg-2 { + width: 16.6666666667%; + *width: 16.5666666667%; + } + + .col-lg-1 { + width: 8.3333333333%; + *width: 8.2333333333%; + } +} +@media (min-width: 1600px) { + .col-xlg-12 { + width: 100%; + *width: 99.9%; + } + + .col-xlg-11 { + width: 91.6666666667%; + *width: 91.5666666667%; + } + + .col-xlg-10 { + width: 83.3333333333%; + *width: 83.2333333333%; + } + + .col-xlg-9 { + width: 75%; + *width: 74.9%; + } + + .col-xlg-8 { + width: 66.6666666667%; + *width: 66.5666666667%; + } + + .col-xlg-7 { + width: 58.3333333333%; + *width: 58.2333333333%; + } + + .col-xlg-6 { + width: 50%; + *width: 49.9%; + } + + .col-xlg-5 { + width: 41.6666666667%; + *width: 41.5666666667%; + } + + .col-xlg-4 { + width: 33.3333333333%; + *width: 33.2333333333%; + } + + .col-xlg-3 { + width: 25%; + *width: 24.9%; + } + + .col-xlg-2 { + width: 16.6666666667%; + *width: 16.5666666667%; + } + + .col-xlg-1 { + width: 8.3333333333%; + *width: 8.2333333333%; + } +} +.col-auto { + flex: 1 0 0px; + width: auto; +} + +@media (min-width: 576px) { + .col-xs-auto { + flex: 1 0 0px; + width: auto; + } +} +@media (min-width: 768px) { + .col-sm-auto { + flex: 1 0 0px; + width: auto; + } +} +@media (min-width: 992px) { + .col-md-auto { + flex: 1 0 0px; + width: auto; + } +} +@media (min-width: 1200px) { + .col-lg-auto { + flex: 1 0 0px; + width: auto; + } +} +@media (min-width: 1600px) { + .col-xlg-auto { + flex: 1 0 0px; + width: auto; + } +} +.order-12 { + order: 12; +} + +.order-11 { + order: 11; +} + +.order-10 { + order: 10; +} + +.order-9 { + order: 9; +} + +.order-8 { + order: 8; +} + +.order-7 { + order: 7; +} + +.order-6 { + order: 6; +} + +.order-5 { + order: 5; +} + +.order-4 { + order: 4; +} + +.order-3 { + order: 3; +} + +.order-2 { + order: 2; +} + +.order-1 { + order: 1; +} + +.order-0 { + order: 0; +} + +@media (min-width: 576px) { + .order-xs-12 { + order: 12; + } + + .order-xs-11 { + order: 11; + } + + .order-xs-10 { + order: 10; + } + + .order-xs-9 { + order: 9; + } + + .order-xs-8 { + order: 8; + } + + .order-xs-7 { + order: 7; + } + + .order-xs-6 { + order: 6; + } + + .order-xs-5 { + order: 5; + } + + .order-xs-4 { + order: 4; + } + + .order-xs-3 { + order: 3; + } + + .order-xs-2 { + order: 2; + } + + .order-xs-1 { + order: 1; + } + + .order-xs-0 { + order: 0; + } +} +@media (min-width: 768px) { + .order-sm-12 { + order: 12; + } + + .order-sm-11 { + order: 11; + } + + .order-sm-10 { + order: 10; + } + + .order-sm-9 { + order: 9; + } + + .order-sm-8 { + order: 8; + } + + .order-sm-7 { + order: 7; + } + + .order-sm-6 { + order: 6; + } + + .order-sm-5 { + order: 5; + } + + .order-sm-4 { + order: 4; + } + + .order-sm-3 { + order: 3; + } + + .order-sm-2 { + order: 2; + } + + .order-sm-1 { + order: 1; + } + + .order-sm-0 { + order: 0; + } +} +@media (min-width: 992px) { + .order-md-12 { + order: 12; + } + + .order-md-11 { + order: 11; + } + + .order-md-10 { + order: 10; + } + + .order-md-9 { + order: 9; + } + + .order-md-8 { + order: 8; + } + + .order-md-7 { + order: 7; + } + + .order-md-6 { + order: 6; + } + + .order-md-5 { + order: 5; + } + + .order-md-4 { + order: 4; + } + + .order-md-3 { + order: 3; + } + + .order-md-2 { + order: 2; + } + + .order-md-1 { + order: 1; + } + + .order-md-0 { + order: 0; + } +} +@media (min-width: 1200px) { + .order-lg-12 { + order: 12; + } + + .order-lg-11 { + order: 11; + } + + .order-lg-10 { + order: 10; + } + + .order-lg-9 { + order: 9; + } + + .order-lg-8 { + order: 8; + } + + .order-lg-7 { + order: 7; + } + + .order-lg-6 { + order: 6; + } + + .order-lg-5 { + order: 5; + } + + .order-lg-4 { + order: 4; + } + + .order-lg-3 { + order: 3; + } + + .order-lg-2 { + order: 2; + } + + .order-lg-1 { + order: 1; + } + + .order-lg-0 { + order: 0; + } +} +@media (min-width: 1600px) { + .order-xlg-12 { + order: 12; + } + + .order-xlg-11 { + order: 11; + } + + .order-xlg-10 { + order: 10; + } + + .order-xlg-9 { + order: 9; + } + + .order-xlg-8 { + order: 8; + } + + .order-xlg-7 { + order: 7; + } + + .order-xlg-6 { + order: 6; + } + + .order-xlg-5 { + order: 5; + } + + .order-xlg-4 { + order: 4; + } + + .order-xlg-3 { + order: 3; + } + + .order-xlg-2 { + order: 2; + } + + .order-xlg-1 { + order: 1; + } + + .order-xlg-0 { + order: 0; + } +} +.offset-11 { + margin-left: 91.6666666667%; + *margin-left: 91.5666666667%; +} + +.offset-10 { + margin-left: 83.3333333333%; + *margin-left: 83.2333333333%; +} + +.offset-9 { + margin-left: 75%; + *margin-left: 74.9%; +} + +.offset-8 { + margin-left: 66.6666666667%; + *margin-left: 66.5666666667%; +} + +.offset-7 { + margin-left: 58.3333333333%; + *margin-left: 58.2333333333%; +} + +.offset-6 { + margin-left: 50%; + *margin-left: 49.9%; +} + +.offset-5 { + margin-left: 41.6666666667%; + *margin-left: 41.5666666667%; +} + +.offset-4 { + margin-left: 33.3333333333%; + *margin-left: 33.2333333333%; +} + +.offset-3 { + margin-left: 25%; + *margin-left: 24.9%; +} + +.offset-2 { + margin-left: 16.6666666667%; + *margin-left: 16.5666666667%; +} + +.offset-1 { + margin-left: 8.3333333333%; + *margin-left: 8.2333333333%; +} + +@media (min-width: 576px) { + .offset-xs-11 { + margin-left: 91.6666666667%; + *margin-left: 91.5666666667%; + } + + .offset-xs-10 { + margin-left: 83.3333333333%; + *margin-left: 83.2333333333%; + } + + .offset-xs-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-xs-8 { + margin-left: 66.6666666667%; + *margin-left: 66.5666666667%; + } + + .offset-xs-7 { + margin-left: 58.3333333333%; + *margin-left: 58.2333333333%; + } + + .offset-xs-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-xs-5 { + margin-left: 41.6666666667%; + *margin-left: 41.5666666667%; + } + + .offset-xs-4 { + margin-left: 33.3333333333%; + *margin-left: 33.2333333333%; + } + + .offset-xs-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-xs-2 { + margin-left: 16.6666666667%; + *margin-left: 16.5666666667%; + } + + .offset-xs-1 { + margin-left: 8.3333333333%; + *margin-left: 8.2333333333%; + } + + .offset-xs-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +@media (min-width: 768px) { + .offset-sm-11 { + margin-left: 91.6666666667%; + *margin-left: 91.5666666667%; + } + + .offset-sm-10 { + margin-left: 83.3333333333%; + *margin-left: 83.2333333333%; + } + + .offset-sm-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-sm-8 { + margin-left: 66.6666666667%; + *margin-left: 66.5666666667%; + } + + .offset-sm-7 { + margin-left: 58.3333333333%; + *margin-left: 58.2333333333%; + } + + .offset-sm-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-sm-5 { + margin-left: 41.6666666667%; + *margin-left: 41.5666666667%; + } + + .offset-sm-4 { + margin-left: 33.3333333333%; + *margin-left: 33.2333333333%; + } + + .offset-sm-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-sm-2 { + margin-left: 16.6666666667%; + *margin-left: 16.5666666667%; + } + + .offset-sm-1 { + margin-left: 8.3333333333%; + *margin-left: 8.2333333333%; + } + + .offset-sm-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +@media (min-width: 992px) { + .offset-md-11 { + margin-left: 91.6666666667%; + *margin-left: 91.5666666667%; + } + + .offset-md-10 { + margin-left: 83.3333333333%; + *margin-left: 83.2333333333%; + } + + .offset-md-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-md-8 { + margin-left: 66.6666666667%; + *margin-left: 66.5666666667%; + } + + .offset-md-7 { + margin-left: 58.3333333333%; + *margin-left: 58.2333333333%; + } + + .offset-md-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-md-5 { + margin-left: 41.6666666667%; + *margin-left: 41.5666666667%; + } + + .offset-md-4 { + margin-left: 33.3333333333%; + *margin-left: 33.2333333333%; + } + + .offset-md-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-md-2 { + margin-left: 16.6666666667%; + *margin-left: 16.5666666667%; + } + + .offset-md-1 { + margin-left: 8.3333333333%; + *margin-left: 8.2333333333%; + } + + .offset-md-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +@media (min-width: 1200px) { + .offset-lg-11 { + margin-left: 91.6666666667%; + *margin-left: 91.5666666667%; + } + + .offset-lg-10 { + margin-left: 83.3333333333%; + *margin-left: 83.2333333333%; + } + + .offset-lg-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-lg-8 { + margin-left: 66.6666666667%; + *margin-left: 66.5666666667%; + } + + .offset-lg-7 { + margin-left: 58.3333333333%; + *margin-left: 58.2333333333%; + } + + .offset-lg-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-lg-5 { + margin-left: 41.6666666667%; + *margin-left: 41.5666666667%; + } + + .offset-lg-4 { + margin-left: 33.3333333333%; + *margin-left: 33.2333333333%; + } + + .offset-lg-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-lg-2 { + margin-left: 16.6666666667%; + *margin-left: 16.5666666667%; + } + + .offset-lg-1 { + margin-left: 8.3333333333%; + *margin-left: 8.2333333333%; + } + + .offset-lg-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +@media (min-width: 1600px) { + .offset-xlg-11 { + margin-left: 91.6666666667%; + *margin-left: 91.5666666667%; + } + + .offset-xlg-10 { + margin-left: 83.3333333333%; + *margin-left: 83.2333333333%; + } + + .offset-xlg-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-xlg-8 { + margin-left: 66.6666666667%; + *margin-left: 66.5666666667%; + } + + .offset-xlg-7 { + margin-left: 58.3333333333%; + *margin-left: 58.2333333333%; + } + + .offset-xlg-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-xlg-5 { + margin-left: 41.6666666667%; + *margin-left: 41.5666666667%; + } + + .offset-xlg-4 { + margin-left: 33.3333333333%; + *margin-left: 33.2333333333%; + } + + .offset-xlg-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-xlg-2 { + margin-left: 16.6666666667%; + *margin-left: 16.5666666667%; + } + + .offset-xlg-1 { + margin-left: 8.3333333333%; + *margin-left: 8.2333333333%; + } + + .offset-xlg-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +.wrap { + flex-wrap: wrap; +} + +.no-wrap { + flex-wrap: nowrap; +} +.no-wrap [class*=col-] { + flex-shrink: 1; +} + +.wrap-reverse { + flex-wrap: wrap-reverse; +} + +.direction-row { + flex-direction: row; +} + +.direction-row-reverse { + flex-direction: row-reverse; +} + +.direction-column { + flex-direction: column; +} + +.direction-column-reverse { + flex-direction: column-reverse; +} + +.align-start { + align-items: flex-start; +} + +.align-end { + align-items: flex-end; +} +.align-end [class*=col-] { + vertical-align: bottom; +} + +.align-center { + align-items: center; +} +.align-center [class*=col-] { + vertical-align: middle; +} + +.align-baseline { + align-items: baseline; +} + +.align-content-start { + align-content: flex-start; +} + +.align-content-end { + align-content: flex-end; +} +.align-content-end [class*=col-] { + vertical-align: bottom; +} + +.align-content-center { + align-content: center; +} + +.align-content-space-between { + align-content: space-between; +} + +.align-content-space-around { + align-content: space-around; +} + +.align-self-stretch { + align-self: stretch; +} + +.align-self-start { + align-self: flex-start; +} + +.align-self-end { + align-self: flex-end; + vertical-align: bottom; +} + +.align-self-center { + align-self: center; + vertical-align: middle; +} + +.align-self-baseline { + align-self: baseline; + vertical-align: baseline; +} + +.justify-start { + justify-content: flex-start; +} +.justify-start.grid { + text-align: left; +} + +.justify-end { + justify-content: flex-end; +} +.justify-end.grid { + text-align: right; + -moz-text-align-last: right; + text-align-last: right; +} +.justify-end.grid [class*=col-] { + text-align: left; + text-align: start; + -moz-text-align-last: left; + -moz-text-align-last: start; + text-align-last: left; + text-align-last: start; +} + +.justify-center { + justify-content: center; +} +.justify-center.grid { + text-align: center; + -moz-text-align-last: center; + text-align-last: center; +} +.justify-center.grid [class*=col-] { + text-align: left; + text-align: start; + -moz-text-align-last: left; + -moz-text-align-last: start; + text-align-last: left; + text-align-last: start; +} + +.justify-space-between { + justify-content: space-between; +} +.justify-space-between.grid { + text-align: justify; + -moz-text-align-last: justify; + text-align-last: justify; +} +.justify-space-between.grid [class*=col-] { + text-align: left; + text-align: start; + -moz-text-align-last: left; + -moz-text-align-last: start; + text-align-last: left; + text-align-last: start; +} + +.justify-space-around { + justify-content: space-around; +} +.justify-space-around.grid { + text-align: justify; + -moz-text-align-last: justify; + text-align-last: justify; +} +.justify-space-around.grid [class*=col-] { + text-align: left; + text-align: start; + -moz-text-align-last: left; + -moz-text-align-last: start; + text-align-last: left; + text-align-last: start; +} + +.grid-bleed [class*=col-] { + padding: 0; +} + +.col-grid { + display: flex; + flex-direction: column; +} +.col-grid.direction-row { + flex-direction: row; +} + +.col-bleed { + padding: 0; +} + +.col-bleed-x { + padding: 15px 0; +} + +.col-bleed-y { + padding: 0 15px; +} + +.flex-img { + display: block; + flex: 0 0 auto; + max-width: 100%; + height: auto; + width: 100%; + *width: auto; +} + +.flex-footer { + width: 100%; + margin-top: auto; + margin-bottom: 0; +} +.flex-footer > :last-child { + margin-bottom: 0; +} + +@media (min-width: 0px) and (max-width: 575px) { + .hidden-xxs { + display: none; + } +} + +@media (min-width: 576px) { + .hidden-xs-up { + display: none; + } +} + +@media (max-width: 767px) { + .hidden-xs-down { + display: none; + } +} + +@media (min-width: 576px) and (max-width: 767px) { + .hidden-xs { + display: none; + } +} + +@media (min-width: 768px) { + .hidden-sm-up { + display: none; + } +} + +@media (max-width: 991px) { + .hidden-sm-down { + display: none; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + .hidden-sm { + display: none; + } +} + +@media (min-width: 992px) { + .hidden-md-up { + display: none; + } +} + +@media (max-width: 1199px) { + .hidden-md-down { + display: none; + } +} + +@media (min-width: 992px) and (max-width: 1199px) { + .hidden-md { + display: none; + } +} + +@media (min-width: 1200px) { + .hidden-lg-up { + display: none; + } +} + +@media (max-width: 1599px) { + .hidden-lg-down { + display: none; + } +} + +@media (min-width: 1200px) and (max-width: 1599px) { + .hidden-lg { + display: none; + } +} + +@media (min-width: 1600px) { + .hidden-xlg { + display: none; + } +} + +/** + * functions + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css + * + */ +/** + * strip unit from value + * + * @param {mixed} $value + * @return {number} + * + */ +/** + * get value of key "default" in map + * + * @param {map} $value + * @return {boolean|unit} + * + */ +/** + * factor + * + * + * + * @param {integer} $x + * @return {float} + * + */ +/** + * mixins + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui-css + * + */ +/** + * Clear Floats + * + * + * + */ +/** + * clear styles from list + * + * + */ +/** + * media-queries as mixins + * based on breakpoints from variables + * + * + * + */ +/** + * Set property and his value for each Breakpoint + * + * ( + * $plain-ui__md: 10px + * ) + * + * + * @param {css} $property + * @param {map} $breakpoints + * @param {Boolean} $important [false] + * + */ +/** + * Set property and his value with an factor for each Breakpoint + * + * ( + * $plain-ui__md: 10px + * ) + * + * @param {css} $property + * @param {number} $factor + * @param {map} $breakpoints + * @param {Boolean} $important [false] + * + */ +/** + * Set font-size from Breakpoints, use for calculating difference from font-size and default font-size + * + * ( + * $plain-ui__md: 1rem + * ) + * + * @param {map} $breakpoints + * @param {unit} $font-size + * @param {unit} $default + * @param {Boolean} $important [false] + * + */ +/** + * variables + * + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui-css + * + */ +/** + * breakpoints + * + */ +/** + * fonts + * + */ +/** + * colors + * + * + */ +/** + * padding & margin + * + */ +/** + * z-index + * + */ +/** + * core + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css + * + */ +/** + * normalize + * + * Thanks to https://necolas.github.io/normalize.css/, use a lot from them + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css + * + */ +/** + * Heading + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css + * + */ +/** + * typograhy + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css + * + */ +html { + font-size: 100%; + line-height: 1.15; + -webkit-text-size-adjust: 100%; +} + +body, +html { + margin: 0; + height: 100%; +} + +html, +legend { + box-sizing: border-box; +} + +main { + display: block; +} + +*, +*::after, +*::before { + box-sizing: inherit; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +figcaption { + margin: 10px 0; +} + +/** + * form elements + * + * + */ +button, +input, +optgroup, +select, +textarea { + margin: 0; +} + +button, +select { + text-transform: none; +} + +button, +[type=button], +[type=reset], +[type=submit] { + -webkit-appearance: button; +} + +button::-moz-focus-inner, +[type=button]::-moz-focus-inner, +[type=reset]::-moz-focus-inner, +[type=submit]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +button:-moz-focusring, +[type=button]:-moz-focusring, +[type=reset]:-moz-focusring, +[type=submit]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +legend { + box-sizing: border-box; + display: table; + max-width: 100%; + padding: 0; + white-space: normal; +} + +[type=number]::-webkit-inner-spin-button, +[type=number]::-webkit-outer-spin-button { + height: auto; +} + +[type=search] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +[type=search]::-webkit-search-decoration { + -webkit-appearance: none; +} + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +/** + * hr + * + */ +hr { + box-sizing: content-box; + height: 0; + overflow: visible; + border: 0; + margin: 0.3em 0; +} + +progress { + vertical-align: baseline; +} + +details { + display: block; +} + +summary { + display: list-item; +} + +h1, .h1, +h2, .h2, +h3, .h3, +h4, .h4, +h5, .h5, +h6, .h6 { + font-family: "IBM Plex Mono", sans-serif; + font-weight: bold; + line-height: 1.2; + margin: 0 0 15px; +} +@media only screen and (min-width: 992px) { + h1, .h1, +h2, .h2, +h3, .h3, +h4, .h4, +h5, .h5, +h6, .h6 { + margin: 0 0 20px; + } +} + +h5 { + line-height: 1.4; +} + +h6 { + line-height: 1.4; +} + +h1, .h1 { + font-size: 2.5rem; +} +@media only screen and (min-width: 992px) { + h1, .h1 { + font-size: 3rem; + } +} + +h2, .h2 { + font-size: 2rem; +} +@media only screen and (min-width: 992px) { + h2, .h2 { + font-size: 2.4rem; + } +} + +h3, .h3 { + font-size: 1.75rem; +} +@media only screen and (min-width: 992px) { + h3, .h3 { + font-size: 2.1rem; + } +} + +h4, .h4 { + font-size: 1.5rem; +} +@media only screen and (min-width: 992px) { + h4, .h4 { + font-size: 1.8rem; + } +} + +h5, .h5 { + font-size: 1.25rem; +} +@media only screen and (min-width: 992px) { + h5, .h5 { + font-size: 1.5rem; + } +} + +h6, .h6 { + font-size: 1rem; +} +@media only screen and (min-width: 992px) { + h6, .h6 { + font-size: 1.2rem; + } +} + +p { + margin: 0 0 15px; +} + +a, +ins, +u { + -webkit-text-decoration-skip: ink edges; + text-decoration-skip: ink edges; +} + +b, +strong { + font-weight: bolder; +} + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, +sup { + font-size: 70%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +abbr[title] { + border-bottom: 1px dotted; + cursor: help; + text-decoration: none; +} + +mark { + padding: 0.25em; +} + +/** + * blockquote + * + * + */ +blockquote { + border-left: 1px solid #3e3e3e; + margin-left: 0; + padding: 5px 12px; +} +blockquote p:last-child { + margin-bottom: 0; +} + +/** + * lists + * + */ +dl, +ol, +ul { + padding: 0; + margin: 0 0 15px; +} + +ol, +ul { + margin-left: 1.5em; +} + +ol ol, +ul ul { + margin-top: 0; + margin-left: 1em; +} + +ol { + list-style: decimal outside; +} + +ul { + list-style: disc outside; +} + +dl { + margin-left: 0.5em; +} + +dd, +dt { + margin: 0; +} + +dt { + font-weight: bold; +} + +/** + * + * + * + * + */ +/** + * + * + * + * + */ +/** + * + * + * + */ +/** + * + * + * + * + */ +/** + * + * + * + * + */ +/** + *
+ * image + *
+ * + */ +/** + * + * + * + */ +/** + * + * + * + */ +/** + *
+ * + *
+ * food truck yr franzen pabst + *
+ *
+ * + */ +/** + * + * + * + */ +/** + *
+ *
+ *
+ *
+ *
+ * + */ +/** + * + * + * + * + */ +/** + * masonry + * + *
+ *
+ * + *
+ *
+ * + * + */ +:root { + --reflex-columns: 12; + --reflex-grid-spacing: 15px; + --reflex-xs: 576px; + --reflex-sm: 768px; + --reflex-md: 992px; + --reflex-lg: 1200px; + --reflex-xlg: 1600px; + --reflex-xxs-max: 575px; + --reflex-xs-max: 767px; + --reflex-sm-max: 991px; + --reflex-md-max: 1199px; + --reflex-lg-max: 1599px; +} + +.container, +.container-full { + box-sizing: border-box; + width: 100%; + margin-right: auto; + margin-left: auto; + padding-right: 30px; + padding-left: 30px; +} + +.container .grid, +.container-full .grid { + margin-right: -15px; + margin-left: -15px; +} + +@media (min-width: 576px) { + .container { + max-width: 576px; + } +} +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} +@media (min-width: 992px) { + .container { + max-width: 992px; + } +} +@media (min-width: 1200px) { + .container { + max-width: 1200px; + } +} +@media (min-width: 1600px) { + .container { + max-width: 1600px; + } +} +.grid { + box-sizing: border-box; + display: block; + display: flex; + flex-wrap: wrap; + padding: 0; + margin: 0 auto; + position: relative; + letter-spacing: -0.31em; + *letter-spacing: normal; + word-spacing: -0.43em; + list-style-type: none; +} + +.grid::before, .grid::after { + box-sizing: border-box; + letter-spacing: normal; + word-spacing: normal; + white-space: normal; +} + +[class*=col-] { + box-sizing: border-box; + letter-spacing: normal; + word-spacing: normal; + white-space: normal; + position: relative; + width: 100%; + vertical-align: top; + padding: 15px; + display: inline-block; + *display: inline; + zoom: 1; +} + +[class*=col-]::before, [class*=col-]::after { + box-sizing: border-box; + letter-spacing: normal; + word-spacing: normal; + white-space: normal; +} + +[class*=col-] .grid { + flex: 1 1 auto; + margin: -15px; +} + +.col-12 { + width: 100%; + *width: 99.9%; +} + +.col-11 { + width: 91.66666667%; + *width: 91.56666667%; +} + +.col-10 { + width: 83.33333333%; + *width: 83.23333333%; +} + +.col-9 { + width: 75%; + *width: 74.9%; +} + +.col-8 { + width: 66.66666667%; + *width: 66.56666667%; +} + +.col-7 { + width: 58.33333333%; + *width: 58.23333333%; +} + +.col-6 { + width: 50%; + *width: 49.9%; +} + +.col-5 { + width: 41.66666667%; + *width: 41.56666667%; +} + +.col-4 { + width: 33.33333333%; + *width: 33.23333333%; +} + +.col-3 { + width: 25%; + *width: 24.9%; +} + +.col-2 { + width: 16.66666667%; + *width: 16.56666667%; +} + +.col-1 { + width: 8.33333333%; + *width: 8.23333333%; +} + +@media (min-width: 576px) { + .col-xs-12 { + width: 100%; + *width: 99.9%; + } + + .col-xs-11 { + width: 91.66666667%; + *width: 91.56666667%; + } + + .col-xs-10 { + width: 83.33333333%; + *width: 83.23333333%; + } + + .col-xs-9 { + width: 75%; + *width: 74.9%; + } + + .col-xs-8 { + width: 66.66666667%; + *width: 66.56666667%; + } + + .col-xs-7 { + width: 58.33333333%; + *width: 58.23333333%; + } + + .col-xs-6 { + width: 50%; + *width: 49.9%; + } + + .col-xs-5 { + width: 41.66666667%; + *width: 41.56666667%; + } + + .col-xs-4 { + width: 33.33333333%; + *width: 33.23333333%; + } + + .col-xs-3 { + width: 25%; + *width: 24.9%; + } + + .col-xs-2 { + width: 16.66666667%; + *width: 16.56666667%; + } + + .col-xs-1 { + width: 8.33333333%; + *width: 8.23333333%; + } +} +@media (min-width: 768px) { + .col-sm-12 { + width: 100%; + *width: 99.9%; + } + + .col-sm-11 { + width: 91.66666667%; + *width: 91.56666667%; + } + + .col-sm-10 { + width: 83.33333333%; + *width: 83.23333333%; + } + + .col-sm-9 { + width: 75%; + *width: 74.9%; + } + + .col-sm-8 { + width: 66.66666667%; + *width: 66.56666667%; + } + + .col-sm-7 { + width: 58.33333333%; + *width: 58.23333333%; + } + + .col-sm-6 { + width: 50%; + *width: 49.9%; + } + + .col-sm-5 { + width: 41.66666667%; + *width: 41.56666667%; + } + + .col-sm-4 { + width: 33.33333333%; + *width: 33.23333333%; + } + + .col-sm-3 { + width: 25%; + *width: 24.9%; + } + + .col-sm-2 { + width: 16.66666667%; + *width: 16.56666667%; + } + + .col-sm-1 { + width: 8.33333333%; + *width: 8.23333333%; + } +} +@media (min-width: 992px) { + .col-md-12 { + width: 100%; + *width: 99.9%; + } + + .col-md-11 { + width: 91.66666667%; + *width: 91.56666667%; + } + + .col-md-10 { + width: 83.33333333%; + *width: 83.23333333%; + } + + .col-md-9 { + width: 75%; + *width: 74.9%; + } + + .col-md-8 { + width: 66.66666667%; + *width: 66.56666667%; + } + + .col-md-7 { + width: 58.33333333%; + *width: 58.23333333%; + } + + .col-md-6 { + width: 50%; + *width: 49.9%; + } + + .col-md-5 { + width: 41.66666667%; + *width: 41.56666667%; + } + + .col-md-4 { + width: 33.33333333%; + *width: 33.23333333%; + } + + .col-md-3 { + width: 25%; + *width: 24.9%; + } + + .col-md-2 { + width: 16.66666667%; + *width: 16.56666667%; + } + + .col-md-1 { + width: 8.33333333%; + *width: 8.23333333%; + } +} +@media (min-width: 1200px) { + .col-lg-12 { + width: 100%; + *width: 99.9%; + } + + .col-lg-11 { + width: 91.66666667%; + *width: 91.56666667%; + } + + .col-lg-10 { + width: 83.33333333%; + *width: 83.23333333%; + } + + .col-lg-9 { + width: 75%; + *width: 74.9%; + } + + .col-lg-8 { + width: 66.66666667%; + *width: 66.56666667%; + } + + .col-lg-7 { + width: 58.33333333%; + *width: 58.23333333%; + } + + .col-lg-6 { + width: 50%; + *width: 49.9%; + } + + .col-lg-5 { + width: 41.66666667%; + *width: 41.56666667%; + } + + .col-lg-4 { + width: 33.33333333%; + *width: 33.23333333%; + } + + .col-lg-3 { + width: 25%; + *width: 24.9%; + } + + .col-lg-2 { + width: 16.66666667%; + *width: 16.56666667%; + } + + .col-lg-1 { + width: 8.33333333%; + *width: 8.23333333%; + } +} +@media (min-width: 1600px) { + .col-xlg-12 { + width: 100%; + *width: 99.9%; + } + + .col-xlg-11 { + width: 91.66666667%; + *width: 91.56666667%; + } + + .col-xlg-10 { + width: 83.33333333%; + *width: 83.23333333%; + } + + .col-xlg-9 { + width: 75%; + *width: 74.9%; + } + + .col-xlg-8 { + width: 66.66666667%; + *width: 66.56666667%; + } + + .col-xlg-7 { + width: 58.33333333%; + *width: 58.23333333%; + } + + .col-xlg-6 { + width: 50%; + *width: 49.9%; + } + + .col-xlg-5 { + width: 41.66666667%; + *width: 41.56666667%; + } + + .col-xlg-4 { + width: 33.33333333%; + *width: 33.23333333%; + } + + .col-xlg-3 { + width: 25%; + *width: 24.9%; + } + + .col-xlg-2 { + width: 16.66666667%; + *width: 16.56666667%; + } + + .col-xlg-1 { + width: 8.33333333%; + *width: 8.23333333%; + } +} +.col-auto { + flex: 1 0 0px; + width: auto; +} + +@media (min-width: 576px) { + .col-xs-auto { + flex: 1 0 0px; + width: auto; + } +} +@media (min-width: 768px) { + .col-sm-auto { + flex: 1 0 0px; + width: auto; + } +} +@media (min-width: 992px) { + .col-md-auto { + flex: 1 0 0px; + width: auto; + } +} +@media (min-width: 1200px) { + .col-lg-auto { + flex: 1 0 0px; + width: auto; + } +} +@media (min-width: 1600px) { + .col-xlg-auto { + flex: 1 0 0px; + width: auto; + } +} +.order-12 { + order: 12; +} + +.order-11 { + order: 11; +} + +.order-10 { + order: 10; +} + +.order-9 { + order: 9; +} + +.order-8 { + order: 8; +} + +.order-7 { + order: 7; +} + +.order-6 { + order: 6; +} + +.order-5 { + order: 5; +} + +.order-4 { + order: 4; +} + +.order-3 { + order: 3; +} + +.order-2 { + order: 2; +} + +.order-1 { + order: 1; +} + +.order-0 { + order: 0; +} + +@media (min-width: 576px) { + .order-xs-12 { + order: 12; + } + + .order-xs-11 { + order: 11; + } + + .order-xs-10 { + order: 10; + } + + .order-xs-9 { + order: 9; + } + + .order-xs-8 { + order: 8; + } + + .order-xs-7 { + order: 7; + } + + .order-xs-6 { + order: 6; + } + + .order-xs-5 { + order: 5; + } + + .order-xs-4 { + order: 4; + } + + .order-xs-3 { + order: 3; + } + + .order-xs-2 { + order: 2; + } + + .order-xs-1 { + order: 1; + } + + .order-xs-0 { + order: 0; + } +} +@media (min-width: 768px) { + .order-sm-12 { + order: 12; + } + + .order-sm-11 { + order: 11; + } + + .order-sm-10 { + order: 10; + } + + .order-sm-9 { + order: 9; + } + + .order-sm-8 { + order: 8; + } + + .order-sm-7 { + order: 7; + } + + .order-sm-6 { + order: 6; + } + + .order-sm-5 { + order: 5; + } + + .order-sm-4 { + order: 4; + } + + .order-sm-3 { + order: 3; + } + + .order-sm-2 { + order: 2; + } + + .order-sm-1 { + order: 1; + } + + .order-sm-0 { + order: 0; + } +} +@media (min-width: 992px) { + .order-md-12 { + order: 12; + } + + .order-md-11 { + order: 11; + } + + .order-md-10 { + order: 10; + } + + .order-md-9 { + order: 9; + } + + .order-md-8 { + order: 8; + } + + .order-md-7 { + order: 7; + } + + .order-md-6 { + order: 6; + } + + .order-md-5 { + order: 5; + } + + .order-md-4 { + order: 4; + } + + .order-md-3 { + order: 3; + } + + .order-md-2 { + order: 2; + } + + .order-md-1 { + order: 1; + } + + .order-md-0 { + order: 0; + } +} +@media (min-width: 1200px) { + .order-lg-12 { + order: 12; + } + + .order-lg-11 { + order: 11; + } + + .order-lg-10 { + order: 10; + } + + .order-lg-9 { + order: 9; + } + + .order-lg-8 { + order: 8; + } + + .order-lg-7 { + order: 7; + } + + .order-lg-6 { + order: 6; + } + + .order-lg-5 { + order: 5; + } + + .order-lg-4 { + order: 4; + } + + .order-lg-3 { + order: 3; + } + + .order-lg-2 { + order: 2; + } + + .order-lg-1 { + order: 1; + } + + .order-lg-0 { + order: 0; + } +} +@media (min-width: 1600px) { + .order-xlg-12 { + order: 12; + } + + .order-xlg-11 { + order: 11; + } + + .order-xlg-10 { + order: 10; + } + + .order-xlg-9 { + order: 9; + } + + .order-xlg-8 { + order: 8; + } + + .order-xlg-7 { + order: 7; + } + + .order-xlg-6 { + order: 6; + } + + .order-xlg-5 { + order: 5; + } + + .order-xlg-4 { + order: 4; + } + + .order-xlg-3 { + order: 3; + } + + .order-xlg-2 { + order: 2; + } + + .order-xlg-1 { + order: 1; + } + + .order-xlg-0 { + order: 0; + } +} +.offset-11 { + margin-left: 91.66666667%; + *margin-left: 91.56666667%; +} + +.offset-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; +} + +.offset-9 { + margin-left: 75%; + *margin-left: 74.9%; +} + +.offset-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; +} + +.offset-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; +} + +.offset-6 { + margin-left: 50%; + *margin-left: 49.9%; +} + +.offset-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; +} + +.offset-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; +} + +.offset-3 { + margin-left: 25%; + *margin-left: 24.9%; +} + +.offset-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; +} + +.offset-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; +} + +@media (min-width: 576px) { + .offset-xs-11 { + margin-left: 91.66666667%; + *margin-left: 91.56666667%; + } + + .offset-xs-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; + } + + .offset-xs-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-xs-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; + } + + .offset-xs-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; + } + + .offset-xs-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-xs-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; + } + + .offset-xs-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; + } + + .offset-xs-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-xs-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; + } + + .offset-xs-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; + } + + .offset-xs-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +@media (min-width: 768px) { + .offset-sm-11 { + margin-left: 91.66666667%; + *margin-left: 91.56666667%; + } + + .offset-sm-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; + } + + .offset-sm-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-sm-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; + } + + .offset-sm-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; + } + + .offset-sm-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-sm-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; + } + + .offset-sm-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; + } + + .offset-sm-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-sm-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; + } + + .offset-sm-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; + } + + .offset-sm-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +@media (min-width: 992px) { + .offset-md-11 { + margin-left: 91.66666667%; + *margin-left: 91.56666667%; + } + + .offset-md-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; + } + + .offset-md-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-md-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; + } + + .offset-md-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; + } + + .offset-md-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-md-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; + } + + .offset-md-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; + } + + .offset-md-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-md-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; + } + + .offset-md-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; + } + + .offset-md-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +@media (min-width: 1200px) { + .offset-lg-11 { + margin-left: 91.66666667%; + *margin-left: 91.56666667%; + } + + .offset-lg-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; + } + + .offset-lg-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-lg-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; + } + + .offset-lg-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; + } + + .offset-lg-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-lg-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; + } + + .offset-lg-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; + } + + .offset-lg-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-lg-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; + } + + .offset-lg-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; + } + + .offset-lg-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +@media (min-width: 1600px) { + .offset-xlg-11 { + margin-left: 91.66666667%; + *margin-left: 91.56666667%; + } + + .offset-xlg-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; + } + + .offset-xlg-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-xlg-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; + } + + .offset-xlg-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; + } + + .offset-xlg-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-xlg-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; + } + + .offset-xlg-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; + } + + .offset-xlg-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-xlg-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; + } + + .offset-xlg-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; + } + + .offset-xlg-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +.wrap { + flex-wrap: wrap; +} + +.no-wrap { + flex-wrap: nowrap; +} + +.no-wrap [class*=col-] { + flex-shrink: 1; +} + +.wrap-reverse { + flex-wrap: wrap-reverse; +} + +.direction-row { + flex-direction: row; +} + +.direction-row-reverse { + flex-direction: row-reverse; +} + +.direction-column { + flex-direction: column; +} + +.direction-column-reverse { + flex-direction: column-reverse; +} + +.align-start { + align-items: flex-start; +} + +.align-end { + align-items: flex-end; +} + +.align-end [class*=col-] { + vertical-align: bottom; +} + +.align-center { + align-items: center; +} + +.align-center [class*=col-] { + vertical-align: middle; +} + +.align-baseline { + align-items: baseline; +} + +.align-content-start { + align-content: flex-start; +} + +.align-content-end { + align-content: flex-end; +} + +.align-content-end [class*=col-] { + vertical-align: bottom; +} + +.align-content-center { + align-content: center; +} + +.align-content-space-between { + align-content: space-between; +} + +.align-content-space-around { + align-content: space-around; +} + +.align-self-stretch { + align-self: stretch; +} + +.align-self-start { + align-self: flex-start; +} + +.align-self-end { + align-self: flex-end; + vertical-align: bottom; +} + +.align-self-center { + align-self: center; + vertical-align: middle; +} + +.align-self-baseline { + align-self: baseline; + vertical-align: baseline; +} + +.justify-start { + justify-content: flex-start; +} + +.justify-start.grid { + text-align: left; +} + +.justify-end { + justify-content: flex-end; +} + +.justify-end.grid { + text-align: right; + -moz-text-align-last: right; + text-align-last: right; +} + +.justify-end.grid [class*=col-] { + text-align: left; + text-align: start; + -moz-text-align-last: left; + -moz-text-align-last: start; + text-align-last: left; + text-align-last: start; +} + +.justify-center { + justify-content: center; +} + +.justify-center.grid { + text-align: center; + -moz-text-align-last: center; + text-align-last: center; +} + +.justify-center.grid [class*=col-] { + text-align: left; + text-align: start; + -moz-text-align-last: left; + -moz-text-align-last: start; + text-align-last: left; + text-align-last: start; +} + +.justify-space-between { + justify-content: space-between; } -button:-moz-focusring, -[type=button]:-moz-focusring, -[type=reset]:-moz-focusring, -[type=submit]:-moz-focusring { - outline: 1px dotted ButtonText; +.justify-space-between.grid { + text-align: justify; + -moz-text-align-last: justify; + text-align-last: justify; } -legend { - box-sizing: border-box; - display: table; - max-width: 100%; - padding: 0; - white-space: normal; +.justify-space-between.grid [class*=col-] { + text-align: left; + text-align: start; + -moz-text-align-last: left; + -moz-text-align-last: start; + text-align-last: left; + text-align-last: start; } -[type=number]::-webkit-inner-spin-button, -[type=number]::-webkit-outer-spin-button { - height: auto; +.justify-space-around { + justify-content: space-around; } -[type=search] { - -webkit-appearance: textfield; - outline-offset: -2px; +.justify-space-around.grid { + text-align: justify; + -moz-text-align-last: justify; + text-align-last: justify; } -[type=search]::-webkit-search-decoration { - -webkit-appearance: none; +.justify-space-around.grid [class*=col-] { + text-align: left; + text-align: start; + -moz-text-align-last: left; + -moz-text-align-last: start; + text-align-last: left; + text-align-last: start; } -::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; +.grid-bleed [class*=col-] { + padding: 0; } -/** - * hr - * - */ -hr { - box-sizing: content-box; - height: 0; - overflow: visible; - border: 0; - margin: 0.3em 0; +.col-grid { + display: flex; + flex-direction: column; } -progress { - vertical-align: baseline; +.col-grid.direction-row { + flex-direction: row; } -details { - display: block; +.col-bleed { + padding: 0; } -summary { - display: list-item; +.col-bleed-x { + padding: 15px 0; } -h1, .h1, -h2, .h2, -h3, .h3, -h4, .h4, -h5, .h5, -h6, .h6 { - font-family: "IBM Plex Mono", sans-serif; - font-weight: bold; - line-height: 1.2; - margin: 0 0 15px; +.col-bleed-y { + padding: 0 15px; } -@media only screen and (min-width: 992px) { - h1, .h1, -h2, .h2, -h3, .h3, -h4, .h4, -h5, .h5, -h6, .h6 { - margin: 0 0 20px; - } + +.flex-img { + display: block; + flex: 0 0 auto; + max-width: 100%; + height: auto; + width: 100%; + *width: auto; } -h5 { - line-height: 1.4; +.flex-footer { + width: 100%; + margin-top: auto; + margin-bottom: 0; } -h6 { - line-height: 1.4; +.flex-footer > :last-child { + margin-bottom: 0; } -h1, .h1 { - font-size: 2.5rem; +@media (max-width: 575px) { + .hidden-xxs { + display: none; + } } -@media only screen and (min-width: 992px) { - h1, .h1 { - font-size: 3rem; +@media (min-width: 576px) { + .hidden-xs-up { + display: none; } } - -h2, .h2 { - font-size: 2rem; +@media (max-width: 767px) { + .hidden-xs-down { + display: none; + } } -@media only screen and (min-width: 992px) { - h2, .h2 { - font-size: 2.4rem; +@media (min-width: 576px) and (max-width: 767px) { + .hidden-xs { + display: none; } } - -h3, .h3 { - font-size: 1.75rem; +@media (min-width: 768px) { + .hidden-sm-up { + display: none; + } } -@media only screen and (min-width: 992px) { - h3, .h3 { - font-size: 2.1rem; +@media (max-width: 991px) { + .hidden-sm-down { + display: none; } } - -h4, .h4 { - font-size: 1.5rem; +@media (min-width: 768px) and (max-width: 991px) { + .hidden-sm { + display: none; + } } -@media only screen and (min-width: 992px) { - h4, .h4 { - font-size: 1.8rem; +@media (min-width: 992px) { + .hidden-md-up { + display: none; } } - -h5, .h5 { - font-size: 1.25rem; +@media (max-width: 1199px) { + .hidden-md-down { + display: none; + } } -@media only screen and (min-width: 992px) { - h5, .h5 { - font-size: 1.5rem; +@media (min-width: 992px) and (max-width: 1199px) { + .hidden-md { + display: none; } } - -h6, .h6 { - font-size: 1rem; +@media (min-width: 1200px) { + .hidden-lg-up { + display: none; + } } -@media only screen and (min-width: 992px) { - h6, .h6 { - font-size: 1.2rem; +@media (max-width: 1599px) { + .hidden-lg-down { + display: none; + } +} +@media (min-width: 1200px) and (max-width: 1599px) { + .hidden-lg { + display: none; + } +} +@media (min-width: 1600px) { + .hidden-xlg { + display: none; } } - -/** - * - * - * - * - */ -/** - * - * - * - * - */ -/** - * - * - * - */ -/** - * - * - * - * - */ -/** - * - * - * - * - */ -/** - *
- * image - *
- * - */ -/** - * - * - * - */ -/** - * - * - * - */ -/** - *
- * - *
- * food truck yr franzen pabst - *
- *
- * - */ -/** - * - * - * - */ -/** - *
- *
- *
- *
- *
- * - */ -/** - * - * - * - * - */ -/** - * - * - * - * - */ a { color: #fff; } @@ -519,6 +3585,103 @@ body { border-radius: 0 !important; } +/** + * z-index + * + * + */ +.z-index-1 { + z-index: 1; +} + +.z-index-2 { + z-index: 2; +} + +.z-index-3 { + z-index: 3; +} + +.z-index-4 { + z-index: 4; +} + +.z-index-5 { + z-index: 5; +} + +.z-index-6 { + z-index: 6; +} + +.z-index-7 { + z-index: 7; +} + +.z-index-8 { + z-index: 8; +} + +.z-index-9 { + z-index: 9; +} + +.z-index-10 { + z-index: 10; +} + +/** + * + * + */ +.w-col-1 { + width: 8.3333333333%; +} + +.w-col-2 { + width: 16.6666666667%; +} + +.w-col-3 { + width: 25%; +} + +.w-col-4 { + width: 33.3333333333%; +} + +.w-col-5 { + width: 41.6666666667%; +} + +.w-col-6 { + width: 50%; +} + +.w-col-7 { + width: 58.3333333333%; +} + +.w-col-8 { + width: 66.6666666667%; +} + +.w-col-9 { + width: 75%; +} + +.w-col-10 { + width: 83.3333333333%; +} + +.w-col-11 { + width: 91.6666666667%; +} + +.w-col-12 { + width: 100%; +} + /** * * @@ -754,7 +3917,8 @@ body { -moz-appearance: none; appearance: none; position: relative; - display: inline-block; + display: inline-flex; + align-items: center; text-decoration: none; font-family: "IBM Plex Mono", sans-serif; border: 1px solid #3e3e3e; @@ -763,7 +3927,8 @@ body { border-radius: 2px; transition: background-color 0.1s; margin-bottom: 0.5em; - padding: 0.5em 1.3em; + padding: 0 1.3em; + min-height: 2.8em; font-size: 1rem; width: 100%; } diff --git a/src/scss/_core.scss b/src/scss/_core.scss index b8c9bd6..6a0d357 100644 --- a/src/scss/_core.scss +++ b/src/scss/_core.scss @@ -15,8 +15,7 @@ @include plain-ui__core__normalize(); @include plain-ui__core__heading(); - -//@include plain__core__typography(); +@include plain-ui__core__typography(); @mixin plain-ui__core() { diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index d8c8dd6..8155a60 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -92,30 +92,6 @@ $plain-ui__padding-breakpoints: ( ) !default; -/** - * heading - * - */ - -$plain-ui__heading__font-sizes: ( - 'h1': $plain-ui__font-size * 2.5, - 'h2': $plain-ui__font-size * 2, - 'h3': $plain-ui__font-size * 1.75, - 'h4': $plain-ui__font-size * 1.5, - 'h5': $plain-ui__font-size * 1.25, - 'h6': $plain-ui__font-size -) !default; - -$plain-ui__heading__font-sizes__breakpoints: ( - $plain-ui__md: 1.2rem -) !default; - -$plain-ui__heading__font-weight: bold !default; -$plain-ui__heading__font-family: $plain-ui__font-family !default; -$plain-ui__heading__margin: $plain-ui__margin !default; -$plain-ui__heading__margin-breakpoints: $plain-ui__margin-breakpoints !default; - - /** * z-index * diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 067943d..faa8832 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -10,7 +10,9 @@ appearance: none; position: relative; - display: inline-block; + + display: inline-flex; + align-items: center; text-decoration: none; font-family: $plain-ui__font-family; @@ -23,7 +25,9 @@ transition: background-color 0.1s; margin-bottom: 0.5em; - padding: 0.5em 1.3em; + padding: 0 1.3em; + min-height: 2.8em; + font-size: 1rem; width: 100%; diff --git a/src/scss/core/_content.scss b/src/scss/core/_content.scss new file mode 100644 index 0000000..e478adc --- /dev/null +++ b/src/scss/core/_content.scss @@ -0,0 +1,16 @@ +/** + * Heading + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css + * + */ + +@mixin plain-ui__core__content() +{ + .content { + + } +} \ No newline at end of file diff --git a/src/scss/core/_heading.scss b/src/scss/core/_heading.scss index 5aa02eb..a6068b6 100644 --- a/src/scss/core/_heading.scss +++ b/src/scss/core/_heading.scss @@ -10,6 +10,24 @@ @mixin plain-ui__core__heading() { + $plain-ui__heading__font-sizes: ( + 'h1': $plain-ui__font-size * 2.5, + 'h2': $plain-ui__font-size * 2, + 'h3': $plain-ui__font-size * 1.75, + 'h4': $plain-ui__font-size * 1.5, + 'h5': $plain-ui__font-size * 1.25, + 'h6': $plain-ui__font-size + ) !default; + + $plain-ui__heading__font-sizes__breakpoints: ( + $plain-ui__md: 1.2rem + ) !default; + + $plain-ui__heading__font-weight: bold !default; + $plain-ui__heading__font-family: $plain-ui__font-family !default; + $plain-ui__heading__margin: $plain-ui__margin !default; + $plain-ui__heading__margin-breakpoints: $plain-ui__margin-breakpoints !default; + h1, .h1, h2, .h2, h3, .h3, diff --git a/src/scss/core/helpers/_sizing.scss b/src/scss/core/helpers/_sizing.scss deleted file mode 100644 index 1171fe0..0000000 --- a/src/scss/core/helpers/_sizing.scss +++ /dev/null @@ -1,11 +0,0 @@ -/** - * - * - * - * - */ - -@mixin plain-ui__helpers__sizing() -{ - -} \ No newline at end of file diff --git a/src/scss/core/helpers/_core.scss b/src/scss/helpers/_core.scss similarity index 90% rename from src/scss/core/helpers/_core.scss rename to src/scss/helpers/_core.scss index 4d50e3e..4e1ae50 100644 --- a/src/scss/core/helpers/_core.scss +++ b/src/scss/helpers/_core.scss @@ -29,6 +29,31 @@ border-radius: 0 !important; } + /** + * z-index + * + * + */ + + $plain-ui__z-index: 10; + + @for $i from 1 through $plain-ui__z-index { + .z-index-#{$i} { + z-index: $i; + } + } + + /** + * + * + */ + + @for $i from 1 through $reflex-columns { + .w-col-#{$i} { + width: percentage(($i / $reflex-columns)); + } + } + /** * * diff --git a/src/scss/layout/_flex.scss b/src/scss/layout/_flex.scss index 70e1c7d..7ddf283 100644 --- a/src/scss/layout/_flex.scss +++ b/src/scss/layout/_flex.scss @@ -1,4 +1,3 @@ @import 'reflex-grid'; -$reflex-prefix: 'flex'; $legacy-support: false; \ No newline at end of file diff --git a/src/scss/layout/_masonry.scss b/src/scss/layout/_masonry.scss index b4ab861..2e2523d 100644 --- a/src/scss/layout/_masonry.scss +++ b/src/scss/layout/_masonry.scss @@ -1,10 +1,25 @@ /** + * masonry * + *
+ *
* + *
+ *
* * */ -@mixin plain-ui__layout__masonry() { + +@mixin plain-ui__layout__masonry() +{ + $plain-ui__masonry_sizes: ( + 1: 25%, + 2: 55%, + 3: 20%, + 4: 67%, + 5: 33% + ) !default; + .masonry { display: flex; width: 100%; @@ -19,24 +34,10 @@ @include plain-ui__media-sm() { height: 300px; - &:nth-child(4n+1) { - width: 25%; - } - - &:nth-child(4n+2) { - width: 55%; - } - - &:nth-child(4n+3) { - width: 20%; - } - - &:nth-child(4n+4) { - width: 67%; - } - - &:nth-child(4n+5) { - width: 33%; + @each $index, $size in $plain-ui__masonry_sizes { + &:nth-child(4n+#{$index}) { + width: #{$size}; + } } } } diff --git a/src/scss/plain-ui.scss b/src/scss/plain-ui.scss index 9cb8b5f..f018264 100644 --- a/src/scss/plain-ui.scss +++ b/src/scss/plain-ui.scss @@ -1,13 +1,14 @@ @import '../fonts/stylesheet', + 'node_modules/reflex-grid/scss/reflex', 'functions', 'mixins', 'variables', 'core', - 'core/helpers/core', + 'helpers/core', 'components/badge', 'components/button', @@ -21,7 +22,8 @@ 'components/slider', 'components/bar', - 'layout/masonry'; + 'layout/masonry', + 'layout/flex'; @include plain-ui__core(); @include plain-ui__helpers__core(); diff --git a/src/scss/views/_dark.scss b/src/scss/themes/_dark.scss similarity index 100% rename from src/scss/views/_dark.scss rename to src/scss/themes/_dark.scss diff --git a/src/scss/views/_light.scss b/src/scss/themes/_light.scss similarity index 100% rename from src/scss/views/_light.scss rename to src/scss/themes/_light.scss