_config.scss

@@ -26,12 +26,12 @@ $head_line_2: $text_line_1;
 $head_line_3: $text_line_1;
 $head_line_4: $text_line_1;
 
-$primary_font_family: #{'Roboto', sans-serif};
+$default_font_family: #{'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default;
+
+$primary_font_family: $default_font_family;
 $secondary_font_family: #{'Roboto', sans-serif};
 $third_font_family: #{'Courier New', monospace};
 
-$alternative_font_family: #{'Trebuchet MS', Helvetica, Arial, sans-serif, sans};
-
 $basic_indent: 2em;
 
 

_default.scss

@@ -4,4 +4,6 @@
 $default_font_size: 15px;
 $default_line_height: 1.5;
 
+$default_font_family: #{'Trebuchet MS', Helvetica, Arial, sans-serif, sans};
+
 $default_space: 8px;

_hippie.scss

@@ -66,4 +66,9 @@
 @import "modules/editor/editor_module";
 @import "modules/explanation/explanation_module";
 
+
+
+@import "basic/print";
+@import "basic/new";
+
 // NOTE // No css rules allowed in here

basic/_new.scss

@@ -5,6 +5,7 @@
 		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; }  }
@@ -20,14 +21,17 @@
 %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;

basic/_print.scss

@@ -1,18 +1,19 @@
 // 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;
+	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;
 }

example.css

@@ -216,7 +216,7 @@
   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 {
-  font-family: Roboto, sans-serif;
+  font-family: Trebuchet MS, Helvetica, Arial, sans-serif, sans;
   font-size: 1em;
   line-height: 1.5; }
 
@@ -270,7 +270,7 @@ html {
   box-sizing: inherit; }
 
 body {
-  font-family: Roboto, sans-serif;
+  font-family: Trebuchet MS, Helvetica, Arial, sans-serif, sans;
   font-size: 15px;
   line-height: 1;
   color: black;
@@ -728,4 +728,66 @@ label {
   -o-transition: height 0.5s ease;
   transition: height 0.5s ease; }
 
+.div_print {
+  margin: 32px auto;
+  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; }
+
+.test li:after {
+  content: "";
+  display: block;
+  height: 16px; }
+
+.front_color_1 {
+  color: #fad803; }
+  .front_color_1:after {
+    background-color: #fad803; }
+
+.front_color_2 {
+  color: #d30a51; }
+  .front_color_2:after {
+    background-color: #d30a51; }
+
+.front_color_3 {
+  color: #273f8b; }
+  .front_color_3:after {
+    background-color: #273f8b; }
+
+.front_color_4 {
+  color: #b7e0f0; }
+  .front_color_4:after {
+    background-color: #b7e0f0; }
+
+.front_color_5 {
+  color: #52bed1; }
+  .front_color_5:after {
+    background-color: #52bed1; }
+
+.back_color_1, .label_1 {
+  background-color: #fad803; }
+
+.back_color_2, .label_2 {
+  background-color: #d30a51; }
+
+.back_color_3, .label_3 {
+  background-color: #273f8b; }
+
+.back_color_4 {
+  background-color: #b7e0f0; }
+
+.back_color_5 {
+  background-color: #52bed1; }
+
+.label_1, .label_2, .label_3 {
+  padding: 0 4px; }
+
 /*# sourceMappingURL=example.css.map */

example.html

@@ -364,8 +364,12 @@
 		<hr class="hr_hidden"/>
 		<div class="div_placeholder_bkg"></div>
 		<h1>Medien</h1>
+		<h1>Druck</h1>
 	</div>
-	<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>
+	<script
+  src="https://code.jquery.com/jquery-3.1.1.min.js"
+  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
+  crossorigin="anonymous"></script>
 	<script type="text/javascript">
 		var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
 		var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)