diff --git a/.gitignore b/.gitignore index 0b9d427..facab09 100644 --- a/.gitignore +++ b/.gitignore @@ -187,3 +187,4 @@ typings/ # https://interaktionsweise.de/ ################### ################### +art/ diff --git a/_config.scss b/_config.scss index 690aeac..a6b0a22 100644 --- a/_config.scss +++ b/_config.scss @@ -14,10 +14,42 @@ $size_1: $basic_size * 4; $basic_line: 1; -$head_size_1: 3.1em; -$head_size_2: 2.5em; -$head_size_3: 1.8em; -$head_size_4: 1.35em; +// $i: 1; +// @while $i < 7 { +// %head_#{$i} { width: 2em * $i; } +// $i: $i + 1; +// } +// $head_sizes: (h1: 3.1em, h2: 2.5em, h3: 1.8em, h4: 1.35em); +// +// @each $head, $size in $head_sizes { +// #{$head} { +// font-size: $size; +// } +// } + +// $head_sizes: ( +// basic: ( +// 'h1': ('font-size': 24), +// 'h2': ('font-size': 20), +// 'h3': ('font-size': 19), +// 'h4': ('font-size': 18), +// 'h5': ('font-size': 17), +// 'h6': ('font-size': 16), +// ), +// print: ( +// 'h1': ('font-size': 48), +// 'h2': ('font-size': 40), +// 'h3': ('font-size': 31), +// 'h4': ('font-size': 25), +// 'h5': ('font-size': 20), +// 'h6': ('font-size': 16), +// ), +// ); + +// $head_size_1: 3.1em; +// $head_size_2: 2.5em; +// $head_size_3: 1.8em; +// $head_size_4: 1.35em; $text_size_1: 1em; $text_size_2: 20; @@ -45,6 +77,15 @@ $basic_indent: 2em; // COLORS // ------------------------------------------------------------------------------ +$color_palette: ( + alpha: #fad803, + bravo: #d30a51, + charlie: #273f8b, + delta: #b7e0f0, + echo: #52bed1, + foxtrot: #0c85ff +); + $alpha_color: #fad803; $bravo_color: #d30a51; $charlie_color: #273f8b; @@ -52,42 +93,44 @@ $delta_color: #b7e0f0; $echo_color: #52bed1; $foxtrot_color: #0c85ff; -$black: black !default; -$white: white !default; -$medium_gray: lighten($black, 50%) !default; +$dark_color: black !default; +$bright_color: white !default; +$medium_color: lighten($dark_color, 50%) !default; -$default_front_color: $black !default; -$default_back_color: $medium_gray !default; +$default_front_color: $dark_color !default; +$default_back_color: $medium_color !default; $basic_font_color: $default_front_color; $basic_head_color: $default_front_color; $basic_link_color: $echo_color; -$basic_highlight_color: $white; +$basic_highlight_color: $bright_color; $basic_action_color: $foxtrot_color; $basic_back_color: $default_back_color; $light_color: lighten($basic_back_color, 5%); -$dark_color: darken($basic_back_color, 10%); +$dark_color_color: darken($basic_back_color, 10%); $basic_border_color: $default_front_color; // default shadow colors -// $shadow_color: fade-out($medium_gray, .5); +// $shadow_color: fade-out($medium_color, .5); // LAYOUT // ------------------------------------------------------------------------------ -$default_box_sizing: box-sizing !default; +$default_box_sizing: border-box !default; $box_sizing: $default_box_sizing; +$z_top: 1000; + $basic_width: 96%; -$width_2: 80%; -$width_3: 60%; -$width_4: 48%; +$width_small: 80%; +$width_medium: 60%; +$width_large: 48%; $default_space: 8px !default; $basic_space: $default_space; @@ -98,14 +141,17 @@ $space_4: $basic_space * 8; $space_5: $basic_space * 16; $tiny_space: 1px !default; -$basic_corner: 4px; +$basic_padding: calc(#{$basic_space} - 3px) $basic_space; +$wide_padding: calc(#{$basic_space} - 1px) calc(#{$basic_space} * 2); + +$basic_corner: $tiny_space; $default_border_width: $tiny_space !default; $basic_border_width: $default_border_width; $border_width_4: $tiny_space * 4; $border_width_8: $tiny_space * 8; $basic_border: $tiny_space solid $basic_border_color; -$cell_border: $tiny_space solid $dark_color; +$cell_border: $tiny_space solid $dark_color_color; $basic_aside_width: 20%; @@ -114,9 +160,9 @@ $basic_aside_width: 20%; // IO // ------------------------------------------------------------------------------ -$basic_io_font_color: darken($white, 10%); -$basic_io_back_color: lighten($black, 25%); -$basic_shadow: inset 0 1px 3px rgba($black, 0.06); +$basic_io_font_color: darken($bright_color, 10%); +$basic_io_back_color: lighten($dark_color, 25%); +$basic_shadow: inset 0 1px 3px rgba($dark_color, 0.06); $basic_focus_shadow: $basic_shadow, 0 0 5px adjust-color($basic_action_color, $lightness: -5%, $alpha: -0.3); @@ -129,7 +175,6 @@ $basic_timing: ease; - // HARDWARE BREAKPOINTS // ------------------------------------------------------------------------------ @@ -263,8 +308,8 @@ $webkit_ms_support: -webkit- -ms- ''; // $input_disabled_border: lighten($input_disabled, 50%); // $input_disabled_text: lighten($input_disabled, 50%); // -// $form_field_back_color: $white; -// $form_field_focus_color: $white; +// $form_field_back_color: $bright_color; +// $form_field_focus_color: $bright_color; // $form_field_fail_bkg: $alpha_color_juliet; // $form_field_border: $charlie_gray; @@ -277,7 +322,7 @@ $webkit_ms_support: -webkit- -ms- ''; // $instructional_text: $charlie_gray; // $placeholder_text: $hotel_gray; // $inline_alert_bkg_color: $alpha_color_delta; -// $inline_alert_text_color: $white; +// $inline_alert_text_color: $bright_color; // Non-color defaults (currently not represented in the SG view) // --------------------------------------------------------- @@ -298,7 +343,7 @@ $webkit_ms_support: -webkit- -ms- ''; /////// Config defaults for buttons /////// // ----------------------------------------------------------------------------- // $button-color: $delta-color; -// $button-text-color: $white; +// $button-text-color: $bright_color; // $button-line-height: 32; // $button-border-radius: 3; // $button-padding: 20; diff --git a/_default.scss b/_default.scss index f5c2523..a70d492 100644 --- a/_default.scss +++ b/_default.scss @@ -8,9 +8,9 @@ //$default_font_family: #{'Roboto', 'Trebuchet MS', Helvetica, 'Source Sans', Arial, sans-serif, sans}; -//$black: black !default; -//$white: white !default; -//$medium_gray: lighten($black, 50%) !default; +//$dark_color: black !default; +//$bright_color: white !default; +//$medium_color: lighten($dark_color, 50%) !default; //$default_back_color: lighten(black, 50%); diff --git a/_hippie.scss b/_hippie.scss index fc1ff2a..76fb183 100644 --- a/_hippie.scss +++ b/_hippie.scss @@ -70,6 +70,7 @@ // in dependency to other styles // Additional modules can be defined here // ----------------------------------------------------------------------------- +@import "modules/navigation/nav_module"; @import "modules/tables/tables_module"; @import "modules/card/card_module"; @import "modules/editor/editor_module"; @@ -79,6 +80,11 @@ +// Demonstration +@import "basic/demo"; + + + // Not yet sorted @import "basic/new"; diff --git a/basic/_common.scss b/basic/_common.scss index 021092f..370cd54 100644 --- a/basic/_common.scss +++ b/basic/_common.scss @@ -1,28 +1,27 @@ -// Clearing and floating +// General layout attributes // ------------------------------------------------------------------------------ +%size_content { + box-sizing: content-box; +} -.clear { - clear: both; - &::before, - &::after { - clear: both; +%size_content_solo { + @extend %size_content; + + *, + ::before, + ::after { + box-sizing: $box_sizing; } } -.float_left { - float: left; - margin-right: $space_3; +%hidden { + display: none; } -.overflow { - overflow: auto; +.magic { + @extend %hidden; } - - -// General positioning attributes -// ------------------------------------------------------------------------------ - .center_50 { margin-right: 25%; margin-left: 25%; @@ -38,27 +37,41 @@ margin-left: 0; } -%size_content { - box-sizing: content-box; +.height_basic { + height: 1024px; } -%size_content_solo { - @extend %size_content; - *, - ::before, - ::after { - box-sizing: $box_sizing; + +// Clearing and floating +// ------------------------------------------------------------------------------ +.clear { + clear: both; + + &::before, + &::after { + clear: both; } } +.float_left { + float: left; + margin-right: $space_3; +} + +.overflow { + overflow: auto; +} + +.x_long { + overflow-x: scroll; +} -// Structure attributes +// Positioned elements // ------------------------------------------------------------------------------ - %full_viewport { - position: absolute; + position: fixed; top: 0; left: 0; width: 100vw; @@ -68,32 +81,87 @@ %full_parent { position: absolute; top: 0; + right: 0; + bottom: 0; left: 0; - width: 100%; - height: 100%; + // width: 100%; + // height: 100%; +} + +.pos_abs { + position: absolute; } -// Fixed elements .pos_rel { position: relative; } + .pos_fix { position: fixed; } + .pos_bottom { bottom: 0; } -// Absolute elements .pos_full_view { @extend %full_viewport; background-color: rgba($alpha_color, .5); } +.pos_full_page { + @extend %full_parent; + background-color: rgba($charlie_color, .25); +} + .hover_back_change { background-color: darken($basic_back_color, 10%); transition: background-color .2s ease-in-out; + &:hover { background-color: $basic_back_color; } } + +.hover_full_view_change { + @extend %full_viewport; + z-index: $z_top; + background-color: transparentize($dark_color, .5); + transition: background-color .2s ease-in-out; + pointer-events: none; +} + +.flex { + display: flex; +} + +.flex_child { + flex: 0 1 auto; +} + + + +// Colors +// ------------------------------------------------------------------------------ +.txt_light_color { + color: darken($basic_back_color, 10%); +} + + + +// Input +// ------------------------------------------------------------------------------ +%default_button { + display: inline-block; + padding: $basic_padding; + background-color: transparentize($basic_link_color, .8); + border-radius: $basic_corner; + + &:active, + &:focus, + &:hover { + background-color: rgba($basic_highlight_color, .1); + color: $basic_highlight_color; + border-color: transparent; + } +} diff --git a/basic/_demo.scss b/basic/_demo.scss new file mode 100644 index 0000000..a3bb077 --- /dev/null +++ b/basic/_demo.scss @@ -0,0 +1,79 @@ +.demo__intro { + @extend .sec__main_center; + border-top-width: $border_width_8; + border-top-style: solid; + border-color: $basic_border_color; + padding-top: $space_3; +} + +.demo__header { + padding: $space_2; + + nav { + + ul { + margin: 0; + } + } +} + +.header__fancy { + background-color: transparentize($bravo_color, .4); + + nav { + + a { + background-color: transparentize($alpha_color, .4); + color: $alpha_color; + + &:active, + &:focus, + &:hover { + background-color: rgba($bright_color, .2); + color: $bright_color; + } + } + } +} + +.header__fix { + position: relative; + top: 0; + width: 100%; + background-color: transparentize($charlie_color, .4); + + nav { + + a { + + &:active, + &:focus, + &:hover { + background-color: rgba($bright_color, .2); + color: $bright_color; + } + } + } +} + +.demo__footer { + width: 100%; + height: 128px; + background-color: $dark_color; + color: $bright_color; +} + +.demo__avatar { + + img { + opacity: 1; + width: 128px; + height: auto; + border-radius: 50%; + background-color: $delta_color; + } +} + +.demo__flag { + height: 40vh; +} diff --git a/basic/_grouping.scss b/basic/_grouping.scss index c6a8277..17d6a04 100644 --- a/basic/_grouping.scss +++ b/basic/_grouping.scss @@ -14,7 +14,7 @@ p { } .p__col_line { - column-rule: $basic_border_width solid $black; + column-rule: $basic_border_width solid $dark_color; } .p__col_2, .p__col_3 { @extend p; @@ -38,7 +38,7 @@ hr { margin: $space_3 auto; border-width: $basic_border_width 0 0; border-style: solid; - border-color: $black; + border-color: $dark_color; } .hr__hidden { @@ -57,12 +57,13 @@ pre { } .pre__code { - border-color: rgba($white,.1); + // overflow-x: scroll; + border-color: rgba($bright_color,.1); border-style: dotted; border-width: 0 0 0 $border_width_4; border-radius: $basic_corner; padding: $basic_space; - background-color: rgba($white,.1); + background-color: rgba($bright_color,.1); code { background-color: transparent; } @@ -124,6 +125,36 @@ ul { } } +.list__link { + li { + margin-bottom: $tiny_space * 2; + text-transform: uppercase; + a { + display: block; + padding: $basic_padding; + color: $basic_font_color; + img { + margin-right: $basic_space; + padding-bottom: .2em; + vertical-align: text-bottom; + } + &:active, + &:focus, + &:hover { + background-color: $basic_action_color; + color: $basic_highlight_color; + } + } + } +} + +.list__horizontal { + overflow: auto; + li { + @extend .float_left; + } +} + // Embedded figure { margin: $space_2 $basic_indent; @@ -146,39 +177,35 @@ div { } -.box__screen { - width: $basic_width; - @media screen and (orientation: landscape) { - @media (min-width: $screen_small) { - width: $width_2; - } - @media (min-width: $screen_medium) { - width: $width_3; - } - @media (min-width: $screen_large) { - width: $width_4; - } - } - @media screen and (orientation: portrait) { - @media (min-width: $screen_small) { - width: $width_2; - } - } - margin: 0 auto; - border-top-width: $border_width_8; - border-top-style: solid; - border-color: $basic_border_color; - padding-top: $space_3; -} - .box__info { padding: $space_2 $basic_indent; border-right: $basic_space solid rgba($echo_color, .6); background-color: rgba($echo_color, .1) !important; } +.box__main_indent { + margin-left: 25%; +} + +.box__full_width { + // position: relative; + // overflow: hidden; + // width: 100%; +} + +// Inline +.box__inline_left { + @extend .float_left; + // padding: $basic_space / 2; +} + // Space and placeholders .box__space { + position: relative; + width: 100%; +} + +.box__cube { float: left; display: table; width: $space_4; @@ -192,21 +219,22 @@ div { .box__placeholder { width: 100%; height: $space_4; - border: $border_width_4 solid rgba($black,.1); + border: $border_width_4 solid rgba($dark_color,.1); border-radius: $basic_corner; padding: $basic_space; - background-color: rgba($black,.1); + background-color: rgba($dark_color,.1); svg { vertical-align: top; } } + .box__placeholder_bkg { width: 100%; height: $space_4; - border: $border_width_4 solid rgba($black,.1); + border: $border_width_4 solid rgba($dark_color,.1); border-radius: $basic_corner; padding: $basic_space; /*data:[][;charset=][;base64],*/ background: url("data:image/svg+xml;utf8,") no-repeat; - background-color: rgba($black,.1); + background-color: rgba($dark_color,.1); } diff --git a/basic/_interactive.scss b/basic/_interactive.scss index a77b7b2..f3a48df 100644 --- a/basic/_interactive.scss +++ b/basic/_interactive.scss @@ -37,8 +37,8 @@ label { color: $basic_io_font_color; &:hover { - background-color: $black; - color: $white; + background-color: $dark_color; + color: $bright_color; } } } diff --git a/basic/_sections.scss b/basic/_sections.scss index 97638fd..4ea1354 100644 --- a/basic/_sections.scss +++ b/basic/_sections.scss @@ -12,6 +12,7 @@ html { // ----------------------------------------------------------------------------- body { + position: relative; box-sizing: $box_sizing; font-family: $primary_font_family; font-size: $basic_size; @@ -24,6 +25,11 @@ body { ::after { box-sizing: inherit; } + &:hover { + .trigger__hover { + background-color: transparent; + } + } } article { @@ -34,14 +40,39 @@ section { } -aside.right + section { - margin-right: calc(#{$basic_aside_width} + #{$basic_space}); +.sec__main_center { + width: $basic_width; + @media screen and (orientation: landscape) { + @media (min-width: $screen_small) { + width: $width_small; + } + @media (min-width: $screen_medium) { + width: $width_medium; + } + @media (min-width: $screen_large) { + width: $width_large; + } + } + @media screen and (orientation: portrait) { + @media (min-width: $screen_small) { + width: $width_small; + } + } + margin: 0 auto; + padding-top: $space_3; } -aside.left + section { - margin-left: calc(#{$basic_aside_width} + #{$basic_space}); +aside { + &.right + section { + margin-right: calc(#{$basic_aside_width} + #{$basic_space}); + } + + &.left + section { + margin-left: calc(#{$basic_aside_width} + #{$basic_space}); + } } + nav { } @@ -63,6 +94,10 @@ header { } +.header__page { + overflow: auto; +} + footer { } diff --git a/basic/_textlevel.scss b/basic/_textlevel.scss index f929f72..22b891d 100644 --- a/basic/_textlevel.scss +++ b/basic/_textlevel.scss @@ -3,13 +3,13 @@ a { color: $basic_link_color; -// color: lighten($basic_action_color, 20%); + // color: lighten($basic_action_color, 20%); text-decoration: none; &:active, &:focus, &:hover { - color: $basic_highlight_color; + color: $basic_highlight_color; } } @@ -24,11 +24,23 @@ a { &:active, &:focus, &:hover { - background-color: $basic_action_color; - color: $basic_highlight_color; + background-color: $basic_action_color; + color: $basic_highlight_color; } } +.a__button { + @extend %default_button; +} + +.a__button_border { + @extend %default_button; + padding: $wide_padding; + background-color: transparent; + color: $basic_font_color; + border: $cell_border; +} + // Other elements @@ -76,7 +88,7 @@ time { code { @extend %basic_mono; color: lighten($basic_font_color, 12%); - background-color: rgba($white,.1); + background-color: rgba($bright_color,.1); } .code__solo { @extend %basic_mono; @@ -106,15 +118,15 @@ mark { } .mark__cursor { color: $basic_highlight_color; - background-color: $black; + background-color: $dark_color; } ::-moz-selection { color: $basic_highlight_color; - background-color: $black; + background-color: $dark_color; } ::selection { color: $basic_highlight_color; - background-color: $black; + background-color: $dark_color; } span { diff --git a/code/functions.js b/code/functions.js new file mode 100644 index 0000000..5b53ae6 --- /dev/null +++ b/code/functions.js @@ -0,0 +1,57 @@ +function setup() { + if($('#js_tph').length && full_view_hover) { + // $('body').prepend("
"); + $('#js_tph').addClass("hover_full_view_change"); + } +} + +// get document coordinates of the element +function getCoords(elem) { + let box = elem.getBoundingClientRect(); + + return { + top: box.top + pageYOffset, + left: box.left + pageXOffset + }; +} + +// https://stackoverflow.com/a/488073/1444149 +function Utils() { + +} + +Utils.prototype = { + constructor: Utils, + isElementInView: function (element, fullyInView) { + var pageTop = $(window).scrollTop(); + var pageBottom = pageTop + $(window).height(); + var elementTop = $(element).offset().top; + var elementBottom = elementTop + $(element).height(); + + if (fullyInView === true) { + return ((pageTop < elementTop) && (pageBottom > elementBottom)); + } else { + return ((elementTop <= pageBottom) && (elementBottom >= pageTop)); + } + } +}; + +var Utils = new Utils(); + +// TEST + +function scrollNav() { + $('.nav a').click(function(){ + //Toggle Class + $(".active").removeClass("active"); + $(this).closest('li').addClass("active"); + var theClass = $(this).attr("class"); + $('.'+theClass).parent('li').addClass('active'); + //Animate + $('html, body').stop().animate({ + scrollTop: $( $(this).attr('href') ).offset().top - 160 + }, 400); + return false; + }); + $('.scrollTop a').scrollTop(); +} diff --git a/code/variables.js b/code/variables.js new file mode 100644 index 0000000..f954521 --- /dev/null +++ b/code/variables.js @@ -0,0 +1,12 @@ +var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) +var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) + +var full_view_hover = true; + +var doc_pos_y = 0; +var basic_ease = 600; +var scroll_y_margin = h; + + +// TEST +// var fixed_containers = []; diff --git a/code/vendor/jq-sticky-anything.min.js b/code/vendor/jq-sticky-anything.min.js new file mode 100644 index 0000000..5e835d5 --- /dev/null +++ b/code/vendor/jq-sticky-anything.min.js @@ -0,0 +1,5 @@ +/** +* @preserve Sticky Anything 2.0.1 | @senff | GPL2 Licensed +*/ + +!function(a){function b(b,c,d,e,f,g,h){$listenerElement=a(".sticky-element-active");var i=$listenerElement.offset();if(orgElementTop=i.top,f){var j=a(f).offset();pushElementTop=j.top}var k=window,l="inner";if("innerWidth"in window||(l="client",k=document.documentElement||document.body),viewport=k[l+"Width"],a(window).scrollTop()>=orgElementTop-b&&viewport>=c&&viewport<=d){coordsOrgElement=$listenerElement.offset(),leftOrgElement=coordsOrgElement.left,widthPlaceholder=$listenerElement[0].getBoundingClientRect().width,widthPlaceholder||(widthPlaceholder=$listenerElement.css("width")),heightPlaceholder=$listenerElement[0].getBoundingClientRect().height,heightPlaceholder||(heightPlaceholder=$listenerElement.css("height")),widthSticky=a(".sticky-element-original").css("width"),"0px"==widthSticky&&(widthSticky=a(".sticky-element-original")[0].getBoundingClientRect().width),heightSticky=a(".sticky-element-original").height(),paddingOrgElement=[a(".sticky-element-original").css("padding-top"),a(".sticky-element-original").css("padding-right"),a(".sticky-element-original").css("padding-bottom"),a(".sticky-element-original").css("padding-left")],paddingSticky=paddingOrgElement[0]+" "+paddingOrgElement[1]+" "+paddingOrgElement[2]+" "+paddingOrgElement[3],marginOrgElement=[$listenerElement.css("margin-top"),$listenerElement.css("margin-right"),$listenerElement.css("margin-bottom"),$listenerElement.css("margin-left")],marginPlaceholder=marginOrgElement[0]+" "+marginOrgElement[1]+" "+marginOrgElement[2]+" "+marginOrgElement[3],assignedStyles="";for(var m in g)"inline"==g[m]?assignedStyles+=m+":inline-block; ":assignedStyles+=m+":"+g[m]+"; ";elementHeight=0,heightPlaceholder<1?elementHeight=a(".sticky-element-cloned").outerHeight():elementHeight=a(".sticky-element-original").outerHeight(),f&&a(window).scrollTop()>pushElementTop-b-elementHeight?stickyTopMargin=pushElementTop-b-elementHeight-a(window).scrollTop():stickyTopMargin=0,assignedStyles+="width:"+widthPlaceholder+"px; height:"+heightPlaceholder+"px; margin:"+marginPlaceholder+";",a(".sticky-element-original").removeClass("sticky-element-not-sticky").addClass("sticky-element-sticky").removeClass("sticky-element-active").css("position","fixed").css("left",leftOrgElement+"px").css("top",b+"px").css("width",widthSticky).css("margin-left",0).css("padding",paddingSticky).css("margin-top",stickyTopMargin).css("z-index",e),a(".sticky-element-placeholder").hasClass("sticky-element-active")||a(".sticky-element-placeholder").addClass("sticky-element-active").attr("style",assignedStyles)}else a(".sticky-element-original").addClass("sticky-element-not-sticky").removeClass("sticky-element-sticky").addClass("sticky-element-active").attr("style",h),a(".sticky-element-placeholder").hasClass("sticky-element-active")&&a(".sticky-element-placeholder").removeClass("sticky-element-active").removeAttr("style").css("width","0").css("height","0").css("margin","0").css("padding","0")}function c(){a(".sticky-element-original").addClass("sticky-element-active").before('')}function d(a){return o={},o.display=a.css("display"),o.float=a.css("float"),o.flex=a.css("flex"),o["box-sizing"]=a.css("box-sizing"),o.clear=a.css("clear"),o.overflow=a.css("overflow"),o.transform=a.css("transform"),o}a.fn.stickThis=function(e){var f=a.extend({top:0,minscreenwidth:0,maxscreenwidth:99999,zindex:1,debugmode:!1,pushup:""},e),g=a(this).length,h=a(f.pushup).length;return h<1?(1==f.debugmode&&f.pushup&&console.error('STICKY ANYTHING DEBUG: There are no elements with the selector/class/ID you selected for the Push-up element ("'+f.pushup+'").'),f.pushup=""):h>1&&(1==f.debugmode&&console.error("STICKY ANYTHING DEBUG: There are "+h+' elements on the page with the selector/class/ID you selected for the push-up element ("'+f.pushup+'"). You can select only ONE element to push the sticky element up.'),f.pushup=""),g<1?1==f.debugmode&&console.error('STICKY ANYTHING DEBUG: There are no elements with the selector/class/ID you selected for the sticky element ("'+this.selector+'").'):g>1?1==f.debugmode&&console.error("STICKY ANYTHING DEBUG: There There are "+h+' elements with the selector/class/ID you selected for the sticky element ("'+this.selector+'"). You can only make ONE element sticky.'):(a(this).addClass("sticky-element-original").addClass("sticky-element-not-sticky"),orgAssignedStyles=d(a(this)),orgInlineStyles=a(".sticky-element-original").attr("style"),null==orgInlineStyles&&(orgInlineStyles=""),c(),checkElement=setInterval(function(){b(f.top,f.minscreenwidth,f.maxscreenwidth,f.zindex,f.pushup,orgAssignedStyles,orgInlineStyles)},10)),this}}(jQuery); diff --git a/example.css b/example.css index d3e13d4..a9667fb 100644 --- a/example.css +++ b/example.css @@ -1,810 +1,90 @@ -@charset "UTF-8"; /* - * # TABLE OF CONTENTS - * - * - Reset - * - Configuration - * - Special modules - * - Basic styles - * - Common - * - Typography - * - * - Sections - * - Grouping - * - Textlevel - * - Embedded - * - Tables - * - Interactive - * - Modules - * - */ -@import url(other/normalize.css); -/** - * @description - * Generates cross-browser-compatible output for a given element with its value. - * - * @author sthag - * - * @param values - * @returns - * -webkit-: - * ...-: - * - * @example - * .selector - * @include vendor-prefix(hyphens, auto) - */ -.clear { - clear: both; } - .clear::before, .clear::after { - clear: both; } - -.float_left { - float: left; - margin-right: 32px; } - -.overflow { - overflow: auto; } - -.center_50 { - margin-right: 25%; - margin-left: 25%; } - -.center_25 { - margin-right: 37.5%; - margin-left: 37.5%; } - -.width_full { - width: 100%; - margin-right: 0; - margin-left: 0; } - -.pos_full_view { - position: absolute; - top: 0; - left: 0; - width: 100vw; - height: 100vh; } - -.pos_rel { - position: relative; } - -.pos_fix { - position: fixed; } - -.pos_bottom { - bottom: 0; } - -.pos_full_view { - background-color: rgba(250, 216, 3, 0.5); } - -.hover_back_change { - background-color: #666666; - transition: background-color .2s ease-in-out; } - .hover_back_change:hover { - background-color: gray; } - -.span__solo, h6, p, .p__col_2, .p__col_3, caption, li, dt, dd, figcaption, th, td, legend, label { - font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans; - font-size: 1em; - line-height: 1.5; } - -pre, code, .code__solo { - font-family: Courier New, monospace; - font-size: 1em; - line-height: 1.5; } - -.print_body *[class^="din"] p, .print_body *[class^="din"] .p__col_2, .print_body *[class^="din"] .p__col_3, .print_body *[class^="din"] caption { - font-family: Courier New, monospace; - font-size: 1em; - line-height: 1.5; } - -h1, .print_body .page_date, .print_body .page_no { - font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans; - font-size: 3.1em; - font-weight: 300; - line-height: 1.5; } - -h2 { - font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans; - font-size: 2.5em; - font-weight: 300; - line-height: 1.5; } - -h3, h4 { - font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans; - font-size: 1.8em; - font-weight: 300; - line-height: 1.5; } - -h5 { - font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans; - font-size: 1.35em; - font-weight: 300; - line-height: 1.5; } - -.span__solo { - color: black; } - -.table-link_list .cell_text .shorten { - overflow: hidden; - text-overflow: ellipsis; - -o-text-overflow: ellipsis; } - -.txt_center { - text-align: center !important; } - -.txt_right { - text-align: right !important; } - -.txt_left { - text-align: left !important; } - -html { - height: 100%; } - -body { - box-sizing: box-sizing; - font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans; - font-size: 17px; - line-height: 1; - color: black; - background-color: gray; } - body *, - body ::before, - body ::after { - box-sizing: inherit; } - -aside.right + section { - margin-right: calc(20% + 8px); } - -aside.left + section { - margin-left: calc(20% + 8px); } - -aside { - width: 20%; } - aside.left { - float: left; } - aside.right { - float: right; } - aside *:first-child { - margin-top: 0; } - -h1 { - margin: 128px 0 32px; } - -h2 { - margin: 64px 0 32px; } - -h3 { - margin: 16px 0 16px; - text-transform: uppercase; } - -h4 { - margin: 16px 0 16px; - text-transform: none; } - -h5 { - margin: 16px 0 8px; - text-transform: none; } - -h6 { - margin: 8px 0; - text-transform: none; - font-weight: bold; } - -p, .p__col_2, .p__col_3, caption { - margin: 8px 0; - color: black; } - p code, .p__col_2 code, .p__col_3 code, caption code { - padding: 1px 4px; - font-size: 1em; - line-height: 1; } - -.p__col_line { - column-rule: 1px solid black; } - -.p__col_2 { - column-count: 2; - column-gap: 32px; } - -.p__col_3 { - column-count: 3; - column-gap: 64px; } - -hr, .hr__hidden, .hr__dotted { - margin: 32px auto; - border-width: 1px 0 0; - border-style: solid; - border-color: black; } - -.hr__hidden { - border-color: transparent; } - -.hr__dotted { - border-style: dotted; } - -.pre__code { - border-color: rgba(255, 255, 255, 0.1); - border-style: dotted; - border-width: 0 0 0 4px; - border-radius: 4px; - padding: 8px; - background-color: rgba(255, 255, 255, 0.1); } - .pre__code code { - background-color: transparent; } - -blockquote { - margin: 8px 2em; } - -.quote__mark p::before, .quote__mark .p__col_2::before, .quote__mark .p__col_3::before, .quote__mark caption::before { - content: "\201E \0020"; } -.quote__mark p::after, .quote__mark .p__col_2::after, .quote__mark .p__col_3::after, .quote__mark caption::after { - content: "\201C \0020"; } -.quote__mark .quote__source::before, .quote__mark .quote__source::after { - content: ""; } - -dl, ul, ol { - margin: 16px 0 8px; } - -ul, ol { - padding-left: 2em; } - -li, dt, dd { - color: black; } - -dd { - margin-left: 2em; } - -ul li { - list-style: square; } - -.list__dash li { - list-style: none; - position: relative; } - .list__dash li:before { - content: "_"; - position: absolute; - left: -1em; } - -figure { - margin: 16px 2em; } - -.box__screen { - width: 96%; - margin: 0 auto; - border-top-width: 8px; - border-top-style: solid; - border-color: black; - padding-top: 32px; } -@media screen and (orientation: landscape) and (min-width: 1024px) { - .box__screen { - width: 80%; } } -@media screen and (orientation: landscape) and (min-width: 1280px) { - .box__screen { - width: 60%; } } -@media screen and (orientation: landscape) and (min-width: 1920px) { - .box__screen { - width: 48%; } } - -@media screen and (orientation: portrait) and (min-width: 1024px) { - .box__screen { - width: 80%; } } - -.box__info { - padding: 16px 2em; - border-right: 8px solid rgba(82, 190, 209, 0.6); - background-color: rgba(82, 190, 209, 0.1) !important; } - -.box__space { - float: left; - display: table; - width: 64px; - text-align: center; - vertical-align: middle; } - .box__space span { - display: table-cell; } - -.box__placeholder { - width: 100%; - height: 64px; - border: 4px solid rgba(0, 0, 0, 0.1); - border-radius: 4px; - padding: 8px; - background-color: rgba(0, 0, 0, 0.1); } - .box__placeholder svg { - vertical-align: top; } - -.box__placeholder_bkg { - width: 100%; - height: 64px; - border: 4px solid rgba(0, 0, 0, 0.1); - border-radius: 4px; - padding: 8px; - /*data:[][;charset=][;base64],*/ - background: url("data:image/svg+xml;utf8,") no-repeat; - background-color: rgba(0, 0, 0, 0.1); } - -a { - color: #52bed1; - text-decoration: none; } - a:active, a:focus, a:hover { - color: white; } - -.a__line { - border-bottom-width: 1px; - border-bottom-style: dotted; - border-color: black; - background-color: transparent; - color: black; - transition: color 150ms ease; } - .a__line:active, .a__line:focus, .a__line:hover { - background-color: #0c85ff; - color: white; } - -i, em { - font-style: italic; } - -b, strong { - font-weight: 500; } - -cite { - font-style: italic; } - -code { - color: #1f1f1f; - background-color: rgba(255, 255, 255, 0.1); } - -.code__solo { - padding: 1px 4px; - color: black; } - -mark { - background-color: #fad803; } - -.mark__cursor { - color: white; - background-color: black; } - -::-moz-selection { - color: white; - background-color: black; } - -::selection { - color: white; - background-color: black; } - -img { - vertical-align: top; } - -table { - margin-top: 16px; - margin-bottom: 16px; - border: 1px solid black; - border-collapse: collapse; } - -th, td { - padding: 4px; } - -th { - border: 1px solid black; - text-align: left; } - -.precol { - border-right: 1px solid black; } - -td { - border-right: 1px solid #666666; - border-bottom: 1px solid #666666; } - -td:last-child { - border-right: 0; } - -tr:last-child td { - border-bottom: 0; } - -tfoot tr:first-child td { - border-top: 1px solid black; } - -.table_blank { - border: 1px solid transparent; } - .table_blank th, .table_blank td { - border: 1px solid transparent; } - -.table_free { - border: 1px solid transparent; } - -.table_stripe td { - border-top: 0; - border-bottom: 0; } -.table_stripe tr:nth-child(even) td { - background-color: #8c8c8c; } - -.table_fix { - table-layout: fixed; } - -caption { - padding: 4px 0; - border: 1px dotted black; - text-align: center; } - -fieldset { - margin: 8px 0; - border: 1px solid black; } - -legend { - padding: 0 4px; } - -.input_default label { - display: table; - margin: 4px 0; } - .input_default label input { - display: table-cell; - margin-left: 8px; - padding: 4px 5px; - border-style: solid; - border-color: transparent; - background-color: #404040; - color: #e6e6e6; } - .input_default label input:hover { - background-color: black; - color: white; } - -.table-link_list { - width: 100%; - border: 0; - table-layout: auto; } - .table-link_list tbody { - border-bottom: 1px solid #666666; } - .table-link_list tbody:hover { - background-color: #8c8c8c; } - .table-link_list th, .table-link_list td { - border: 0; } - .table-link_list .cell_icon { - width: 48px; - text-align: center; } - .table-link_list .cell_icon img { - vertical-align: text-top; } - .table-link_list .cell_link { - padding-right: 8px; - padding-left: 8px; } - .table-link_list .cell_link:hover { - background-color: #0c85ff; } - .table-link_list .cell_link a { - display: block; } - .table-link_list .cell_link .link_url { - display: none; } - .table-link_list .cell_link:hover .link_url { - display: block; - color: white; } - .table-link_list .cell_link:hover .link_text { - display: none; } - .table-link_list .cell_date { - width: 12%; - text-align: center; } - .table-link_list .cell_text { - padding-right: 8px; - padding-left: 8px; } - .table-link_list .cell_text div { - width: 100%; } - .table-link_list .cell_text .shorten { - max-height: 44px; } - -.card_body .bkg_box { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; } - -.card_body { - height: 100%; - /* .full { - position: absolute; - width: 128px; - height: 128px; - top: 16px; - left: 16px; - background-color: #fff; - } - .mark { - float: left; - width: 32px; - height: 32px; - margin-top: 16px; - } - */ } - .card_body .bkg_box { - transition-duration: 800ms; - overflow: hidden; - vertical-align: top; - z-index: -1; } - .card_body .bkg_box > svg { - position: relative; } - .card_body .flex_wrap_center { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -webkit-align-items: center; - -moz-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -moz-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - height: 100%; } - .card_body .flex_content { - position: relative; - padding: 64px 64px 24px 64px; - border: 1px solid #FFF; - background-color: #F5F5F5; - z-index: 40; } - .card_body h1 { - margin: 16px 0; - color: #1E1E1E; - font-size: 24px; - line-height: 1.4em; - font-weight: normal; } - .card_body p, .card_body .p__col_2, .card_body .p__col_3, .card_body caption { - margin-top: 0; - margin-bottom: 16px; - font-size: 12px; - line-height: 1.4em; } - .card_body .marked { - padding-left: 1em; - text-indent: -1em; - text-align: center; } - .card_body .marked:before { - content: "* "; } - .card_body .decent { - color: #666; } - .card_body a { - color: #000; - text-decoration: none; } - .card_body a:hover { - color: #F4F9FA; - background-color: #0C85FF; - text-decoration: none; } - -.wip, .wip_txt { - border-right: 8px solid rgba(220, 20, 60, 0.8); - background-color: rgba(220, 20, 60, 0.1) !important; } - -.wip:before, .wip:after { - content: ""; - display: block; - height: 48px; } - -.exp_expose_pre:after { - content: ""; - display: block; - height: 48px; - background-color: rgba(183, 224, 240, 0.1) !important; } - -.exp_expose_post:before { - content: ""; - display: block; - height: 48px; - background-color: rgba(183, 224, 240, 0.1) !important; } - -.exp_expose:before, .exp_expose:after { - content: ""; - display: block; - height: 48px; - background-color: rgba(183, 224, 240, 0.1) !important; } - -.exp_pop { - display: none; } - -.exp_wrap { - position: relative; } - -.exp_pop { - position: absolute; - z-index: 100; - top: 128px; - left: 128px; - padding: 4px; - border: 4px solid gray; - border-radius: 4px; - background-color: gray; - pointer-events: none; } - -.exp_marker_pop { - position: absolute; - top: -12.75px; - right: -8.5px; - width: 17px; - height: 17px; - border: 1px solid white; - border-radius: 17px; - color: white; - background-color: black; } - -.exp_overlay_btn { - position: fixed; - width: 3em; - height: 2em; - cursor: pointer; } - -.exp_help_btn { - display: table; - right: 16px; - bottom: 16px; - background-color: rgba(0, 0, 0, 0.4); } - .exp_help_btn:hover { - background-color: white; } - .exp_help_btn:hover > .span__solo { - color: black; } - .exp_help_btn .span__solo { - display: table-cell; - color: rgba(255, 255, 255, 0.8); - font-family: Courier New, monospace; - font-size: 1.4em; - text-align: center; - vertical-align: middle; } - -.expose_height { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: rgba(183, 224, 240, 0.1) !important; - -webkit-transition: height 0.5s ease; - -ms-transition: height 0.5s ease; - -moz-transition: height 0.5s ease; - -o-transition: height 0.5s ease; - transition: height 0.5s ease; } - -.print_body *[class^="din"] { - background-color: white; } - -.print_body { - font-size: 10pt; - margin: 10vh 20vw; } -@page { - .print_body { - size: A4; - margin: 1.2cm; } } -@page :first { - .print_body { - size: A4; - margin: 0; } } - .print_body .dina4 { - padding-top: 1.2cm; - padding-right: 1.2cm; - padding-bottom: 1.2cm; - padding-left: 2.4cm; } - .print_body .dina4 .page_head, .print_body .dina4 .page_foot { - right: 1.2cm; - left: 2.4cm; } - .print_body .dina4 .page_head { - top: 1.2cm; } - .print_body .dina4 .page_foot { - bottom: 1.2cm; } - .print_body .dina5 { - padding-top: 0; - padding-right: 0; - padding-bottom: 0; - padding-left: 1.2cm; } - .print_body .dina5 .page_head, .print_body .dina5 .page_foot { - right: 0; - left: 1.2cm; } - .print_body .dina5 .page_head { - top: 0; } - .print_body .dina5 .page_foot { - bottom: 0; } - .print_body .dina6 { - padding-top: 0; - padding-right: 0; - padding-bottom: 0; - padding-left: 1.2cm; } - .print_body .dina6 .page_head, .print_body .dina6 .page_foot { - right: 0; - left: 1.2cm; } - .print_body .dina6 .page_head { - top: 0; } - .print_body .dina6 .page_foot { - bottom: 0; } - .print_body *[class^="din"] { - position: relative; - overflow: auto; - margin: 32px auto; } - .print_body *[class^="din"] .page_head, .print_body *[class^="din"] .page_foot { - position: absolute; } - .print_body *[class^="din"] .page_head { - page: cover; } - .print_body *[class^="din"] .page_foot { - display: flex; - flex-direction: row; } - .print_body *[class^="din"] .page_foot *:last-child { - margin-bottom: 0; } - .print_body *[class^="din"] .page_foot p, .print_body *[class^="din"] .page_foot .p__col_2, .print_body *[class^="din"] .page_foot .p__col_3, .print_body *[class^="din"] .page_foot caption { - flex: 1 0 auto; - margin: 0; - font-size: 8pt; - line-height: 10pt; - text-align: center; } - .print_body *[class^="din"] .page_foot .page_no { - flex: 1 0 auto; - font-size: 20pt; - line-height: 1; - text-align: right; } - .print_body *[class^="din"] .page_foot p:first-child, .print_body *[class^="din"] .page_foot .p__col_2:first-child, .print_body *[class^="din"] .page_foot .p__col_3:first-child, .print_body *[class^="din"] .page_foot caption:first-child { - text-align: left; } - .print_body *[class^="din"] .page_content { - margin-top: 10cm; - margin-bottom: 2cm; } - .print_body .page_title, .print_body .page_date { - font-size: 14pt; } - .print_body .page_title { - margin: 0; } - .print_body .page_date, .print_body .page_no { - float: right; } - .print_body .page_author { - position: absolute; - top: 5cm; - right: 0; - text-align: right; } - .print_body .page_recipient { - position: absolute; - top: 5cm; - left: 0; } - -.test li:after { - content: ""; - display: block; - height: 16px; } - -.front_color_1 { - color: #fad803; } - .front_color_1:after { - background-color: #fad803; } - -.front_color_2 { - color: #d30a51; } - .front_color_2:after { - background-color: #d30a51; } - -.front_color_3 { - color: #273f8b; } - .front_color_3:after { - background-color: #273f8b; } - -.front_color_4 { - color: #b7e0f0; } - .front_color_4:after { - background-color: #b7e0f0; } - -.front_color_5 { - color: #52bed1; } - .front_color_5:after { - background-color: #52bed1; } - -.back_color_1, .label_1 { - background-color: #fad803; } - -.back_color_2, .label_2 { - background-color: #d30a51; } - -.back_color_3, .label_3 { - background-color: #273f8b; } - -.back_color_4 { - background-color: #b7e0f0; } - -.back_color_5 { - background-color: #52bed1; } - -.label_1, .label_2, .label_3 { - padding: 0 4px; } - - +Error: Undefined variable: "$head_size_1". + on line 28 of basic/_typography.scss + from line 58 of _hippie.scss + from line 3 of ./example.scss + +Backtrace: +basic/_typography.scss:28 +_hippie.scss:58 +./example.scss:3 +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/script/tree/variable.rb:49:in `_perform' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/script/tree/node.rb:58:in `perform' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:397:in `visit_prop' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:36:in `visit' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:160:in `block in visit' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:79:in `block in with_base' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:115:in `with_frame' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:79:in `with_base' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:160:in `visit' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:433:in `block (2 levels) in visit_rule' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:433:in `map' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:433:in `block in visit_rule' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:181:in `with_environment' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:431:in `visit_rule' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:36:in `visit' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:160:in `block in visit' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:79:in `block in with_base' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:115:in `with_frame' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:79:in `with_base' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:160:in `visit' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:328:in `block (2 levels) in visit_import' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:328:in `map' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:328:in `block in visit_import' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:88:in `block in with_import' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:115:in `with_frame' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:88:in `with_import' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:325:in `visit_import' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:36:in `visit' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:160:in `block in visit' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:79:in `block in with_base' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:115:in `with_frame' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:79:in `with_base' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:160:in `visit' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:328:in `block (2 levels) in visit_import' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:328:in `map' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:328:in `block in visit_import' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:88:in `block in with_import' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:115:in `with_frame' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:88:in `with_import' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:325:in `visit_import' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:36:in `visit' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:160:in `block in visit' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:79:in `block in with_base' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:115:in `with_frame' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/stack.rb:79:in `with_base' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:160:in `visit' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:52:in `block in visit_children' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:52:in `map' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:52:in `visit_children' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:169:in `block in visit_children' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:181:in `with_environment' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:168:in `visit_children' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:36:in `block in visit' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:188:in `visit_root' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:36:in `visit' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:159:in `visit' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:8:in `visit' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/root_node.rb:36:in `css_tree' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/tree/root_node.rb:29:in `render_with_sourcemap' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/engine.rb:381:in `_render_with_sourcemap' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/engine.rb:298:in `render_with_sourcemap' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/plugin/compiler.rb:492:in `update_stylesheet' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/plugin/compiler.rb:209:in `each' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/plugin/compiler.rb:209:in `update_stylesheets' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/plugin.rb:82:in `update_stylesheets' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/exec/sass_scss.rb:340:in `watch_or_update' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/exec/sass_scss.rb:51:in `process_result' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/exec/base.rb:52:in `parse' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/lib/sass/exec/base.rb:19:in `parse!' +C:/Sachen/Ruby23-x64/lib/ruby/gems/2.3.0/gems/sass-3.4.23/bin/sass:13:in `' +C:/Sachen/Ruby23-x64/bin/sass:22:in `load' +C:/Sachen/Ruby23-x64/bin/sass:22:in `
' +*/ +body:before { + white-space: pre; + font-family: monospace; + content: "Error: Undefined variable: \"$head_size_1\".\A on line 28 of basic/_typography.scss\A from line 58 of _hippie.scss\A from line 3 of ./example.scss"; } /*# sourceMappingURL=example.css.map */ diff --git a/example.html b/example.html index 1bbe8bc..1bc64f9 100644 --- a/example.html +++ b/example.html @@ -14,13 +14,23 @@ - + +
-
-
?
+
+ +
-
+ +
Dies ist einfach nur Text.
Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.

Es wirken nur die Eigenschaften des <body> Elements. Dieses Element umschließt den gesamten Inhalt des Dokumentes und kommt daher nur einmal vor. Inhalte sind normalerweise durch Elemente definiert. Grundlegende Elemente teilen das Dokument zunächst in Abschnitte.

Bereiche

@@ -375,166 +385,338 @@

Dies war eine Übersicht der grundlegenden Elemente. Nun folgen weitere Elemente mit besonderen Formatierungen.

+
- -
-
-

Einzelene Elemente

-
-
-

Tabellen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 Ab / Zy Neu / Alt
NameURLYYYY-MM-DD
-
Beschreibung
-
NameURLYYYY-MM-DD
-
Beschreibung
-
-
table.table-link_list>thead>tr>th*3^^(tbody>tr>td.cell_icon[rowspan=2]>img[width=16 height=16]^+td.cell_link>a.link_text[target=_blank]+a.link_url[target=_blank]^+td.cell_date[rowspan=2]{YYYY-MM-DD}^tr>td.cell_text>div.shorten)*2
- - -
-
-
- - + + + + diff --git a/modules/explanation/_explanation_module.scss b/modules/explanation/_explanation_module.scss index 96e151a..eea463c 100644 --- a/modules/explanation/_explanation_module.scss +++ b/modules/explanation/_explanation_module.scss @@ -61,7 +61,7 @@ border: $tiny_space solid $basic_highlight_color; border-radius: $basic_size; color: $basic_highlight_color; - background-color: $black; + background-color: $dark_color; } .exp_expose { @@ -85,16 +85,16 @@ display: table; right: $space_2; bottom: $space_2; - background-color: rgba($black, .4); + background-color: rgba($dark_color, .4); &:hover { - background-color: $white; + background-color: $bright_color; > .span__solo { - color: $black; + color: $dark_color; } } .span__solo { display: table-cell; - color: rgba($white, .8); + color: rgba($bright_color, .8); font-family: $monospace_font_family; font-size: 1.4em; text-align: center; diff --git a/modules/navigation/_nav_module.scss b/modules/navigation/_nav_module.scss new file mode 100644 index 0000000..f07c1af --- /dev/null +++ b/modules/navigation/_nav_module.scss @@ -0,0 +1,121 @@ +nav { + + ul { + padding-left: 0; + } + + li { + margin-bottom: $basic_space; + list-style: none; + } +} + +.nav__horizontal { + ul { + @extend .overflow; + + li { + @extend .float_left; + margin-right: $basic_space; + margin-bottom: 0; + } + } +} + +.nav__center_old { + @extend .nav__horizontal; + float: right; + position: relative; + left: -50%; + + ul { + position: relative; + left: 50%; + text-align: center; + } +} + +.nav__page_meta { + position: fixed; + // display: table; + // width: 3em; + right: 0; + bottom: $space_2; + + ul { + margin: $basic_space 0; + } + + li { + margin-bottom: 0; + } + .a_button_meta { + // display: table-cell; + display: inline-block; + + &:active, + &:focus { + background-color: transparent; + } + + &:hover { + background-color: $basic_action_color; + } + } +} + +.header__page { + + nav { + @extend .nav__horizontal; + + ul { + margin: $basic_space 0; + } + + li:last-child { + margin-right: 0; + } + + a { + + &:active, + &:focus, + &:hover { + background-color: rgba($basic_font_color, .2); + color: $basic_font_color; + } + } + } + + .nav__right { + float: right; + margin-left: $basic_space; + + .align_parent { + margin-right: $basic_space * -1; + } + } + + .nav__separate_right { + float: right; + li { + position: relative; + + &:first-child { + padding-left: $basic_space * 2 + $tiny_space; + + &::before { + content: ""; + position: absolute; + width: $tiny_space; + height: 100%; + left: 0; + top: 0; + background-color: $bright_color; + margin: 0 $basic_space; + } + } + } + } +} diff --git a/modules/print/_print_module.scss b/modules/print/_print_module.scss index f69c421..adbe14b 100644 --- a/modules/print/_print_module.scss +++ b/modules/print/_print_module.scss @@ -7,7 +7,7 @@ // ------------------------------------------------------------------------------ %paper { - background-color: $white; + background-color: $bright_color; } $a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm; diff --git a/modules/tables/_tables_module.scss b/modules/tables/_tables_module.scss index c4c7af7..8dffa72 100644 --- a/modules/tables/_tables_module.scss +++ b/modules/tables/_tables_module.scss @@ -1,4 +1,4 @@ -.table-link_list { +.table__link { width: 100%; border: 0; table-layout: auto; @@ -15,7 +15,7 @@ border: 0; } - .cell_icon { + .cell__icon { width: 48px; text-align: center; img { @@ -23,38 +23,36 @@ } } - .cell_link { + .cell__link { padding-right: $basic_space; padding-left: $basic_space; &:hover { background-color: $foxtrot_color; + a:first-child { + display: none; + } + a:last-child { + display: block; + color: $basic_highlight_color; + } } a { display: block; } - .link_url { - display: none; - } - - &:hover .link_url { - display: block; - color: $basic_highlight_color; - } - - &:hover .link_text { + a:last-child { display: none; } } - .cell_date { - width: 12%; + th:last-child, .cell__date { + width: 16%; text-align: center; } - .cell_text { + .cell__text { padding-right: $basic_space; padding-left: $basic_space;