general work

- renamed nunjucks extension to njk
- removed old demo html files
- started to change CRLF to LF
- detail work on style definitions
- added structure for demo files

source/style/_abovethefold.scss

@@ -17,7 +17,7 @@
 /*
  * # NOTE
  *
- * CSS rules for content which is presented immediately 
+ * CSS rules for content which is presented immediately
  * to the screen and needs priority loading
  *
  */

source/style/elements/_grouping.scss

@@ -90,8 +90,8 @@ li, dt, dd {
 	@extend %basic;
 }
 
-li, dd {
-	// margin-bottom: $basic_space;
+.list__basic li, dd {
+	margin-bottom: $basic_space;
 }
 
 dd {

source/style/elements/_interactive.scss

@@ -32,11 +32,16 @@ input, button, textarea {
 label {
 	@extend %basic;
 
-	input {
+	input, textarea {
 		margin-left: $basic_space;
 	}
 }
 
+label + textarea {
+	@extend %solo;
+	display: block;
+}
+
 input {
 	color: $basic_io_font_color;
 
@@ -46,10 +51,9 @@ input {
 	}
 }
 
-@each $input in $basic_input_list, textarea {
+@each $input in $basic_input_list, textarea, select {
 	#{$input} {
 		@extend %basic_mono;
-		border: $basic_io_border;
 		padding: $half_space;
 		background-color: $basic_io_back_color;
 
@@ -70,8 +74,13 @@ input {
 	}
 }
 
-@each $input in $basic_input_list {
+@each $input in $basic_input_list, textarea {
+	#{$input} {
+		border: $basic_io_border;
+	}
+}
 
+@each $input in $basic_input_list {
 	#{$input} {
 		line-height: 1;
 	}
@@ -84,10 +93,16 @@ input {
 }
 
 label + input,
-.input__label_right {
+.input__label_right,
+.label > input,
+.label > select {
 	margin: 0 $basic_space;
 }
 
+.label {
+	line-height: 2.5;
+}
+
 .label__table {
 	display: table;
 
@@ -133,7 +148,7 @@ button {
 }
 
 select {
-
+	border: none;
 }
 
 datalist {

source/style/elements/_sections.scss

@@ -67,11 +67,11 @@ section {
 
 aside {
 
-	&.right + section {
+	&.right + .bside {
 		margin-right: calc(#{$basic_aside_width} + #{$basic_space});
 	}
 
-	&.left + section {
+	&.left + .bside {
 		margin-left: calc(#{$basic_aside_width} + #{$basic_space});
 	}
 }

source/style/example.scss

@@ -2,4 +2,4 @@
 // ------------------------------------------------------------------------------
 @import "hippie";
 
-// NOTE // No css rules allowed in here
+// NOTE // No css rules allowed in here

source/style/global/_common.scss

@@ -37,6 +37,18 @@
 	margin-left: 0;
 }
 
+.width_half {
+	width: 50%;
+	margin-right: 0;
+	margin-left: 0;
+}
+
+.width_third {
+	width: 33.3%;
+	margin-right: 0;
+	margin-left: 0;
+}
+
 .height_basic {
 	height: 1024px;
 }
@@ -59,7 +71,7 @@
 	margin-right: $space_3;
 }
 
-.main_center {
+.wrap_center {
 	&	> * {
 		margin-right: (100% - $basic_width) / 2;
 		margin-left: (100% - $basic_width) / 2;
@@ -69,8 +81,8 @@
 			margin-left: (100% - $width_small) / 2;
 		}
 		@include forTabletLandscapeUp {
-			margin-right: 1(00% - $width_medium) / 2;
-			margin-left: 1(00% - $width_medium) / 2;
+			margin-right: (100% - $width_medium) / 2;
+			margin-left: (100% - $width_medium) / 2;
 		}
 		@include forBigDesktopUp {
 			margin-right: (100% - $width_large) / 2;

source/style/maintenance.scss

@@ -23,7 +23,7 @@
 // Reset
 // Use a file outside of hippie i.e. vendor/normalize.css
 // -----------------------------------------------------------------------------
-@import "../bower_components/normalize-css/normalize.css";
+@import "../vendor/normalizecss/normalize.css";
 // @import "normalize-css/normalize.css";
 // @import "vendor/YOUR-FILES.css";
 

source/style/modules/maintenance/_maintenance_module.scss

@@ -1,11 +1,19 @@
-#root {
-	@extend .sec__main_status;
-	position: relative;
-	height: 100%;
-	border-color: $foxtrot_color;
+.body__status {
+  @extend .sec__main_status;
+  height: 100vh;
+  border-color: $foxtrot_color;
 
-	h1:first-of-type {
-		margin-top: 0;
-		font-weight: bold;
-	}
+  .main__site {
+    @extend .wrap_center;
+    & > h1:first-of-type {
+      margin-top: 0;
+      margin-bottom: 0;
+      font-weight: bold;
+      line-height: 1;
+    }
+    & > h1 + h3 {
+      margin-top: 0;
+      margin-bottom: $space_3;
+    }
+  }
 }