interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

10 years later #1

Merged
sthag merged 374 commits from development into main 2026-03-07 00:18:59 +01:00
Conversation 0 Commits 374 Files changed 135 +106 -113
11 changed files with 106 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 6775ea0712 - Show all commits

9
gulpfile.js
View file

@ -44,7 +44,7 @@ const input = {
templates: 'source/templates', templates: 'source/templates',
data: 'source/data/**/*.json', data: 'source/data/**/*.json',
style: 'source/style/**/*.s+(a|c)ss', 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/**/*', fonts: 'node_modules/@fortawesome/fontawesome-free/webfonts/**/*',
art: { art: {
favicons: 'source/art/favicons/**/*.+(ico|png)', favicons: 'source/art/favicons/**/*.+(ico|png)',
@ -175,7 +175,10 @@ function styleLint() {
// Javascript for the win // Javascript for the win
function code(cb) { function code(cb) {
pump([ pump([
src(input.code, { sourcemaps: true }), src(input.code, {
sourcemaps: true,
allowEmpty: true
}),
cache('code'), cache('code'),
concat(hippie.jsFile +'.js'), concat(hippie.jsFile +'.js'),
dest(output.code), dest(output.code),
@ -189,7 +192,7 @@ function code(cb) {
} }
// Linting // Linting
function codeLint() { function codeLint() {
return src(input.code) return src(input.code, { allowEmpty: true })
.pipe(plumber()) .pipe(plumber())
.pipe(jshint()) .pipe(jshint())
.pipe(jshint.reporter('jshint-stylish')) .pipe(jshint.reporter('jshint-stylish'))

2
source/screens/demo.njk
View file

@ -1,6 +1,6 @@
<!-- page-index.njk --> <!-- page-index.njk -->
{% set pageId = "index" %} {% set pageId = "index" %}
{% set pageClass = "height_full" %} {% set pageClass = "h_full_view" %}
{% extends "demo/_default.njk" %} {% extends "demo/_default.njk" %}

2
source/screens/demo/blank.njk
View file

@ -1,6 +1,6 @@
<!-- page-blank.njk --> <!-- page-blank.njk -->
{% set pageId = "blank" %} {% set pageId = "blank" %}
{% set pageClass = "height_full" %} {% set pageClass = "h_full_view" %}
{% extends "demo/_default.njk" %} {% extends "demo/_default.njk" %}

2
source/screens/demo/examples.njk
View file

@ -100,7 +100,7 @@
</nav> </nav>
</header> </header>
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre> <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"> <header id="js_demo_fix" class="header_page demo__header header_fix">
<nav class="nav_right"> <nav class="nav_right">
<ul> <ul>

2
source/screens/demo/maintenance.njk
View file

@ -1,6 +1,6 @@
<!-- page-maintenance.njk --> <!-- page-maintenance.njk -->
{% set pageId = "blank" %} {% set pageId = "blank" %}
{% set pageClass = "height_full" %} {% set pageClass = "h_full_view" %}
{% extends "demo/_maintenance.njk" %} {% extends "demo/_maintenance.njk" %}

2
source/screens/demo/os.njk
View file

@ -10,7 +10,7 @@
{% endblock %} {% endblock %}
{% block main %} {% block main %}
<div class="height_full"> <div class="h_full_view">
<div class="flex_wrap"> <div class="flex_wrap">
<button class="demo__button_32"></button> <button class="demo__button_32"></button>
<button class="demo__button_32"></button> <button class="demo__button_32"></button>

2
source/screens/demo/tests.njk
View file

@ -1,6 +1,6 @@
<!-- page-tests.njk --> <!-- page-tests.njk -->
{% set pageId = "tests" %} {% set pageId = "tests" %}
{% set pageClass = "height_full" %} {% set pageClass = "h_full_view" %}
{% extends "demo/_default.njk" %} {% extends "demo/_default.njk" %}
{% import "demo/macros/_nav.njk" as nav %} {% import "demo/macros/_nav.njk" as nav %}

22
source/style/hippie/global/_common.scss
View file

@ -17,6 +17,14 @@
} }
} }
%h_content_full {
height: 100%;
body {
min-height: 100%;
}
}
%hidden { %hidden {
display: none; display: none;
} }
@ -80,14 +88,18 @@
margin-left: 0; margin-left: 0;
} }
.height_basic { .h_basic {
height: 1024px; height: 1024px;
} }
.height_full { .h_full_view {
height: 100vh; height: 100vh;
} }
.h_100 {
height: 100%;
}
.wrap_center { .wrap_center {
& > * { & > * {
margin-right: (100% - $width_basic) / 2; margin-right: (100% - $width_basic) / 2;
@ -159,7 +171,7 @@
// Positioned elements // Positioned elements
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
%full_viewport { %viewport_fixed {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -206,7 +218,7 @@
} }
.pos_full_view { .pos_full_view {
@extend %full_viewport; @extend %viewport_fixed;
background-color: rgba($alpha_color, 0.5); background-color: rgba($alpha_color, 0.5);
} }
@ -225,7 +237,7 @@
} }
.hover_full_view_change { .hover_full_view_change {
@extend %full_viewport; @extend %viewport_fixed;
z-index: $z_heaven; z-index: $z_heaven;
background-color: transparentize($color_darkest, 0.5); background-color: transparentize($color_darkest, 0.5);
transition: background-color $duration_long $timing_basic $duration_long; transition: background-color $duration_long $timing_basic $duration_long;

176
source/style/hippie/modules/card/_card_module.scss
View file

@ -1,99 +1,77 @@
// Custom extends and mixins // Card module styles
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
@import "mixins";
@import "extends"; .card_html {
@extend %h_content_full;
// Card module styles
// ------------------------------------------------------------------------------ body {
.bkg_box {
%absolute_full { @extend %full_parent;
position: absolute; transition-duration: 800ms;
top: 0; overflow: hidden;
left: 0; vertical-align: top;
width: 100%; z-index: -1;
height: 100%; }
} .bkg_box > svg {
position: relative;
.card_body { }
height: 100%; .flex_wrap_center {
.bkg_box { display: flex;
@extend %absolute_full; align-items: center;
transition-duration: 800ms; justify-content: center;
overflow: hidden; height: 100%;
vertical-align: top; }
z-index: -1; .flex_content {
} position: relative;
.bkg_box > svg { padding: 64px 64px 24px 64px;
position: relative; border: 1px solid #FFF;
} background-color: #F5F5F5;
.flex_wrap_center { z-index: 40;
display: -webkit-box; }
display: -webkit-flex; h1 {
display: -moz-box; margin: 16px 0;
display: -ms-flexbox; color: #1E1E1E;
display: flex; font-size: 24px;
-webkit-box-align: center; line-height: 1.4em;
-webkit-align-items: center; font-weight: normal;
-moz-box-align: center; }
-ms-flex-align: center; p {
align-items: center; margin-top: 0;
-webkit-box-pack: center; margin-bottom: 16px;
-webkit-justify-content: center; font-size: 12px;
-moz-box-pack: center; line-height: 1.4em;
-ms-flex-pack: center; }
justify-content: center;
height: 100%; // .full {
} // position: absolute;
.flex_content { // width: 128px;
position: relative; // height: 128px;
padding: 64px 64px 24px 64px; // top: 16px;
border: 1px solid #FFF; // left: 16px;
background-color: #F5F5F5; // background-color: #fff;
z-index: 40; // }
} // .mark {
h1 { // float: left;
margin: 16px 0; // width: 32px;
color: #1E1E1E; // height: 32px;
font-size: 24px; // margin-top: 16px;
line-height: 1.4em; // }
font-weight: normal;
} .marked {
p { padding-left: 1em;
margin-top: 0; text-indent: -1em;
margin-bottom: 16px; text-align: center;
font-size: 12px; }
line-height: 1.4em; .marked::before { content: "*\0000a0" }
} .decent { color: #666 }
a {
/* .full { color: #000;
position: absolute; text-decoration: none;
width: 128px; }
height: 128px; a:hover {
top: 16px; color: #F4F9FA;
left: 16px; background-color: #0C85FF;
background-color: #fff; text-decoration: none;
} }
.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;
}
}

0
source/style/hippie/modules/card/_extends.scss
View file

0
source/style/hippie/modules/card/_mixins.scss
View file