diff --git a/_config.scss b/_config.scss index f73855c..0897cb3 100644 --- a/_config.scss +++ b/_config.scss @@ -6,6 +6,10 @@ $default_font_size: 15px !default; $basic_size: $default_font_size; + +$default_print_font_size: 10pt !default; +$basic_print_size: $default_print_font_size; + $size_1: $basic_size * 4; $basic_line: 1; diff --git a/basic/_common.scss b/basic/_common.scss index 2bb73ad..b6fb513 100644 --- a/basic/_common.scss +++ b/basic/_common.scss @@ -44,7 +44,7 @@ // ------------------------------------------------------------------------------ // Simulate new body element -.div_body { +.screen_body { width: $basic_width; @media screen and (orientation: landscape) { @media (min-width: $screen_small) { diff --git a/basic/_print.scss b/basic/_print.scss index 4470a27..dcecb1e 100644 --- a/basic/_print.scss +++ b/basic/_print.scss @@ -1,19 +1,109 @@ // Print elements // ----------------------------------------------------------------------------- -.div_print { - margin: $space_3 auto; +%paper { background-color: $white; } -.dina4 { - width: 21.0cm; - height: 29.7cm; - padding: 1.2cm 1.2cm 1.2cm 2.4cm; -} +$a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm; +$a5: ".dina5" 0 0 0 1.2cm; +$a6: ".dina6" 0 0 0 1.2cm; -.dina5 { - width: 14.8cm; - height: 21.0cm; - padding: 1.2cm 0.6cm 0.6cm 2.4cm; -} +$din: $a4, $a5, $a6; + +.print_body { + font-size: $basic_print_size; + + @page { + size: A4; + margin: 4cm; + } + @page:first { + size: A4; + margin: 0; + } + + @each $space in $din { + #{nth($space, 1)} { + padding-top: nth($space, 2); + padding-right: nth($space, 3); + padding-bottom: nth($space, 4); + padding-left: nth($space, 5); + + .page_head, .page_foot { + right: nth($space, 3); + left: nth($space, 5); + } + .page_head { + top: nth($space, 2); + } + .page_foot { + bottom: nth($space, 4); + } + } + } + + *[class^="din"] { + @extend %paper; + position: relative; + overflow: auto; + + .page_head, .page_foot { + position: absolute; + } + + .page_head { + page: cover; + } + + .page_foot { + display: flex; + flex-direction: row; + + *:last-child { + margin-bottom: 0; + } + + p { + flex: 1 0 auto; + font-size: 8pt; + } + + .page_no { + flex: 1 0 auto; + font-size: 20pt; + text-align: right; + } + } + .page_content { + margin-top: 10cm; + } + margin: $space_3 auto; + } + + .page_title, .page_date { + font-size: 14pt; + } + + .page_title { + margin: 0; + } + + .page_date, .page_no { + @extend %head_1; + float: right; + } + + .page_author { + position: absolute; + top: 5cm; + right: 0; + text-align: right; + } + + .page_recipient { + position: absolute; + top: 5cm; + left: 0; + } +} \ No newline at end of file diff --git a/basic/_textlevel.scss b/basic/_textlevel.scss index a3befcc..3a7785e 100644 --- a/basic/_textlevel.scss +++ b/basic/_textlevel.scss @@ -2,31 +2,31 @@ // ----------------------------------------------------------------------------- a { - color: $basic_link_color; + color: $basic_link_color; // color: lighten($basic_action_color, 20%); - text-decoration: none; + text-decoration: none; - &:active, - &:focus, - &:hover { + &: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; + 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 { + &:active, + &:focus, + &:hover { background-color: $basic_action_color; color: $basic_highlight_color; - } + } } @@ -35,11 +35,11 @@ a { // ----------------------------------------------------------------------------- i, em { - font-style: italic; + font-style: italic; } b, strong { - font-weight: 500; + font-weight: 500; } small { @@ -49,7 +49,7 @@ small { // Cite cite { - font-style: italic; + font-style: italic; } q { @@ -74,14 +74,14 @@ time { // Code code { - @extend %basic_mono; - color: lighten($black, 12%); - background-color: rgba($white,.1); + @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; + @extend %basic_mono; + padding: $tiny_space $half_space; + color: $basic_font_color; } samp { @@ -102,24 +102,26 @@ u { // Marks mark { - background-color: $alpha_color; + background-color: $alpha_color; } .mark_cursor { - color: $basic_highlight_color; - background-color: $black; + color: $basic_highlight_color; + background-color: $black; } ::-moz-selection { - color: $basic_highlight_color; - background-color: $black; + color: $basic_highlight_color; + background-color: $black; } ::selection { - color: $basic_highlight_color; - background-color: $black; + color: $basic_highlight_color; + background-color: $black; } +span { + +} .span_solo { - @extend %basic; - color: $basic_font_color; + @extend %solo; } br { diff --git a/basic/_typography.scss b/basic/_typography.scss index 53b5d0c..7398382 100644 --- a/basic/_typography.scss +++ b/basic/_typography.scss @@ -45,12 +45,19 @@ line-height: $head_line_4; } +%solo { + @extend %basic; + color: $basic_font_color; +} + %short { overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; // vendor } + + // Specific styles // ----------------------------------------------------------------------------- diff --git a/example.css b/example.css index 766f7d9..48cc224 100644 --- a/example.css +++ b/example.css @@ -151,7 +151,7 @@ margin-right: 0; margin-left: 0; } -.div_body { +.screen_body { width: 96%; margin: 0 auto; border-top-width: 8px; @@ -159,17 +159,17 @@ border-color: black; padding-top: 32px; } @media screen and (orientation: landscape) and (min-width: 1024px) { - .div_body { + .screen_body { width: 80%; } } @media screen and (orientation: landscape) and (min-width: 1280px) { - .div_body { + .screen_body { width: 60%; } } @media screen and (orientation: landscape) and (min-width: 1920px) { - .div_body { + .screen_body { width: 48%; } } @media screen and (orientation: portrait) and (min-width: 1024px) { - .div_body { + .screen_body { width: 80%; } } .relative { @@ -215,7 +215,7 @@ border-right: 8px solid rgba(82, 190, 209, 0.6); background-color: rgba(82, 190, 209, 0.1) !important; } -h6, p, .p_col_2, .p_col_3, caption, li, dt, dd, figcaption, .span_solo, th, td, legend, label { +.span_solo, h6, p, .p_col_2, .p_col_3, caption, li, dt, dd, figcaption, th, td, legend, label { font-family: Trebuchet MS, Helvetica, Arial, sans-serif, sans; font-size: 1em; line-height: 1.5; } @@ -225,7 +225,7 @@ pre, code, .code_solo { font-size: 1em; line-height: 1.5; } -h1, .exp_help_btn .span_solo { +h1, .exp_help_btn .span_solo, .print_body .page_date, .print_body .page_no { font-family: Roboto, sans-serif; font-size: 3.1em; font-weight: 300; @@ -249,6 +249,9 @@ h5 { font-weight: 300; line-height: 1.5; } +.span_solo { + color: black; } + .table_link .cell_text .shorten { overflow: hidden; text-overflow: ellipsis; @@ -437,9 +440,6 @@ mark { color: white; background-color: black; } -.span_solo { - color: black; } - img { vertical-align: top; } @@ -728,19 +728,92 @@ label { -o-transition: height 0.5s ease; transition: height 0.5s ease; } -.div_print { - margin: 32px auto; +.print_body *[class^="din"] { background-color: white; } -.dina4 { - width: 21.0cm; - height: 29.7cm; - padding: 1.2cm 1.2cm 1.2cm 2.4cm; } - -.dina5 { - width: 14.8cm; - height: 21.0cm; - padding: 1.2cm 0.6cm 0.6cm 2.4cm; } +.print_body { + font-size: 10pt; } +@page { + .print_body { + size: A4; + margin: 4cm; } } +@page :first { + .print_body { + size: A4; + margin: 0; } } + .print_body .dina4 { + padding-top: 1.2cm; + padding-right: 1.2cm; + padding-bottom: 1.2cm; + padding-left: 2.4cm; } + .print_body .dina4 .page_head, .print_body .dina4 .page_foot { + right: 1.2cm; + left: 2.4cm; } + .print_body .dina4 .page_head { + top: 1.2cm; } + .print_body .dina4 .page_foot { + bottom: 1.2cm; } + .print_body .dina5 { + padding-top: 0; + padding-right: 0; + padding-bottom: 0; + padding-left: 1.2cm; } + .print_body .dina5 .page_head, .print_body .dina5 .page_foot { + right: 0; + left: 1.2cm; } + .print_body .dina5 .page_head { + top: 0; } + .print_body .dina5 .page_foot { + bottom: 0; } + .print_body .dina6 { + padding-top: 0; + padding-right: 0; + padding-bottom: 0; + padding-left: 1.2cm; } + .print_body .dina6 .page_head, .print_body .dina6 .page_foot { + right: 0; + left: 1.2cm; } + .print_body .dina6 .page_head { + top: 0; } + .print_body .dina6 .page_foot { + bottom: 0; } + .print_body *[class^="din"] { + position: relative; + overflow: auto; + margin: 32px auto; } + .print_body *[class^="din"] .page_head, .print_body *[class^="din"] .page_foot { + position: absolute; } + .print_body *[class^="din"] .page_head { + page: cover; } + .print_body *[class^="din"] .page_foot { + display: flex; + flex-direction: row; } + .print_body *[class^="din"] .page_foot *:last-child { + margin-bottom: 0; } + .print_body *[class^="din"] .page_foot p, .print_body *[class^="din"] .page_foot .p_col_2, .print_body *[class^="din"] .page_foot .p_col_3, .print_body *[class^="din"] .page_foot caption { + flex: 1 0 auto; + font-size: 8pt; } + .print_body *[class^="din"] .page_foot .page_no { + flex: 1 0 auto; + font-size: 20pt; + text-align: right; } + .print_body *[class^="din"] .page_content { + margin-top: 10cm; } + .print_body .page_title, .print_body .page_date { + font-size: 14pt; } + .print_body .page_title { + margin: 0; } + .print_body .page_date, .print_body .page_no { + float: right; } + .print_body .page_author { + position: absolute; + top: 5cm; + right: 0; + text-align: right; } + .print_body .page_recipient { + position: absolute; + top: 5cm; + left: 0; } .test li:after { content: ""; diff --git a/example.html b/example.html index 6a507df..442e675 100644 --- a/example.html +++ b/example.html @@ -20,7 +20,7 @@
?
-
+
Dies ist einfach nur Text.
Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.

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

Bereiche