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.
This commit is contained in:
Stephan
parent
874ecaa7cf
commit
6775ea0712
11 changed files with 106 additions and 113 deletions
|
|
@ -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'))
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- page-index.njk -->
|
||||
{% set pageId = "index" %}
|
||||
{% set pageClass = "height_full" %}
|
||||
{% set pageClass = "h_full_view" %}
|
||||
|
||||
{% extends "demo/_default.njk" %}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- page-blank.njk -->
|
||||
{% set pageId = "blank" %}
|
||||
{% set pageClass = "height_full" %}
|
||||
{% set pageClass = "h_full_view" %}
|
||||
|
||||
{% extends "demo/_default.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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- page-maintenance.njk -->
|
||||
{% set pageId = "blank" %}
|
||||
{% set pageClass = "height_full" %}
|
||||
{% set pageClass = "h_full_view" %}
|
||||
|
||||
{% extends "demo/_maintenance.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>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue