From 6775ea07126af3dd321e1832ec56ea69ec90c376 Mon Sep 17 00:00:00 2001
From: Stephan <klarsichtweise@gmail.com>
Date: Sat, 23 Mar 2019 14:56:48 +0100
Subject: [PATCH] Addition to user file handling

Enabled usage of predeterminded javascript user files. Added
`variables.js`, `functions.js` and `globals.js` to build queue.
Therefore added option for emtpy single globs.

Changed some sass for better modular usage.
---
 gulpfile.js                                   |   9 +-
 source/screens/demo.njk                       |   2 +-
 source/screens/demo/blank.njk                 |   2 +-
 source/screens/demo/examples.njk              |   2 +-
 source/screens/demo/maintenance.njk           |   2 +-
 source/screens/demo/os.njk                    |   2 +-
 source/screens/demo/tests.njk                 |   2 +-
 source/style/hippie/global/_common.scss       |  22 ++-
 .../hippie/modules/card/_card_module.scss     | 176 ++++++++----------
 .../style/hippie/modules/card/_extends.scss   |   0
 source/style/hippie/modules/card/_mixins.scss |   0
 11 files changed, 106 insertions(+), 113 deletions(-)
 delete mode 100644 source/style/hippie/modules/card/_extends.scss
 delete mode 100644 source/style/hippie/modules/card/_mixins.scss

diff --git a/gulpfile.js b/gulpfile.js
index cba8a96..519a074 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -44,7 +44,7 @@ const input = {
   templates: 'source/templates',
   data: 'source/data/**/*.json',
   style: 'source/style/**/*.s+(a|c)ss',
-  code: ['source/code/hippie/variables.js', 'source/code/hippie/functions.js', 'source/code/hippie/global.js', '!source/vendor/**/*'],
+  code: ['source/code/hippie/variables.js', 'source/code/hippie/functions.js', 'source/code/hippie/global.js', 'source/code/variables.js', 'source/code/functions.js', 'source/code/global.js', 'source/code/**/*.js', '!source/vendor/**/*'],
   fonts: 'node_modules/@fortawesome/fontawesome-free/webfonts/**/*',
   art: {
     favicons: 'source/art/favicons/**/*.+(ico|png)',
@@ -175,7 +175,10 @@ function styleLint() {
 // Javascript for the win
 function code(cb) {
   pump([
-    src(input.code, { sourcemaps: true }),
+    src(input.code, {
+      sourcemaps: true,
+      allowEmpty: true
+    }),
     cache('code'),
     concat(hippie.jsFile +'.js'),
     dest(output.code),
@@ -189,7 +192,7 @@ function code(cb) {
 }
 // Linting
 function codeLint() {
-  return src(input.code)
+  return src(input.code, { allowEmpty: true })
   .pipe(plumber())
   .pipe(jshint())
   .pipe(jshint.reporter('jshint-stylish'))
diff --git a/source/screens/demo.njk b/source/screens/demo.njk
index 6d30899..5592de0 100644
--- a/source/screens/demo.njk
+++ b/source/screens/demo.njk
@@ -1,6 +1,6 @@
 <!-- page-index.njk -->
 {% set pageId = "index" %}
-{% set pageClass = "height_full" %}
+{% set pageClass = "h_full_view" %}
 
 {% extends "demo/_default.njk" %}
 
diff --git a/source/screens/demo/blank.njk b/source/screens/demo/blank.njk
index 4663a7a..c0e87ea 100644
--- a/source/screens/demo/blank.njk
+++ b/source/screens/demo/blank.njk
@@ -1,6 +1,6 @@
 <!-- page-blank.njk -->
 {% set pageId = "blank" %}
-{% set pageClass = "height_full" %}
+{% set pageClass = "h_full_view" %}
 
 {% extends "demo/_default.njk" %}
 
diff --git a/source/screens/demo/examples.njk b/source/screens/demo/examples.njk
index 88daab2..90da2a8 100644
--- a/source/screens/demo/examples.njk
+++ b/source/screens/demo/examples.njk
@@ -100,7 +100,7 @@
         </nav>
       </header>
       <pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
-      <div class="box_space height_basic">
+      <div class="box_space h_basic">
         <header id="js_demo_fix" class="header_page demo__header header_fix">
           <nav class="nav_right">
             <ul>
diff --git a/source/screens/demo/maintenance.njk b/source/screens/demo/maintenance.njk
index 9cf0a4f..1ef192e 100644
--- a/source/screens/demo/maintenance.njk
+++ b/source/screens/demo/maintenance.njk
@@ -1,6 +1,6 @@
 <!-- page-maintenance.njk -->
 {% set pageId = "blank" %}
-{% set pageClass = "height_full" %}
+{% set pageClass = "h_full_view" %}
 
 {% extends "demo/_maintenance.njk" %}
 
diff --git a/source/screens/demo/os.njk b/source/screens/demo/os.njk
index a599102..28684b4 100644
--- a/source/screens/demo/os.njk
+++ b/source/screens/demo/os.njk
@@ -10,7 +10,7 @@
 {% endblock %}
 
 {% block main %}
-<div class="height_full">
+<div class="h_full_view">
   <div class="flex_wrap">
     <button class="demo__button_32"></button>
     <button class="demo__button_32"></button>
diff --git a/source/screens/demo/tests.njk b/source/screens/demo/tests.njk
index 9802c57..f1e6a34 100644
--- a/source/screens/demo/tests.njk
+++ b/source/screens/demo/tests.njk
@@ -1,6 +1,6 @@
 <!-- page-tests.njk -->
 {% set pageId = "tests" %}
-{% set pageClass = "height_full" %}
+{% set pageClass = "h_full_view" %}
 
 {% extends "demo/_default.njk" %}
 {% import "demo/macros/_nav.njk" as nav %}
diff --git a/source/style/hippie/global/_common.scss b/source/style/hippie/global/_common.scss
index 5656fef..ddb95a2 100644
--- a/source/style/hippie/global/_common.scss
+++ b/source/style/hippie/global/_common.scss
@@ -17,6 +17,14 @@
 	}
 }
 
+%h_content_full {
+	height: 100%;
+
+	body {
+		min-height: 100%;
+	}
+}
+
 %hidden {
 	display: none;
 }
@@ -80,14 +88,18 @@
 	margin-left: 0;
 }
 
-.height_basic {
+.h_basic {
 	height: 1024px;
 }
 
-.height_full {
+.h_full_view {
 	height: 100vh;
 }
 
+.h_100 {
+	height: 100%;
+}
+
 .wrap_center {
 	&	> * {
 		margin-right: (100% - $width_basic) / 2;
@@ -159,7 +171,7 @@
 
 // Positioned elements
 // -----------------------------------------------------------------------------
-%full_viewport {
+%viewport_fixed {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -206,7 +218,7 @@
 }
 
 .pos_full_view {
-	@extend %full_viewport;
+	@extend %viewport_fixed;
 	background-color: rgba($alpha_color, 0.5);
 }
 
@@ -225,7 +237,7 @@
 }
 
 .hover_full_view_change {
-	@extend %full_viewport;
+	@extend %viewport_fixed;
 	z-index: $z_heaven;
 	background-color: transparentize($color_darkest, 0.5);
 	transition: background-color $duration_long $timing_basic $duration_long;
diff --git a/source/style/hippie/modules/card/_card_module.scss b/source/style/hippie/modules/card/_card_module.scss
index 2627292..5eb6bb8 100644
--- a/source/style/hippie/modules/card/_card_module.scss
+++ b/source/style/hippie/modules/card/_card_module.scss
@@ -1,99 +1,77 @@
-// Custom extends and mixins
-// ------------------------------------------------------------------------------
-@import "mixins";
-@import "extends";
-
-// Card module styles
-// ------------------------------------------------------------------------------
-
-%absolute_full {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-}
-
-.card_body {
-	height: 100%;
-	.bkg_box {
-		@extend %absolute_full;
-		transition-duration: 800ms;
-		overflow: hidden;
-		vertical-align: top;
-		z-index: -1;
-	}
-	.bkg_box > svg {
-		position: relative;
-	}
-	.flex_wrap_center {
-		display: -webkit-box;
-		display: -webkit-flex;
-		display: -moz-box;
-		display: -ms-flexbox;
-		display: flex;
-		-webkit-box-align: center;
-		-webkit-align-items: center;
-		-moz-box-align: center;
-		-ms-flex-align: center;
-		align-items: center;
-		-webkit-box-pack: center;
-		-webkit-justify-content: center;
-		-moz-box-pack: center;
-		-ms-flex-pack: center;
-		justify-content: center;
-		height: 100%;
-	}
-	.flex_content {
-		position: relative;
-		padding: 64px 64px 24px 64px;
-		border: 1px solid #FFF;
-		background-color: #F5F5F5;
-		z-index: 40;
-	}
-	h1 {
-		margin: 16px 0;
-		color: #1E1E1E;
-		font-size: 24px;
-		line-height: 1.4em;
-		font-weight: normal;
-	}
-	p {
-		margin-top: 0;
-		margin-bottom: 16px;
-		font-size: 12px;
-		line-height: 1.4em;
-	}
-
-	/*  .full {
-	position: absolute;
-	width: 128px;
-	height: 128px;
-	top: 16px;
-	left: 16px;
-	background-color: #fff;
-}
-.mark {
-float: left;
-width: 32px;
-height: 32px;
-margin-top: 16px;
-}
-*/
-.marked {
-	padding-left: 1em;
-	text-indent: -1em;
-	text-align: center;
-}
-.marked::before { content: "*\0000a0" }
-.decent { color: #666 }
-a {
-	color: #000;
-	text-decoration: none;
-}
-a:hover {
-	color: #F4F9FA;
-	background-color: #0C85FF;
-	text-decoration: none;
-}
-}
+// Card module styles
+// ------------------------------------------------------------------------------
+
+.card_html {
+  @extend %h_content_full;
+
+  body {
+    .bkg_box {
+      @extend %full_parent;
+      transition-duration: 800ms;
+      overflow: hidden;
+      vertical-align: top;
+      z-index: -1;
+    }
+    .bkg_box > svg {
+      position: relative;
+    }
+    .flex_wrap_center {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+    }
+    .flex_content {
+      position: relative;
+      padding: 64px 64px 24px 64px;
+      border: 1px solid #FFF;
+      background-color: #F5F5F5;
+      z-index: 40;
+    }
+    h1 {
+      margin: 16px 0;
+      color: #1E1E1E;
+      font-size: 24px;
+      line-height: 1.4em;
+      font-weight: normal;
+    }
+    p {
+      margin-top: 0;
+      margin-bottom: 16px;
+      font-size: 12px;
+      line-height: 1.4em;
+    }
+
+    // .full {
+    // 	position: absolute;
+    // 	width: 128px;
+    // 	height: 128px;
+    // 	top: 16px;
+    // 	left: 16px;
+    // 	background-color: #fff;
+    // }
+    // .mark {
+    // 	float: left;
+    // 	width: 32px;
+    // 	height: 32px;
+    // 	margin-top: 16px;
+    // }
+
+    .marked {
+      padding-left: 1em;
+      text-indent: -1em;
+      text-align: center;
+    }
+    .marked::before { content: "*\0000a0" }
+    .decent { color: #666 }
+    a {
+      color: #000;
+      text-decoration: none;
+    }
+    a:hover {
+      color: #F4F9FA;
+      background-color: #0C85FF;
+      text-decoration: none;
+    }
+  }
+}
diff --git a/source/style/hippie/modules/card/_extends.scss b/source/style/hippie/modules/card/_extends.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/source/style/hippie/modules/card/_mixins.scss b/source/style/hippie/modules/card/_mixins.scss
deleted file mode 100644
index e69de29..0000000