Mainly experimental stuff for print
This commit is contained in:
Stephan
parent
ed66b9f6ee
commit
d91c029d4d
7 changed files with 245 additions and 69 deletions
|
|
@ -6,6 +6,10 @@
|
||||||
|
|
||||||
$default_font_size: 15px !default;
|
$default_font_size: 15px !default;
|
||||||
$basic_size: $default_font_size;
|
$basic_size: $default_font_size;
|
||||||
|
|
||||||
|
$default_print_font_size: 10pt !default;
|
||||||
|
$basic_print_size: $default_print_font_size;
|
||||||
|
|
||||||
$size_1: $basic_size * 4;
|
$size_1: $basic_size * 4;
|
||||||
|
|
||||||
$basic_line: 1;
|
$basic_line: 1;
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,7 @@
|
||||||
// ------------------------------------------------------------------------------
|
// ------------------------------------------------------------------------------
|
||||||
|
|
||||||
// Simulate new body element
|
// Simulate new body element
|
||||||
.div_body {
|
.screen_body {
|
||||||
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) {
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,109 @@
|
||||||
// Print elements
|
// Print elements
|
||||||
// -----------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------
|
||||||
|
|
||||||
.div_print {
|
%paper {
|
||||||
margin: $space_3 auto;
|
|
||||||
background-color: $white;
|
background-color: $white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dina4 {
|
$a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm;
|
||||||
width: 21.0cm;
|
$a5: ".dina5" 0 0 0 1.2cm;
|
||||||
height: 29.7cm;
|
$a6: ".dina6" 0 0 0 1.2cm;
|
||||||
padding: 1.2cm 1.2cm 1.2cm 2.4cm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dina5 {
|
$din: $a4, $a5, $a6;
|
||||||
width: 14.8cm;
|
|
||||||
height: 21.0cm;
|
.print_body {
|
||||||
padding: 1.2cm 0.6cm 0.6cm 2.4cm;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -2,31 +2,31 @@
|
||||||
// -----------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $basic_link_color;
|
color: $basic_link_color;
|
||||||
// color: lighten($basic_action_color, 20%);
|
// color: lighten($basic_action_color, 20%);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&:active,
|
&:active,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $basic_highlight_color;
|
color: $basic_highlight_color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.link_line {
|
.link_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;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: $basic_font_color;
|
color: $basic_font_color;
|
||||||
transition: color $basic_duration $basic_timing;
|
transition: color $basic_duration $basic_timing;
|
||||||
|
|
||||||
&:active,
|
&:active,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $basic_action_color;
|
background-color: $basic_action_color;
|
||||||
color: $basic_highlight_color;
|
color: $basic_highlight_color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -35,11 +35,11 @@ a {
|
||||||
// -----------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------
|
||||||
|
|
||||||
i, em {
|
i, em {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
b, strong {
|
b, strong {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
small {
|
small {
|
||||||
|
|
@ -49,7 +49,7 @@ small {
|
||||||
|
|
||||||
// Cite
|
// Cite
|
||||||
cite {
|
cite {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
q {
|
q {
|
||||||
|
|
@ -74,14 +74,14 @@ time {
|
||||||
|
|
||||||
// Code
|
// Code
|
||||||
code {
|
code {
|
||||||
@extend %basic_mono;
|
@extend %basic_mono;
|
||||||
color: lighten($black, 12%);
|
color: lighten($black, 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
samp {
|
samp {
|
||||||
|
|
@ -102,24 +102,26 @@ u {
|
||||||
|
|
||||||
// Marks
|
// Marks
|
||||||
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;
|
||||||
}
|
}
|
||||||
::-moz-selection {
|
::-moz-selection {
|
||||||
color: $basic_highlight_color;
|
color: $basic_highlight_color;
|
||||||
background-color: $black;
|
background-color: $black;
|
||||||
}
|
}
|
||||||
::selection {
|
::selection {
|
||||||
color: $basic_highlight_color;
|
color: $basic_highlight_color;
|
||||||
background-color: $black;
|
background-color: $black;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
|
||||||
|
}
|
||||||
.span_solo {
|
.span_solo {
|
||||||
@extend %basic;
|
@extend %solo;
|
||||||
color: $basic_font_color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
br {
|
br {
|
||||||
|
|
|
||||||
|
|
@ -45,12 +45,19 @@
|
||||||
line-height: $head_line_4;
|
line-height: $head_line_4;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
%solo {
|
||||||
|
@extend %basic;
|
||||||
|
color: $basic_font_color;
|
||||||
|
}
|
||||||
|
|
||||||
%short {
|
%short {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
-o-text-overflow: ellipsis; // vendor
|
-o-text-overflow: ellipsis; // vendor
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Specific styles
|
// Specific styles
|
||||||
// -----------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------
|
||||||
|
|
||||||
|
|
|
||||||
115
example.css
115
example.css
|
|
@ -151,7 +151,7 @@
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
margin-left: 0; }
|
margin-left: 0; }
|
||||||
|
|
||||||
.div_body {
|
.screen_body {
|
||||||
width: 96%;
|
width: 96%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
border-top-width: 8px;
|
border-top-width: 8px;
|
||||||
|
|
@ -159,17 +159,17 @@
|
||||||
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) {
|
||||||
.div_body {
|
.screen_body {
|
||||||
width: 80%; } }
|
width: 80%; } }
|
||||||
@media screen and (orientation: landscape) and (min-width: 1280px) {
|
@media screen and (orientation: landscape) and (min-width: 1280px) {
|
||||||
.div_body {
|
.screen_body {
|
||||||
width: 60%; } }
|
width: 60%; } }
|
||||||
@media screen and (orientation: landscape) and (min-width: 1920px) {
|
@media screen and (orientation: landscape) and (min-width: 1920px) {
|
||||||
.div_body {
|
.screen_body {
|
||||||
width: 48%; } }
|
width: 48%; } }
|
||||||
|
|
||||||
@media screen and (orientation: portrait) and (min-width: 1024px) {
|
@media screen and (orientation: portrait) and (min-width: 1024px) {
|
||||||
.div_body {
|
.screen_body {
|
||||||
width: 80%; } }
|
width: 80%; } }
|
||||||
|
|
||||||
.relative {
|
.relative {
|
||||||
|
|
@ -215,7 +215,7 @@
|
||||||
border-right: 8px solid rgba(82, 190, 209, 0.6);
|
border-right: 8px solid rgba(82, 190, 209, 0.6);
|
||||||
background-color: rgba(82, 190, 209, 0.1) !important; }
|
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-family: Trebuchet MS, Helvetica, Arial, sans-serif, sans;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
line-height: 1.5; }
|
line-height: 1.5; }
|
||||||
|
|
@ -225,7 +225,7 @@ pre, code, .code_solo {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
line-height: 1.5; }
|
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-family: Roboto, sans-serif;
|
||||||
font-size: 3.1em;
|
font-size: 3.1em;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
|
|
@ -249,6 +249,9 @@ h5 {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
line-height: 1.5; }
|
line-height: 1.5; }
|
||||||
|
|
||||||
|
.span_solo {
|
||||||
|
color: black; }
|
||||||
|
|
||||||
.table_link .cell_text .shorten {
|
.table_link .cell_text .shorten {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
@ -437,9 +440,6 @@ mark {
|
||||||
color: white;
|
color: white;
|
||||||
background-color: black; }
|
background-color: black; }
|
||||||
|
|
||||||
.span_solo {
|
|
||||||
color: black; }
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
vertical-align: top; }
|
vertical-align: top; }
|
||||||
|
|
||||||
|
|
@ -728,19 +728,92 @@ label {
|
||||||
-o-transition: height 0.5s ease;
|
-o-transition: height 0.5s ease;
|
||||||
transition: height 0.5s ease; }
|
transition: height 0.5s ease; }
|
||||||
|
|
||||||
.div_print {
|
.print_body *[class^="din"] {
|
||||||
margin: 32px auto;
|
|
||||||
background-color: white; }
|
background-color: white; }
|
||||||
|
|
||||||
.dina4 {
|
.print_body {
|
||||||
width: 21.0cm;
|
font-size: 10pt; }
|
||||||
height: 29.7cm;
|
@page {
|
||||||
padding: 1.2cm 1.2cm 1.2cm 2.4cm; }
|
.print_body {
|
||||||
|
size: A4;
|
||||||
.dina5 {
|
margin: 4cm; } }
|
||||||
width: 14.8cm;
|
@page :first {
|
||||||
height: 21.0cm;
|
.print_body {
|
||||||
padding: 1.2cm 0.6cm 0.6cm 2.4cm; }
|
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 {
|
.test li:after {
|
||||||
content: "";
|
content: "";
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
<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="div_body">
|
<div class="screen_body">
|
||||||
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><body></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><body></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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue