c3woc/podcast-webseite
1
0
Fork 0
Code Issues Pull requests Releases Activity

Add sass

Browse source
This commit is contained in:
L3D 2019-05-25 21:43:29 +02:00
parent 3ffad512d8
commit 5b8cbc4035
Signed by: l3d
GPG key ID: CD08445BFF4313D1
28 changed files with 3346 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
assets/sass/ie9.scss Normal file
View file

@ -0,0 +1,54 @@
@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import 'libs/skel';
/*
Landed by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
/* Loader */
body.landing {
&::before,
&::after {
display: none !important;
}
}
/* Icon */
.icon {
&.alt {
color: inherit !important;
}
&.major {
&.alt {
&::before {
color: _palette(fg-bold) !important;
}
}
}
}
/* Banner */
#banner {
&::after {
background-color: _palette(bg-transparent);
}
}
/* Footer */
#footer {
.icons {
.icon {
&.alt {
&::before {
color: _palette(fg-bold) !important;
}
}
}
}
}

34
assets/sass/libs/_functions.scss Normal file
View file

@ -0,0 +1,34 @@
/// Gets a duration value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _duration($keys...) {
@return val($duration, $keys...);
}
/// Gets a font value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _font($keys...) {
@return val($font, $keys...);
}
/// Gets a misc value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _misc($keys...) {
@return val($misc, $keys...);
}
/// Gets a palette value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _palette($keys...) {
@return val($palette, $keys...);
}
/// Gets a size value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _size($keys...) {
@return val($size, $keys...);
}

377
assets/sass/libs/_mixins.scss Normal file
View file

@ -0,0 +1,377 @@
/// Makes an element's :before pseudoelement a "Font Awesome 5 Free" icon.
/// @param {string} $content Optional content value to use.
/// @param {string} $where Optional pseudoelement to target (before or after).
@mixin icon($content: false, $where: before) {
text-decoration: none;
&:#{$where} {
@if $content {
content: $content;
}
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
text-transform: none !important;
}
}
/// Applies padding to an element, taking the current element-margin value into account.
/// @param {mixed} $tb Top/bottom padding.
/// @param {mixed} $lr Left/right padding.
/// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left)
/// @param {bool} $important If true, adds !important.
@mixin padding($tb, $lr, $pad: (0, 0, 0, 0), $important: null) {
@if $important {
$important: '!important';
}
$x: 0.1em;
@if unit(_size(element-margin)) == 'rem' {
$x: 0.1rem;
}
padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important};
}
/// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp).
/// @param {string} $svg SVG data URL.
/// @return {string} Encoded SVG data URL.
@function svg-url($svg) {
$svg: str-replace($svg, '"', '\'');
$svg: str-replace($svg, '%', '%25');
$svg: str-replace($svg, '<', '%3C');
$svg: str-replace($svg, '>', '%3E');
$svg: str-replace($svg, '&', '%26');
$svg: str-replace($svg, '#', '%23');
$svg: str-replace($svg, '{', '%7B');
$svg: str-replace($svg, '}', '%7D');
$svg: str-replace($svg, ';', '%3B');
@return url("data:image/svg+xml;charset=utf8,#{$svg}");
}
/// Initializes base flexgrid classes.
/// @param {string} $vertical-align Vertical alignment of cells.
/// @param {string} $horizontal-align Horizontal alignment of cells.
@mixin flexgrid-base($vertical-align: null, $horizontal-align: null) {
// Grid.
@include vendor('display', 'flex');
@include vendor('flex-wrap', 'wrap');
// Vertical alignment.
@if ($vertical-align == top) {
@include vendor('align-items', 'flex-start');
}
@else if ($vertical-align == bottom) {
@include vendor('align-items', 'flex-end');
}
@else if ($vertical-align == center) {
@include vendor('align-items', 'center');
}
@else {
@include vendor('align-items', 'stretch');
}
// Horizontal alignment.
@if ($horizontal-align != null) {
text-align: $horizontal-align;
}
// Cells.
> * {
@include vendor('flex-shrink', '1');
@include vendor('flex-grow', '0');
}
}
/// Sets up flexgrid columns.
/// @param {integer} $columns Columns.
@mixin flexgrid-columns($columns) {
> * {
$cell-width: 100% / $columns;
width: #{$cell-width};
}
}
/// Sets up flexgrid gutters.
/// @param {integer} $columns Columns.
/// @param {number} $gutters Gutters.
@mixin flexgrid-gutters($columns, $gutters) {
// Apply padding.
> * {
$cell-width: 100% / $columns;
padding: ($gutters * 0.5);
width: $cell-width;
}
}
/// Sets up flexgrid gutters (flush).
/// @param {integer} $columns Columns.
/// @param {number} $gutters Gutters.
@mixin flexgrid-gutters-flush($columns, $gutters) {
// Apply padding.
> * {
$cell-width: 100% / $columns;
$cell-width-pad: $gutters / $columns;
padding: ($gutters * 0.5);
width: calc(#{$cell-width} + #{$cell-width-pad});
}
// Clear top/bottom gutters.
> :nth-child(-n + #{$columns}) {
padding-top: 0;
}
> :nth-last-child(-n + #{$columns}) {
padding-bottom: 0;
}
// Clear left/right gutters.
> :nth-child(#{$columns}n + 1) {
padding-left: 0;
}
> :nth-child(#{$columns}n) {
padding-right: 0;
}
// Adjust widths of leftmost and rightmost cells.
> :nth-child(#{$columns}n + 1),
> :nth-child(#{$columns}n) {
$cell-width: 100% / $columns;
$cell-width-pad: ($gutters / $columns) - ($gutters / 2);
width: calc(#{$cell-width} + #{$cell-width-pad});
}
}
/// Reset flexgrid gutters (flush only).
/// Used to override a previous set of flexgrid gutter classes.
/// @param {integer} $columns Columns.
/// @param {number} $gutters Gutters.
/// @param {integer} $prev-columns Previous columns.
@mixin flexgrid-gutters-flush-reset($columns, $gutters, $prev-columns) {
// Apply padding.
> * {
$cell-width: 100% / $prev-columns;
$cell-width-pad: $gutters / $prev-columns;
padding: ($gutters * 0.5);
width: calc(#{$cell-width} + #{$cell-width-pad});
}
// Clear top/bottom gutters.
> :nth-child(-n + #{$prev-columns}) {
padding-top: ($gutters * 0.5);
}
> :nth-last-child(-n + #{$prev-columns}) {
padding-bottom: ($gutters * 0.5);
}
// Clear left/right gutters.
> :nth-child(#{$prev-columns}n + 1) {
padding-left: ($gutters * 0.5);
}
> :nth-child(#{$prev-columns}n) {
padding-right: ($gutters * 0.5);
}
// Adjust widths of leftmost and rightmost cells.
> :nth-child(#{$prev-columns}n + 1),
> :nth-child(#{$prev-columns}n) {
$cell-width: 100% / $columns;
$cell-width-pad: $gutters / $columns;
padding: ($gutters * 0.5);
width: calc(#{$cell-width} + #{$cell-width-pad});
}
}
/// Adds debug styles to current flexgrid element.
@mixin flexgrid-debug() {
box-shadow: 0 0 0 1px red;
> * {
box-shadow: inset 0 0 0 1px blue;
position: relative;
> * {
position: relative;
box-shadow: inset 0 0 0 1px green;
}
}
}
/// Initializes the current element as a flexgrid.
/// @param {integer} $columns Columns (optional).
/// @param {number} $gutters Gutters (optional).
/// @param {bool} $flush If true, clears padding around the very edge of the grid.
@mixin flexgrid($settings: ()) {
// Settings.
// Debug.
$debug: false;
@if (map-has-key($settings, 'debug')) {
$debug: map-get($settings, 'debug');
}
// Vertical align.
$vertical-align: null;
@if (map-has-key($settings, 'vertical-align')) {
$vertical-align: map-get($settings, 'vertical-align');
}
// Horizontal align.
$horizontal-align: null;
@if (map-has-key($settings, 'horizontal-align')) {
$horizontal-align: map-get($settings, 'horizontal-align');
}
// Columns.
$columns: null;
@if (map-has-key($settings, 'columns')) {
$columns: map-get($settings, 'columns');
}
// Gutters.
$gutters: 0;
@if (map-has-key($settings, 'gutters')) {
$gutters: map-get($settings, 'gutters');
}
// Flush.
$flush: true;
@if (map-has-key($settings, 'flush')) {
$flush: map-get($settings, 'flush');
}
// Initialize base grid.
@include flexgrid-base($vertical-align, $horizontal-align);
// Debug?
@if ($debug) {
@include flexgrid-debug;
}
// Columns specified?
@if ($columns != null) {
// Initialize columns.
@include flexgrid-columns($columns);
// Gutters specified?
@if ($gutters > 0) {
// Flush gutters?
@if ($flush) {
// Initialize gutters (flush).
@include flexgrid-gutters-flush($columns, $gutters);
}
// Otherwise ...
@else {
// Initialize gutters.
@include flexgrid-gutters($columns, $gutters);
}
}
}
}
/// Resizes a previously-initialized grid.
/// @param {integer} $columns Columns.
/// @param {number} $gutters Gutters (optional).
/// @param {list} $reset A list of previously-initialized grid columns (only if $flush is true).
/// @param {bool} $flush If true, clears padding around the very edge of the grid.
@mixin flexgrid-resize($settings: ()) {
// Settings.
// Columns.
$columns: 1;
@if (map-has-key($settings, 'columns')) {
$columns: map-get($settings, 'columns');
}
// Gutters.
$gutters: 0;
@if (map-has-key($settings, 'gutters')) {
$gutters: map-get($settings, 'gutters');
}
// Previous columns.
$prev-columns: false;
@if (map-has-key($settings, 'prev-columns')) {
$prev-columns: map-get($settings, 'prev-columns');
}
// Flush.
$flush: true;
@if (map-has-key($settings, 'flush')) {
$flush: map-get($settings, 'flush');
}
// Resize columns.
@include flexgrid-columns($columns);
// Gutters specified?
@if ($gutters > 0) {
// Flush gutters?
@if ($flush) {
// Previous columns specified?
@if ($prev-columns) {
// Convert to list if it isn't one already.
@if (type-of($prev-columns) != list) {
$prev-columns: ($prev-columns);
}
// Step through list of previous columns and reset them.
@each $x in $prev-columns {
@include flexgrid-gutters-flush-reset($columns, $gutters, $x);
}
}
// Resize gutters (flush).
@include flexgrid-gutters-flush($columns, $gutters);
}
// Otherwise ...
@else {
// Resize gutters.
@include flexgrid-gutters($columns, $gutters);
}
}
}

548
assets/sass/libs/_skel.scss Normal file
View file

@ -0,0 +1,548 @@
// skel.scss v3.0.2-dev | (c) skel.io | MIT licensed */
// Vars.
/// Breakpoints.
/// @var {list}
$breakpoints: () !global;
/// Vendor prefixes.
/// @var {list}
$vendor-prefixes: (
'-moz-',
'-webkit-',
'-ms-',
''
);
/// Properties that should be vendorized.
/// @var {list}
$vendor-properties: (
'align-content',
'align-items',
'align-self',
'animation',
'animation-delay',
'animation-direction',
'animation-duration',
'animation-fill-mode',
'animation-iteration-count',
'animation-name',
'animation-play-state',
'animation-timing-function',
'appearance',
'backface-visibility',
'box-sizing',
'filter',
'flex',
'flex-basis',
'flex-direction',
'flex-flow',
'flex-grow',
'flex-shrink',
'flex-wrap',
'justify-content',
'object-fit',
'object-position',
'order',
'perspective',
'pointer-events',
'transform',
'transform-origin',
'transform-style',
'transition',
'transition-delay',
'transition-duration',
'transition-property',
'transition-timing-function',
'user-select'
);
/// Values that should be vendorized.
/// @var {list}
$vendor-values: (
'filter',
'flex',
'linear-gradient',
'radial-gradient',
'transform'
);
// Functions.
/// Removes a specific item from a list.
/// @author Hugo Giraudel
/// @param {list} $list List.
/// @param {integer} $index Index.
/// @return {list} Updated list.
@function remove-nth($list, $index) {
$result: null;
@if type-of($index) != number {
@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
}
@else if $index == 0 {
@warn "List index 0 must be a non-zero integer for `remove-nth`.";
}
@else if abs($index) > length($list) {
@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
}
@else {
$result: ();
$index: if($index < 0, length($list) + $index + 1, $index);
@for $i from 1 through length($list) {
@if $i != $index {
$result: append($result, nth($list, $i));
}
}
}
@return $result;
}
/// Replaces a substring within another string.
/// @author Hugo Giraudel
/// @param {string} $string String.
/// @param {string} $search Substring.
/// @param {string} $replace Replacement.
/// @return {string} Updated string.
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
/// Replaces a substring within each string in a list.
/// @param {list} $strings List of strings.
/// @param {string} $search Substring.
/// @param {string} $replace Replacement.
/// @return {list} Updated list of strings.
@function str-replace-all($strings, $search, $replace: '') {
@each $string in $strings {
$strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace));
}
@return $strings;
}
/// Gets a value from a map.
/// @author Hugo Giraudel
/// @param {map} $map Map.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function val($map, $keys...) {
@if nth($keys, 1) == null {
$keys: remove-nth($keys, 1);
}
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
// Mixins.
/// Sets the global box model.
/// @param {string} $model Model (default is content).
@mixin boxModel($model: 'content') {
$x: $model + '-box';
*, *::before,
*::after {
-moz-box-sizing: #{$x};
-webkit-box-sizing: #{$x};
box-sizing: #{$x};
}
}
/// Wraps @content in a @media block using a given breakpoint.
/// @param {string} $breakpoint Breakpoint.
/// @param {map} $queries Additional queries.
@mixin breakpoint($breakpoint: null, $queries: null) {
$query: 'screen';
// Breakpoint.
@if $breakpoint and map-has-key($breakpoints, $breakpoint) {
$query: $query + ' and ' + map-get($breakpoints, $breakpoint);
}
// Queries.
@if $queries {
@each $k, $v in $queries {
$query: $query + ' and (' + $k + ':' + $v + ')';
}
}
@media #{$query} {
@content;
}
}
/// Wraps @content in a @media block targeting a specific orientation.
/// @param {string} $orientation Orientation.
@mixin orientation($orientation) {
@media screen and (orientation: #{$orientation}) {
@content;
}
}
/// Utility mixin for containers.
/// @param {mixed} $width Width.
@mixin containers($width) {
// Locked?
$lock: false;
@if length($width) == 2 {
$width: nth($width, 1);
$lock: true;
}
// Modifiers.
.container.\31 25\25 { width: 100%; max-width: $width * 1.25; min-width: $width; }
.container.\37 5\25 { width: $width * 0.75; }
.container.\35 0\25 { width: $width * 0.5; }
.container.\32 5\25 { width: $width * 0.25; }
// Main class.
.container {
@if $lock {
width: $width !important;
}
@else {
width: $width;
}
}
}
/// Utility mixin for grid.
/// @param {list} $gutters Column and row gutters (default is 40px).
/// @param {string} $breakpointName Optional breakpoint name.
@mixin grid($gutters: 40px, $breakpointName: null) {
// Gutters.
@include grid-gutters($gutters);
@include grid-gutters($gutters, \32 00\25, 2);
@include grid-gutters($gutters, \31 50\25, 1.5);
@include grid-gutters($gutters, \35 0\25, 0.5);
@include grid-gutters($gutters, \32 5\25, 0.25);
// Cells.
$x: '';
@if $breakpointName {
$x: '\\28' + $breakpointName + '\\29';
}
.\31 2u#{$x}, .\31 2u\24#{$x} { width: 100%; clear: none; margin-left: 0; }
.\31 1u#{$x}, .\31 1u\24#{$x} { width: 91.6666666667%; clear: none; margin-left: 0; }
.\31 0u#{$x}, .\31 0u\24#{$x} { width: 83.3333333333%; clear: none; margin-left: 0; }
.\39 u#{$x}, .\39 u\24#{$x} { width: 75%; clear: none; margin-left: 0; }
.\38 u#{$x}, .\38 u\24#{$x} { width: 66.6666666667%; clear: none; margin-left: 0; }
.\37 u#{$x}, .\37 u\24#{$x} { width: 58.3333333333%; clear: none; margin-left: 0; }
.\36 u#{$x}, .\36 u\24#{$x} { width: 50%; clear: none; margin-left: 0; }
.\35 u#{$x}, .\35 u\24#{$x} { width: 41.6666666667%; clear: none; margin-left: 0; }
.\34 u#{$x}, .\34 u\24#{$x} { width: 33.3333333333%; clear: none; margin-left: 0; }
.\33 u#{$x}, .\33 u\24#{$x} { width: 25%; clear: none; margin-left: 0; }
.\32 u#{$x}, .\32 u\24#{$x} { width: 16.6666666667%; clear: none; margin-left: 0; }
.\31 u#{$x}, .\31 u\24#{$x} { width: 8.3333333333%; clear: none; margin-left: 0; }
.\31 2u\24#{$x} + *,
.\31 1u\24#{$x} + *,
.\31 0u\24#{$x} + *,
.\39 u\24#{$x} + *,
.\38 u\24#{$x} + *,
.\37 u\24#{$x} + *,
.\36 u\24#{$x} + *,
.\35 u\24#{$x} + *,
.\34 u\24#{$x} + *,
.\33 u\24#{$x} + *,
.\32 u\24#{$x} + *,
.\31 u\24#{$x} + * {
clear: left;
}
.\-11u#{$x} { margin-left: 91.6666666667% }
.\-10u#{$x} { margin-left: 83.3333333333% }
.\-9u#{$x} { margin-left: 75% }
.\-8u#{$x} { margin-left: 66.6666666667% }
.\-7u#{$x} { margin-left: 58.3333333333% }
.\-6u#{$x} { margin-left: 50% }
.\-5u#{$x} { margin-left: 41.6666666667% }
.\-4u#{$x} { margin-left: 33.3333333333% }
.\-3u#{$x} { margin-left: 25% }
.\-2u#{$x} { margin-left: 16.6666666667% }
.\-1u#{$x} { margin-left: 8.3333333333% }
}
/// Utility mixin for grid.
/// @param {list} $gutters Gutters.
/// @param {string} $class Optional class name.
/// @param {integer} $multiplier Multiplier (default is 1).
@mixin grid-gutters($gutters, $class: null, $multiplier: 1) {
// Expand gutters if it's not a list.
@if length($gutters) == 1 {
$gutters: ($gutters, 0);
}
// Get column and row gutter values.
$c: nth($gutters, 1);
$r: nth($gutters, 2);
// Get class (if provided).
$x: '';
@if $class {
$x: '.' + $class;
}
// Default.
.row#{$x} > * { padding: ($r * $multiplier) 0 0 ($c * $multiplier); }
.row#{$x} { margin: ($r * $multiplier * -1) 0 -1px ($c * $multiplier * -1); }
// Uniform.
.row.uniform#{$x} > * { padding: ($c * $multiplier) 0 0 ($c * $multiplier); }
.row.uniform#{$x} { margin: ($c * $multiplier * -1) 0 -1px ($c * $multiplier * -1); }
}
/// Wraps @content in vendorized keyframe blocks.
/// @param {string} $name Name.
@mixin keyframes($name) {
@-moz-keyframes #{$name} { @content; }
@-webkit-keyframes #{$name} { @content; }
@-ms-keyframes #{$name} { @content; }
@keyframes #{$name} { @content; }
}
/// Sets breakpoints.
/// @param {map} $x Breakpoints.
@mixin skel-breakpoints($x: ()) {
$breakpoints: $x !global;
}
/// Initializes layout module.
/// @param {map} config Config.
@mixin skel-layout($config: ()) {
// Config.
$configPerBreakpoint: ();
$z: map-get($config, 'breakpoints');
@if $z {
$configPerBreakpoint: $z;
}
// Reset.
$x: map-get($config, 'reset');
@if $x {
/* Reset */
@include reset($x);
}
// Box model.
$x: map-get($config, 'boxModel');
@if $x {
/* Box Model */
@include boxModel($x);
}
// Containers.
$containers: map-get($config, 'containers');
@if $containers {
/* Containers */
.container {
margin-left: auto;
margin-right: auto;
}
// Use default is $containers is just "true".
@if $containers == true {
$containers: 960px;
}
// Apply base.
@include containers($containers);
// Apply per-breakpoint.
@each $name in map-keys($breakpoints) {
// Get/use breakpoint setting if it exists.
$x: map-get($configPerBreakpoint, $name);
// Per-breakpoint config exists?
@if $x {
$y: map-get($x, 'containers');
// Setting exists? Use it.
@if $y {
$containers: $y;
}
}
// Create @media block.
@media screen and #{map-get($breakpoints, $name)} {
@include containers($containers);
}
}
}
// Grid.
$grid: map-get($config, 'grid');
@if $grid {
/* Grid */
// Use defaults if $grid is just "true".
@if $grid == true {
$grid: ();
}
// Sub-setting: Gutters.
$grid-gutters: 40px;
$x: map-get($grid, 'gutters');
@if $x {
$grid-gutters: $x;
}
// Rows.
.row {
border-bottom: solid 1px transparent;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.row > * {
float: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.row::after,
.row::before {
content: '';
display: block;
clear: both;
height: 0;
}
.row.uniform > * > :first-child {
margin-top: 0;
}
.row.uniform > * > :last-child {
margin-bottom: 0;
}
// Gutters (0%).
@include grid-gutters($grid-gutters, \30 \25, 0);
// Apply base.
@include grid($grid-gutters);
// Apply per-breakpoint.
@each $name in map-keys($breakpoints) {
// Get/use breakpoint setting if it exists.
$x: map-get($configPerBreakpoint, $name);
// Per-breakpoint config exists?
@if $x {
$y: map-get($x, 'grid');
// Setting exists?
@if $y {
// Sub-setting: Gutters.
$x: map-get($y, 'gutters');
@if $x {
$grid-gutters: $x;
}
}
}
// Create @media block.
@media screen and #{map-get($breakpoints, $name)} {
@include grid($grid-gutters, $name);
}
}
}
}
/// Resets browser styles.
/// @param {string} $mode Mode (default is 'normalize').
@mixin reset($mode: 'normalize') {
@if $mode == 'normalize' {
// normalize.css v3.0.2 | MIT License | git.io/normalize
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
}
@else if $mode == 'full' {
// meyerweb.com/eric/tools/css/reset v2.0 | 20110126 | License: none (public domain)
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote::before,blockquote::after,q::before,q::after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{-webkit-text-size-adjust:none}
}
}
/// Vendorizes a declaration's property and/or value(s).
/// @param {string} $property Property.
/// @param {mixed} $value String/list of value(s).
@mixin vendor($property, $value) {
// Determine if property should expand.
$expandProperty: index($vendor-properties, $property);
// Determine if value should expand (and if so, add '-prefix-' placeholder).
$expandValue: false;
@each $x in $value {
@each $y in $vendor-values {
@if $y == str-slice($x, 1, str-length($y)) {
$value: set-nth($value, index($value, $x), '-prefix-' + $x);
$expandValue: true;
}
}
}
// Expand property?
@if $expandProperty {
@each $vendor in $vendor-prefixes {
#{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
}
}
// Expand just the value?
@elseif $expandValue {
@each $vendor in $vendor-prefixes {
#{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
}
}
// Neither? Treat them as a normal declaration.
@else {
#{$property}: #{$value};
}
}

56
assets/sass/libs/_vars.scss Normal file
View file

@ -0,0 +1,56 @@
// Misc.
$misc: (
z-index-base: 10000,
z-index-overlay: 100000,
max-spotlight: 20
);
// Duration.
$duration: (
navPanel: 0.5s,
transition: 0.2s,
landing-fadein: 0.5s
);
// Size.
$size: (
border-radius: 4px,
element-height: 2.4em,
element-margin: 2em,
navPanel: 275px
);
// Font.
$font: (
family: ('Roboto', Helvetica, sans-serif),
family-fixed: ('Courier New', monospace),
weight: 300,
weight-bold: 400
);
// Palette.
$palette: (
bg: #1c1d26,
bg-transparent: rgba(23, 24, 32, 0.95),
bg-very-transparent: rgba(23, 24, 32, 0.9),
fg-bold: #ffffff,
fg: rgba(255,255, 255, 0.75),
fg-light: rgba(255, 255, 255, 0.5),
fg-lighter: rgba(255, 255, 255, 0.15),
border: rgba(255, 255, 255, 0.3),
border-bg: rgba(255, 255, 255, 0.075),
border2: rgba(255, 255, 255, 0.5),
border2-bg: rgba(255, 255, 255, 0.25),
accent3: #9B160F,
link: rgba(200, 200, 255, 0.75),
accent2: #272833,
accent2-transparent:rgba(39, 40, 51, 0.965),
accent1: #E64F2D,
accent4: #D74126,
nav-accent: rgb(230, 79, 45),
);
//pictures startpage
$picture-startpage: (
scroll-1: url(/images/home/abschnitt1.jpeg),
);

119
assets/sass/main.scss Normal file
View file

@ -0,0 +1,119 @@
@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import url("/css/font-awesome.min.css");
@import url("/fonts/roboto.css");
@import url("https://c3woc.de/css/spacestatus.css");
@import "libs/skel";
@import 'parts/startpage';
/*
Landed by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
Modified by Toolbox Bodensee e.V.
*/
@include skel-breakpoints((
xlarge: '(max-width: 1680px)',
large: '(max-width: 1280px)',
medium: '(max-width: 1100px)',
small: '(max-width: 933px)',
xsmall: '(max-width: 480px)'
));
@mixin breakpoint($point) {
@if $point == desktop {
@media (max-width: 1680px) { @content ; }
}
@else if $point == laptop {
@media (max-width: 1280px) { @content ; }
}
@else if $point == tablet {
@media (max-width: 1100px) { @content ; }
}
@else if $point == phablet {
@media (max-width: 933px) { @content ; }
}
@else if $point == mobileonly {
@media (max-width: 480px) { @content ; }
}
}
@include skel-layout((
reset: 'full',
boxModel: 'border',
grid: ( gutters: 2.5em ),
conditionals: true,
containers: 70em,
breakpoints: (
large: (
containers: 90%,
),
medium: (
containers: (100%, true),
)
)
));
@mixin line-icon($bg: _palette(bg), $fg: _palette(fg-bold)) {
@include icon;
$size: 1px;
&::before {
color: $bg !important;
text-shadow:
$size 0 0 $fg,
($size * -1) 0 0 $fg,
0 $size 0 $fg,
0 ($size * -1) 0 $fg;
}
}
$size-wrapper-pad-tb: 6em;
$size-wrapper-pad-lr: 3em;
@include breakpoint(laptop) {
$size-wrapper-pad-tb: 4.5em;
$size-wrapper-pad-lr: 2.5em;
}
@include breakpoint(tablet) {
$size-wrapper-pad-tb: 4.5em;
$size-wrapper-pad-lr: 2.5em;
}
@include breakpoint(phablet) {
$size-wrapper-pad-tb: 3.25em;
$size-wrapper-pad-lr: 1.5em;
}
@include breakpoint(mobileonly) {
$size-wrapper-pad-tb: 3em;
$size-wrapper-pad-lr: 1.25em;
}
@import 'parts/basic';
@import 'parts/loader';
@import 'parts/section-article';
@import 'parts/form';
@import 'parts/box';
@import 'parts/icon';
@import 'parts/image';
@import 'parts/list';
@import 'parts/table';
@import 'parts/button';
@import 'parts/goto-next';
@import 'parts/spotlight';
@import 'parts/wrapper';
@import 'parts/dropotron';
@import 'parts/header';
@import 'parts/banner';
@import 'parts/footer';
@import 'parts/project';
@import 'parts/col';
@import 'parts/youtube';

127
assets/sass/parts/_banner.scss Normal file
View file

@ -0,0 +1,127 @@
/* Banner */
#banner {
background-attachment: fixed;
background-color: _palette(accent2);
background-image: url('/images/banner.jpg');
background-position: center center;
background-size: cover;
box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
min-height: 100vh;
position: relative;
text-align: center;
z-index: (_misc(max-spotlight) + 1);
@include breakpoint(tablet) {
background-attachment: scroll;
.goto-next {
height: 7em;
}
}
@include breakpoint(phablet) {
box-shadow: 0 0.125em 0.5em 0 rgba(0, 0, 0, 0.25);
min-height: calc(100vh - 44px);
}
&::before {
content: '';
display: inline-block;
height: 100vh;
vertical-align: middle;
width: 1%;
@include breakpoint(phablet) {
height: calc(100vh - 44px);
}
}
&::after {
content: '';
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.content {
display: inline-block;
margin-right: 1%;
max-width: 95%;
padding: $size-wrapper-pad-tb;
position: relative;
text-align: right;
vertical-align: middle;
z-index: 1;
@include breakpoint(laptop) {
padding: $size-wrapper-pad-tb;
}
@include breakpoint(tablet) {
padding: ($size-wrapper-pad-tb * 2) 0;
text-align: center;
}
@include breakpoint(phablet) {
padding: ($size-wrapper-pad-tb * 1.25) $size-wrapper-pad-lr ($size-wrapper-pad-tb * 1.5) $size-wrapper-pad-lr;
}
@include breakpoint(mobileonly) {
padding: $size-wrapper-pad-tb ($size-wrapper-pad-lr * 1.25) ($size-wrapper-pad-tb * 1.75) ($size-wrapper-pad-lr * 1.25);
}
header {
display: inline-block;
vertical-align: middle;
@include breakpoint(tablet) {
display: block;
margin: 0 0 _size(element-margin) 0;
text-align: center;
}
h2 {
font-size: 2.5em;
margin: 0;
}
p {
margin: (_size(element-margin) * 0.25) 0 0 0;
top: 0;
}
}
.image {
border-radius: 0;
display: inline-block;
height: 18em;
margin-left: 3em;
vertical-align: middle;
width: 18em;
@include breakpoint(tablet) {
margin: 0;
}
@include breakpoint(phablet) {
height: 9em;
width: 9em;
}
img {
border-radius: 0;
display: block;
width: 100%;
}
}
}
}
body.is-touch {
#banner {
background-attachment: scroll;
}
}

218
assets/sass/parts/_basic.scss Normal file
View file

@ -0,0 +1,218 @@
/* Basic */
html,
body {
background: _palette(bg);
@include breakpoint(phablet) {
overflow-x: hidden;
}
@include breakpoint(mobileonly) {
min-width: 320px;
}
}
body {
&.is-loading {
*,
*::before,
*::after {
@include vendor('animation', 'none !important');
@include vendor('transition', 'none !important');
}
}
@include breakpoint(phablet) {
&.navPanel-visible {
#page-wrapper {
@include vendor('transform', 'translateX(#{_size(navPanel)})');
}
#titleBar {
@include vendor('transform', 'translateX(#{_size(navPanel)})');
}
#navPanel {
@include vendor('transform', 'translateX(0)');
}
}
}
}
body,
input,
select,
textarea {
color: _palette(fg);
font-family: _font(family);
font-size: 15pt;
font-weight: _font(weight);
line-height: 1.75em;
@include breakpoint(desktop) {
font-size: 13pt;
}
@include breakpoint(laptop) {
font-size: 12pt;
}
@include breakpoint(tablet) {
font-size: 12pt;
}
@include breakpoint(phablet) {
font-size: 12pt;
}
@include breakpoint(mobileonly) {
font-size: 12pt;
}
}
a {
@include vendor('transition', ('border-color #{_duration(transition)} ease-in-out', 'color #{_duration(transition)} ease-in-out'));
color: _palette(link);
text-decoration: none;
&:hover {
color: _palette(accent1) !important;
border-bottom-color: transparent;
}
}
strong,
b {
color: _palette(fg-bold);
font-weight: _font(weight-bold);
}
em,
i {
font-style: italic;
}
p {
margin: 0 0 _size(element-margin) 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: _palette(fg-bold);
font-weight: _font(weight-bold);
line-height: 1em;
margin: 0 0 (_size(element-margin) * 0.5) 0;
a {
color: inherit;
border: 0;
}
}
h2 {
font-size: 2em;
line-height: 1.5em;
letter-spacing: -0.025em;
@include breakpoint(phablet) {
font-size: 1.5em;
}
}
h3 {
font-size: 1.35em;
line-height: 1.5em;
@include breakpoint(phablet) {
font-size: 1.2em;
}
}
h4 {
font-size: 1.1em;
line-height: 1.5em;
@include breakpoint(phablet) {
font-size: 1em;
}
}
h5 {
font-size: 0.9em;
line-height: 1.5em;
}
h6 {
font-size: 0.7em;
line-height: 1.5em;
}
sub {
font-size: 0.8em;
position: relative;
top: 0.5em;
}
sup {
font-size: 0.8em;
position: relative;
top: -0.5em;
}
hr {
border: 0;
border-bottom: solid 1px _palette(border);
margin: (_size(element-margin) * 1.5) 0;
&.major {
margin: (_size(element-margin) * 2) 0;
}
}
blockquote {
border-left: solid 4px _palette(border);
font-style: italic;
margin: 0 0 _size(element-margin) 0;
padding: 0.5em 0 0.5em 2em;
}
code {
background: _palette(border-bg);
border-radius: _size(border-radius);
font-family: _font(family-fixed);
font-size: 0.9em;
margin: 0 0.25em;
padding: 0.25em 0.65em;
}
pre {
-webkit-overflow-scrolling: touch;
font-family: _font(family-fixed);
font-size: 0.9em;
margin: 0 0 _size(element-margin) 0;
code {
display: block;
line-height: 1.75em;
padding: 1em 1.5em;
overflow-x: auto;
}
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}

20
assets/sass/parts/_box.scss Normal file
View file

@ -0,0 +1,20 @@
/* Box */
.box {
border-radius: _size(border-radius);
border: solid 1px _palette(border);
margin-bottom: _size(element-margin);
padding: 1.5em;
> :last-child,
> :last-child > :last-child,
> :last-child > :last-child > :last-child {
margin-bottom: 0;
}
&.alt {
border: 0;
border-radius: 0;
padding: 0;
}
}

144
assets/sass/parts/_button.scss Normal file
View file

@ -0,0 +1,144 @@
/* Button */
input[type="submit"],
input[type="reset"],
input[type="button"],
.button {
@include vendor('appearance', 'none');
@include vendor('transition', ('background-color #{_duration(transition)} ease-in-out', 'color #{_duration(transition)} ease-in-out', 'box-shadow #{_duration(transition)} ease-in-out'));
background-color: transparent;
border-radius: _size(border-radius);
border: 0;
box-shadow: inset 0 0 0 2px _palette(border);
color: _palette(fg-bold) !important;
cursor: pointer;
display: inline-block;
font-weight: _font(weight-bold);
height: _size(element-height);
line-height: _size(element-height);
padding: 0 2.25em;
text-align: center;
text-decoration: none;
white-space: nowrap;
&:hover,
&:active {
box-shadow: inset 0 0 0 1px _palette(accent1);
color: _palette(accent1) !important;
}
&:active {
background-color: transparentize(_palette(accent1), 0.85);
}
&.icon {
&::before {
margin-right: 0.5em;
}
}
&.fit {
display: block;
margin: 0 0 (_size(element-margin) * 0.5) 0;
width: 100%;
height: auto;
white-space: normal;
}
&.small {
font-size: 0.8em;
}
&.big {
font-size: 1.35em;
}
&.special {
background-color: _palette(accent1);
box-shadow: none;
color: _palette(fg-bold) !important;
&:hover {
background-color: lighten(_palette(accent1), 5);
}
&:active {
background-color: darken(_palette(accent1), 5);
}
}
&.nav {
background-color: _palette(nav-accent);
box-shadow: none;
color: _palette(fg-bold) !important;
&:hover {
background-color: lighten(_palette(nav-accent), 5);
}
&:active {
background-color: darken(_palette(nav-accent), 5);
}
}
&.disabled,
&:disabled {
background-color: _palette(border) !important;
box-shadow: none !important;
color: _palette(fg-bold) !important;
cursor: default;
opacity: 0.25;
}
&.waffel-available {
background-color: LimeGreen !important;
&.navbar {
margin-left: -15px;
}
}
}
.no-waffles {
color: #d23128ff;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
position: absolute;
width: 230px;
margin-left: -100px;
font-size: 0.9em;
background-color: #555;
line-height: normal;
color: #fff;
text-align: center;
padding: 15px 0;
border-radius: 6px;
z-index: 1;
opacity: 0;
transition: opacity 0.3s;
top: 100%;
left: 50%;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #555 transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

43
assets/sass/parts/_col.scss Normal file
View file

@ -0,0 +1,43 @@
/* Columns */
.col-2 {
column-count: 2;
column-gap: 1vw;
height:auto;
> .button {
padding: 0;
}
&.long {
@include breakpoint(phablet) {
column-count: 1;
}
}
}
.col-3 {
column-count: 3;
column-gap: 1vw;
height:auto;
> .button {
padding: 0;
}
@include breakpoint(phablet) {
column-count: 2;
}
&.long {
@include breakpoint(phablet) {
column-count: 1;
}
}
}
.col-4 {
column-count: 4;
column-gap: 1vw;
height:auto;
> .button {
padding: 0;
}
@include breakpoint(phablet) {
column-count: 2;
}
}

66
assets/sass/parts/_dropotron.scss Normal file
View file

@ -0,0 +1,66 @@
/* Dropotron */
.dropotron {
background: _palette(accent2-transparent);
border-radius: _size(border-radius);
box-shadow: 0 0.075em 0.35em 0 rgba(0, 0, 0, 0.125);
list-style: none;
margin-top: calc(-0.25em + 1px);
min-width: 12em;
padding: 0.25em 0;
> li {
border-top: solid 1px rgba(255, 255, 255, 0.035);
padding: 0;
a,
span {
border: 0;
color: _palette(fg);
display: block;
padding: 0.1em 1em;
text-decoration: none;
}
&:first-child {
border-top: 0;
}
&.active {
> a,
> span {
color: _palette(accent1);
}
}
}
&.level-0 {
font-size: 0.8em;
margin-top: 1em;
@include breakpoint(laptop) {
font-size: 1em;
}
&::before {
@include vendor('transform', 'rotate(45deg)');
background: _palette(accent2);
content: '';
display: block;
height: 1em;
position: absolute;
right: 1.5em;
top: -0.5em;
width: 1em;
}
}
}
body.landing {
.dropotron {
&.level-0 {
margin-top: 0;
}
}
}

69
assets/sass/parts/_footer.scss Normal file
View file

@ -0,0 +1,69 @@
/* Footer */
#footer {
background: _palette(accent2);
padding: $size-wrapper-pad-tb 0;
text-align: center;
@include breakpoint(laptop) {
padding: $size-wrapper-pad-tb 0;
}
@include breakpoint(tablet) {
padding: $size-wrapper-pad-tb 0;
}
@include breakpoint(phablet) {
padding: $size-wrapper-pad-tb $size-wrapper-pad-lr;
}
@include breakpoint(mobileonly) {
padding: $size-wrapper-pad-tb $size-wrapper-pad-lr;
}
.icons {
.icon {
&.alt {
@include line-icon(_palette(accent2), _palette(fg-light));
}
}
}
.copyright {
color: _palette(fg-light);
font-size: 0.8em;
line-height: 1em;
margin: 2em 0 0 0;
padding: 0;
text-align: center;
@include breakpoint(mobileonly) {
line-height: inherit;
}
li {
border-left: solid 1px _palette(border);
display: inline-block;
list-style: none;
margin-left: 1.5em;
padding-left: 1.5em;
@include breakpoint(mobileonly) {
border-left: 0;
display: block;
margin: 0;
padding: 0;
}
&:first-child {
border-left: 0;
margin-left: 0;
padding-left: 0;
}
a {
color: inherit;
}
}
}
}

182
assets/sass/parts/_form.scss Normal file
View file

@ -0,0 +1,182 @@
/* Form */
form {
margin: 0 0 _size(element-margin) 0;
}
label {
color: _palette(fg-bold);
display: block;
font-size: 0.9em;
font-weight: _font(weight-bold);
margin: 0 0 (_size(element-margin) * 0.5) 0;
}
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
@include vendor('appearance', 'none');
@include vendor('transition', 'border-color #{_duration(transition)} ease-in-out');
background: transparent;
border-radius: _size(border-radius);
border: solid 1px _palette(border);
color: inherit;
display: block;
outline: 0;
padding: 0 1em;
text-decoration: none;
width: 100%;
&:invalid {
box-shadow: none;
}
&:focus {
border-color: _palette(accent1);
}
}
.select-wrapper {
@include icon;
display: block;
position: relative;
&::before {
color: _palette(border);
content: '\f078';
display: block;
height: _size(element-height);
line-height: _size(element-height);
pointer-events: none;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: _size(element-height);
}
select::-ms-expand {
display: none;
}
}
input[type="text"],
input[type="password"],
input[type="email"],
select {
height: _size(element-height);
}
textarea {
padding: 0.75em 1em;
}
select {
option {
background-color: _palette(bg);
color: _palette(fg-bold);
}
&:focus {
&::-ms-value {
background: transparent;
}
}
}
input[type="checkbox"],
input[type="radio"], {
@include vendor('appearance', 'none');
display: block;
float: left;
margin-right: -2em;
opacity: 0;
width: 1em;
z-index: -1;
& + label {
@include icon;
color: _palette(fg);
cursor: pointer;
display: inline-block;
font-size: 1em;
font-weight: _font(weight);
padding-left: (_size(element-height) * 0.6) + 0.75em;
padding-right: 0.75em;
position: relative;
&::before {
border-radius: _size(border-radius);
border: solid 1px _palette(border);
content: '';
display: inline-block;
height: (_size(element-height) * 0.6);
left: 0;
line-height: (_size(element-height) * 0.575);
position: absolute;
text-align: center;
top: 0;
width: (_size(element-height) * 0.6);
}
}
&:checked + label {
&::before {
background: _palette(border2-bg);
color: _palette(fg-bold);
content: '\f00c';
}
}
&:focus + label {
&::before {
border-color: _palette(accent1);
}
}
}
input[type="checkbox"] {
& + label {
&::before {
border-radius: _size(border-radius);
}
}
}
input[type="radio"] {
& + label {
&::before {
border-radius: 100%;
}
}
}
::-webkit-input-placeholder {
color: _palette(fg-light) !important;
opacity: 1;
}
:-moz-placeholder {
color: _palette(fg-light) !important;
opacity: 1;
}
::-moz-placeholder {
color: _palette(fg-light) !important;
opacity: 1;
}
:-ms-input-placeholder {
color: _palette(fg-light) !important;
opacity: 1;
}
.formerize-placeholder {
color: _palette(fg-light) !important;
opacity: 1;
}

37
assets/sass/parts/_goto-next.scss Normal file
View file

@ -0,0 +1,37 @@
/* Goto Next */
.goto-next {
border: 0;
bottom: 0;
display: block;
height: 5em;
left: 50%;
margin: 0 0 0 -5em;
overflow: hidden;
position: absolute;
text-indent: 10em;
white-space: nowrap;
width: 10em;
z-index: 1;
&::before {
background-image: url('/css/images/arrow.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
content: '';
display: block;
height: 1.5em;
left: 50%;
margin: -0.75em 0 0 -1em;
position: absolute;
top: 50%;
width: 2em;
z-index: 1;
@include breakpoint(phablet) {
height: 0.8em;
margin: -0.4em 0 0 -0.6em;
width: 1.2em;
}
}
}

250
assets/sass/parts/_header.scss Normal file
View file

@ -0,0 +1,250 @@
/* Header */
#navPanel,
#titleBar {
display: none;
}
@include breakpoint(phablet) {
#titleBar {
@include vendor('backface-visibility', 'hidden');
@include vendor('transition', 'transform #{_duration(navPanel)} ease');
display: block;
height: 44px;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: _misc(z-index-base) + 1;
background: _palette(accent2);
box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
.title {
color: _palette(fg-bold);
display: block;
font-weight: _font(weight-bold);
height: 44px;
line-height: 44px;
text-align: center;
a {
color: inherit;
border: 0;
}
}
.toggle {
@include icon;
height: 60px;
left: 0;
position: absolute;
top: 0;
width: 90px;
outline: 0;
border: 0;
&::before {
background: _palette(accent3);
color: _palette(fg-light);
display: block;
font-size: 18px;
height: 44px;
left: 0;
line-height: 44px;
position: absolute;
text-align: center;
top: 0;
width: 54px;
}
}
}
}
@include breakpoint(phablet) {
#navPanel {
@include vendor('backface-visibility', 'hidden');
@include vendor('transform', 'translateX(#{_size(navPanel) * -1})');
@include vendor('transition', ('transform #{_duration(navPanel)} ease'));
display: block;
height: 100%;
left: 0;
overflow-y: auto;
position: fixed;
top: 0;
width: _size(navPanel);
z-index: _misc(z-index-base) + 2;
background: darken(_palette(bg), 2);
padding: 0.75em 1.25em;
.link {
border: 0;
border-top: solid 1px transparentize(_palette(border), 0.25);
color: _palette(fg);
display: block;
height: 3em;
line-height: 3em;
text-decoration: none;
&:hover {
color: inherit !important;
}
&:first-child {
border-top: 0;
}
&.depth-0 {
color: _palette(fg-bold);
font-weight: _font(weight-bold);
}
.indent-1 {
display: inline-block;
width: 1.25em;
}
.indent-2 {
display: inline-block;
width: 2.5em;
}
.indent-3 {
display: inline-block;
width: 3.75em;
}
.indent-4 {
display: inline-block;
width: 5em;
}
.indent-5 {
display: inline-block;
width: 6.25em;
}
}
}
}
#page-wrapper {
padding-top: 3.5em;
@include breakpoint(phablet) {
@include vendor('backface-visibility', 'hidden');
@include vendor('transition', 'transform #{_duration(navPanel)} ease');
padding-bottom: 1px;
padding-top: 44px !important;
}
}
#header {
background: _palette(accent2-transparent);
box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.25);
cursor: default;
height: 3.5em;
left: 0;
line-height: 3.5em;
position: fixed;
top: 0;
width: 100%;
z-index: 5000;
@include breakpoint(phablet) {
display: none;
}
h1 {
height: inherit;
left: 1.25em;
line-height: inherit;
margin: 0;
position: absolute;
top: 0;
}
nav {
ul {
list-style: none;
position: relative;
float: right;
margin: 0;
padding: 0;
li {
position: relative;
float: left;
margin: 0;
padding: 0;
color: inherit;
height: inherit;
line-height: inherit;
a,
span {
display: block;
color: inherit;
text-decoration: none;
line-height: inherit;
padding: 0 1em;
}
&.active {
> a,
> span {
color: _palette(accent1);
}
}
&.last {
padding-right: 1.8em;
}
}
ul {
display: none;
position: absolute;
top: 100%;
left: 0;
border-bottom: 2px solid rgba(255, 255, 255, 0.075);
background: _palette(accent2-transparent);
padding: 0;
li {
float: none;
width: 11em;
overflow: hidden;
}
&.last {
li {
width: 8em;
}
}
a {
line-height: 100%;
padding: 10px 15px;
border-top: 2px solid rgba(255, 255, 255, 0.075);
}
ul {
top: 0;
left: 100%;
}
}
li:hover > ul {
display: block;
}
}
}
}
body.landing {
#page-wrapper {
padding-top: 0;
}
}

46
assets/sass/parts/_icon.scss Normal file
View file

@ -0,0 +1,46 @@
/* Icon */
.icon {
@include icon;
border-bottom: none;
position: relative;
> .label {
display: none;
}
&.alt {
@include line-icon;
}
&.major {
background: _palette(accent2);
border-radius: 100%;
cursor: default;
display: inline-block;
height: 6em;
line-height: 6em;
margin: 0 0 _size(element-margin) 0;
text-align: center;
width: 6em;
&::before {
font-size: 2.25em;
}
&.alt {
@include line-icon(_palette(accent2));
}
}
}
.iconshiftdown {
line-height: 2;
}
@for $i from 5 through 10 {
.iconshift-right-#{$i} {
margin-left: $i * 1px;
}
}

71
assets/sass/parts/_image.scss Normal file
View file

@ -0,0 +1,71 @@
/* Image */
.image {
border-radius: _size(border-radius);
border: 0;
display: inline-block;
position: relative;
overflow: hidden;
&::before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
img {
border-radius: _size(border-radius);
display: block;
}
&.left {
float: left;
margin: 0 1.5em 1em 0;
top: 0.25em;
}
&.right {
float: right;
margin: 0 0 1em 1.5em;
top: 0.25em;
}
&.left,
&.right {
max-width: 40%;
img {
width: 100%;
}
}
&.fit {
display: block;
margin: 0 0 _size(element-margin) 0;
width: 100%;
img {
width: 100%;
}
}
&.mapid {
height: 70vh;
}
&.lightgallery {
width: 33%;
height: 200pt;
object-fit: cover;
@include breakpoint(tablet) {
width: 49%;
}
@include breakpoint(phablet) {
width: 100%;
}
}
}

161
assets/sass/parts/_list.scss Normal file
View file

@ -0,0 +1,161 @@
/* List */
ol {
list-style: decimal;
margin: 0 0 _size(element-margin) 0;
padding-left: 1.25em;
li {
padding-left: 0.25em;
}
}
ul {
list-style: disc;
margin: 0 0 _size(element-margin) 0;
padding-left: 1em;
li {
padding-left: 0.5em;
}
&.alt {
list-style: none;
padding-left: 0;
li {
border-top: solid 1px _palette(border);
padding: 0.5em 0;
&:first-child {
border-top: 0;
padding-top: 0;
}
}
}
&.icons {
cursor: default;
list-style: none;
padding-left: 0;
li {
display: inline-block;
height: 2.5em;
line-height: 2.5em;
padding: 0 0.5em;
.icon {
font-size: 0.8em;
&::before {
font-size: 2em;
}
}
}
}
&.actions {
cursor: default;
list-style: none;
padding-left: 0;
@include breakpoint(mobileonly) {
margin: 0 0 _size(element-margin) 0;
}
li {
display: inline-block;
padding: 0 (_size(element-margin) * 0.5) 0 0;
vertical-align: middle;
@include breakpoint(mobileonly) {
display: block;
padding: (_size(element-margin) * 0.5) 0 0 0;
text-align: center;
width: 100%;
&:first-child {
padding-top: 0;
}
> * {
margin: 0 !important;
width: 100%;
}
}
&:last-child {
padding-right: 0;
}
}
&.small {
li {
padding: 0 (_size(element-margin) * 0.25) 0 0;
@include breakpoint(mobileonly) {
padding: (_size(element-margin) * 0.25) 0 0 0;
&:first-child {
padding-top: 0;
}
}
}
}
&.vertical {
li {
display: block;
padding: (_size(element-margin) * 0.5) 0 0 0;
&:first-child {
padding-top: 0;
}
> * {
margin-bottom: 0;
}
}
&.small {
li {
padding: (_size(element-margin) * 0.25) 0 0 0;
&:first-child {
padding-top: 0;
}
}
}
}
&.fit {
display: table;
margin-left: (_size(element-margin) * -0.5);
padding: 0;
table-layout: fixed;
width: calc(100% + #{(_size(element-margin) * 0.5)});
li {
display: table-cell;
padding: 0 0 0 (_size(element-margin) * 0.5);
> * {
margin-bottom: 0;
}
}
&.small {
margin-left: (_size(element-margin) * -0.25);
width: calc(100% + #{(_size(element-margin) * 0.25)});
li {
padding: 0 0 0 (_size(element-margin) * 0.25);
}
}
}
}
}
dl {
margin: 0 0 _size(element-margin) 0;
}

134
assets/sass/parts/_loader.scss Normal file
View file

@ -0,0 +1,134 @@
/* Loader */
// Spinner
@include keyframes('spinner-show') {
0% { opacity: 0; }
100% { opacity: 1; }
}
@include keyframes('spinner-hide') {
0% {
color: _palette(fg-lighter);
z-index: _misc(z-index-overlay) + 1;
@include vendor('transform', 'scale(1) rotate(0deg)');
}
99% {
color: _palette(bg);
z-index: _misc(z-index-overlay) + 1;
@include vendor('transform', 'scale(0.5) rotate(360deg)');
}
100% {
color: _palette(bg); z-index: -1;
@include vendor('transform', 'scale(0.5) rotate(360deg)');
}
}
@include keyframes('spinner-rotate') {
0% {
@include vendor('transform', 'scale(1) rotate(0deg)');
}
100% {
@include vendor('transform', 'scale(1) rotate(360deg)');
}
}
// Overlay
@include keyframes('overlay-hide') {
0% {
opacity: 1;
z-index: _misc(z-index-overlay);
}
15% {
opacity: 1;
z-index: _misc(z-index-overlay);
}
99% {
opacity: 0;
z-index: _misc(z-index-overlay);
}
100% {
opacity: 0;
z-index: -1;
}
}
body.landing {
@include icon;
// Spinner (inactive)
&::before {
@include vendor('animation', ('spinner-show 1.5s 1 0.25s ease forwards', 'spinner-hide 0.25s ease-in-out forwards !important'));
@include vendor('transform-origin', '50% 50%');
color: _palette(fg-lighter);
content: '\f1ce';
cursor: default;
display: block;
font-family: "Font Awesome 5 Free";
font-size: 2em;
font-weight: 900;
height: 2em;
left: 50%;
line-height: 2em;
margin: -1em 0 0 -1em;
opacity: 0;
position: fixed;
text-align: center;
top: 50%;
width: 2em;
z-index: -1;
}
// Overlay (inactive)
&::after {
@include vendor('animation', 'overlay-hide #{_duration(landing-fadein)} ease-in forwards !important');
background: _palette(bg);
content: '';
display: block;
height: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}
&.is-loading {
// Spinner (active)
&::before {
@include vendor('animation', ('spinner-show 1.5s 1 0.25s ease forwards', 'spinner-rotate 0.75s infinite linear !important'));
z-index: _misc(z-index-overlay) + 1;
}
// Overlay (active)
&::after {
@include vendor('animation', 'none !important');
opacity: 1;
z-index: _misc(z-index-overlay);
}
}
}
@media (-webkit-min-device-pixel-ratio: 2) {
body.landing::before {
line-height: 2.025em;
}
}

12
assets/sass/parts/_project.scss Normal file
View file

@ -0,0 +1,12 @@
.project {
height: 600px;
}
.teaser {
height: 300px;
}
.project-creator {
border-bottom: none;
}

79
assets/sass/parts/_section-article.scss Normal file
View file

@ -0,0 +1,79 @@
/* Section/Article */
section,
article {
&.special {
text-align: center;
}
}
header {
p {
color: _palette(fg-bold);
position: relative;
margin: 0 0 (_size(element-margin) * 0.75) 0;
@include breakpoint(phablet) {
br {
display: none;
}
}
}
h2 + p {
font-size: 1.25em;
margin-top: (_size(element-margin) * -0.5);
line-height: 1.75em;
@include breakpoint(phablet) {
font-size: 1em;
}
}
h3 + p {
font-size: 1.1em;
margin-top: (_size(element-margin) * -0.4);
line-height: 1.75em;
@include breakpoint(phablet) {
font-size: 1em;
}
}
h4 + p,
h5 + p,
h6 + p {
font-size: 0.9em;
margin-top: (_size(element-margin) * -0.3);
line-height: 1.5em;
@include breakpoint(phablet) {
font-size: 0.9em;
}
}
&.major {
margin: 0 0 (_size(element-margin) * 2) 0;
position: relative;
text-align: center;
@include breakpoint(phablet) {
margin: 0 0 _size(element-margin) 0;
}
&::after {
background: _palette(accent1);
content: '';
display: inline-block;
height: 0.2em;
max-width: 20em;
width: 75%;
}
}
}
footer {
&.major {
margin: (_size(element-margin) * 2) 0 0 0;
}
}

224
assets/sass/parts/_spotlight.scss Normal file
View file

@ -0,0 +1,224 @@
/* Spotlight */
.spotlight {
background-attachment: fixed;
background-position: center center;
background-size: cover;
box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
background-image: none;
min-height: 42em;
height: 100vh;
overflow: hidden;
position: relative;
@include breakpoint(tablet) {
background-attachment: scroll;
height: auto;
min-height: auto;
}
@include breakpoint(phablet) {
box-shadow: 0 0.125em 0.5em 0 rgba(0, 0, 0, 0.25);
}
// Force spotlights to stack in reverse order (needed for our box
// shadows to overlap stuff in the right direction).
@for $i from 1 through _misc(max-spotlight) {
&:nth-last-of-type(#{$i}) {
z-index: #{$i};
}
}
&::before {
content: '';
display: block;
height: 100%;
left: 0;
top: 0;
width: 100%;
}
.image.main {
display: block;
@include breakpoint(tablet) {
display: block;
margin: 0;
max-height: 40vh;
overflow: hidden;
}
@include breakpoint(phablet) {
max-height: 60vh;
}
@include breakpoint(mobileonly) {
max-height: 50vh;
}
img {
position: relative;
}
}
.content {
@include vendor('transform', 'translate(0,0)');
@include vendor('transition', 'transform 1s ease, opacity 1s ease');
background: _palette(bg-very-transparent);
border-style: solid;
opacity: 1;
position: absolute;
@include breakpoint(tablet) {
background-color: _palette(bg-very-transparent);
border-width: 0 !important;
border-top-width: 0.35em !important;
bottom: auto !important;
left: auto !important;
padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr !important;
position: relative;
right: auto !important;
text-align: center;
top: auto !important;
width: 100% !important;
}
@include breakpoint(phablet) {
border-top-width: 0.2em !important;
padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr !important;
}
@include breakpoint(mobileonly) {
padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr !important;
}
}
.goto-next {
@include vendor('transform', 'translate(0,0)');
@include vendor('transition', 'transform 0.75s ease, opacity 1s ease-in');
@include vendor('transition-delay', '0.5s');
opacity: 1;
@include breakpoint(tablet) {
display: none;
}
}
&.top,
&.bottom {
.content {
left: 0;
padding: ($size-wrapper-pad-tb * 0.85) 0 (($size-wrapper-pad-tb * 0.85) - _size(element-margin)) 0;
width: 100%;
}
}
&.top {
.content {
border-bottom-width: 0.35em;
top: 0;
@include breakpoint(laptop) {
padding: ($size-wrapper-pad-tb * 0.85) 0 (($size-wrapper-pad-tb * 0.85) - _size(element-margin)) 0;
}
}
}
&.bottom {
.content {
border-top-width: 0.35em;
bottom: 0;
@include breakpoint(laptop) {
padding: ($size-wrapper-pad-tb * 0.85) 0 (($size-wrapper-pad-tb * 1.1) - _size(element-margin)) 0;
}
}
}
&.left,
&.right {
.content {
height: 101%;
padding: $size-wrapper-pad-tb $size-wrapper-pad-lr;
top: 0;
width: 30em;
min-width: 25%;
}
}
&.left {
.content {
border-right-width: 0.35em;
left: 0;
}
}
&.right {
.content {
border-left-width: 0.35em;
right: 0;
}
}
&.style1 {
.content {
border-color: _palette(accent1-transparent);
}
}
&.style2 {
.content {
border-color: _palette(accent1);
}
}
&.style3 {
.content {
border-color: _palette(accent4);
}
}
&.inactive {
.content {
opacity: 0;
}
.goto-next {
@include vendor('transform', 'translate(0,1.5em)');
opacity: 0;
}
&.top {
.content {
@include vendor('transform', 'translate(0,-5em)');
}
}
&.bottom {
.content {
@include vendor('transform', 'translate(0,5em)');
}
}
&.left {
.content {
@include vendor('transform', 'translate(-5em,0)');
}
}
&.right {
.content {
@include vendor('transform', 'translate(5em,0)');
}
}
}
}
body.is-touch {
.spotlight {
background-attachment: scroll;
}
}

7
assets/sass/parts/_startpage.scss Normal file
View file

@ -0,0 +1,7 @@
//startpage
@each $scroll, $background in $picture-startpage {
##{$scroll} {
background-image: $background;
}
}

101
assets/sass/parts/_table.scss Normal file
View file

@ -0,0 +1,101 @@
/* Table */
table {
margin: 0 0 _size(element-margin) 0;
width: 100%;
word-wrap:break-word;
table-layout: fixed;
tbody {
tr {
border: solid 1px _palette(border);
border-left: 0;
border-right: 0;
&:nth-child(2n + 1) {
background-color: _palette(border-bg);
}
}
}
td {
padding: 0.75em 0.75em;
}
th {
color: _palette(fg-bold);
font-size: 0.9em;
font-weight: _font(weight-bold);
padding: 0 0.75em 0.75em 0.75em;
text-align: left;
}
thead {
border-bottom: solid 1px _palette(border);
}
tfoot {
border-top: solid 1px _palette(border);
}
&.alt {
border-collapse: separate;
tbody {
tr {
td {
border: solid 1px _palette(border);
border-left-width: 0;
border-top-width: 0;
&:first-child {
border-left-width: 1px;
}
}
&:first-child {
td {
border-top-width: 1px;
}
}
}
}
thead {
border-bottom: 0;
}
tfoot {
border-top: 0;
}
}
ul {
margin: 0 0 0 0;
}
@include breakpoint(mobileonly) {
td {
width:100%;
display: block;
margin:10px 0px;
text-align: center;
}
}
}
.table-wrapper {
-webkit-overflow-scrolling: touch;
overflow-x: auto;
&.code {
border-radius: 5px;
font-style: italic;
table {
margin: 0 0 0 0;
tbody {
tr {
border: 0;
}
}
}
}
}

116
assets/sass/parts/_wrapper.scss Normal file
View file

@ -0,0 +1,116 @@
/* Wrapper */
.wrapper {
padding: $size-wrapper-pad-tb 0 ($size-wrapper-pad-tb - _size(element-margin)) 0;
@include breakpoint(laptop) {
padding: $size-wrapper-pad-tb 0 ($size-wrapper-pad-tb - _size(element-margin)) 0;
}
@include breakpoint(tablet) {
padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr;
}
@include breakpoint(phablet) {
padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr;
}
@include breakpoint(mobileonly) {
padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr;
}
&.style2 {
background: _palette(accent1);
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
&:focus {
border-color: _palette(border2);
}
}
input[type="submit"],
input[type="reset"],
input[type="button"],
.button {
&:hover,
&:active {
background-color: _palette(border-bg) !important;
box-shadow: inset 0 0 0 1px _palette(border2) !important;
color: _palette(fg-bold) !important;
}
&:active {
background-color: _palette(border2-bg) !important;
}
&.special {
background-color: _palette(fg-bold);
color: _palette(accent1) !important;
&:hover,
&:active {
background-color: _palette(border-bg) !important;
box-shadow: inset 0 0 0 1px _palette(border2) !important;
color: _palette(fg-bold) !important;
}
&:active {
background-color: _palette(border2-bg) !important;
}
}
}
}
&.fade-down {
> .container {
@include vendor('transform', 'translate(0,0)');
@include vendor('transition', 'transform 1s ease, opacity 1s ease');
opacity: 1;
}
&.inactive {
> .container {
@include vendor('transform', 'translate(0,-1em)');
opacity: 0;
}
}
}
&.fade-up {
> .container {
@include vendor('transform', 'translate(0,0)');
@include vendor('transition', 'transform 1s ease, opacity 1s ease');
opacity: 1;
}
&.inactive {
> .container {
@include vendor('transform', 'translate(0,1em)');
opacity: 0;
}
}
}
&.fade {
> .container {
@include vendor('transition', 'opacity 1s ease');
opacity: 1;
}
&.inactive {
> .container {
opacity: 0;
}
}
}
}

51
assets/sass/parts/_youtube.scss Normal file
View file

@ -0,0 +1,51 @@
.youtube {
background-color: #000;
margin-bottom: 30px;
position: relative;
padding-top: 56.25%;
overflow: hidden;
cursor: pointer;
}
.youtube img {
width: 100%;
top: -16.82%;
left: 0;
opacity: 0.7;
}
.youtube .play-button {
width: 90px;
height: 60px;
background-color: #333;
box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
z-index: 1;
opacity: 0.8;
border-radius: 6px;
}
.youtube .play-button:before {
content: "";
border-style: solid;
border-width: 15px 0 15px 26.0px;
border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
top: 50%;
left: 50%;
transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
}

42
assets/static/style.css
View file

@ -1,42 +0,0 @@
body {
font-family: 'Verdana', sans-serif;
margin: 50px 25px;
}
a {
color: #2a99b6;
}
a:hover {
color: #33bbdf;
}
header, footer, div.page {
width: 760px;
margin: 0 auto;
background: #daeef3;
padding: 20px 30px;
}
header h1 {
color: #169bbd;
margin: 0;
font-weight: normal;
font-size: 42px;
}
header nav ul {
list-style: none;
margin: 0;
padding: 0;
}
header nav ul li {
display: inline;
margin: 0 8px 0 0;
padding: 0;
}
div.page {
background: #f1fbfe;
}