From f2dfe32ca2589a632b5de49ab8e2867e704bfe74 Mon Sep 17 00:00:00 2001 From: Stephan Date: Thu, 1 Dec 2016 15:37:49 +0100 Subject: [PATCH] Added sass and changed basic structure Many things to do. --- README.md | 4 +- TODO.md | 4 + _config.scss | 4 + _default.scss | 315 +++++++++++++ _hippie.scss | 45 ++ basic/_io.scss | 31 ++ basic/_layout.scss | 224 +++++++++ basic/_typo.scss | 297 ++++++++++++ modules/_flexbox.scss | 175 +++++++ modules/_vendor.scss | 23 + modules/card/_card_module.scss | 105 +++++ modules/card/_extends.scss | 0 modules/card/_mixins.scss | 0 modules/editor/_editor_module.scss | 23 + modules/editor/_extends.scss | 0 modules/editor/_mixins.scss | 0 modules/explanation/_explanation_module.scss | 114 +++++ modules/explanation/_extends.scss | 0 modules/explanation/_mixins.scss | 0 other/normalize.css | 461 +++++++++++++++++++ robots.txt | 2 +- sitemap.xml | 4 +- 22 files changed, 1827 insertions(+), 4 deletions(-) create mode 100644 TODO.md create mode 100644 _config.scss create mode 100644 _default.scss create mode 100644 _hippie.scss create mode 100644 basic/_io.scss create mode 100644 basic/_layout.scss create mode 100644 basic/_typo.scss create mode 100644 modules/_flexbox.scss create mode 100644 modules/_vendor.scss create mode 100644 modules/card/_card_module.scss create mode 100644 modules/card/_extends.scss create mode 100644 modules/card/_mixins.scss create mode 100644 modules/editor/_editor_module.scss create mode 100644 modules/editor/_extends.scss create mode 100644 modules/editor/_mixins.scss create mode 100644 modules/explanation/_explanation_module.scss create mode 100644 modules/explanation/_extends.scss create mode 100644 modules/explanation/_mixins.scss create mode 100644 other/normalize.css diff --git a/README.md b/README.md index bfa9760..896c34d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ # HIPPIE -## USE +## USE (work in progress) + +Clone the repo `https://github.com/sthag/hippie.git`. Copy the source folder to your projects style folder. diff --git a/TODO.md b/TODO.md new file mode 100644 index 0000000..e839123 --- /dev/null +++ b/TODO.md @@ -0,0 +1,4 @@ +- add dynamic content to robots.txt during build process +- add dynamic content to sitemap.xml +- add build process for normalize.css from github.com/necolas/normalize.css +- add build process for bourbon from https://github.com/thoughtbot/bourbon \ No newline at end of file diff --git a/_config.scss b/_config.scss new file mode 100644 index 0000000..1d9d663 --- /dev/null +++ b/_config.scss @@ -0,0 +1,4 @@ +// Main configuration +// ------------------------------------------------------------------------------ + +//$basic_size: 17px; \ No newline at end of file diff --git a/_default.scss b/_default.scss new file mode 100644 index 0000000..979fd93 --- /dev/null +++ b/_default.scss @@ -0,0 +1,315 @@ +// Default configuration +// ------------------------------------------------------------------------------ + +// TEXT +// ------------------------------------------------------------------------------ + +$basic_size: 15px; +$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; + +$text_size_1: 1em; +$text_size_2: 20; + +$text_line_1: 1.5; +$head_line_1: $text_line_1; +$head_line_2: $text_line_1; +$head_line_3: $text_line_1; +$head_line_4: $text_line_1; + +$primary_font_family: #{'Trebuchet MS', Helvetica, Arial, sans-serif, sans}; +$secondary_font_family: #{'Roboto', sans-serif}; +$third_font_family: #{'Courier New', monospace}; + +$basic_indent: 2em; + + +// COLORS +// ------------------------------------------------------------------------------ + +$alpha_color: #fad803; +$bravo_color: #d30a51; +$charlie_color: #273f8b; +$delta_color: #b7e0f0; +$echo_color: #52bed1; +$foxtrot_color: #0c85ff; + +$black: black; +$white: white; +$medium_gray: lighten($black, 50%); + + +$basic_font_color: $black; +$basic_head_color: $black; + +$basic_link_color: $echo_color; +$basic_highlight_color: $white; +$basic_action_color: $foxtrot_color; + +$basic_border_color: $black; + +$basic_background_color: $medium_gray; + +// default shadow colors +// $shadow_color: fade-out($medium_gray, 0.5); + + + +// LAYOUT +// ------------------------------------------------------------------------------ + +$basic_width: 96%; +$width_2: 80%; +$width_3: 60%; +$width_4: 48%; + +$tiny_space: 1px; +$basic_space: 8px; +$half_space: $basic_space / 2; +$space_2: $basic_space * 2; +$space_3: $basic_space * 4; +$space_4: $basic_space * 8; +$space_5: $basic_space * 16; + +$basic_corner: 4px; +$basic_border_width: $tiny_space; +$border_width_4: $tiny_space * 4; +$border_width_8: $tiny_space * 8; +$basic_border: $tiny_space solid $basic_border_color; + + + +// IO +// ------------------------------------------------------------------------------ + +$basic_io_font_color: darken($white, 10%); +$basic_io_background_color: lighten($black, 25%); +$basic_shadow: inset 0 1px 3px rgba($black, 0.06); +$basic_focus_shadow: $basic_shadow, 0 0 5px adjust-color($basic_action_color, $lightness: -5%, $alpha: -0.3); + + + +// ANIMATIONS +// ------------------------------------------------------------------------------ + +$basic_duration: 150ms; +$basic_timing: ease; + + + + +// HARDWARE BREAKPOINTS +// ------------------------------------------------------------------------------ + +$tablet: "screen and (max-width: 64em)"; +$tablet_portrait: "screen and (max-width: 50em) and (orientation: portrait)"; +$tablet_landscape: "screen and (max-width: 50em) and (orientation: landscape)"; + +$mobile: "screen and (max-width: 30em)"; +$mobile_portrait: "screen and (max-width: 30em) and (orientation : portrait)"; +$mobile_landscape: "screen and (max-width: 30em) and (orientation : landscape)"; + +$screen_small: 1024px; +$screen_medium: 1280px; +$screen_large: 1920px; + + + +// VENDOR PREFIX +// ------------------------------------------------------------------------------ + +$prefix_defaults: -moz- -webkit- -o- -ms- ''; +$webkit_support: -webkit- ''; +$moz_support: -moz- ''; +$ms_support: -ms- ''; +$moz_webkit_support: -moz- -webkit- ''; +$moz_ms_support: -moz- -ms- ''; +$webkit_ms_support: -webkit- -ms- ''; + + + +// The config file is intended to allow users to quickly redefine core elements of the design +// that will cascade throughout the css to get your design up and running FAST! + +// For instruction, please see https://github.com/Anotheruiguy/toadstool/blob/master/sass/doc-src/config.md + +/////// Typography configuration/////// +// ----------------------------------------------------------------------------- +// $font_size: 12; +// +// $heading_1: 46; +// $heading_2: 32; +// $heading_3: 28; +// $heading_4: 18; +// $heading_5: 18; +// $heading_6: 18; +// +// $line: $font_size * 1.5; +// +// $small_point_size: 10; +// $large_point_size: 14; +// +// $primary_font_family: #{"Helvetica Neue", Arial, sans-serif}; +// $secondary_font_family: #{"Helvetica Neue", Arial, sans-serif}; +// $heading_font_family: #{"Helvetica Neue", Arial, sans-serif}; + +// $icon_font_alpha: #{'ico-fonts'}; + +/////// Default webfont directory/////// +// ----------------------------------------------------------------------------- +// $webfont_directory: "/fonts/"; + +/////// default image directory /////// +// ----------------------------------------------------------------------------- +// In Sinatra, the images folder resides in the public directory. This directory is not made publically accessible, +// so simply referencing the images directory will be fine. +// $imgDir: "/images/"; + +/////// OOCSS generic base colors/////// +// ----------------------------------------------------------------------------- +// Red, green, yellow, blue, accent and black is not law, but a common theme in most designs. +// Using Toadstool, all you need to do is edit these 6 hex values and everything else is created +// by magic, unicorns and fairy dust! + +// $alpha_primary: #5a2e2e; // red +// $bravo_primary: #3e4147; // green +// $charlie_primary: #fffedf; // yellow +// $delta_primary: #2a2c31; // blue +// $echo_primary: #dfba69; // accent + +// $alpha_gray: #333; //black + +/////// Toadstool color math /////// +// ----------------------------------------------------------------------------- +// Local color functions to create default color palette +//@import "color/color_math"; +//@import "color/grayscale_math"; +//@import "color/color_defaults"; + +/////// Grid configuration /////// +// ----------------------------------------------------------------------------- +// setting default units of measurement for Toadstool grid solution +// $grid_type: 12; // sets default column grid +// $grid_uom: percent; // use either ``em`` or ``percent`` +// $grid_padding_l: 0; // sets default left/right padding inside grid block +// $grid_padding_r: 0; // sets default left/right padding inside grid block +// $grid_padding_tb: 0; // sets default top/bottom padding inside grid block +// $grid_border: 0; // sets default border width on all grid blocks +// $grid_child: none; // sets parent child relationship between grid blocks +// $grid_align: default; // by default grids float left. Optional argument is ``center`` +// $col_base: 10; // equal to 10px in the standard 960.gs +// $col_gutter: $col_base * 2; // sets default grid gutter width +// $grid_960: 960 / 100%; // grid math for percentages + + + +/////// HTML 5 feature colors /////// +// ----------------------------------------------------------------------------- +// used with the `ins` tag +// http://www.w3schools.com/tags/tag_ins.asp +// $ins_color: $charlie_color; + +// used with the `mark` tag +// http://www.w3schools.com/html5/tag_mark.asp +// $mark_color: $charlie_color; + +// webkit tap highlight color +// $webkit_tap_hightlight: $delta_color_bravo; + +// overrides the default content selection color in the browser +// $selection_color: $charlie_color; +// $selection_text_color: $primary_text; + + + +/////// Config defaults for forms /////// +// ----------------------------------------------------------------------------- +// $alert_background_color: $alpha_color; + +// $input_disabled: $bravo_gray; +// $input_disabled_bkg: lighten($input_disabled, 75%); +// $input_disabled_border: lighten($input_disabled, 50%); +// $input_disabled_text: lighten($input_disabled, 50%); +// +// $form_field_background_color: $white; +// $form_field_focus_color: $white; +// $form_field_fail_bkg: $alpha_color_juliet; + +// $form_field_border: $charlie_gray; +// $form_field_border_fail: $alpha_color_echo; +// $form_field_focus_border_color: $charlie_gray; + +// $form_field_text_fail: $alpha_color_echo; +// $form_label_color: $alpha_gray; +// $optional_field_text_color: $delta_gray; +// $instructional_text: $charlie_gray; +// $placeholder_text: $hotel_gray; +// $inline_alert_bkg_color: $alpha_color_delta; +// $inline_alert_text_color: $white; + +// Non-color defaults (currently not represented in the SG view) +// --------------------------------------------------------- +// $form_field_border_radius: $standard_round_corner; +// $form_field_text: $primary_text; +// $form_field_height: 35; +// $form_field_padding: 6; +// $form_label_weight: bold; +// $form_label_lineheight: 20; +// $inline_alert_lineheight: 30; +// $inline_alert_left_padding: 12; +// $inline_alert_weight: bold; +// $inline_alert_top_margin: 12; +// $inline_alert_border_width: 1; + + + +/////// Config defaults for buttons /////// +// ----------------------------------------------------------------------------- +// $button-color: $delta-color; +// $button-text-color: $white; +// $button-line-height: 32; +// $button-border-radius: 3; +// $button-padding: 20; +// $button-font-size: 18; +// $button-weight: bold; +// $button-text-shadow: true; +// $button-box-shadow: true; + +/////// Config defaults for ``standard_rounded_border`` mixin /////// +// ----------------------------------------------------------------------------- +// $standard_round_corner: 3; // sets default border radius +// $standard_corner_width: 1px; // sets default border width +// $standard_border_color: $border_color; // sets default border color + +/////// Config defaults for ``standard_block_spacing`` mixin /////// +// ----------------------------------------------------------------------------- +// $default_block_spacing: 20; // sets margin-bottom + +/////// Config defaults for site border style /////// +// ----------------------------------------------------------------------------- +// $standard_border_style: solid; + +/////// Config defaults for ``standard_hr`` mixin /////// +// ----------------------------------------------------------------------------- +// $standard_hr_spacing: 40; // sets padding and margin bottom +// $standard_hr_color: $delta_gray; +// $standard_hr_width: 1px; + +/////// Config values for all default shadows /////// +// ----------------------------------------------------------------------------- +// $h-shadow: 0; // horizontal shadow settings +// $v-shadow: 2; // vertical shaddow settings +// $blur: 3; // blur settings +// +// $inset_color: $shadow_color; // for use with ``dual_box_shadow`` mixin +// $ih-shadow: 0; // inset horizontal shadow settings +// $iv-shadow: 2; // inset vertical shaddow settings +// $is-shadow: 2; // inset spread shaddow settings +// $iblur: 3; // inset blur settings + diff --git a/_hippie.scss b/_hippie.scss new file mode 100644 index 0000000..1a1102c --- /dev/null +++ b/_hippie.scss @@ -0,0 +1,45 @@ +// Add Bourbon and Bitters +// ------------------------------------------------------------------------------ +// @import "bourbon/bourbon"; + + + +// Reset +// ------------------------------------------------------------------------------ +@import "other/normalize.min.css"; + + + +// Global configuration with default values +// Adjustments can be made by copying values from default to config +// ------------------------------------------------------------------------------ +@import "default"; // NOTE // do not edit +@import "config"; // EDIT THIS // copy default values and adjust + + + +// Modules and variables +// Additional modules can be defined here +// ------------------------------------------------------------------------------ +@import "modules/flexbox"; +@import "modules/vendor"; +//@import modules/all deprecated because of the new vendor mixin +//@import modules/*/* needs sass-glob +// ADD HERE // @import "modules/example"; + +// Basic styles - this is the core of definitions +// Individual styles can be added her +// ------------------------------------------------------------------------------ +@import "basic/typo"; +@import "basic/io"; +@import "basic/layout"; +// ADD HERE // @import "{name}/example"; + +// Individual Modules and variables +// in dependency to other styles +// ------------------------------------------------------------------------------ +@import "modules/card/card_module"; +@import "modules/editor/editor_module"; +@import "modules/explanation/explanation_module"; + +// NOTE // No css rules allowed in here \ No newline at end of file diff --git a/basic/_io.scss b/basic/_io.scss new file mode 100644 index 0000000..f220e27 --- /dev/null +++ b/basic/_io.scss @@ -0,0 +1,31 @@ +// Input/Output styles +// ------------------------------------------------------------------------------ + +// Common +fieldset { + margin: $basic_space 0; + border: $basic_border; +} +legend { + @extend %basic; + padding: 0 $half_space; +} + +label { + @extend %basic; + display: table; + margin: $half_space 0; + input { + display: table-cell; + margin-left: $basic_space; + padding: $half_space ($half_space + 1); + border-style: solid; + border-color: transparent; + background-color: $basic_io_background_color; + color: $basic_io_font_color; + &:hover { + background-color: $black; + color: $white; + } + } +} diff --git a/basic/_layout.scss b/basic/_layout.scss new file mode 100644 index 0000000..d005f7f --- /dev/null +++ b/basic/_layout.scss @@ -0,0 +1,224 @@ +// Basic styles +// ------------------------------------------------------------------------------ + +html { + box-sizing: border-box; +} + +*, +::before, +::after { + box-sizing: inherit; +} + +body { + background-color: $basic_background_color; +} + +img { + vertical-align: top; +} + +.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; +} + +.clear { + clear: both; + &::before, + &::after { + clear: both; + } +} +.float_left { + float: left; + margin-right: $space_3; +} +.overflow { + overflow: auto; +} + + +// Layout structure +// ------------------------------------------------------------------------------ + +// Simulate new body element +.div_body { + 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; +} + +// Fixed elements +.relative { + position: relative; +} +.div_fix { + position: fixed; +} +.bottom { + bottom: 0; +} + + +// Layout elements +// ------------------------------------------------------------------------------ + +// Tabellen +table { + margin-top: $space_2; + margin-bottom: $space_2; + border: $basic_border; +} +th, td { + padding: $half_space; +} +th { + border: $basic_border_width dotted $basic_border_color; + border-bottom: $basic_border; +} +.precol { + border-right: $basic_border; +} +td { + border: $basic_border_width dotted $basic_border_color; +} +.table_blank { + border: $basic_border_width solid transparent; + th, td { + border: $basic_border_width solid transparent; + } +} +.table_free { + border: $basic_border_width solid transparent; +} +.table_stripe { + td { + border-top: 0; + border-bottom: 0; + } + tr:nth-child(even) td { + background-color: rgba($white,.1); + } +} +.table_fix { + table-layout: fixed; +} + +// Freiraum +.space_box { + float: left; + display: table; + width: $space_4; + text-align: center; + vertical-align: middle; + span { + display: table-cell; + } +} + +.div_placeholder { + width: 100%; + height: $space_4; + border: $border_width_4 solid rgba($black,.1); + border-radius: $basic_corner; + padding: $basic_space; + background-color: rgba($black,.1); + svg { + vertical-align: top; + } +} +.div_placeholder_bkg { + width: 100%; + height: $space_4; + border: $border_width_4 solid rgba($black,.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); +} + +.div_info { + padding: $space_2 $basic_indent; + border-right: $basic_space solid rgba($echo_color, .6); + background-color: rgba($echo_color, .1) !important; +} + +// Print +.div_print { + margin: $space_3 auto; + padding: 1.2cm 0.6cm 0.6cm 2.4cm; + background-color: $white; +} + +.dina5 { + width: 14.8cm; + height: 21.0cm; +} + +.test { + li:after { + content: ""; + display: block; + height: 16px; + } +} +.front_color_1 { color: $alpha_color; &:after { background-color: $alpha_color; } } +.front_color_2 { color: $bravo_color; &:after { background-color: $bravo_color; } } +.front_color_3 { color: $charlie_color; &:after { background-color: $charlie_color; } } +.front_color_4 { color: $delta_color; &:after { background-color: $delta_color; } } +.front_color_5 { color: $echo_color; &:after { background-color: $echo_color; } } + +.back_color_1 { background-color: $alpha_color;} +.back_color_2 { background-color: $bravo_color;} +.back_color_3 { background-color: $charlie_color;} +.back_color_4 { background-color: $delta_color;} +.back_color_5 { background-color: $echo_color;} + +%label { + padding: 0 $half_space; +} +.label_1 { + @extend %label; + @extend .back_color_1; +} +.label_2 { + @extend %label; + @extend .back_color_2; +} +.label_3 { + @extend %label; + @extend .back_color_3; +} + diff --git a/basic/_typo.scss b/basic/_typo.scss new file mode 100644 index 0000000..00d942a --- /dev/null +++ b/basic/_typo.scss @@ -0,0 +1,297 @@ +// Basic styles +// ------------------------------------------------------------------------------ + +%basic { + font-family: $secondary_font_family; + font-size: $text_size_1; + line-height: $text_line_1; +} + +%basic_mono { + font-family: $third_font_family; + font-size: $text_size_1; + line-height: $text_line_1; +} + +%head_all { + color: $basic_head_color; +} + +%head_1 { + font-family: $secondary_font_family; + font-size: $head_size_1; + font-weight: 300; + line-height: $head_line_1; +} + +%head_2 { + font-family: $secondary_font_family; + font-size: $head_size_2; + font-weight: 300; + line-height: $head_line_2; +} + +%head_3 { + font-family: $secondary_font_family; + font-size: $head_size_3; + font-weight: 300; + line-height: $head_line_3; +} + +%head_4 { + font-family: $secondary_font_family; + font-size: $head_size_4; + font-weight: 300; + line-height: $head_line_4; +} + + + +// Specific styles +// ------------------------------------------------------------------------------ + +body { + font-size: $basic_size; + line-height: $basic_line; +} + +// Grouping +p { + @extend %basic; + margin: $basic_space 0; + color: $basic_font_color; + code { + padding: $tiny_space $half_space; + font-size: 1em; + line-height: 1; + } +} + +pre { + @extend %basic_mono; +} +.pre_code { + border-color: rgba($white,.1); + border-style: dotted; + border-width: 0 0 0 $border_width_4; + border-radius: $basic_corner; + padding: $basic_space; + background-color: rgba($white,.1); + code { + background-color: transparent; + } +} + +blockquote { + margin: $basic_space $basic_indent; +} + +figure { + margin: $space_2 $basic_indent; +} +figcaption { + @extend %basic; +} + +// Formatting +.p_col_line { + column-rule: $basic_border_width solid $black; +} +.p_col_2, .p_col_3 { + @extend p; +} +.p_col_2 { + column-count: 2; + column-gap: $space_3; +} +.p_col_3 { + column-count: 3; + column-gap: $space_4; +} + +.span_solo { + @extend %basic; + color: $basic_font_color; +} + +b, strong { + font-weight: 500; +} + +i, em { + font-style: italic; +} + +mark { + background-color: $alpha_color; +} +.mark_cursor { + color: $basic_highlight_color; + background-color: $black; +} +::-moz-selection { + color: $basic_highlight_color; + background-color: $black; +} +::selection { + color: $basic_highlight_color; + background-color: $black; +} + +.txt_center { + text-align: center; +} +.txt_right { + text-align: right; +} + +// Special +code { + @extend %basic_mono; + color: lighten($black, 12%); + background-color: rgba($white,.1); +} +.code_solo { + @extend %basic_mono; + padding: $tiny_space $half_space; + color: $basic_font_color; +} + +// Quotation +.quote_mark { + p::before { + content: "\201E \0020"; + } + p::after { + content: "\201C \0020"; + } + .quote_source { + &::before, &::after { + content: ""; + } + } +} +cite { + font-style: italic; +} + +// Line +hr { + margin: $space_3 auto; + border-width: $basic_border_width 0 0; + border-style: solid; + border-color: $black; +} +.hr_hidden { + @extend hr; + border-color: transparent; +} +.hr_dotted { + @extend hr; + border-style: dotted; +} + +// Heading +h1 { + @extend %head_1; + margin: $space_5 0 $space_3; +} + +h2 { + @extend %head_2; + margin: $space_4 0 $space_3; +} + +h3 { + @extend %head_3; + margin: $space_2 0 $space_2; + text-transform: uppercase; +} + +h4 { + @extend %head_3; + margin: $space_2 0 $space_2; + text-transform: none; +} + +h5 { + @extend %head_4; + margin: $space_2 0 $basic_space; + text-transform: none; +} + +h6 { + @extend %basic; + margin: $basic_space 0; + text-transform: none; + font-weight: bold; +} + +// Link +a { + color: $basic_link_color; +// color: lighten($basic_action_color, 20%); + text-decoration: none; + + &:active, + &:focus, + &:hover { + color: $basic_highlight_color; + } +} +.link_line { + border-bottom-width: $tiny_space; + border-bottom-style: dotted; + border-color: $basic_border_color; + background-color: transparent; + color: $basic_font_color; + transition: color $basic_duration $basic_timing; + + &:active, + &:focus, + &:hover { + background-color: $basic_action_color; + color: $basic_highlight_color; + } +} + +// List +dl, ul, ol { + margin: $space_2 0 $basic_space; +} +ul, ol { + padding-left: $basic_indent; +} +li, dt, dd { + @extend %basic; + color: $black; +} +dd { + margin-left: $basic_indent; +} +ul { + li { + list-style: none; + position: relative; + + &:before { + content: "_"; + position: absolute; + left: -1em; + } + } +} + +// Table +th, td { + @extend %basic; +} +th { + text-align: left; +} +caption { + @extend p; + padding: $half_space 0; + border: $basic_border_width dotted $basic_border_color; + text-align: center; +} \ No newline at end of file diff --git a/modules/_flexbox.scss b/modules/_flexbox.scss new file mode 100644 index 0000000..3524b24 --- /dev/null +++ b/modules/_flexbox.scss @@ -0,0 +1,175 @@ +/** + * @description + * Generates flexbox properties for a given element + * + * @author romamatusevich + * + * @link MDN https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes + * @link css-tricks http://css-tricks.com/snippets/css/a-guide-to-flexbox/ + * @link spec http://www.w3.org/TR/css3-flexbox/ + */ + +/** + * @returns + * display: -webkit-box; + * display: -moz-box; + * display: -ms-flexbox; + * display: -webkit-flex; + * display: flex; + * + * @example + * .selector { + * @include x-display-flex; + * } + */ +@mixin x-display-flex { + display: -webkit-box; // Chrome 20-, iOS 6-, Safari 3.1 -6 + display: -moz-box; // FF 19- + display: -webkit-flex; // Chrome 21 - 28 + display: -ms-flexbox; // IE 10 + display: flex; // FF 20+, Chrome 29+, Opera 12.1, 17+ +} + +/** + * @param values + * @returns + * -webkit-box-flex: ; + * -moz-box-flex: ; + * -webkit-flex: ; + * -ms-flex: ; + * flex: ; + * + * @example + * .selector { + * @include x-flex(1 1 auto); + * } + */ +@mixin x-flex ($values...) { + -webkit-box-flex: $values; // Chrome 20-, iOS 6-, Safari 3.1 - 6 + -moz-box-flex: $values; // FF 19- + -webkit-flex: $values; // Chrome 21 - 28 + -ms-flex: $values; // IE 10 + flex: $values; // FF 20+, Chrome 29+, Opera 12.1, 17+ +} + +/** + * @param value + * @returns + * -webkit-box-ordinal-group: ; + * -moz-box-ordinal-group: ; + * -ms-flex-order: ; + * -webkit-order: ; + * order: ; + * + * @example + * .selector { + * @include x-order(1); + * } + */ +@mixin x-order ($value) { + -webkit-box-ordinal-group: $value; // Chrome 20-, iOS 6-, Safari 3.1 - 6 + -moz-box-ordinal-group: $value; // FF 19- + -ms-flex-order: $value; // IE 10 + -webkit-order: $value; // Chrome 21 - 28 + order: $value; // FF 20+, Chrome 29+, Opera 12.1, 17+ +} + +/** + * @param value + * @returns + * -webkit-flex-wrap: ; + * -ms-flex-wrap: ; + * flex-wrap: ; + * + * @example + * .selector { + * @include x-flex-wrap(wrap); + * } + */ +@mixin x-flex-wrap ($value) { + // IE 10 + @if $value == nowrap { + -ms-flex-wrap: none; + } @else { + -ms-flex-wrap: $value; + } + -webkit-flex-wrap: $value; // Chrome 20-, iOS 6-, Safari 3.1 - 6 + flex-wrap: $value; // FF 28+, Chrome 21+, Opera 12.1, 17+, IE 11 +} + +/** + * @param value + * @returns + * -webkit-align-content: ; + * -moz-align-content: ; + * -ms-flex-line-pack: ; + * align-content: ; + * @example + * .selector { + * @include x-align-content(center); + * } + */ + @mixin x-align-content ($value) { + // IE 10 + @if $value == flex-start { + -ms-flex-line-pack: start; + } @else if $value == flex-end { + -ms-flex-line-pack: end; + } @else if $value == space-between { + -ms-flex-line-pack: justify; + } @else if $value == space-around { + -ms-flex-line-pack: distribute; + } @else { + -ms-flex-line-pack: $value; + } + -webkit-align-content: $value; // Chrome 20-, iOS 6-, Safari 3.1 - 6 + -moz-align-content: $value; // FF 19- + align-content: $value; // FF 20+, Chrome 21+, Opera 12.1, 17+, IE 11 + } + +/** + * @param value + * @returns + * -webkit-box-direction: ; + * -moz-box-direction: ; + * -webkit-box-orient: ; + * -moz-box-orient: ; + * -webkit-flex-direction: ; + * -moz-flex-direction: ; + * -ms-flex-direction: ; + * flex-direction: ; + * @example + * .selector { + * @include x-flex-direction(row-reverse); + * } + */ + @mixin x-flex-direction ($value) { + @if $value == row { + -webkit-box-direction: normal; + -moz-box-direction: normal; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + } @elseif $value == row-reverse { + -webkit-box-direction: reverse; + -moz-box-direction: reverse; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + } @elseif $value == column { + -webkit-box-direction: normal; + -moz-box-direction: normal; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + } @elseif $value == column-reverse { + -webkit-box-direction: reverse; + -moz-box-direction: reverse; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + } + + -webkit-flex-direction: $value; + -moz-flex-direction: $value; + -ms-flex-direction: $value; + flex-direction: $value; + } + +/* ToDo: add flex-grow, flex-shrink, flex-basis, flex-flow, align-items, align-self, justify-content mixins */ diff --git a/modules/_vendor.scss b/modules/_vendor.scss new file mode 100644 index 0000000..5d1ef73 --- /dev/null +++ b/modules/_vendor.scss @@ -0,0 +1,23 @@ +/** + * @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) + */ +@mixin vendor-prefix($name, $argument) { + -webkit-#{$name}: #{$argument}; + -ms-#{$name}: #{$argument}; + -moz-#{$name}: #{$argument}; + -o-#{$name}: #{$argument}; + #{$name}: #{$argument}; +} + diff --git a/modules/card/_card_module.scss b/modules/card/_card_module.scss new file mode 100644 index 0000000..89f3416 --- /dev/null +++ b/modules/card/_card_module.scss @@ -0,0 +1,105 @@ +// Custom extends and mixins +// ------------------------------------------------------------------------------ +@import "mixins"; +@import "extends"; + +// Card module styles +// ------------------------------------------------------------------------------ + +.card_body { + .bkgBox { + transition-duration: 800ms; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + vertical-align: top; + z-index: -1; + } + + .bkgBox > svg { + position: relative; + } + + .wrapperBox { + 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%; + } + + #content { + position: relative; + padding: 64px 64px 24px 64px; + border: 1px solid #FFF; + background-color: #F5F5F5; + z-index: 40; + } + + h1 { + margin: 16px 0; + color: #1E1E1E; + font-family: $primary_font_family; + font-size: 24px; + line-height: 1.4em; + font-weight: normal; + } + + p { + margin-top: 0; + margin-bottom: 16px; + font-family: $primary_font_family; + font-size: 12px; + line-height: 1.4em; + } + + .full { + position: absolute; + width: 128px; + height: 128px; + top: 16px; + left: 16px; + background-color: #fff; + } + + .mark { + float: left; + width: 32px; + height: 32px; + margin-top: 16px; + } + + .marked { + padding-left: 1em; + text-indent: -1em; + text-align: center; + } + + .marked:before { content: "*\0000a0" } + + .decent { color: #666 } + + a { + color: #000; + text-decoration: none; + } + a:hover { + color: #F4F9FA; + background-color: #0C85FF; + text-decoration: none; + } +} diff --git a/modules/card/_extends.scss b/modules/card/_extends.scss new file mode 100644 index 0000000..e69de29 diff --git a/modules/card/_mixins.scss b/modules/card/_mixins.scss new file mode 100644 index 0000000..e69de29 diff --git a/modules/editor/_editor_module.scss b/modules/editor/_editor_module.scss new file mode 100644 index 0000000..9708c63 --- /dev/null +++ b/modules/editor/_editor_module.scss @@ -0,0 +1,23 @@ +// Custom extends and mixins +// ------------------------------------------------------------------------------ +@import "mixins"; +@import "extends"; + +// Editor module styles +// ------------------------------------------------------------------------------ + +%wip { + border-right: $basic_space solid rgba(crimson, .8); + background-color: rgba(crimson, .1) !important; +} +.wip { + @extend %wip; + &:before, &:after { + content: ""; + display: block; + height: 48px; + } +} +.wip_txt { + @extend %wip; +} \ No newline at end of file diff --git a/modules/editor/_extends.scss b/modules/editor/_extends.scss new file mode 100644 index 0000000..e69de29 diff --git a/modules/editor/_mixins.scss b/modules/editor/_mixins.scss new file mode 100644 index 0000000..e69de29 diff --git a/modules/explanation/_explanation_module.scss b/modules/explanation/_explanation_module.scss new file mode 100644 index 0000000..a05af2d --- /dev/null +++ b/modules/explanation/_explanation_module.scss @@ -0,0 +1,114 @@ +// Custom extends and mixins +// ------------------------------------------------------------------------------ +@import "mixins"; +@import "extends"; + +// Explanation module styles +// ------------------------------------------------------------------------------ + +%expose_after { + &:after { + content: ""; + display: block; + height: 48px; + background-color: rgba($delta_color, .1) !important; + } +} +%expose_before { + &:before { + content: ""; + display: block; + height: 48px; + background-color: rgba($delta_color, .1) !important; + } +} +%expose { + &:before, &:after { + content: ""; + display: block; + height: 48px; + background-color: rgba($delta_color, .1) !important; + } +} +%exp { +} +%exp_hidden { + display: none; +} + +.exp_wrap { + position: relative; +} + +.exp_pop { + @extend %exp_hidden !optional; + position: absolute; + z-index: 100; + top: $space_5; + left: $space_5; + padding: $half_space; + border: 4px solid $basic_background_color; + border-radius: 4px; + background-color: $basic_background_color; + pointer-events: none; +} +.exp_marker_pop { + position: absolute; + top: -$basic_size / 4 * 3; + right: -$basic_size / 2; + width: $basic_size; + height: $basic_size; + border: $tiny_space solid $basic_highlight_color; + border-radius: $basic_size; + color: $basic_highlight_color; + background-color: $black; +} + +.exp_expose { + @extend %expose !optional; +} +.exp_expose_pre { + @extend %expose_after +} +.exp_expose_post { + @extend %expose_before +} + +.exp_overlay_btn { + position: fixed; + width: $size_1; + height: $size_1; + cursor: pointer; +} +.exp_help_btn { + display: table; + right: $space_2; + bottom: $space_2; + background-color: rgba($black, .4); + &:hover { + background-color: $white; + > .span_solo { + color: $echo_color; + } + } + .span_solo { + @extend %head_1; + display: table-cell; + color: rgba($echo_color, .6); + font-weight: bold; + text-align: center; + vertical-align: middle; + } +} + + + +.expose_height { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: rgba($delta_color, .1) !important; + @include vendor-prefix(transition, height .5s ease); +} diff --git a/modules/explanation/_extends.scss b/modules/explanation/_extends.scss new file mode 100644 index 0000000..e69de29 diff --git a/modules/explanation/_mixins.scss b/modules/explanation/_mixins.scss new file mode 100644 index 0000000..e69de29 diff --git a/other/normalize.css b/other/normalize.css new file mode 100644 index 0000000..9b77e0e --- /dev/null +++ b/other/normalize.css @@ -0,0 +1,461 @@ +/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ + +/** + * 1. Change the default font family in all browsers (opinionated). + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +/* Document + ========================================================================== */ + +html { + font-family: sans-serif; /* 1 */ + line-height: 1.15; /* 2 */ + -ms-text-size-adjust: 100%; /* 3 */ + -webkit-text-size-adjust: 100%; /* 3 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/** + * Add the correct display in IE 9-. + */ + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, +figure, +main { /* 1 */ + display: block; +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ + +a:active, +a:hover { + outline-width: 0; +} + +/** + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Change the border, margin, and padding in all browsers (opinionated). + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} diff --git a/robots.txt b/robots.txt index 4e91b12..991af4e 100644 --- a/robots.txt +++ b/robots.txt @@ -1,3 +1,3 @@ user-agent: * disallow: /private/ -sitemap: http://interaktionsweise.de/sitemap.xml +sitemap: http://domain.tld/sitemap.xml diff --git a/sitemap.xml b/sitemap.xml index 0c51dbf..775085b 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -2,8 +2,8 @@ - http://interaktionsweise.de/ - 2016-11-09 + http://domain.tld/ + YYYY-MM-DD monthly 1.0