From d8a0b5e8d03c11bfbddc26f79a2fd8ab9ce53629 Mon Sep 17 00:00:00 2001 From: Stephan Date: Thu, 8 Dec 2016 17:50:51 +0100 Subject: [PATCH] New structure, indentation and content Adapted w3c structure for html5 elements New files for different sections of elements Indentation now made with tabs Added optional "above the fold" file --- _abovethefold.scss | 23 ++++ _hippie.scss | 58 ++++++-- basic/_common.scss | 119 ++++++++++++++++ basic/_embedded.scss | 50 +++++++ basic/_grouping.scss | 141 +++++++++++++++++++ basic/_interactive.scss | 120 ++++++++++++++++ basic/_io.scss | 31 ----- basic/_layout.scss | 225 ------------------------------ basic/_new.scss | 35 +++++ basic/_print.scss | 18 +++ basic/_sections.scss | 93 +++++++++++++ basic/_tables.scss | 61 ++++++++ basic/_textlevel.scss | 143 +++++++++++++++++++ basic/_typo.scss | 299 ---------------------------------------- basic/_typography.scss | 58 ++++++++ 15 files changed, 906 insertions(+), 568 deletions(-) create mode 100644 _abovethefold.scss create mode 100644 basic/_common.scss create mode 100644 basic/_embedded.scss create mode 100644 basic/_grouping.scss create mode 100644 basic/_interactive.scss delete mode 100644 basic/_io.scss delete mode 100644 basic/_layout.scss create mode 100644 basic/_new.scss create mode 100644 basic/_print.scss create mode 100644 basic/_sections.scss create mode 100644 basic/_tables.scss create mode 100644 basic/_textlevel.scss delete mode 100644 basic/_typo.scss create mode 100644 basic/_typography.scss diff --git a/_abovethefold.scss b/_abovethefold.scss new file mode 100644 index 0000000..ce51a2a --- /dev/null +++ b/_abovethefold.scss @@ -0,0 +1,23 @@ +/* + * # TABLE OF CONTENTS + * + * - Reset + * - Priority CSS Rules + * + */ + + +// Reset +// Use a file outside of hippie i.e. other/normalize.css +// ----------------------------------------------------------------------------- +// @import "other/normalize.css"; + + + +/* + * # NOTE + * + * CSS rules for content which is presented immediately + * to the screen and needs priority loading + * + */ diff --git a/_hippie.scss b/_hippie.scss index 3639a7b..cb7d29f 100644 --- a/_hippie.scss +++ b/_hippie.scss @@ -1,19 +1,44 @@ -// Add Bourbon and Bitters -// ------------------------------------------------------------------------------ -// @import "bourbon/bourbon"; - +/* + * # TABLE OF CONTENTS + * + * - Reset + * - Configuration + * - Special modules + * - Basic styles + * - Sections + * - Typography + * - I/O + * - Modules + * + * - Elements + * - Navigation + * - Links + * - Menus + * - Accessibility + * - Alignments + * - Clearings + * - Widgets + * - Content + * - Posts and pages + * - Comments + * - Infinite scroll + * - Media + * - Captions + * - Galleries + * + */ // Reset // Use a file outside of hippie i.e. other/normalize.css -// ------------------------------------------------------------------------------ +// ----------------------------------------------------------------------------- @import "other/normalize.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 @@ -21,7 +46,7 @@ // 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 @@ -30,15 +55,22 @@ // Basic styles - this is the core of definitions // Individual styles can be added her -// ------------------------------------------------------------------------------ -@import "basic/typo"; -@import "basic/io"; -@import "basic/layout"; +// ----------------------------------------------------------------------------- +@import "basic/common"; +@import "basic/typography"; +// Following the w3c document element structure +// https://w3c.github.io/html/index.html#contents +@import "basic/sections"; +@import "basic/grouping"; +@import "basic/textlevel"; +@import "basic/embedded"; +@import "basic/tables"; +@import "basic/interactive"; // ADD HERE // @import "{name}/example"; -// Individual Modules and variables +// Individual Modules and variables // in dependency to other styles -// ------------------------------------------------------------------------------ +// ----------------------------------------------------------------------------- @import "modules/card/card_module"; @import "modules/editor/editor_module"; @import "modules/explanation/explanation_module"; diff --git a/basic/_common.scss b/basic/_common.scss new file mode 100644 index 0000000..01a6b75 --- /dev/null +++ b/basic/_common.scss @@ -0,0 +1,119 @@ +// Clearing and floating +// ------------------------------------------------------------------------------ + +.clear { + clear: both; + &::before, + &::after { + clear: both; + } +} +.float_left { + float: left; + margin-right: $space_3; +} +.overflow { + overflow: auto; +} + + + +// General positioning attributes +// ------------------------------------------------------------------------------ + +.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; +} + + + +// Structure attributes +// ------------------------------------------------------------------------------ + +// 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; +} + +// Space and placeholders +.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; +} diff --git a/basic/_embedded.scss b/basic/_embedded.scss new file mode 100644 index 0000000..62e9b8c --- /dev/null +++ b/basic/_embedded.scss @@ -0,0 +1,50 @@ +// Edits +// ----------------------------------------------------------------------------- + +// Images +// ----------------------------------------------------------------------------- + +img { + vertical-align: top; +} + +picture { + +} + +source { + +} + + + +// Other stuff +// ----------------------------------------------------------------------------- + +iframe { + +} + +embed { + +} + +object { + +} + +video { + +} + +audio { + +} + +map { + +} + +area { + +} diff --git a/basic/_grouping.scss b/basic/_grouping.scss new file mode 100644 index 0000000..6d51205 --- /dev/null +++ b/basic/_grouping.scss @@ -0,0 +1,141 @@ +// Basic content +// ----------------------------------------------------------------------------- + +// Paragraph +p { + @extend %basic; + margin: $basic_space 0; + color: $basic_font_color; + code { + padding: $tiny_space $half_space; + font-size: 1em; + line-height: 1; + } +} + +.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; +} + +// Address +address { + +} + +// 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; +} + +// Preformat +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; + } +} + +// Quote +blockquote { + margin: $basic_space $basic_indent; +} + +.quote_mark { + p::before { + content: "\201E \0020"; + } + p::after { + content: "\201C \0020"; + } + .quote_source { + &::before, &::after { + content: ""; + } + } +} + +// 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; + } + } +} + +// Embedded +figure { + margin: $space_2 $basic_indent; +} + +figcaption { + @extend %basic; +} + + + +// Special elements +// ----------------------------------------------------------------------------- + +main { + +} + +div { + +} \ No newline at end of file diff --git a/basic/_interactive.scss b/basic/_interactive.scss new file mode 100644 index 0000000..a5fe628 --- /dev/null +++ b/basic/_interactive.scss @@ -0,0 +1,120 @@ +// Form basics +// ----------------------------------------------------------------------------- + +form { + +} + +fieldset { + margin: $basic_space 0; + border: $basic_border; +} + +legend { + @extend %basic; + padding: 0 $half_space; +} + + + +// Common +// ----------------------------------------------------------------------------- +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; + } + } +} + +input { + +} + + + +// More +// ----------------------------------------------------------------------------- + +button { + +} + +select { + +} + +datalist { + +} + +optgroup { + +} + +option { + +} + +textarea { + +} + +output { + +} + +progress { + +} + +meter { + +} + + + +// Interactive elements +// ----------------------------------------------------------------------------- + +details { + +} + +summary { + +} + +menu { + +} + +menuitem { + +} + +dialog { + +} + + + +// Canvas +// ----------------------------------------------------------------------------- + +canvas { + +} \ No newline at end of file diff --git a/basic/_io.scss b/basic/_io.scss deleted file mode 100644 index f220e27..0000000 --- a/basic/_io.scss +++ /dev/null @@ -1,31 +0,0 @@ -// 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 deleted file mode 100644 index 02514ba..0000000 --- a/basic/_layout.scss +++ /dev/null @@ -1,225 +0,0 @@ -// Basic styles -// ------------------------------------------------------------------------------ - -html { - height: 100%; - 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/_new.scss b/basic/_new.scss new file mode 100644 index 0000000..116a6a5 --- /dev/null +++ b/basic/_new.scss @@ -0,0 +1,35 @@ +.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/_print.scss b/basic/_print.scss new file mode 100644 index 0000000..b549316 --- /dev/null +++ b/basic/_print.scss @@ -0,0 +1,18 @@ +// Print elements +// ------------------------------------------------------------------------------ + +.div_print { + margin: $space_3 auto; + padding: 1.2cm 0.6cm 0.6cm 2.4cm; + background-color: $white; +} + +.dina4 { + width: 21.0cm; + height: 29.7cm; +} + +.dina5 { + width: 14.8cm; + height: 21.0cm; +} diff --git a/basic/_sections.scss b/basic/_sections.scss new file mode 100644 index 0000000..eb1f9b7 --- /dev/null +++ b/basic/_sections.scss @@ -0,0 +1,93 @@ +// Document +// ----------------------------------------------------------------------------- + +html { + height: 100%; + box-sizing: border-box; +} + +*, +::before, +::after { + box-sizing: inherit; +} + + + +// Basic sections +// ----------------------------------------------------------------------------- + +body { + font-family: $primary_font_family; + font-size: $basic_size; + line-height: $basic_line; + color: $basic_font_color; + background-color: $basic_background_color; +} + +article { + +} + +section { + +} + +nav { + +} + +aside { + +} + +header { + +} + +footer { + +} + +// Headings +// ----------------------------------------------------------------------------- + +h1, h2, h3, h4, h5. h6 { + +} + +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; +} + diff --git a/basic/_tables.scss b/basic/_tables.scss new file mode 100644 index 0000000..34fc3ce --- /dev/null +++ b/basic/_tables.scss @@ -0,0 +1,61 @@ +// Table +// ----------------------------------------------------------------------------- + +table { + margin-top: $space_2; + margin-bottom: $space_2; + border: $basic_border; +} + +th, td { + @extend %basic; + padding: $half_space; +} + +th { + border: $basic_border_width dotted $basic_border_color; + border-bottom: $basic_border; + text-align: left; +} + +.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; +} + +caption { + @extend p; + padding: $half_space 0; + border: $basic_border_width dotted $basic_border_color; + text-align: center; +} diff --git a/basic/_textlevel.scss b/basic/_textlevel.scss new file mode 100644 index 0000000..06851dc --- /dev/null +++ b/basic/_textlevel.scss @@ -0,0 +1,143 @@ +// Links +// ----------------------------------------------------------------------------- + +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; + } +} + + + +// Other elements +// ----------------------------------------------------------------------------- + +i, em { + font-style: italic; +} + +b, strong { + font-weight: 500; +} + +small { + +} + + +// Cite +cite { + font-style: italic; +} + +q { + +} + +dfn { + +} + +abbr { + +} + +data { + +} + +time { + +} + +// Code +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; +} + +samp { + +} + +kbd { + +} + +sub, sup { + +} + +u { + +} + +// Marks +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; +} + +.span_solo { + @extend %basic; + color: $basic_font_color; +} + +br { + +} + +wbr { + +} + + + +// Edits +// ----------------------------------------------------------------------------- + +ins { + +} + +del { + +} \ No newline at end of file diff --git a/basic/_typo.scss b/basic/_typo.scss deleted file mode 100644 index 39a10c2..0000000 --- a/basic/_typo.scss +++ /dev/null @@ -1,299 +0,0 @@ -// Basic styles -// ------------------------------------------------------------------------------ - -%basic { - font-family: $primary_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-family: $primary_font_family; - font-size: $basic_size; - line-height: $basic_line; - color: $basic_font_color; -} - -// 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/basic/_typography.scss b/basic/_typography.scss new file mode 100644 index 0000000..5177e8d --- /dev/null +++ b/basic/_typography.scss @@ -0,0 +1,58 @@ +// Basic styles +// ----------------------------------------------------------------------------- + +%basic { + font-family: $primary_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 +// ----------------------------------------------------------------------------- + +.txt_center { + text-align: center; +} +.txt_right { + text-align: right; +}