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

demo.4

Browse source 
* restructure of all templates and pages
* fixed gulp reloading of pages
* restructured style elements accroding to HTML5.2 doc
* changed basic line-height
* added positional styles
* added demo_module styles
This commit is contained in:
Stephan 2018-08-31 18:52:21 +02:00
parent a810ec2770
commit 0a78f526f5
34 changed files with 1454 additions and 1208 deletions
Download patch file Download diff file Expand all files Collapse all files

14
gulpfile.js
View file

@ -13,6 +13,7 @@ var build_folder = {
scripts: 'build/js', scripts: 'build/js',
images: 'build/art', images: 'build/art',
vendor: 'build/vendor', vendor: 'build/vendor',
pages: 'build/**/*.html',
root: 'build' root: 'build'
} }
@ -95,7 +96,7 @@ gulp.task('nunjucks', function() {
return gulp.src('source/pages/**/*.+(html|njk)') return gulp.src('source/pages/**/*.+(html|njk)')
.pipe(plumbError('Error Running Nunjucks')) .pipe(plumbError('Error Running Nunjucks'))
.pipe(data(function() { .pipe(data(function() {
return JSON.parse(fs.readFileSync('./source/data.json')) return JSON.parse(fs.readFileSync('./source/demo_data.json'))
})) }))
.pipe(nunjucks({ .pipe(nunjucks({
path: ['source/templates'], path: ['source/templates'],
@ -114,12 +115,12 @@ gulp.task('nunjucks', function() {
gulp.task('syncreload', function() { gulp.task('syncreload', function() {
browsersync.init({ browsersync.init({
// online: false, // online: false,
// watch: true,
// logLevel: "info", // logLevel: "info",
// proxy: "http://verser.vrt/virtual/",
// watch: true,
index: "demo.html",
open: false, open: false,
server: 'build', server: 'build'
// index: "demo.html",
// proxy: "http://verser.vrt/virtual/"
}); });
}); });
@ -165,6 +166,7 @@ gulp.task('lint:scss', function() {
gulp.task('clean:dev', function() { gulp.task('clean:dev', function() {
del.sync([ del.sync([
build_folder.styles, build_folder.styles,
build_folder.pages,
build_folder.root+'/*.html' build_folder.root+'/*.html'
]); ]);
}); });
@ -182,7 +184,7 @@ gulp.task('overwatch', function() {
gulp.watch([ gulp.watch([
'source/templates/**/*', 'source/templates/**/*',
'source/pages/**/*.+(html|njk)', 'source/pages/**/*.+(html|njk)',
'source/data.json' 'source/demo_data.json'
], ['nunjucks']); ], ['nunjucks']);
}); });

30
source/data.json → source/demo_data.json
View file

@ -1,5 +1,5 @@
{ {
"demolinks": [ "demoadditionallinks": [
{ {
"href": "demo/intro.html", "href": "demo/intro.html",
"text": "Intro" "text": "Intro"
@ -12,6 +12,20 @@
"href": "demo/os.html", "href": "demo/os.html",
"text": "OS" "text": "OS"
}, },
{
"href": "demo/tests.html",
"text": "Tests"
}
],
"demolinks": [
{
"href": "demo/blank.html",
"text": "Blank"
},
{
"href": "demo/maintenance.html",
"text": "Maintenance"
},
{ {
"href": "demo/error/404.html", "href": "demo/error/404.html",
"text": "404" "text": "404"
@ -20,19 +34,5 @@
"href": "demo/error/500.html", "href": "demo/error/500.html",
"text": "500" "text": "500"
} }
],
"demoadditionallinks": [
{
"href": "blank.html",
"text": "Blank"
},
{
"href": "maintenance.html",
"text": "Maintenance"
},
{
"href": "tests.html",
"text": "Tests"
}
] ]
} }

11
source/pages/blank.njk
View file

@ -1,11 +0,0 @@
<!-- blank.njk -->
{% set pageId = "blank" %}
{% set pageClass = "height_full" %}
{% extends "default.njk" %}
{% block title %}blank{% endblock %}
{% block body_content %}
{% endblock %}

33
source/pages/demo.njk
View file

@ -1,12 +1,14 @@
<!-- index.njk --> <!-- page-index.njk -->
{% set pageId = "index" %} {% set pageId = "index" %}
{% set pageClass = "height_full" %} {% set pageClass = "height_full" %}
{% extends "default.njk" %} {% extends "hippie/demo-default.njk" %}
{% block title %}index{% endblock %} {% block title %}index{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
<link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/>
<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
{% endblock %} {% endblock %}
{% block body_content %} {% block body_content %}
@ -15,18 +17,6 @@
<h2>This is HIPPIE</h2> <h2>This is HIPPIE</h2>
<p>You can start using it by replacing this file with your own index page.</p> <p>You can start using it by replacing this file with your own index page.</p>
<p>The folder <i>demo</i> contains examples and also an overview of definitions made.<br/>Follow the white rabbit.</p> <p>The folder <i>demo</i> contains examples and also an overview of definitions made.<br/>Follow the white rabbit.</p>
<h3>Demo Pages</h3>
<ul class="list__link">
<!-- Loops through "demo-links" array -->
{% for link in demolinks %}
<li><a href="{{link.href}}">{{link.text}}</a></li>
{% endfor %}
</ul>
<pre class="txt-tiny txt_white">
()()
(..)
C(")(")</pre>
<h3>Overview about all the styles</h3> <h3>Overview about all the styles</h3>
<ul class="list__link"> <ul class="list__link">
<!-- Loops through "demoadditionallinks" array --> <!-- Loops through "demoadditionallinks" array -->
@ -34,11 +24,26 @@ C(")(")</pre>
<li><a href="{{link.href}}">{{link.text}}</a></li> <li><a href="{{link.href}}">{{link.text}}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>
<div class="pos_rel">
<pre class="txt_tiny txt_white pos_abs pin_down pin_right">
()()
(..)
C(")(")</pre>
<h3>Demo Pages</h3>
</div>
<ul class="list__link">
<!-- Loops through "demo-links" array -->
{% for link in demolinks %}
<li><a href="{{link.href}}">{{link.text}}</a></li>
{% endfor %}
</ul>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
{% block script %} {% block script %}
{{ super() }}
<script src="./js/all.min.js" type="text/javascript"></script>
<script type="text/javascript"> <script type="text/javascript">
// Page specific // Page specific
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------

17
source/pages/demo/blank.njk Normal file
View file

@ -0,0 +1,17 @@
<!-- page-blank.njk -->
{% set pageId = "blank" %}
{% set pageClass = "height_full" %}
{% extends "hippie/demo-default.njk" %}
{% block title %}blank{% endblock %}
{% block head %}
{{ super() }}
<link rel="stylesheet" type="text/css" media="all" href="../css/demo.css"/>
<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
{% endblock %}
{% block body_content %}
{% endblock %}

141
source/pages/demo/elements.njk
View file

@ -1,72 +1,69 @@
<!-- demo.njk --> <!-- page-elements.njk -->
{% set pageId = "elements" %} {% set pageId = "elements" %}
{% set pageClass = "" %} {% set pageClass = "" %}
{% extends "demo.njk" %} {% extends "hippie/demo-extended.njk" %}
{% block title %}Elements{% endblock %} {% block title %}Elements{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block body_content %} {% block body_content %}
<div class="temp__layer"> <div class="temp__layer">
<!-- <div class="exp_overlay_btn exp_help_btn"> <!-- <div class="exp_overlay_btn exp_help_btn">
<span class="span__solo">?</span> <span class="span__solo">?</span>
</div> --> </div> -->
<nav class="nav__page_meta"> {% include "hippie/partials/nav-page-meta.njk" %}
<ul> </div>
<li class="magic"><a href="#begin" id="js_scrolltop" class="a_button_meta"><img src="./art/up.png" alt="" width="32" height="64"></a></li> <div id="begin" class="">
<li><button class="a_button_meta">Show Meta Information</button></li> <article>
<li><a href="#end" id="js_scrolldown" class="a_button_meta"><img src="./art/down.png" alt="" width="32" height="32"></a></li> <header>
</ul> <h1>Bereiche</h1>
</nav> <p>Um einleitenden Inhalt festzuhalten, wird das <code>&lt;header&gt;</code> Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den nächsten, umgebenden Abschnitt.</p>
</div> <nav>
<div id="begin" class=""> <p>Das Element <code>&lt;nav&gt;</code> umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p>
<article> </nav>
<header> </header>
<h1>Bereiche</h1> <section>
<p>Um einleitenden Inhalt festzuhalten, wird das <code>&lt;header&gt;</code> Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den nächsten, umgebenden Abschnitt.</p> <p>Einen Abschnitt, welcher für sich alleine stehen kann, definiert sich durch <code>&lt;article&gt;</code>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne jegliche Gestaltung aus.</p>
<nav> <p>Noch allgemeiner ist das <code>&lt;section&gt;</code> Element. Es schafft Bereiche um Inhalte zu strukturieren.</p>
<p>Das Element <code>&lt;nav&gt;</code> umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p> <p>Bestimmte Bereiche haben einen vorgegebene Zweck.<br>Folgende Bereiche sind vorgegeben:</p>
</nav> </section>
</header> <div class="overflow">
<section> <aside class="left">
<p>Einen Abschnitt, welcher für sich alleine stehen kann, definiert sich durch <code>&lt;article&gt;</code>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne jegliche Gestaltung aus.</p> <p>Ein Bereich, der seitlich zum hauptsächlichen Inhalt verläuft, wird mit <code>&lt;aside&gt;</code> markiert.</p>
<p>Noch allgemeiner ist das <code>&lt;section&gt;</code> Element. Es schafft Bereiche um Inhalte zu strukturieren.</p> </aside>
<p>Bestimmte Bereiche haben einen vorgegebene Zweck.<br>Folgende Bereiche sind vorgegeben:</p> <section class="bside">
</section> <header>
<div class="overflow"> <p>Um einleitenden Inhalt festzuhalten, wird das <code>&lt;header&gt;</code> Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den nächsten, umgebenden Abschnitt.</p>
<aside class="left"> <nav>
<p>Ein Bereich, der seitlich zum hauptsächlichen Inhalt verläuft, wird mit <code>&lt;aside&gt;</code> markiert.</p> <p>Das Element <code>&lt;nav&gt;</code> umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p>
</aside> </nav>
<section class="bside"> </header>
<header> <footer>
<p>Um einleitenden Inhalt festzuhalten, wird das <code>&lt;header&gt;</code> Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den nächsten, umgebenden Abschnitt.</p> <p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code>&lt;footer&gt;</code> eingesetzt.</p>
<nav> </footer>
<p>Das Element <code>&lt;nav&gt;</code> umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p> </section>
</nav> </div>
</header> <footer>
<footer> <p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code>&lt;footer&gt;</code> eingesetzt.</p>
<p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code>&lt;footer&gt;</code> eingesetzt.</p> </footer>
</footer> </article>
</section> </div>
</div> {% include "hippie/partials/footer.njk" %}
<footer> {% endblock %}
<p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code>&lt;footer&gt;</code> eingesetzt.</p>
</footer> {% block script %}
</article> {{ super() }}
</div> <script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
{% include "partials/footer.njk" %} <script src="../js/all.min.js" type="text/javascript"></script>
{% endblock %} <script type="text/javascript">
// Page specific
{% block script %} // ------------------------------------------------------------------------------
<script type="text/javascript"> $( document ).ready(function() {
// Page specific console.log('HIPPIE');
// ------------------------------------------------------------------------------
$( document ).ready(function() { });
console.log('HIPPIE'); </script>
{% endblock %}
});
</script>
{% endblock %}

48
source/pages/demo/error/404.njk
View file

@ -1,23 +1,25 @@
<!-- index.njk --> <!-- page-error-404.njk -->
{% set pageId = "404" %} {% set pageId = "404" %}
{% set pageClass = "body__status" %} {% set pageClass = "body__status" %}
{% extends "maintenance.njk" %} {% extends "hippie/demo-maintenance.njk" %}
{% block title %}404{% endblock %} {% block title %}404{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} <link rel="stylesheet" type="text/css" media="all" href="../../css/demo_basic.css"/>
<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
{% block body_content %} {% endblock %}
<main class="main__site">
<h1>404</h1> {% block body_content %}
<h3>Client-Fehler</h3> <main class="main__site">
<p>Hier ist nichts. <dfn>Not Found</dfn></br> <h1>404</h1>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler"> <h3>Client-Fehler</h3>
<p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.</p> <p>Hier ist nichts. <dfn>Not Found</dfn></br>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p> <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
</blockquote> <p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.</p>
</main> <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
{% include "partials/footer-status.njk" %} </blockquote>
{% endblock %} </main>
{% include "hippie/partials/footer-status.njk" %}
{% endblock %}

48
source/pages/demo/error/500.njk
View file

@ -1,23 +1,25 @@
<!-- index.njk --> <!-- page-error-500.njk -->
{% set pageId = "500" %} {% set pageId = "500" %}
{% set pageClass = "body__status" %} {% set pageClass = "body__status" %}
{% extends "maintenance.njk" %} {% extends "hippie/demo-maintenance.njk" %}
{% block title %}500{% endblock %} {% block title %}500{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} <link rel="stylesheet" type="text/css" media="all" href="../../css/demo_basic.css"/>
<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
{% block body_content %} {% endblock %}
<main class="main__site">
<h1>500</h1> {% block body_content %}
<h3>Server-Fehler</h3> <main class="main__site">
<p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p> <h1>500</h1>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler"> <h3>Server-Fehler</h3>
<p>Dies ist ein „Sammel-Statuscode“ für unerwartete Serverfehler.</p> <p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p>
<p class="quote-author"><a class="line-link" href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a></p> <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
</blockquote> <p>Dies ist ein „Sammel-Statuscode“ für unerwartete Serverfehler.</p>
</main> <p class="quote-author"><a class="line-link" href="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">Wikipedia</a></p>
{% include "partials/footer-status.njk" %} </blockquote>
{% endblock %} </main>
{% include "hippie/partials/footer-status.njk" %}
{% endblock %}

1428
source/pages/demo/intro.njk
View file

File diff suppressed because it is too large Load diff

19
source/pages/demo/maintenance.njk Normal file
View file

@ -0,0 +1,19 @@
<!-- page-maintenance.njk -->
{% set pageId = "blank" %}
{% set pageClass = "height_full" %}
{% extends "hippie/demo-maintenance.njk" %}
{% block title %}Wartung{% endblock %}
{% block head %}
{{ super() }}
<link rel="stylesheet" type="text/css" media="all" href="../css/demo.css"/>
<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
{% endblock %}
{% block body_content %}
<div id="root" class="overflow">
<h1 class="txt_hero txt_center txt_gradient">HIPPIE</h1>
</div>
{% endblock %}

9
source/pages/demo/os.njk
View file

@ -1,8 +1,8 @@
<!-- demo.njk --> <!-- page-os.njk -->
{% set pageId = "os" %} {% set pageId = "os" %}
{% set pageClass = "" %} {% set pageClass = "" %}
{% extends "demo.njk" %} {% extends "hippie/demo-extended.njk" %}
{% block title %}demo{% endblock %} {% block title %}demo{% endblock %}
{% block head %} {% block head %}
@ -132,10 +132,13 @@
</div> </div>
</div> </div>
</div> </div>
{% include "partials/footer.njk" %} {% include "hippie/partials/footer.njk" %}
{% endblock %} {% endblock %}
{% block script %} {% block script %}
{{ super() }}
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
<script src="../js/all.min.js" type="text/javascript"></script>
<script type="text/javascript"> <script type="text/javascript">
// Page specific // Page specific
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------

10
source/pages/tests.njk → source/pages/demo/tests.njk
View file

@ -1,12 +1,14 @@
<!-- blank.njk --> <!-- page-tests.njk -->
{% set pageId = "blank" %} {% set pageId = "blank" %}
{% set pageClass = "height_full" %} {% set pageClass = "height_full" %}
{% extends "default.njk" %} {% extends "hippie/demo-default.njk" %}
{% block title %}blank{% endblock %} {% block title %}blank{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
<link rel="stylesheet" type="text/css" media="all" href="../css/demo.css"/>
<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
<style> <style>
#error { #error {
border: 1px solid #FFFF66; border: 1px solid #FFFF66;
@ -27,11 +29,13 @@
<input id="txtName" type="text" /><span id="error">Caps Lock is ON.</span> <input id="txtName" type="text" /><span id="error">Caps Lock is ON.</span>
</form> </form>
{% import "macros/nav-macro.njk" as forms %} {% import "hippie/macros/nav-macro.njk" as forms %}
{{ forms.active('zubereitung') }} {{ forms.active('zubereitung') }}
{% endblock %} {% endblock %}
{% block script %} {% block script %}
{{ super() }}
<script src="../js/all.min.js" type="text/javascript"></script>
<script type="text/javascript"> <script type="text/javascript">
// Page specific // Page specific
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------

13
source/pages/maintenance.njk
View file

@ -1,13 +0,0 @@
<!-- blank.njk -->
{% set pageId = "blank" %}
{% set pageClass = "height_full" %}
{% extends "maintenance.njk" %}
{% block title %}Wartung{% endblock %}
{% block body_content %}
<div id="root" class="overflow">
<h1 class="txt_hero txt_center txt_gradient">HIPPIE</h1>
</div>
{% endblock %}

2
source/style/hippie/_basic.scss
View file

@ -35,7 +35,7 @@
// Individual styles can be added her // Individual styles can be added her
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@import "global/common"; @import "global/common";
@import "elements/typography"; @import "global/typography";
// Following the w3c document element structure // Following the w3c document element structure
// https://w3c.github.io/html/index.html#contents // https://w3c.github.io/html/index.html#contents
@import "elements/sections"; @import "elements/sections";

33
source/style/hippie/elements/_embedded.scss
View file

@ -1,9 +1,19 @@
// Images // Embedded content
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// picture
// source
// img
// iframe
// embed
// object
// param
// video
// audio
// track
// map
// area
img {
vertical-align: top;
}
picture { picture {
@ -13,10 +23,9 @@ source {
} }
img {
vertical-align: top;
// Other stuff }
// -----------------------------------------------------------------------------
iframe { iframe {
@ -30,6 +39,10 @@ object {
} }
param {
}
video { video {
} }
@ -38,6 +51,10 @@ audio {
} }
track {
}
map { map {
} }

88
source/style/hippie/elements/_grouping.scss
View file

@ -1,5 +1,22 @@
// Basic content // Grouping content
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// p
// address
// hr
// pre
// blockquote
// ol
// ul
// li
// dl
// dt
// dd
// figure
// figcaption
// main
// div
// Paragraph // Paragraph
p { p {
@ -15,7 +32,7 @@ p {
// Address // Address
address { address {
@extend %basic; // @extend %basic;
margin-top: $double_space; margin-top: $double_space;
margin-bottom: $double_space; margin-bottom: $double_space;
} }
@ -90,7 +107,7 @@ li, dt, dd {
@extend %basic; @extend %basic;
} }
.list__basic li, dd { dd, .list__basic li {
margin-bottom: $basic_space; margin-bottom: $basic_space;
} }
@ -104,6 +121,29 @@ ul {
} }
} }
// Embedded
figure {
margin: $double_space $basic_indent;
}
figcaption {
@extend %basic;
}
// Main content
main {
}
// Div
div {
}
// General Classes
// ------------------------------------------------------------------------------
.list__dash { .list__dash {
li { li {
list-style: none; list-style: none;
@ -147,28 +187,6 @@ ul {
} }
} }
// Embedded
figure {
margin: $double_space $basic_indent;
}
figcaption {
@extend %basic;
}
// Special elements
// -----------------------------------------------------------------------------
main {
}
div {
}
.box__info { .box__info {
padding: $double_space $basic_indent; padding: $double_space $basic_indent;
border-right: $basic_space solid rgba($echo_color, 0.6); border-right: $basic_space solid rgba($echo_color, 0.6);
@ -185,25 +203,22 @@ div {
// width: 100%; // width: 100%;
} }
// Columns // Columns
.block__column_line { .column__line {
column-rule: $basic_border; column-rule: $basic_border;
} }
.block__column_2, .block__column_3 { .column__2, .column__3 {
@extend p; @extend p;
} }
.block__column_2 { .column__2 {
column-count: 2; column-count: 2;
column-gap: $space_3; column-gap: $space_3;
} }
.block__column_3 { .column__3 {
column-count: 3; column-count: 3;
column-gap: $space_4; column-gap: $space_4;
} }
// Space and placeholders // Space and placeholders
.box__space { .box__space {
position: relative; position: relative;
@ -240,19 +255,22 @@ div {
background-color: rgba($brightest_color,.1); background-color: rgba($brightest_color,.1);
} }
// Data // Data
.box__file_tile { .box__file_tile {
@extend .float_space_left; @extend .float_space_left;
} }
// Flex // Flex
.flex__column_wrap { .flex__column_wrap {
@extend .flex; @extend .flex;
.column { .flex__column {
@extend .flex__child; @extend .flex__child;
flex-grow: 1; flex-grow: 1;
} }
} }
// Sprites
.sprite__img {
display: inline-block;
}

168
source/style/hippie/elements/_interactive.scss
View file

@ -1,34 +1,26 @@
// Form basics // Forms
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// form
// label
// input
// button
// select
// datalist
// optgroup
// option
// textarea
// output
// progress
// meter
// fieldset
// legend
form { form {
} }
fieldset {
margin: $high_margin;
padding: $basic_space;
border: $basic_border;
}
legend {
@extend %basic;
padding: 0 $half_space;
}
// Common
// -----------------------------------------------------------------------------
input, button, textarea {
margin: $io_margin;
&[disabled="disabled"],
&[disabled] {
cursor: not-allowed;
}
}
label { label {
@extend %basic; @extend %basic;
@ -42,6 +34,15 @@ label + textarea {
display: block; display: block;
} }
input, button, textarea {
margin: $io_margin;
&[disabled="disabled"],
&[disabled] {
cursor: not-allowed;
}
}
input { input {
color: $basic_io_font_color; color: $basic_io_font_color;
@ -92,6 +93,17 @@ input {
} }
} }
fieldset {
margin: $high_margin;
padding: $basic_space;
border: $basic_border;
}
legend {
@extend %basic;
padding: 0 $half_space;
}
label + input, label + input,
.input__label_right, .input__label_right,
.label > input, .label > input,
@ -99,50 +111,6 @@ label + input,
margin: 0 $basic_space; margin: 0 $basic_space;
} }
.label {
line-height: 2.5;
}
.label__table {
display: table;
input {
display: table-cell;
}
}
.input__default {
label {
@extend .label__table;
margin: $half_space 0;
input {
padding: $half_space ($half_space + 1);
border-style: solid;
border-color: transparent;
background-color: $basic_io_back_color;
color: $basic_io_font_color;
&:hover {
background-color: $darkest_color;
color: $brightest_color;
}
}
}
}
// More
// -----------------------------------------------------------------------------
textarea {
}
button { button {
} }
@ -163,6 +131,10 @@ option {
} }
textarea {
}
output { output {
} }
@ -179,6 +151,11 @@ meter {
// Interactive elements // Interactive elements
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// details
// summary
// dialog
details { details {
@ -188,23 +165,58 @@ summary {
} }
menu {
}
menuitem {
}
dialog { dialog {
} }
// Canvas // Scripting
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// script
// noscript
// template
// canvas
canvas { canvas {
} }
// General Classes
// ------------------------------------------------------------------------------
.label {
line-height: 2.5;
}
.label__table {
display: table;
input {
display: table-cell;
}
}
.input__default {
label {
@extend .label__table;
margin: $half_space 0;
input {
padding: $half_space ($half_space + 1);
border-style: solid;
border-color: transparent;
background-color: $basic_io_back_color;
color: $basic_io_font_color;
&:hover {
background-color: $darkest_color;
color: $brightest_color;
}
}
}
}

127
source/style/hippie/elements/_sections.scss
View file

@ -1,4 +1,4 @@
// Document // Root
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
html { html {
@ -7,16 +7,27 @@ html {
// Sections
// Basic sections
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// body
// article
// section
// nav
// aside
// h1-h6
// header
// footer
// Body
body { body {
position: relative; position: relative;
box-sizing: $box_sizing; box-sizing: $box_sizing;
font-family: $primary_font_family; font-family: $primary_font_family;
font-size: $basic_size; font-size: $basic_size;
line-height: $basic_line; line-height: $basic_line;
line-height: $text_line_basic;
color: $basic_font_color; color: $basic_font_color;
background-color: $basic_back_color; background-color: $basic_back_color;
@ -34,10 +45,12 @@ body {
} }
} }
// Article
article { article {
} }
// Section
section { section {
} }
@ -65,7 +78,14 @@ section {
padding-top: $space_3; padding-top: $space_3;
} }
// Navigation
nav {
}
// Aside element
aside { aside {
width: $basic_aside_width;
&.right + .bside { &.right + .bside {
margin-right: calc(#{$basic_aside_width} + #{$basic_space}); margin-right: calc(#{$basic_aside_width} + #{$basic_space});
@ -74,15 +94,6 @@ aside {
&.left + .bside { &.left + .bside {
margin-left: calc(#{$basic_aside_width} + #{$basic_space}); margin-left: calc(#{$basic_aside_width} + #{$basic_space});
} }
}
nav {
}
aside {
width: $basic_aside_width;
&.left { &.left {
float: left; float: left;
@ -97,6 +108,55 @@ aside {
} }
} }
// Headings
h1, h2, h3, h4, h5, h6 {
}
h1 {
@extend %head_1;
margin: $space_5 0 $space_3;
}
h1 + h1 {
margin-top: 0;
}
h2 {
@extend %head_2;
margin: $space_4 0 $space_3;
}
h2 + h2 {
margin-top: 0;
}
h3 {
@extend %head_3;
margin: $double_space 0;
text-transform: uppercase;
}
h4 {
@extend %head_3;
margin: $double_space 0;
text-transform: none;
}
h5 {
@extend %head_4;
margin: $double_space 0 $basic_space;
text-transform: none;
}
h6 {
@extend %basic;
margin: $basic_space 0;
text-transform: none;
font-weight: bold;
}
// Header
header { header {
} }
@ -114,48 +174,7 @@ header {
} }
} }
// Footer
footer { footer {
} }
// Headings
// -----------------------------------------------------------------------------
h1, h2, h3, h4, h5, h6 {
}
h1 {
@extend %head_1;
margin: $space_5 0 $space_3;
}
h2 {
@extend %head_2;
margin: $space_4 0 $space_3;
}
h3 {
@extend %head_3;
margin: $double_space 0 $double_space;
text-transform: uppercase;
}
h4 {
@extend %head_3;
margin: $double_space 0 $double_space;
text-transform: none;
}
h5 {
@extend %head_4;
margin: $double_space 0 $basic_space;
text-transform: none;
}
h6 {
@extend %basic;
margin: $basic_space 0;
text-transform: none;
font-weight: bold;
}

71
source/style/hippie/elements/_tables.scss
View file

@ -1,5 +1,17 @@
// Table // Tabular data
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// table
// caption
// colgroup
// col
// tbody
// thead
// tfoot
// tr
// td
// th
table { table {
margin: $high_margin; margin: $high_margin;
@ -7,6 +19,40 @@ table {
border-collapse: collapse; border-collapse: collapse;
} }
caption {
@extend p;
padding: $half_space 0;
border: $dotted_border;
text-align: center;
}
colgroup {
}
col {
}
tbody {
}
thead {
}
tfoot {
tr:first-child td {
border-top: $basic_border;
}
}
tr:last-child td {
border-bottom: 0;
}
th, td { th, td {
@extend %basic; @extend %basic;
padding: $half_space; padding: $half_space;
@ -17,10 +63,6 @@ th {
text-align: left; text-align: left;
} }
.precol {
border-right: $basic_border;
}
td { td {
border-right: $cell_border; border-right: $cell_border;
border-bottom: $cell_border; border-bottom: $cell_border;
@ -30,14 +72,12 @@ td:last-child {
border-right: 0; border-right: 0;
} }
tr:last-child td {
border-bottom: 0;
}
tfoot {
tr:first-child td { // General Classes
border-top: $basic_border; // ------------------------------------------------------------------------------
} .precol {
border-right: $basic_border;
} }
.table__blank { .table__blank {
@ -67,13 +107,6 @@ tfoot {
table-layout: fixed; table-layout: fixed;
} }
caption {
@extend p;
padding: $half_space 0;
border: $dotted_border;
text-align: center;
}
// Data // Data
.table__file_simple { .table__file_simple {
@extend .width_full; @extend .width_full;

92
source/style/hippie/elements/_textlevel.scss
View file

@ -1,6 +1,45 @@
// Links // Text-Level semantics
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// a
// em
// strong
// small
// s
// cite
// q
// dfn
// abbr
// ruby
// rb
// rt
// rtc
// rp
// data
// time
// code
// var
// samp
// kbd
// sub
// sup
// i
// b
// u
// mark
// bdi
// bdo
// span
// br
// wbr
// -----------------------------------------------------------------------------
// Edits
// -----------------------------------------------------------------------------
// ins
// del
// Links
a { a {
color: $basic_link_color; color: $basic_link_color;
// color: lighten($basic_action_color, 20%); // color: lighten($basic_action_color, 20%);
@ -46,9 +85,7 @@ a {
} }
// Other elements // Italic, Emphasis
// -----------------------------------------------------------------------------
i, em { i, em {
font-style: italic; font-style: italic;
} }
@ -58,20 +95,27 @@ i, em {
color: $brightest_color; color: $brightest_color;
} }
// Bold, Strong
b, strong { b, strong {
font-weight: 500; // TODO maybe bolder font-weight: 500; // TODO maybe bolder
} }
// Small
small { small {
} }
// No longer accurate or no longer relevant
s {
// Cite }
// Citation
cite { cite {
font-style: italic; font-style: italic;
} }
// Phrasing content, quoted
q { q {
} }
@ -84,6 +128,26 @@ abbr {
} }
ruby {
}
rb {
}
rt {
}
rtc {
}
rp {
}
data { data {
} }
@ -104,6 +168,10 @@ code {
color: $basic_font_color; color: $basic_font_color;
} }
var {
}
samp { samp {
} }
@ -137,6 +205,11 @@ mark {
background-color: $darkest_color; background-color: $darkest_color;
} }
bdi, bdo {
}
// Span
span { span {
} }
@ -144,6 +217,7 @@ span {
@extend %solo; @extend %solo;
} }
// Linebreak
br { br {
} }
@ -169,19 +243,19 @@ del {
// General Classes // General Classes
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
.txt-tiny { .txt_tiny {
font-size: .5em !important; font-size: .5em !important;
} }
.txt-smaller { .txt_smaller {
font-size: .75em !important; font-size: .75em !important;
} }
.txt-larger { .txt_larger {
font-size: 1.2em !important; font-size: 1.2em !important;
} }
.txt-huge { .txt_huge {
font-size: 3em !important; font-size: 3em !important;
} }

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

@ -162,10 +162,22 @@
position: fixed; position: fixed;
} }
.pin_top {
top: 0;
}
.pin_right {
right: 0;
}
.pin_bottom { .pin_bottom {
bottom: 0; bottom: 0;
} }
.pin_left {
left: 0;
}
.pos_full_view { .pos_full_view {
@extend %full_viewport; @extend %full_viewport;
background-color: rgba($alpha_color, 0.5); background-color: rgba($alpha_color, 0.5);

2
source/style/hippie/global/_config.scss
View file

@ -54,7 +54,7 @@ $text_size_2: 20;
$hero_size_1: $head_size_1 * 3; $hero_size_1: $head_size_1 * 3;
$text_line_basic: 1.3 !default; $text_line_basic: 1.28 !default;
$text_line_mono: 1.1 !default; $text_line_mono: 1.1 !default;
$head_line_basic: $text_line_basic !default; $head_line_basic: $text_line_basic !default;
$head_line_2: $head_line_basic; $head_line_2: $head_line_basic;

124
source/style/hippie/elements/_typography.scss → source/style/hippie/global/_typography.scss
View file

@ -1,62 +1,62 @@
// Basic styles // Basic styles
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
%basic { %basic {
font-family: $primary_font_family; font-family: $primary_font_family;
font-size: $text_size_1; font-size: $text_size_1;
line-height: $text_line_basic; line-height: $text_line_basic;
} }
%basic_mono { %basic_mono {
font-family: $monospace_font_family; font-family: $monospace_font_family;
font-size: $text_size_1; font-size: $text_size_1;
line-height: $text_line_mono; line-height: $text_line_mono;
} }
%basic_print { %basic_print {
font-family: $print_font_family; font-family: $print_font_family;
font-size: $text_size_1; font-size: $text_size_1;
line-height: $text_line_basic; line-height: $text_line_basic;
} }
%head_all { %head_all {
color: $basic_head_color; color: $basic_head_color;
} }
%head_1 { %head_1 {
font-family: $secondary_font_family; font-family: $secondary_font_family;
font-size: $head_size_1; font-size: $head_size_1;
font-weight: 300; font-weight: 300;
line-height: $head_line_basic; line-height: $head_line_basic;
} }
%head_2 { %head_2 {
font-family: $secondary_font_family; font-family: $secondary_font_family;
font-size: $head_size_2; font-size: $head_size_2;
font-weight: 300; font-weight: 300;
line-height: $head_line_2; line-height: $head_line_2;
} }
%head_3 { %head_3 {
font-family: $secondary_font_family; font-family: $secondary_font_family;
font-size: $head_size_3; font-size: $head_size_3;
font-weight: 300; font-weight: 300;
line-height: $head_line_3; line-height: $head_line_3;
} }
%head_4 { %head_4 {
font-family: $secondary_font_family; font-family: $secondary_font_family;
font-size: $head_size_4; font-size: $head_size_4;
font-weight: 300; font-weight: 300;
line-height: $head_line_4; line-height: $head_line_4;
} }
%solo { %solo {
@extend %basic; @extend %basic;
} }
%short { %short {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
-o-text-overflow: ellipsis; // vendor -o-text-overflow: ellipsis; // vendor
} }

9
source/style/hippie/modules/navigation/_nav_module.scss
View file

@ -119,7 +119,7 @@ nav {
position: fixed; position: fixed;
// display: table; // display: table;
// width: 3em; // width: 3em;
right: 0; right: $half_space;
bottom: $double_space; bottom: $double_space;
ul { ul {
@ -129,7 +129,12 @@ nav {
li { li {
margin-bottom: 0; margin-bottom: 0;
} }
.a_button_meta { button {
width: 32px;
margin-right: 0;
margin-left: 0;
}
.a__button_meta {
// display: table-cell; // display: table-cell;
display: inline-block; display: inline-block;

14
source/style/modules/demo/_demo_module.scss
View file

@ -87,6 +87,20 @@
} }
} }
.demo__sprite_down {
width: 32px;
height: 32px;
background-image: url(../art/sprites.png);
background-position: -32px 0;
}
.demo__sprite_up {
width: 32px;
height: 64px;
background-image: url(../art/sprites.png);
background-position: 0 0;
}
.demo__avatar { .demo__avatar {
img { img {

71
source/templates/default.njk → source/templates/hippie/demo-default.njk
View file

@ -1,35 +1,36 @@
<!DOCTYPE html> <!-- template-demo-default.njk -->
<html lang="de"> <!DOCTYPE html>
<head> <html lang="de">
<meta charset="utf-8"> <head>
<meta charset="utf-8">
{% block head %}
<title>{% block title %}{% endblock %} - HIPPIE</title> {% block head %}
<title>{% block title %}{% endblock %} - HIPPIE</title>
<meta name="author" content="Interaktionsweise">
<meta name="description" content="hippie"> <meta name="author" content="Interaktionsweise">
<meta name="generator" content="Notepad++, Atom"> <meta name="description" content="hippie">
<meta name="robots" content="noindex"> <meta name="generator" content="Notepad++, Atom">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
<link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon">
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" /> <link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon">
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
<link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/>
<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> --> {% endblock %}
{% endblock %} </head>
</head>
<body id="{{ pageId }}" class="{{ pageClass }}">
<body id="{{ pageId }}" class="{{ pageClass }}"> {% block body_content %}{% endblock %}
{% block body_content %}{% endblock %}
<script {% block script %}
src="https://code.jquery.com/jquery-3.2.1.min.js" <script
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" src="https://code.jquery.com/jquery-3.2.1.min.js"
crossorigin="anonymous"></script> integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
{# <script src="bower_components/jquery/dist/jquery.js"></script> #} crossorigin="anonymous"></script>
<script src="./js/all.min.js" type="text/javascript"></script> {# <script src="bower_components/jquery/dist/jquery.js"></script> #}
{% block script %}{% endblock %}
</body> {% endblock %}
</html> </body>
</html>

8
source/templates/demo.njk → source/templates/hippie/demo-extended.njk
View file

@ -1,4 +1,4 @@
<!-- layout.njk --> <!-- template-demo-extended.njk -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
@ -28,13 +28,13 @@
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" /> <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
<!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'> --> <!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'> -->
<link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/> <link rel="stylesheet" type="text/css" media="all" href="../css/demo.css"/>
<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> --> <!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
{% endblock %} {% endblock %}
</head> </head>
<body id="{{ pageId }}" class="body__demo"> <body id="{{ pageId }}" class="body__demo">
{% include "partials/page-hover.njk" %} {% include "hippie/partials/page-hover.njk" %}
<div id="root"> <div id="root">
<header id="js_head" class="header_site"> <header id="js_head" class="header_site">
{% block body_header %} {% block body_header %}
@ -50,8 +50,6 @@
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
{# <script src="bower_components/jquery/dist/jquery.js"></script> #} {# <script src="bower_components/jquery/dist/jquery.js"></script> #}
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
<script src="../js/all.min.js" type="text/javascript"></script>
{% block script %}{% endblock %} {% block script %}{% endblock %}
</body> </body>
</html> </html>

2
source/templates/maintenance.njk → source/templates/hippie/demo-maintenance.njk
View file

@ -1,3 +1,4 @@
<!-- template-demo-maintenance.njk -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
@ -17,7 +18,6 @@
<link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon"> <link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon">
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" /> <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
<link rel="stylesheet" type="text/css" media="all" href="css/demo_basic.css"/>
{% endblock %} {% endblock %}
</head> </head>

0
source/templates/macros/nav-macro.njk → source/templates/hippie/macros/nav-macro.njk
View file

0
source/templates/macros/top-macro.njk → source/templates/hippie/macros/top-macro.njk
View file

0
source/templates/partials/footer-status.njk → source/templates/hippie/partials/footer-status.njk
View file

0
source/templates/partials/footer.njk → source/templates/hippie/partials/footer.njk
View file

18
source/templates/hippie/partials/nav-page-meta.njk Normal file
View file

@ -0,0 +1,18 @@
<!-- nav-page-meta.partial -->
<nav class="nav__page_meta">
<ul>
<li class="magic">
<a href="#begin" id="js_scrolltop" class="a_button_meta">
<div class="sprite__img demo__sprite_up"></div>
{# <img src="../art/up.png" alt="" width="32" height="64"> #}
</a>
</li>
<li><button class="">Show Meta Information</button></li>
<li>
<a href="#end" id="js_scrolldown" class="a_button_meta">
<div class="sprite__img demo__sprite_down"></div>
{# <img src="../art/down.png" alt="" width="32" height="32"> #}
</a>
</li>
</ul>
</nav>

0
source/templates/partials/page-hover.njk → source/templates/hippie/partials/page-hover.njk
View file