Mainly experimental stuff for print

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) {

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;
+	}
+}

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 {

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
 // -----------------------------------------------------------------------------