Add sass
This commit is contained in:
L3D
parent
3ffad512d8
commit
5b8cbc4035
GPG key ID:
CD08445BFF4313D1
28 changed files with 3346 additions and 42 deletions
54
assets/sass/ie9.scss
Normal file
54
assets/sass/ie9.scss
Normal 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
34
assets/sass/libs/_functions.scss
Normal 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
377
assets/sass/libs/_mixins.scss
Normal 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
548
assets/sass/libs/_skel.scss
Normal 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
56
assets/sass/libs/_vars.scss
Normal 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
119
assets/sass/main.scss
Normal 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
127
assets/sass/parts/_banner.scss
Normal 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
218
assets/sass/parts/_basic.scss
Normal 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
20
assets/sass/parts/_box.scss
Normal 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
144
assets/sass/parts/_button.scss
Normal 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
43
assets/sass/parts/_col.scss
Normal 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
66
assets/sass/parts/_dropotron.scss
Normal 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
69
assets/sass/parts/_footer.scss
Normal 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
182
assets/sass/parts/_form.scss
Normal 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
37
assets/sass/parts/_goto-next.scss
Normal 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
250
assets/sass/parts/_header.scss
Normal 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
46
assets/sass/parts/_icon.scss
Normal 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
71
assets/sass/parts/_image.scss
Normal 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
161
assets/sass/parts/_list.scss
Normal 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
134
assets/sass/parts/_loader.scss
Normal 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
12
assets/sass/parts/_project.scss
Normal 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
79
assets/sass/parts/_section-article.scss
Normal 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
224
assets/sass/parts/_spotlight.scss
Normal 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
7
assets/sass/parts/_startpage.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
//startpage
|
||||
@each $scroll, $background in $picture-startpage {
|
||||
##{$scroll} {
|
||||
background-image: $background;
|
||||
}
|
||||
}
|
||||
|
||||
101
assets/sass/parts/_table.scss
Normal file
101
assets/sass/parts/_table.scss
Normal 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
116
assets/sass/parts/_wrapper.scss
Normal 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
51
assets/sass/parts/_youtube.scss
Normal 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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in a new issue