@charset "UTF-8"; @font-face { font-family: "IBM Plex Mono"; src: url(/fonts/IBMPlexMono.eot?85f924ecb898e5720062617e4a86f1d1); src: url(/fonts/IBMPlexMono.eot?85f924ecb898e5720062617e4a86f1d1) format("embedded-opentype"), url(/fonts/IBMPlexMono.woff2?db620201a437f00ce78da2a10cf50f3f) format("woff2"), url(/fonts/IBMPlexMono.woff?3d04ef6de65d3c77bd60c158326be298) format("woff"), url(/fonts/IBMPlexMono.ttf?ce51a85eb7160067d01bcf6e56f837d1) format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url(/fonts/IBMPlexMono-Bold.eot?eb105b142ce736849ef4828cb0c8eb34); src: url(/fonts/IBMPlexMono-Bold.eot?eb105b142ce736849ef4828cb0c8eb34) format("embedded-opentype"), url(/fonts/IBMPlexMono-Bold.woff2?8b633c62813e0275ebd7a1c793c4e99c) format("woff2"), url(/fonts/IBMPlexMono-Bold.woff?b72090c625b4144f3763d5b2bf8f5942) format("woff"), url(/fonts/IBMPlexMono-Bold.ttf?558e55bd46468bb8d7074d7064d02c30) format("truetype"); font-weight: bold; font-style: normal; font-display: swap; } /** * 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%; } 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; } /** * * * * */ /** * * * */ /** * * * * */ /** * * * * */ /** *
* image *
* */ /** * * * */ /** *
* *
* food truck yr franzen pabst *
*
* */ /** * * * */ /** *
* *
* food truck yr franzen pabst *
*
* */ a { color: #fff; } a:focus { outline: none; } /** * body * * * * line-height and breakpoints * font-size and breakpoints * */ body { font-family: "IBM Plex Mono", sans-serif; background-color: #f9f9f9; direction: ltr; font-size: 1rem; line-height: 1.4; } .badge { display: inline-block; background-color: #3e3e3e; color: white; font-size: 0.85rem; padding: 0.4em 0.8em; border: 1px solid #3e3e3e; border-radius: 2px; } .badge--round { display: inline-flex; justify-content: center; border-radius: 50%; width: 2.5em; } .button { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; display: inline-block; text-decoration: none; font-family: "IBM Plex Mono", sans-serif; border: 1px solid #3e3e3e; background-color: white; color: #3e3e3e; border-radius: 2px; transition: background-color 0.1s; margin-bottom: 0.5em; padding: 0.5em 1.3em; font-size: 1rem; width: 100%; } @media only screen and (min-width: 768px) { .button { width: auto; } } .button--small { font-size: 0.8em; } .button:hover { cursor: pointer; text-decoration: none; color: white; background-color: #3e3e3e; } .button:focus, .button:active { outline: 1px solid #646464; } .button:disabled { opacity: 0.5; } .button:disabled:hover { cursor: not-allowed; border: 1px solid #3e3e3e; background-color: white; color: #3e3e3e; } .button--danger { border-color: #d95959; } .button--danger:hover { background-color: #d95959; } .button--danger:focus, .button--danger:active { outline: 2px solid #e79797; } .field-group { margin-bottom: 1.2em; } .field-group--valid input.field-text, .field-group--valid textarea.field-text { border-color: #64ac64; } .field-group--valid .icon { fill: #64ac64; } .field-group--error input.field-text, .field-group--error textarea.field-text { border-color: #d95959; } .field-group--error .icon { fill: #d95959; } .field-label { font-size: 1rem; font-family: "IBM Plex Mono", sans-serif; } .field-label .icon { vertical-align: sub; font-size: 1.1rem; } .field-label:hover { cursor: pointer; } input.field-text, textarea.field-text, select.field-choice { font-family: "IBM Plex Mono", sans-serif; font-size: 0.95rem; width: 100%; border: 1px solid #a4a4a4; background-color: white; border-radius: 2px; margin: 0.7em 0 0; } input.field-text:focus, input.field-text:active, textarea.field-text:focus, textarea.field-text:active, select.field-choice:focus, select.field-choice:active { outline: 0; border-color: #3e3e3e; } input.field-text, textarea.field-text { padding: 0.8em 1.1em; } /** * * */ select.field-choice { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0.8em; position: relative; } select.field-choice::after { position: absolute; right: 0; top: 0; display: block; content: " "; width: 10px; height: 10px; background: red; } /** * radio & checkbox * *
* *
* */ input[type=checkbox].field-choice, input[type=radio].field-choice { position: relative; display: none; } input[type=checkbox].field-choice ~ .field-choice__checked, input[type=radio].field-choice ~ .field-choice__checked { display: none; } input[type=checkbox].field-choice:checked ~ .field-choice__checked, input[type=radio].field-choice:checked ~ .field-choice__checked { display: inline-block; } input[type=checkbox].field-choice:checked ~ .field-choice__unchecked, input[type=radio].field-choice:checked ~ .field-choice__unchecked { display: none; } svg.field-choice__unchecked { fill: #a4a4a4; } svg.field-choice__checked { fill: #64ac64; } .field-help, .field-error { display: inline-block; width: 100%; padding: 0.6em 0.5em; font-size: 0.8rem; } .field-error { color: #d95959; } .icon { width: 1em; height: 1em; max-height: 100%; max-width: 100%; vertical-align: middle; overflow: hidden; font-size: 1.2rem; fill: #3e3e3e; } .icon--success { fill: #64ac64; } .icon--danger { fill: #d95959; } .panel { border: 1px solid #3e3e3e; border-radius: 2px; background: #fff; } .panel__header { display: flex; background-color: #3e3e3e; color: white; padding: 0.8em 1.2em; line-height: 1.6em; } .panel__header button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: none; padding: 0; } .panel__header button:hover { cursor: pointer; } .panel__header .icon { vertical-align: bottom; width: 1.5em; height: 1.5em; margin-right: 0.5em; fill: white; } .panel__buttons { display: flex; justify-content: end; width: 100%; } .panel__buttons button:last-child .icon { margin-right: 0; } .panel__body { padding: 0.6em 1.2em; } .figure { margin: 0; display: inline-block; line-height: 0; border: 1px solid #3e3e3e; border-radius: 2px; overflow: hidden; } .figure__caption { padding: 0.75em 1.1em; font-size: 0.7rem; background: #3e3e3e; line-height: 1.4; margin: 0; color: white; } .figure img.media { border: 0; } img.media { border-radius: 2px; border: 1px solid #3e3e3e; width: 100%; height: auto; } .table { width: 100%; border: 1px solid #cacaca; background: white; } .table--striped tr:nth-child(even) { background-color: #fdfdfd; } .table--scroll { overflow-x: auto; } .table td { color: #3e3e3e; } .table td, .table th { text-align: left; border-bottom: 1px solid #cacaca; padding: 0.5em 1.25em; } .table th { border-bottom: 1px solid #8b8b8b; background-color: #e4e4e4; } .table tr:hover { background-color: #e4e4e4; } .hero { position: relative; } .hero img { width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; } .hero--contain { -o-object-fit: contain; object-fit: contain; } .masonry { display: flex; flex-direction: column; flex-wrap: wrap; width: 100%; } .masonry__item { width: 33.3%; flex: 1; }