interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

Klassennamen und Variablen

Browse source 
Neuer Standard für Klassennamen _ und __
This commit is contained in:
Stephan Hagedorn 2017-08-18 01:35:50 +02:00
parent e7ca01dd40
commit 933806cb72
10 changed files with 231 additions and 219 deletions
Download patch file Download diff file Expand all files Collapse all files

28
_config.scss
View file

@ -4,7 +4,7 @@
// TEXT // TEXT
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$default_font_size: 16px !default; $default_font_size: 17px !default;
$basic_size: $default_font_size; $basic_size: $default_font_size;
$default_print_font_size: 10pt !default; $default_print_font_size: 10pt !default;
@ -30,7 +30,7 @@ $head_line_2: $text_line_1;
$head_line_3: $text_line_1; $head_line_3: $text_line_1;
$head_line_4: $text_line_1; $head_line_4: $text_line_1;
$default_font_family: #{'Roboto', 'Trebuchet MS', Helvetica, 'Source Sans', Arial, sans-serif, sans} !default; $default_font_family: #{'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default;
$print_font_family: #{'Times New Roman', times}; $print_font_family: #{'Times New Roman', times};
$monospace_font_family: #{'Courier New', monospace}; $monospace_font_family: #{'Courier New', monospace};
@ -56,23 +56,25 @@ $black: black !default;
$white: white !default; $white: white !default;
$medium_gray: lighten($black, 50%) !default; $medium_gray: lighten($black, 50%) !default;
$default_front_color: $black !default;
$default_back_color: $medium_gray !default;
$basic_font_color: $black; $basic_font_color: $default_front_color;
$basic_head_color: $black; $basic_head_color: $default_front_color;
$basic_link_color: $echo_color; $basic_link_color: $echo_color;
$basic_highlight_color: $white; $basic_highlight_color: $white;
$basic_action_color: $foxtrot_color; $basic_action_color: $foxtrot_color;
$default_background_color: $medium_gray !default; $basic_back_color: $default_back_color;
$basic_background_color: $default_background_color;
$light_color: lighten($basic_background_color,5%);
$dark_color: darken($basic_background_color,10%);
$basic_border_color: $black; $light_color: lighten($basic_back_color, 5%);
$dark_color: darken($basic_back_color, 10%);
$basic_border_color: $default_front_color;
// default shadow colors // default shadow colors
// $shadow_color: fade-out($medium_gray, 0.5); // $shadow_color: fade-out($medium_gray, .5);
@ -113,7 +115,7 @@ $basic_aside_width: 20%;
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$basic_io_font_color: darken($white, 10%); $basic_io_font_color: darken($white, 10%);
$basic_io_background_color: lighten($black, 25%); $basic_io_back_color: lighten($black, 25%);
$basic_shadow: inset 0 1px 3px rgba($black, 0.06); $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); $basic_focus_shadow: $basic_shadow, 0 0 5px adjust-color($basic_action_color, $lightness: -5%, $alpha: -0.3);
@ -254,14 +256,14 @@ $webkit_ms_support: -webkit- -ms- '';
/////// Config defaults for forms /////// /////// Config defaults for forms ///////
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// $alert_background_color: $alpha_color; // $alert_back_color: $alpha_color;
// $input_disabled: $bravo_gray; // $input_disabled: $bravo_gray;
// $input_disabled_bkg: lighten($input_disabled, 75%); // $input_disabled_bkg: lighten($input_disabled, 75%);
// $input_disabled_border: lighten($input_disabled, 50%); // $input_disabled_border: lighten($input_disabled, 50%);
// $input_disabled_text: lighten($input_disabled, 50%); // $input_disabled_text: lighten($input_disabled, 50%);
// //
// $form_field_background_color: $white; // $form_field_back_color: $white;
// $form_field_focus_color: $white; // $form_field_focus_color: $white;
// $form_field_fail_bkg: $alpha_color_juliet; // $form_field_fail_bkg: $alpha_color_juliet;

2
_default.scss
View file

@ -12,7 +12,7 @@
//$white: white !default; //$white: white !default;
//$medium_gray: lighten($black, 50%) !default; //$medium_gray: lighten($black, 50%) !default;
//$default_background_color: lighten(black, 50%); //$default_back_color: lighten(black, 50%);
//$default_space: 8px; //$default_space: 8px;

65
basic/_common.scss
View file

@ -65,68 +65,35 @@
height: 100vh; height: 100vh;
} }
%full_parent {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
// Fixed elements // Fixed elements
.relative { .pos_rel {
position: relative; position: relative;
} }
.div_fix { .pos_fix {
position: fixed; position: fixed;
} }
.bottom { .pos_bottom {
bottom: 0; bottom: 0;
} }
// Absolute elements // Absolute elements
.viewport-full-body { .pos_full_view {
@extend %full_viewport; @extend %full_viewport;
background-color: transparentize($alpha_color, .5); background-color: rgba($alpha_color, .5);
} }
.hover_background_change { .hover_back_change {
background-color: darken($basic_background_color, 20%); background-color: darken($basic_back_color, 10%);
transition: background-color .2s ease-in-out; transition: background-color .2s ease-in-out;
&:hover { &:hover {
background-color: $basic_background_color; background-color: $basic_back_color;
} }
} }
// 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:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='2%' y1='2%' x2='98%' y2='98%' stroke='#000' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/></svg>") 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;
}

62
basic/_grouping.scss
View file

@ -13,17 +13,17 @@ p {
} }
} }
.p_col_line { .p__col_line {
column-rule: $basic_border_width solid $black; column-rule: $basic_border_width solid $black;
} }
.p_col_2, .p_col_3 { .p__col_2, .p__col_3 {
@extend p; @extend p;
} }
.p_col_2 { .p__col_2 {
column-count: 2; column-count: 2;
column-gap: $space_3; column-gap: $space_3;
} }
.p_col_3 { .p__col_3 {
column-count: 3; column-count: 3;
column-gap: $space_4; column-gap: $space_4;
} }
@ -41,12 +41,12 @@ hr {
border-color: $black; border-color: $black;
} }
.hr_hidden { .hr__hidden {
@extend hr; @extend hr;
border-color: transparent; border-color: transparent;
} }
.hr_dotted { .hr__dotted {
@extend hr; @extend hr;
border-style: dotted; border-style: dotted;
} }
@ -56,7 +56,7 @@ pre {
@extend %basic_mono; @extend %basic_mono;
} }
.pre_code { .pre__code {
border-color: rgba($white,.1); border-color: rgba($white,.1);
border-style: dotted; border-style: dotted;
border-width: 0 0 0 $border_width_4; border-width: 0 0 0 $border_width_4;
@ -73,14 +73,14 @@ blockquote {
margin: $basic_space $basic_indent; margin: $basic_space $basic_indent;
} }
.quote_mark { .quote__mark {
p::before { p::before {
content: "\201E \0020"; content: "\201E \0020";
} }
p::after { p::after {
content: "\201C \0020"; content: "\201C \0020";
} }
.quote_source { .quote__source {
&::before, &::after { &::before, &::after {
content: ""; content: "";
} }
@ -111,7 +111,7 @@ ul {
} }
} }
.list_dash { .list__dash {
li { li {
list-style: none; list-style: none;
position: relative; position: relative;
@ -146,7 +146,7 @@ div {
} }
.screen-box { .box__screen {
width: $basic_width; width: $basic_width;
@media screen and (orientation: landscape) { @media screen and (orientation: landscape) {
@media (min-width: $screen_small) { @media (min-width: $screen_small) {
@ -170,3 +170,43 @@ div {
border-color: $basic_border_color; border-color: $basic_border_color;
padding-top: $space_3; 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;
}
// Space and placeholders
.box__space {
float: left;
display: table;
width: $space_4;
text-align: center;
vertical-align: middle;
span {
display: table-cell;
}
}
.box__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;
}
}
.box__placeholder_bkg {
width: 100%;
height: $space_4;
border: $border_width_4 solid rgba($black,.1);
border-radius: $basic_corner;
padding: $basic_space;
/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='2%' y1='2%' x2='98%' y2='98%' stroke='#000' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/></svg>") no-repeat;
background-color: rgba($black,.1);
}

2
basic/_interactive.scss
View file

@ -33,7 +33,7 @@ label {
padding: $half_space ($half_space + 1); padding: $half_space ($half_space + 1);
border-style: solid; border-style: solid;
border-color: transparent; border-color: transparent;
background-color: $basic_io_background_color; background-color: $basic_io_back_color;
color: $basic_io_font_color; color: $basic_io_font_color;
&:hover { &:hover {

2
basic/_sections.scss
View file

@ -17,7 +17,7 @@ body {
font-size: $basic_size; font-size: $basic_size;
line-height: $basic_line; line-height: $basic_line;
color: $basic_font_color; color: $basic_font_color;
background-color: $basic_background_color; background-color: $basic_back_color;
*, *,
::before, ::before,

8
basic/_textlevel.scss
View file

@ -13,7 +13,7 @@ a {
} }
} }
.link_line { .a__line {
border-bottom-width: $tiny_space; border-bottom-width: $tiny_space;
border-bottom-style: dotted; border-bottom-style: dotted;
border-color: $basic_border_color; border-color: $basic_border_color;
@ -78,7 +78,7 @@ code {
color: lighten($basic_font_color, 12%); color: lighten($basic_font_color, 12%);
background-color: rgba($white,.1); background-color: rgba($white,.1);
} }
.code_solo { .code__solo {
@extend %basic_mono; @extend %basic_mono;
padding: $tiny_space $half_space; padding: $tiny_space $half_space;
color: $basic_font_color; color: $basic_font_color;
@ -104,7 +104,7 @@ u {
mark { mark {
background-color: $alpha_color; background-color: $alpha_color;
} }
.mark_cursor { .mark__cursor {
color: $basic_highlight_color; color: $basic_highlight_color;
background-color: $black; background-color: $black;
} }
@ -120,7 +120,7 @@ mark {
span { span {
} }
.span_solo { .span__solo {
@extend %solo; @extend %solo;
} }

187
example.css
View file

@ -59,105 +59,71 @@
margin-right: 0; margin-right: 0;
margin-left: 0; } margin-left: 0; }
.viewport-full-body { .pos_full_view {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; } height: 100vh; }
.relative { .pos_rel {
position: relative; } position: relative; }
.div_fix { .pos_fix {
position: fixed; } position: fixed; }
.bottom { .pos_bottom {
bottom: 0; } bottom: 0; }
.viewport-full-body { .pos_full_view {
background-color: rgba(250, 216, 3, 0.5); } background-color: rgba(250, 216, 3, 0.5); }
.hover_background_change { .hover_back_change {
background-color: #4d4d4d; background-color: #666666;
transition: background-color .2s ease-in-out; } transition: background-color .2s ease-in-out; }
.hover_background_change:hover { .hover_back_change:hover {
background-color: gray; } background-color: gray; }
.space_box { .span__solo, h6, p, .p__col_2, .p__col_3, caption, li, dt, dd, figcaption, th, td, legend, label {
float: left; font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans;
display: table;
width: 64px;
text-align: center;
vertical-align: middle; }
.space_box span {
display: table-cell; }
.div_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); }
.div_placeholder svg {
vertical-align: top; }
.div_placeholder_bkg {
width: 100%;
height: 64px;
border: 4px solid rgba(0, 0, 0, 0.1);
border-radius: 4px;
padding: 8px;
/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='2%' y1='2%' x2='98%' y2='98%' stroke='#000' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/></svg>") no-repeat;
background-color: rgba(0, 0, 0, 0.1); }
.div_info {
padding: 16px 2em;
border-right: 8px solid rgba(82, 190, 209, 0.6);
background-color: rgba(82, 190, 209, 0.1) !important; }
.span_solo, h6, p, .p_col_2, .p_col_3, caption, li, dt, dd, figcaption, th, td, legend, label {
font-family: Roboto, Trebuchet MS, Helvetica, Source Sans, Arial, sans-serif, sans;
font-size: 1em; font-size: 1em;
line-height: 1.5; } line-height: 1.5; }
pre, code, .code_solo { pre, code, .code__solo {
font-family: Courier New, monospace; font-family: Courier New, monospace;
font-size: 1em; font-size: 1em;
line-height: 1.5; } 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 { .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-family: Courier New, monospace;
font-size: 1em; font-size: 1em;
line-height: 1.5; } line-height: 1.5; }
h1, .exp_help_btn .span_solo, .print_body .page_date, .print_body .page_no { h1, .print_body .page_date, .print_body .page_no {
font-family: Roboto, Trebuchet MS, Helvetica, Source Sans, Arial, sans-serif, sans; font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans;
font-size: 3.1em; font-size: 3.1em;
font-weight: 300; font-weight: 300;
line-height: 1.5; } line-height: 1.5; }
h2 { h2 {
font-family: Roboto, Trebuchet MS, Helvetica, Source Sans, Arial, sans-serif, sans; font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans;
font-size: 2.5em; font-size: 2.5em;
font-weight: 300; font-weight: 300;
line-height: 1.5; } line-height: 1.5; }
h3, h4 { h3, h4 {
font-family: Roboto, Trebuchet MS, Helvetica, Source Sans, Arial, sans-serif, sans; font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans;
font-size: 1.8em; font-size: 1.8em;
font-weight: 300; font-weight: 300;
line-height: 1.5; } line-height: 1.5; }
h5 { h5 {
font-family: Roboto, Trebuchet MS, Helvetica, Source Sans, Arial, sans-serif, sans; font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans;
font-size: 1.35em; font-size: 1.35em;
font-weight: 300; font-weight: 300;
line-height: 1.5; } line-height: 1.5; }
.span_solo { .span__solo {
color: black; } color: black; }
.table-link_list .cell_text .shorten { .table-link_list .cell_text .shorten {
@ -179,8 +145,8 @@ html {
body { body {
box-sizing: box-sizing; box-sizing: box-sizing;
font-family: Roboto, Trebuchet MS, Helvetica, Source Sans, Arial, sans-serif, sans; font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans;
font-size: 16px; font-size: 17px;
line-height: 1; line-height: 1;
color: black; color: black;
background-color: gray; } background-color: gray; }
@ -227,55 +193,55 @@ h6 {
text-transform: none; text-transform: none;
font-weight: bold; } font-weight: bold; }
p, .p_col_2, .p_col_3, caption { p, .p__col_2, .p__col_3, caption {
margin: 8px 0; margin: 8px 0;
color: black; } color: black; }
p code, .p_col_2 code, .p_col_3 code, caption code { p code, .p__col_2 code, .p__col_3 code, caption code {
padding: 1px 4px; padding: 1px 4px;
font-size: 1em; font-size: 1em;
line-height: 1; } line-height: 1; }
.p_col_line { .p__col_line {
column-rule: 1px solid black; } column-rule: 1px solid black; }
.p_col_2 { .p__col_2 {
column-count: 2; column-count: 2;
column-gap: 32px; } column-gap: 32px; }
.p_col_3 { .p__col_3 {
column-count: 3; column-count: 3;
column-gap: 64px; } column-gap: 64px; }
hr, .hr_hidden, .hr_dotted { hr, .hr__hidden, .hr__dotted {
margin: 32px auto; margin: 32px auto;
border-width: 1px 0 0; border-width: 1px 0 0;
border-style: solid; border-style: solid;
border-color: black; } border-color: black; }
.hr_hidden { .hr__hidden {
border-color: transparent; } border-color: transparent; }
.hr_dotted { .hr__dotted {
border-style: dotted; } border-style: dotted; }
.pre_code { .pre__code {
border-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.1);
border-style: dotted; border-style: dotted;
border-width: 0 0 0 4px; border-width: 0 0 0 4px;
border-radius: 4px; border-radius: 4px;
padding: 8px; padding: 8px;
background-color: rgba(255, 255, 255, 0.1); } background-color: rgba(255, 255, 255, 0.1); }
.pre_code code { .pre__code code {
background-color: transparent; } background-color: transparent; }
blockquote { blockquote {
margin: 8px 2em; } margin: 8px 2em; }
.quote_mark p::before, .quote_mark .p_col_2::before, .quote_mark .p_col_3::before, .quote_mark caption::before { .quote__mark p::before, .quote__mark .p__col_2::before, .quote__mark .p__col_3::before, .quote__mark caption::before {
content: "\201E \0020"; } content: "\201E \0020"; }
.quote_mark p::after, .quote_mark .p_col_2::after, .quote_mark .p_col_3::after, .quote_mark caption::after { .quote__mark p::after, .quote__mark .p__col_2::after, .quote__mark .p__col_3::after, .quote__mark caption::after {
content: "\201C \0020"; } content: "\201C \0020"; }
.quote_mark .quote_source::before, .quote_mark .quote_source::after { .quote__mark .quote__source::before, .quote__mark .quote__source::after {
content: ""; } content: ""; }
dl, ul, ol { dl, ul, ol {
@ -293,10 +259,10 @@ dd {
ul li { ul li {
list-style: square; } list-style: square; }
.list_dash li { .list__dash li {
list-style: none; list-style: none;
position: relative; } position: relative; }
.list_dash li:before { .list__dash li:before {
content: "_"; content: "_";
position: absolute; position: absolute;
left: -1em; } left: -1em; }
@ -304,7 +270,7 @@ ul li {
figure { figure {
margin: 16px 2em; } margin: 16px 2em; }
.screen-box { .box__screen {
width: 96%; width: 96%;
margin: 0 auto; margin: 0 auto;
border-top-width: 8px; border-top-width: 8px;
@ -312,33 +278,67 @@ figure {
border-color: black; border-color: black;
padding-top: 32px; } padding-top: 32px; }
@media screen and (orientation: landscape) and (min-width: 1024px) { @media screen and (orientation: landscape) and (min-width: 1024px) {
.screen-box { .box__screen {
width: 80%; } } width: 80%; } }
@media screen and (orientation: landscape) and (min-width: 1280px) { @media screen and (orientation: landscape) and (min-width: 1280px) {
.screen-box { .box__screen {
width: 60%; } } width: 60%; } }
@media screen and (orientation: landscape) and (min-width: 1920px) { @media screen and (orientation: landscape) and (min-width: 1920px) {
.screen-box { .box__screen {
width: 48%; } } width: 48%; } }
@media screen and (orientation: portrait) and (min-width: 1024px) { @media screen and (orientation: portrait) and (min-width: 1024px) {
.screen-box { .box__screen {
width: 80%; } } 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:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='2%' y1='2%' x2='98%' y2='98%' stroke='#000' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/></svg>") no-repeat;
background-color: rgba(0, 0, 0, 0.1); }
a { a {
color: #52bed1; color: #52bed1;
text-decoration: none; } text-decoration: none; }
a:active, a:focus, a:hover { a:active, a:focus, a:hover {
color: white; } color: white; }
.link_line { .a__line {
border-bottom-width: 1px; border-bottom-width: 1px;
border-bottom-style: dotted; border-bottom-style: dotted;
border-color: black; border-color: black;
background-color: transparent; background-color: transparent;
color: black; color: black;
transition: color 150ms ease; } transition: color 150ms ease; }
.link_line:active, .link_line:focus, .link_line:hover { .a__line:active, .a__line:focus, .a__line:hover {
background-color: #0c85ff; background-color: #0c85ff;
color: white; } color: white; }
@ -355,14 +355,14 @@ code {
color: #1f1f1f; color: #1f1f1f;
background-color: rgba(255, 255, 255, 0.1); } background-color: rgba(255, 255, 255, 0.1); }
.code_solo { .code__solo {
padding: 1px 4px; padding: 1px 4px;
color: black; } color: black; }
mark { mark {
background-color: #fad803; } background-color: #fad803; }
.mark_cursor { .mark__cursor {
color: white; color: white;
background-color: black; } background-color: black; }
@ -550,7 +550,7 @@ legend {
font-size: 24px; font-size: 24px;
line-height: 1.4em; line-height: 1.4em;
font-weight: normal; } font-weight: normal; }
.card_body p, .card_body .p_col_2, .card_body .p_col_3, .card_body caption { .card_body p, .card_body .p__col_2, .card_body .p__col_3, .card_body caption {
margin-top: 0; margin-top: 0;
margin-bottom: 16px; margin-bottom: 16px;
font-size: 12px; font-size: 12px;
@ -617,19 +617,19 @@ legend {
.exp_marker_pop { .exp_marker_pop {
position: absolute; position: absolute;
top: -12px; top: -12.75px;
right: -8px; right: -8.5px;
width: 16px; width: 17px;
height: 16px; height: 17px;
border: 1px solid white; border: 1px solid white;
border-radius: 16px; border-radius: 17px;
color: white; color: white;
background-color: black; } background-color: black; }
.exp_overlay_btn { .exp_overlay_btn {
position: fixed; position: fixed;
width: 64px; width: 3em;
height: 64px; height: 2em;
cursor: pointer; } cursor: pointer; }
.exp_help_btn { .exp_help_btn {
@ -639,12 +639,13 @@ legend {
background-color: rgba(0, 0, 0, 0.4); } background-color: rgba(0, 0, 0, 0.4); }
.exp_help_btn:hover { .exp_help_btn:hover {
background-color: white; } background-color: white; }
.exp_help_btn:hover > .span_solo { .exp_help_btn:hover > .span__solo {
color: #52bed1; } color: black; }
.exp_help_btn .span_solo { .exp_help_btn .span__solo {
display: table-cell; display: table-cell;
color: rgba(82, 190, 209, 0.6); color: rgba(255, 255, 255, 0.8);
font-weight: bold; font-family: Courier New, monospace;
font-size: 1.4em;
text-align: center; text-align: center;
vertical-align: middle; } vertical-align: middle; }
@ -724,7 +725,7 @@ legend {
flex-direction: row; } flex-direction: row; }
.print_body *[class^="din"] .page_foot *:last-child { .print_body *[class^="din"] .page_foot *:last-child {
margin-bottom: 0; } 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 { .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; flex: 1 0 auto;
margin: 0; margin: 0;
font-size: 8pt; font-size: 8pt;
@ -735,7 +736,7 @@ legend {
font-size: 20pt; font-size: 20pt;
line-height: 1; line-height: 1;
text-align: right; } 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 { .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; } text-align: left; }
.print_body *[class^="din"] .page_content { .print_body *[class^="din"] .page_content {
margin-top: 10cm; margin-top: 10cm;

69
example.html
View file

@ -14,13 +14,13 @@
<link rel="stylesheet" type="text/css" media="all" href="./example.css"/> <link rel="stylesheet" type="text/css" media="all" href="./example.css"/>
</head> </head>
<body class="hover_background_change"> <body class="hover_back_change">
<div class="layer"> <div class="layer">
<div class="exp_overlay_btn exp_help_btn"><span class="span_solo">?</span></div> <div class="exp_overlay_btn exp_help_btn"><span class="span__solo">?</span></div>
</div> </div>
<div class="screen-box"> <div class="box__screen">
Dies ist einfach nur Text.<br/>Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen. Dies ist einfach nur Text.<br/>Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.
<p>Es wirken nur die Eigenschaften des <code>&lt;body&gt;</code> 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.</p> <p>Es wirken nur die Eigenschaften des <code>&lt;body&gt;</code> 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.</p>
<h1>Bereiche</h1> <h1>Bereiche</h1>
@ -61,19 +61,19 @@
<p>Ein Absatz <code>&lt;p&gt;</code>. Zugegeben ein kurzer.</p> <p>Ein Absatz <code>&lt;p&gt;</code>. Zugegeben ein kurzer.</p>
<p>Aus mehreren Absätzen wird ein ganzer Text. Solche Texte haben gelegentlich großen informativen oder unterhaltsamen Charakter.<br/>Einfache Zeilenumbrüche werden darin mit <code>&lt;br&gt;</code> erreicht.</p> <p>Aus mehreren Absätzen wird ein ganzer Text. Solche Texte haben gelegentlich großen informativen oder unterhaltsamen Charakter.<br/>Einfache Zeilenumbrüche werden darin mit <code>&lt;br&gt;</code> erreicht.</p>
<p>Die Unterteilung in Absätze ist eine von vielen Möglichkeiten Texte zu gruppieren und ihnen Struktur zu verleihen. In diesem Dokument flattert Text normalerweise von Links daher. Er ist schwarz und in einer serifenlosen Schrift gesetzt. Zu weiteren Formatierungen, die eher auf einer Ebene der Zeichen einzuordnen ist, wird im Verlauf näher eingegangen. Zunächst die Struktur:</p> <p>Die Unterteilung in Absätze ist eine von vielen Möglichkeiten Texte zu gruppieren und ihnen Struktur zu verleihen. In diesem Dokument flattert Text normalerweise von Links daher. Er ist schwarz und in einer serifenlosen Schrift gesetzt. Zu weiteren Formatierungen, die eher auf einer Ebene der Zeichen einzuordnen ist, wird im Verlauf näher eingegangen. Zunächst die Struktur:</p>
<p class="txt_center js_pop">Text sitzt gerne auch mal zentriert.</p><div class="exp_pop"><code class="code_solo">p.txt_center</code></div> <p class="txt_center js_pop">Text sitzt gerne auch mal zentriert.</p><div class="exp_pop"><code class="code__solo">p.txt_center</code></div>
<p class="txt_right js_pop">Rechtsbündig ist schon eher eine Ausnahme bzw. Besonderheit.</p><div class="exp_pop"><code class="code_solo">p.txt_right</code></div> <p class="txt_right js_pop">Rechtsbündig ist schon eher eine Ausnahme bzw. Besonderheit.</p><div class="exp_pop"><code class="code__solo">p.txt_right</code></div>
<p>Texte können auf verschiedene Arten unterteilt werden. Dafür werden unterschiedlich formatierte <code>&lt;hr&gt;</code> Elemente verwendet. Die horizontale Linie ist die Ausgangsformatierung, daher auch der abgekürzte Name des Elements. Eine Linie ist schwarz und durchgezogen.</p> <p>Texte können auf verschiedene Arten unterteilt werden. Dafür werden unterschiedlich formatierte <code>&lt;hr&gt;</code> Elemente verwendet. Die horizontale Linie ist die Ausgangsformatierung, daher auch der abgekürzte Name des Elements. Eine Linie ist schwarz und durchgezogen.</p>
<hr/> <hr/>
<p>Es ist auch eine unsichtbare Unterteilung möglich:</p> <p>Es ist auch eine unsichtbare Unterteilung möglich:</p>
<hr class="hr_hidden js_pop"/><div class="exp_pop"><code class="code_solo">hr.hr_hidden</code></div> <hr class="hr__hidden js_pop"/><div class="exp_pop"><code class="code__solo">hr.hr__hidden</code></div>
<p>Die Linie darf auch gepunkted sein. Zudem sind verschiedene Längen möglich. Diese sind immer ein Prozentwert der verfügbaren Breite. Hier in gleicher Reihenfolge 100%, 50% und 25%:</p> <p>Die Linie darf auch gepunkted sein. Zudem sind verschiedene Längen möglich. Diese sind immer ein Prozentwert der verfügbaren Breite. Hier in gleicher Reihenfolge 100%, 50% und 25%:</p>
<hr class="hr_dotted js_pop" emmet/><div class="exp_pop"><code class="code_solo">hr.hr_dotted</code></div><!--hr.hr_dotted--> <hr class="hr__dotted js_pop" emmet/><div class="exp_pop"><code class="code__solo">hr.hr__dotted</code></div><!--hr.hr__dotted-->
<hr class="center_50 js_pop"/><div class="exp_pop"><code class="code_solo">hr.center_50</code></div> <hr class="center_50 js_pop"/><div class="exp_pop"><code class="code__solo">hr.center_50</code></div>
<hr class="hr_dotted center_25 js_pop"/><div class="exp_pop"><code class="code_solo">hr.hr_dotted.center_25</code></div> <hr class="hr__dotted center_25 js_pop"/><div class="exp_pop"><code class="code__solo">hr.hr__dotted.center_25</code></div>
<p class="p_col_2 js_pop">Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu. Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilanfang zu finden. Die vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung viele Formen annehmen.</p><div class="exp_pop"><code class="code_solo">p.p_col_2</code></div> <p class="p__col_2 js_pop">Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu. Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilanfang zu finden. Die vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung viele Formen annehmen.</p><div class="exp_pop"><code class="code__solo">p.p__col_2</code></div>
<p class="p_col_3 p_col_line js_pop">Drei Spalten gilt es jetzt also zu Füllen. Dann erst wird die Trennung der Spalten durch eine Linie sichtbar.</p><div class="exp_pop"><code class="code_solo">p.p_col_3.p_col_line</code></div> <p class="p__col_3 p__col_line js_pop">Drei Spalten gilt es jetzt also zu Füllen. Dann erst wird die Trennung der Spalten durch eine Linie sichtbar.</p><div class="exp_pop"><code class="code__solo">p.p__col_3.p__col_line</code></div>
<p class="p_col_3 p_col_line">Ist der Text nicht lang genug bleibt eventuell eine Spalte leer. Diesmal wird dies aber nicht passieren, denn das Anschauungsbeispiel ist ja nun durch den vorherigen Absatz schon gegeben.<br/>Oft ist es sinnvoll, Absätze mit mehreren Spalten deutlich von nachfolgenden Absätzen zu trennen. Da der Textfluss spaltenweise verläuft, liest man eventuell an der falschen Stelle weiter. Ach das ziegen diese beiden Absätze ganz gut.</p> <p class="p__col_3 p__col_line">Ist der Text nicht lang genug bleibt eventuell eine Spalte leer. Diesmal wird dies aber nicht passieren, denn das Anschauungsbeispiel ist ja nun durch den vorherigen Absatz schon gegeben.<br/>Oft ist es sinnvoll, Absätze mit mehreren Spalten deutlich von nachfolgenden Absätzen zu trennen. Da der Textfluss spaltenweise verläuft, liest man eventuell an der falschen Stelle weiter. Ach das ziegen diese beiden Absätze ganz gut.</p>
<p>Es gibt die Möglichkeit vorformatierten Text darzustellen <code>&lt;pre&gt;</code>.</p> <p>Es gibt die Möglichkeit vorformatierten Text darzustellen <code>&lt;pre&gt;</code>.</p>
<pre>Dadurch<br/> bleiben<br/> Einrückungen<br/> durch<br/> Tabulatoren<br/> erhalten.</pre> <pre>Dadurch<br/> bleiben<br/> Einrückungen<br/> durch<br/> Tabulatoren<br/> erhalten.</pre>
<p>Text bekommt durch Listen besondere optische wie auch inhaltliche Struktur. Es gibt ungeordnete <code>&lt;ul&gt;</code> und geordnete Listen <code>&lt;ol&gt;</code> sowie Beschreibungslisten <code>&lt;dl&gt;</code>. Die beiden ersten Varianten beinhalten das Listenelement <code>&lt;li&gt;</code>. Beschreibungslisten beinhalten jeweils das Paar von Ausdruck <code>&lt;dt&gt;</code> und Beschreibung <code>&lt;dd&gt;</code>. Im Folgenden eine Liste der Listen in ihrer Ausgangskonfiguration:</p> <p>Text bekommt durch Listen besondere optische wie auch inhaltliche Struktur. Es gibt ungeordnete <code>&lt;ul&gt;</code> und geordnete Listen <code>&lt;ol&gt;</code> sowie Beschreibungslisten <code>&lt;dl&gt;</code>. Die beiden ersten Varianten beinhalten das Listenelement <code>&lt;li&gt;</code>. Beschreibungslisten beinhalten jeweils das Paar von Ausdruck <code>&lt;dt&gt;</code> und Beschreibung <code>&lt;dd&gt;</code>. Im Folgenden eine Liste der Listen in ihrer Ausgangskonfiguration:</p>
@ -81,7 +81,7 @@
<li>Ungeordnete</li> <li>Ungeordnete</li>
<li>Listen</li> <li>Listen</li>
</ul> </ul>
<ul class="list_dash"> <ul class="list__dash">
<li>Verschiedener</li> <li>Verschiedener</li>
<li>Art</li> <li>Art</li>
</ul> </ul>
@ -98,9 +98,9 @@
<p>Wird Bezug auf fremde Inhalte genommen, kommt ein Zitat <code>&lt;blockquote&gt;</code> zur Anwendung. Es besteht aus der Aussage und der Quelle.</p> <p>Wird Bezug auf fremde Inhalte genommen, kommt ein Zitat <code>&lt;blockquote&gt;</code> zur Anwendung. Es besteht aus der Aussage und der Quelle.</p>
<blockquote class="js_pop" cite="https://de.wikipedia.org/wiki/Zitat/"> <blockquote class="js_pop" cite="https://de.wikipedia.org/wiki/Zitat/">
<p>Ein Zitat (das, lateinisch citatum „Angeführtes, Aufgerufenes“ zu lat. citāre „in Bewegung setzen, vorladen“, vgl. „jemanden vor Gericht zitieren“) ist eine wörtlich übernommene Stelle aus einem Text oder ein Hinweis auf eine bestimmte Textstelle.</p> <p>Ein Zitat (das, lateinisch citatum „Angeführtes, Aufgerufenes“ zu lat. citāre „in Bewegung setzen, vorladen“, vgl. „jemanden vor Gericht zitieren“) ist eine wörtlich übernommene Stelle aus einem Text oder ein Hinweis auf eine bestimmte Textstelle.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/Zitat/">Wikipedia</a></p> <p class="quote__source"><a href="https://de.wikipedia.org/wiki/Zitat/">Wikipedia</a></p>
</blockquote> </blockquote>
<div class="exp_pop"><code class="code_solo">blockquote>p+p.quote_source</code></div> <div class="exp_pop"><code class="code__solo">blockquote>p+p.quote__source</code></div>
<p>Auch Inhalte, die nicht in Textform sind, können durch einen Bezug integriert werden. Wie diese Fahne werden sie mit <code>&lt;figure&gt;</code> umschlossen und tragen eine Bezeichnung.</p> <p>Auch Inhalte, die nicht in Textform sind, können durch einen Bezug integriert werden. Wie diese Fahne werden sie mit <code>&lt;figure&gt;</code> umschlossen und tragen eine Bezeichnung.</p>
<figure class="js_pop"> <figure class="js_pop">
<figcaption>Fahne</figcaption> <figcaption>Fahne</figcaption>
@ -116,29 +116,29 @@
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/> <polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
</svg> </svg>
</figure> </figure>
<div class="exp_pop"><code class="code_solo">figure>figcaption+{element}</code></div> <div class="exp_pop"><code class="code__solo">figure>figcaption+{element}</code></div>
<p>Eine von sich aus undefinierte Möglichkeit zur Gruppierung von Text besteht durch <code>&lt;div&gt;</code>. Dieses Element hat, ohne weitere Klassifizierung keine Auswirkungen auf die Erscheinung oder die inhaltliche Aussage. Daher der allgemeine Einsatz.</p> <p>Eine von sich aus undefinierte Möglichkeit zur Gruppierung von Text besteht durch <code>&lt;div&gt;</code>. Dieses Element hat, ohne weitere Klassifizierung keine Auswirkungen auf die Erscheinung oder die inhaltliche Aussage. Daher der allgemeine Einsatz.</p>
<div class="div_info"><p>Es wird allerdings häufig eingesetzt und bekommt vielfältige Funktionen zugeordnet wie diese hervorgehobene Information zeigt.</p></div> <div class="box__info"><p>Es wird allerdings häufig eingesetzt und bekommt vielfältige Funktionen zugeordnet wie diese hervorgehobene Information zeigt.</p></div>
<p>Eine sehr klar definierte Gruppierung stellt das Element <code>&lt;main&gt;</code> dar. Es umschließt den hauptsächlichen Inhalt des Dokumentes.</p> <p>Eine sehr klar definierte Gruppierung stellt das Element <code>&lt;main&gt;</code> dar. Es umschließt den hauptsächlichen Inhalt des Dokumentes.</p>
<h1 id="textlevel">Textebene</h1> <h1 id="textlevel">Textebene</h1>
<h2>Verweise</h2> <h2>Verweise</h2>
<p>Ein wesentlicher Bestandteil von Hypertext sind Verweise <code>&lt;a&gt;</code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden. <a class="link_line js_pop" href="#links">Interne Verweise</a><span class="exp_pop"><code class="code_solo">a.link_line</code></span> können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren. <a class="link_line" href="http://de.wikipedia.org">Externe Verweise</a> verknüpfen Inhalte über das gesamte Netzwerk hinweg. Sie können auch auf E-Mail Adressen oder Dateien zeigen.</p> <p>Ein wesentlicher Bestandteil von Hypertext sind Verweise <code>&lt;a&gt;</code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen und externen Verweisen unterschieden werden. <a class="a__line js_pop" href="#links">Interne Verweise</a><span class="exp_pop"><code class="code__solo">a.a__line</code></span> können Verknüpfungen innerhalb des aktuellen Dokumentes sein oder auch Funktionen aktivieren. <a class="a__line" href="http://de.wikipedia.org">Externe Verweise</a> verknüpfen Inhalte über das gesamte Netzwerk hinweg. Sie können auch auf E-Mail Adressen oder Dateien zeigen.</p>
<p>Nicht nur Text kann als Verweis verwendet werden. Auch andere Elemente wie Bilder können verknüpft werden. Abhängig von ihrer Funktion und ihrem Zweck, werden Verweise unterschiedlich formatiert. <a href="#">Farbige</a> oder <a class="link_line" href="#">unterstrichene Varianten</a> sind möglich.</p> <p>Nicht nur Text kann als Verweis verwendet werden. Auch andere Elemente wie Bilder können verknüpft werden. Abhängig von ihrer Funktion und ihrem Zweck, werden Verweise unterschiedlich formatiert. <a href="#">Farbige</a> oder <a class="a__line" href="#">unterstrichene Varianten</a> sind möglich.</p>
<p>Wird der Verweis innerhalb eines <code>&lt;nav&gt;</code> Elementes notiert, bekommt er die spezielle Bedeutung eines Navigationsverweises innerhalb des Dokumentes oder der Anwendung. Auf diese Verwendung wird im Folgenden genauer eingegangen <span class="wip_txt">...</span></p> <p>Wird der Verweis innerhalb eines <code>&lt;nav&gt;</code> Elementes notiert, bekommt er die spezielle Bedeutung eines Navigationsverweises innerhalb des Dokumentes oder der Anwendung. Auf diese Verwendung wird im Folgenden genauer eingegangen <span class="wip_txt">...</span></p>
<h2>Formatierungen</h2> <h2>Formatierungen</h2>
<p>Texte, Wörter oder Zeichen können vielfältig formatiert werden. Sie können <b>fett</b> <code>&lt;b&gt;</code> oder <i>kursiv</i> <code>&lt;i&gt;</code> geschrieben sein. <b><i>Auch beides ist möglich!</i>?</b>! Sollen sie nicht nur anders <b>aussehen</b>, sondern auch <i>eine besondere inhaltliche Bedeutung</i> bekommen, werden sie mit <code>&lt;strong&gt;</code> und <code>&lt;em&gt;</code> ausgezeichnet.</p> <p>Texte, Wörter oder Zeichen können vielfältig formatiert werden. Sie können <b>fett</b> <code>&lt;b&gt;</code> oder <i>kursiv</i> <code>&lt;i&gt;</code> geschrieben sein. <b><i>Auch beides ist möglich!</i>?</b>! Sollen sie nicht nur anders <b>aussehen</b>, sondern auch <i>eine besondere inhaltliche Bedeutung</i> bekommen, werden sie mit <code>&lt;strong&gt;</code> und <code>&lt;em&gt;</code> ausgezeichnet.</p>
<p>Gerade bei wörtlichen Zitierungen kommt häufig das Anführungszeichen zum Einsatz. Es kann durch die Formatierung automatisch ergänzt werden.</p> <p>Gerade bei wörtlichen Zitierungen kommt häufig das Anführungszeichen zum Einsatz. Es kann durch die Formatierung automatisch ergänzt werden.</p>
<blockquote class="quote_mark js_pop" cite=""> <blockquote class="quote__mark js_pop" cite="">
<p>Das kannst du schon so machen aber dann isses halt Kacke.</p> <p>Das kannst du schon so machen aber dann isses halt Kacke.</p>
<p class="quote_source">o. V.</p> <p class="quote__source">o. V.</p>
</blockquote> </blockquote>
<div class="exp_pop"><code class="code_solo">blockquote.quote_mark>p+p.quote_source</code></div> <div class="exp_pop"><code class="code__solo">blockquote.quote__mark>p+p.quote__source</code></div>
<p>Ein besonderer inhaltlicher Bezug ist der Titel eines Werkes. Sowas kann mit <code>&lt;cite&gt;</code> ausgezeichnet werden. <cite>Pulp Fiction</cite>, super Film - zum Beispiel.</p> <p>Ein besonderer inhaltlicher Bezug ist der Titel eines Werkes. Sowas kann mit <code>&lt;cite&gt;</code> ausgezeichnet werden. <cite>Pulp Fiction</cite>, super Film - zum Beispiel.</p>
<p>Auch die Auszeichnung <code>&lt;code&gt;</code> wurde bis hier hin schon verwendet. Sie markiert Maschinensprache. Für zusammenhängende Blöcke wird die Auszeichnung oft in Kombination mit dem Element <code>&lt;pre&gt;</code> verwendet:</p> <p>Auch die Auszeichnung <code>&lt;code&gt;</code> wurde bis hier hin schon verwendet. Sie markiert Maschinensprache. Für zusammenhängende Blöcke wird die Auszeichnung oft in Kombination mit dem Element <code>&lt;pre&gt;</code> verwendet:</p>
<pre class="pre_code"><code>&lt;html&gt;<br/> &lt;head&gt;<br/> &lt;title&gt;Hyper Text Markup Language&lt;/title&gt;<br/> &lt;/head&gt;<br/> &lt;body id="root"&gt;<br/> &lt;!-- Content goes here --&gt;<br/> &lt;p class="example"&gt;Just like this.&lt;/p&gt;<br/> &lt;/body&gt;<br/>&lt;/html&gt;</code></pre> <pre class="pre__code"><code>&lt;html&gt;<br/> &lt;head&gt;<br/> &lt;title&gt;Hyper Text Markup Language&lt;/title&gt;<br/> &lt;/head&gt;<br/> &lt;body id="root"&gt;<br/> &lt;!-- Content goes here --&gt;<br/> &lt;p class="example"&gt;Just like this.&lt;/p&gt;<br/> &lt;/body&gt;<br/>&lt;/html&gt;</code></pre>
<p>Dabei bleiben vorhandene Textformatierungen wie Zeilenumbrüche und Einrückung erhalten.</p> <p>Dabei bleiben vorhandene Textformatierungen wie Zeilenumbrüche und Einrückung erhalten.</p>
<p>Die Zeichen in Absätzen bis hin zu ganzen Texten können, mit einem geeigneten Eingabegerät, markiert werden. Dies stellt sich wie folgt dar:</p> <p>Die Zeichen in Absätzen bis hin zu ganzen Texten können, mit einem geeigneten Eingabegerät, markiert werden. Dies stellt sich wie folgt dar:</p>
<p class="txt_center">Bei<mark class="mark_cursor">spiel zum mark</mark>ieren ^^.</p> <p class="txt_center">Bei<mark class="mark__cursor">spiel zum mark</mark>ieren ^^.</p>
<p>Eine Markierung kann, mittels <code>&lt;mark&gt;</code>, auch durch den Autor geschehen. Diese stellt sich ein wenig anders dar: <mark>Diese Worte sind markiert.</mark></p> <p>Eine Markierung kann, mittels <code>&lt;mark&gt;</code>, auch durch den Autor geschehen. Diese stellt sich ein wenig anders dar: <mark>Diese Worte sind markiert.</mark></p>
<h2>Änderungen</h2> <h2>Änderungen</h2>
@ -160,7 +160,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="exp_pop"><code class="code_solo">table.width_full>tbody>tr>td*2^tr>td[colspan=2]</code></div> <div class="exp_pop"><code class="code__solo">table.width_full>tbody>tr>td*2^tr>td[colspan=2]</code></div>
<div class="overflow"> <div class="overflow">
<table class="float_left js_pop"> <table class="float_left js_pop">
<tbody> <tbody>
@ -173,7 +173,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="exp_pop"><code class="code_solo">table>tbody>tr>td*2^tr>td[colspan=2]</code></div> <div class="exp_pop"><code class="code__solo">table>tbody>tr>td*2^tr>td[colspan=2]</code></div>
<table class="table_blank float_left js_pop"> <table class="table_blank float_left js_pop">
<tbody> <tbody>
<tr> <tr>
@ -185,7 +185,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="exp_pop"><code class="code_solo">table.table_blank>tbody>tr>td*2^tr>td[colspan=2]</code></div> <div class="exp_pop"><code class="code__solo">table.table_blank>tbody>tr>td*2^tr>td[colspan=2]</code></div>
</div> </div>
<p>Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre Zellverteilung:</p> <p>Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre Zellverteilung:</p>
<table class="width_full table_fix js_pop"> <table class="width_full table_fix js_pop">
@ -227,8 +227,8 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="exp_pop"><code class="code_solo">table.width_full.table_fix>caption+thead>tr>th*3^^tfoot>tr>td*3^^tbody>(tr>td*3)*3</code></div> <div class="exp_pop"><code class="code__solo">table.width_full.table_fix>caption+thead>tr>th*3^^tfoot>tr>td*3^^tbody>(tr>td*3)*3</code></div>
<hr class="hr_hidden"> <hr class="hr__hidden">
<p>Viele weitere Formate sind möglich <span class="wip_txt">...</span></p> <p>Viele weitere Formate sind möglich <span class="wip_txt">...</span></p>
<table class="width_full js_pop"> <table class="width_full js_pop">
<thead> <thead>
@ -260,7 +260,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="exp_pop"><code class="code_solo">table.width_full>thead>tr>th.precol+th[colspan=2]^^tbody>tr>td.precol+td*2^tr>td.precol+td[colspan=2]</code></div> <div class="exp_pop"><code class="code__solo">table.width_full>thead>tr>th.precol+th[colspan=2]^^tbody>tr>td.precol+td*2^tr>td.precol+td[colspan=2]</code></div>
<table class="width_full table_stripe table_free"> <table class="width_full table_stripe table_free">
<thead> <thead>
<tr> <tr>
@ -358,14 +358,14 @@
<h1>Struktur</h1> <h1>Struktur</h1>
<div class="div_placeholder"> <div class="box__placeholder">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%">
<line x1='0' y1='0' x2='100%' y2='100%' stroke='#000' stroke-width='.5'/> <line x1='0' y1='0' x2='100%' y2='100%' stroke='#000' stroke-width='.5'/>
<line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/> <line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/>
</svg> </svg>
</div> </div>
<hr class="hr_hidden"/> <hr class="hr__hidden"/>
<div class="div_placeholder_bkg"></div> <div class="box__placeholder_bkg"></div>
<h1>Medien</h1> <h1>Medien</h1>
<h1>Druck</h1> <h1>Druck</h1>
@ -417,7 +417,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="exp_pop"><code class="code_solo">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</code></div> <div class="exp_pop"><code class="code__solo">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</code></div>
</article> </article>
@ -464,6 +464,7 @@
); );
// WIP Activates layer with explanation elements // WIP Activates layer with explanation elements
// Besser :after oder :before benutzen
$(".exp_help_btn").click(function(e){ $(".exp_help_btn").click(function(e){
var $wrap, $pop; var $wrap, $pop;

25
modules/explanation/_explanation_module.scss
View file

@ -47,9 +47,9 @@
top: $space_5; top: $space_5;
left: $space_5; left: $space_5;
padding: $half_space; padding: $half_space;
border: 4px solid $basic_background_color; border: 4px solid $basic_back_color;
border-radius: 4px; border-radius: 4px;
background-color: $basic_background_color; background-color: $basic_back_color;
pointer-events: none; pointer-events: none;
} }
.exp_marker_pop { .exp_marker_pop {
@ -68,16 +68,17 @@
@extend %expose !optional; @extend %expose !optional;
} }
.exp_expose_pre { .exp_expose_pre {
@extend %expose_after @extend %expose_after;
} }
.exp_expose_post { .exp_expose_post {
@extend %expose_before @extend %expose_before;
} }
.exp_overlay_btn { .exp_overlay_btn {
position: fixed; position: fixed;
width: $size_1; width: 3em;
height: $size_1; height: 2em;
// padding: $basic_space $basic_space * 2;
cursor: pointer; cursor: pointer;
} }
.exp_help_btn { .exp_help_btn {
@ -87,15 +88,15 @@
background-color: rgba($black, .4); background-color: rgba($black, .4);
&:hover { &:hover {
background-color: $white; background-color: $white;
> .span_solo { > .span__solo {
color: $echo_color; color: $black;
} }
} }
.span_solo { .span__solo {
@extend %head_1;
display: table-cell; display: table-cell;
color: rgba($echo_color, .6); color: rgba($white, .8);
font-weight: bold; font-family: $monospace_font_family;
font-size: 1.4em;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
} }