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

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

@ -1,5 +1,5 @@
{
"demolinks": [
"demoadditionallinks": [
{
"href": "demo/intro.html",
"text": "Intro"
@ -12,6 +12,20 @@
"href": "demo/os.html",
"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",
"text": "404"
@ -20,19 +34,5 @@
"href": "demo/error/500.html",
"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 pageClass = "height_full" %}
{% extends "default.njk" %}
{% extends "hippie/demo-default.njk" %}
{% block title %}index{% 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 %}
@ -15,18 +17,6 @@
<h2>This is HIPPIE</h2>
<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>
<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>
<ul class="list__link">
<!-- Loops through "demoadditionallinks" array -->
@ -34,11 +24,26 @@ C(")(")</pre>
<li><a href="{{link.href}}">{{link.text}}</a></li>
{% endfor %}
</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>
{% endblock %}
{% block script %}
{{ super() }}
<script src="./js/all.min.js" type="text/javascript"></script>
<script type="text/javascript">
// 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 -->
{% set pageId = "elements" %}
{% set pageClass = "" %}
{% extends "demo.njk" %}
{% block title %}Elements{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body_content %}
<div class="temp__layer">
<!-- <div class="exp_overlay_btn exp_help_btn">
<span class="span__solo">?</span>
</div> -->
<nav class="nav__page_meta">
<ul>
<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>
<li><button class="a_button_meta">Show Meta Information</button></li>
<li><a href="#end" id="js_scrolldown" class="a_button_meta"><img src="./art/down.png" alt="" width="32" height="32"></a></li>
</ul>
</nav>
</div>
<div id="begin" class="">
<article>
<header>
<h1>Bereiche</h1>
<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>
<nav>
<p>Das Element <code>&lt;nav&gt;</code> umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p>
</nav>
</header>
<section>
<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>Noch allgemeiner ist das <code>&lt;section&gt;</code> Element. Es schafft Bereiche um Inhalte zu strukturieren.</p>
<p>Bestimmte Bereiche haben einen vorgegebene Zweck.<br>Folgende Bereiche sind vorgegeben:</p>
</section>
<div class="overflow">
<aside class="left">
<p>Ein Bereich, der seitlich zum hauptsächlichen Inhalt verläuft, wird mit <code>&lt;aside&gt;</code> markiert.</p>
</aside>
<section class="bside">
<header>
<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>
<nav>
<p>Das Element <code>&lt;nav&gt;</code> umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p>
</nav>
</header>
<footer>
<p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code>&lt;footer&gt;</code> eingesetzt.</p>
</footer>
</section>
</div>
<footer>
<p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code>&lt;footer&gt;</code> eingesetzt.</p>
</footer>
</article>
</div>
{% include "partials/footer.njk" %}
{% endblock %}
{% block script %}
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------
$( document ).ready(function() {
console.log('HIPPIE');
});
</script>
{% endblock %}
<!-- page-elements.njk -->
{% set pageId = "elements" %}
{% set pageClass = "" %}
{% extends "hippie/demo-extended.njk" %}
{% block title %}Elements{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body_content %}
<div class="temp__layer">
<!-- <div class="exp_overlay_btn exp_help_btn">
<span class="span__solo">?</span>
</div> -->
{% include "hippie/partials/nav-page-meta.njk" %}
</div>
<div id="begin" class="">
<article>
<header>
<h1>Bereiche</h1>
<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>
<nav>
<p>Das Element <code>&lt;nav&gt;</code> umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p>
</nav>
</header>
<section>
<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>Noch allgemeiner ist das <code>&lt;section&gt;</code> Element. Es schafft Bereiche um Inhalte zu strukturieren.</p>
<p>Bestimmte Bereiche haben einen vorgegebene Zweck.<br>Folgende Bereiche sind vorgegeben:</p>
</section>
<div class="overflow">
<aside class="left">
<p>Ein Bereich, der seitlich zum hauptsächlichen Inhalt verläuft, wird mit <code>&lt;aside&gt;</code> markiert.</p>
</aside>
<section class="bside">
<header>
<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>
<nav>
<p>Das Element <code>&lt;nav&gt;</code> umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p>
</nav>
</header>
<footer>
<p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code>&lt;footer&gt;</code> eingesetzt.</p>
</footer>
</section>
</div>
<footer>
<p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code>&lt;footer&gt;</code> eingesetzt.</p>
</footer>
</article>
</div>
{% include "hippie/partials/footer.njk" %}
{% endblock %}
{% 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">
// Page specific
// ------------------------------------------------------------------------------
$( document ).ready(function() {
console.log('HIPPIE');
});
</script>
{% endblock %}

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

@ -1,23 +1,25 @@
<!-- index.njk -->
{% set pageId = "404" %}
{% set pageClass = "body__status" %}
{% extends "maintenance.njk" %}
{% block title %}404{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body_content %}
<main class="main__site">
<h1>404</h1>
<h3>Client-Fehler</h3>
<p>Hier ist nichts. <dfn>Not Found</dfn></br>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<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 class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</main>
{% include "partials/footer-status.njk" %}
{% endblock %}
<!-- page-error-404.njk -->
{% set pageId = "404" %}
{% set pageClass = "body__status" %}
{% extends "hippie/demo-maintenance.njk" %}
{% block title %}404{% endblock %}
{% block head %}
{{ super() }}
<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"/> -->
{% endblock %}
{% block body_content %}
<main class="main__site">
<h1>404</h1>
<h3>Client-Fehler</h3>
<p>Hier ist nichts. <dfn>Not Found</dfn></br>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<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 class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</main>
{% include "hippie/partials/footer-status.njk" %}
{% endblock %}

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

@ -1,23 +1,25 @@
<!-- index.njk -->
{% set pageId = "500" %}
{% set pageClass = "body__status" %}
{% extends "maintenance.njk" %}
{% block title %}500{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body_content %}
<main class="main__site">
<h1>500</h1>
<h3>Server-Fehler</h3>
<p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
<p>Dies ist ein „Sammel-Statuscode“ für unerwartete Serverfehler.</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>
</main>
{% include "partials/footer-status.njk" %}
{% endblock %}
<!-- page-error-500.njk -->
{% set pageId = "500" %}
{% set pageClass = "body__status" %}
{% extends "hippie/demo-maintenance.njk" %}
{% block title %}500{% endblock %}
{% block head %}
{{ super() }}
<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"/> -->
{% endblock %}
{% block body_content %}
<main class="main__site">
<h1>500</h1>
<h3>Server-Fehler</h3>
<p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
<p>Dies ist ein „Sammel-Statuscode“ für unerwartete Serverfehler.</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>
</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 pageClass = "" %}
{% extends "demo.njk" %}
{% extends "hippie/demo-extended.njk" %}
{% block title %}demo{% endblock %}
{% block head %}
@ -132,10 +132,13 @@
</div>
</div>
</div>
{% include "partials/footer.njk" %}
{% include "hippie/partials/footer.njk" %}
{% endblock %}
{% 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">
// 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 pageClass = "height_full" %}
{% extends "default.njk" %}
{% 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"/> -->
<style>
#error {
border: 1px solid #FFFF66;
@ -27,11 +29,13 @@
<input id="txtName" type="text" /><span id="error">Caps Lock is ON.</span>
</form>
{% import "macros/nav-macro.njk" as forms %}
{% import "hippie/macros/nav-macro.njk" as forms %}
{{ forms.active('zubereitung') }}
{% endblock %}
{% block script %}
{{ super() }}
<script src="../js/all.min.js" type="text/javascript"></script>
<script type="text/javascript">
// 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
// -----------------------------------------------------------------------------
@import "global/common";
@import "elements/typography";
@import "global/typography";
// Following the w3c document element structure
// https://w3c.github.io/html/index.html#contents
@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 {
@ -13,10 +23,9 @@ source {
}
// Other stuff
// -----------------------------------------------------------------------------
img {
vertical-align: top;
}
iframe {
@ -30,6 +39,10 @@ object {
}
param {
}
video {
}
@ -38,6 +51,10 @@ audio {
}
track {
}
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
p {
@ -15,7 +32,7 @@ p {
// Address
address {
@extend %basic;
// @extend %basic;
margin-top: $double_space;
margin-bottom: $double_space;
}
@ -90,7 +107,7 @@ li, dt, dd {
@extend %basic;
}
.list__basic li, dd {
dd, .list__basic li {
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 {
li {
list-style: none;
@ -147,28 +187,6 @@ ul {
}
}
// Embedded
figure {
margin: $double_space $basic_indent;
}
figcaption {
@extend %basic;
}
// Special elements
// -----------------------------------------------------------------------------
main {
}
div {
}
.box__info {
padding: $double_space $basic_indent;
border-right: $basic_space solid rgba($echo_color, 0.6);
@ -185,25 +203,22 @@ div {
// width: 100%;
}
// Columns
.block__column_line {
.column__line {
column-rule: $basic_border;
}
.block__column_2, .block__column_3 {
.column__2, .column__3 {
@extend p;
}
.block__column_2 {
.column__2 {
column-count: 2;
column-gap: $space_3;
}
.block__column_3 {
.column__3 {
column-count: 3;
column-gap: $space_4;
}
// Space and placeholders
.box__space {
position: relative;
@ -240,19 +255,22 @@ div {
background-color: rgba($brightest_color,.1);
}
// Data
.box__file_tile {
@extend .float_space_left;
}
// Flex
.flex__column_wrap {
@extend .flex;
.column {
.flex__column {
@extend .flex__child;
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 {
}
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 {
@extend %basic;
@ -42,6 +34,15 @@ label + textarea {
display: block;
}
input, button, textarea {
margin: $io_margin;
&[disabled="disabled"],
&[disabled] {
cursor: not-allowed;
}
}
input {
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,
.input__label_right,
.label > input,
@ -99,50 +111,6 @@ label + input,
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 {
}
@ -163,6 +131,10 @@ option {
}
textarea {
}
output {
}
@ -179,6 +151,11 @@ meter {
// Interactive elements
// -----------------------------------------------------------------------------
// details
// summary
// dialog
details {
@ -188,23 +165,58 @@ summary {
}
menu {
}
menuitem {
}
dialog {
}
// Canvas
// Scripting
// -----------------------------------------------------------------------------
// script
// noscript
// template
// 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 {
@ -7,16 +7,27 @@ html {
// Basic sections
// Sections
// -----------------------------------------------------------------------------
// body
// article
// section
// nav
// aside
// h1-h6
// header
// footer
// Body
body {
position: relative;
box-sizing: $box_sizing;
font-family: $primary_font_family;
font-size: $basic_size;
line-height: $basic_line;
line-height: $text_line_basic;
color: $basic_font_color;
background-color: $basic_back_color;
@ -34,10 +45,12 @@ body {
}
}
// Article
article {
}
// Section
section {
}
@ -65,7 +78,14 @@ section {
padding-top: $space_3;
}
// Navigation
nav {
}
// Aside element
aside {
width: $basic_aside_width;
&.right + .bside {
margin-right: calc(#{$basic_aside_width} + #{$basic_space});
@ -74,15 +94,6 @@ aside {
&.left + .bside {
margin-left: calc(#{$basic_aside_width} + #{$basic_space});
}
}
nav {
}
aside {
width: $basic_aside_width;
&.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 {
}
@ -114,48 +174,7 @@ header {
}
}
// 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 {
margin: $high_margin;
@ -7,6 +19,40 @@ table {
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 {
@extend %basic;
padding: $half_space;
@ -17,10 +63,6 @@ th {
text-align: left;
}
.precol {
border-right: $basic_border;
}
td {
border-right: $cell_border;
border-bottom: $cell_border;
@ -30,14 +72,12 @@ td:last-child {
border-right: 0;
}
tr:last-child td {
border-bottom: 0;
}
tfoot {
tr:first-child td {
border-top: $basic_border;
}
// General Classes
// ------------------------------------------------------------------------------
.precol {
border-right: $basic_border;
}
.table__blank {
@ -67,13 +107,6 @@ tfoot {
table-layout: fixed;
}
caption {
@extend p;
padding: $half_space 0;
border: $dotted_border;
text-align: center;
}
// Data
.table__file_simple {
@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 {
color: $basic_link_color;
// color: lighten($basic_action_color, 20%);
@ -46,9 +85,7 @@ a {
}
// Other elements
// -----------------------------------------------------------------------------
// Italic, Emphasis
i, em {
font-style: italic;
}
@ -58,20 +95,27 @@ i, em {
color: $brightest_color;
}
// Bold, Strong
b, strong {
font-weight: 500; // TODO maybe bolder
}
// Small
small {
}
// No longer accurate or no longer relevant
s {
// Cite
}
// Citation
cite {
font-style: italic;
}
// Phrasing content, quoted
q {
}
@ -84,6 +128,26 @@ abbr {
}
ruby {
}
rb {
}
rt {
}
rtc {
}
rp {
}
data {
}
@ -104,6 +168,10 @@ code {
color: $basic_font_color;
}
var {
}
samp {
}
@ -137,6 +205,11 @@ mark {
background-color: $darkest_color;
}
bdi, bdo {
}
// Span
span {
}
@ -144,6 +217,7 @@ span {
@extend %solo;
}
// Linebreak
br {
}
@ -169,19 +243,19 @@ del {
// General Classes
// ------------------------------------------------------------------------------
.txt-tiny {
.txt_tiny {
font-size: .5em !important;
}
.txt-smaller {
.txt_smaller {
font-size: .75em !important;
}
.txt-larger {
.txt_larger {
font-size: 1.2em !important;
}
.txt-huge {
.txt_huge {
font-size: 3em !important;
}

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

@ -162,10 +162,22 @@
position: fixed;
}
.pin_top {
top: 0;
}
.pin_right {
right: 0;
}
.pin_bottom {
bottom: 0;
}
.pin_left {
left: 0;
}
.pos_full_view {
@extend %full_viewport;
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;
$text_line_basic: 1.3 !default;
$text_line_basic: 1.28 !default;
$text_line_mono: 1.1 !default;
$head_line_basic: $text_line_basic !default;
$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 {
font-family: $primary_font_family;
font-size: $text_size_1;
line-height: $text_line_basic;
}
%basic_mono {
font-family: $monospace_font_family;
font-size: $text_size_1;
line-height: $text_line_mono;
}
%basic_print {
font-family: $print_font_family;
font-size: $text_size_1;
line-height: $text_line_basic;
}
%head_all {
color: $basic_head_color;
}
%head_1 {
font-family: $secondary_font_family;
font-size: $head_size_1;
font-weight: 300;
line-height: $head_line_basic;
}
%head_2 {
font-family: $secondary_font_family;
font-size: $head_size_2;
font-weight: 300;
line-height: $head_line_2;
}
%head_3 {
font-family: $secondary_font_family;
font-size: $head_size_3;
font-weight: 300;
line-height: $head_line_3;
}
%head_4 {
font-family: $secondary_font_family;
font-size: $head_size_4;
font-weight: 300;
line-height: $head_line_4;
}
%solo {
@extend %basic;
}
%short {
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis; // vendor
}
// Basic styles
// -----------------------------------------------------------------------------
%basic {
font-family: $primary_font_family;
font-size: $text_size_1;
line-height: $text_line_basic;
}
%basic_mono {
font-family: $monospace_font_family;
font-size: $text_size_1;
line-height: $text_line_mono;
}
%basic_print {
font-family: $print_font_family;
font-size: $text_size_1;
line-height: $text_line_basic;
}
%head_all {
color: $basic_head_color;
}
%head_1 {
font-family: $secondary_font_family;
font-size: $head_size_1;
font-weight: 300;
line-height: $head_line_basic;
}
%head_2 {
font-family: $secondary_font_family;
font-size: $head_size_2;
font-weight: 300;
line-height: $head_line_2;
}
%head_3 {
font-family: $secondary_font_family;
font-size: $head_size_3;
font-weight: 300;
line-height: $head_line_3;
}
%head_4 {
font-family: $secondary_font_family;
font-size: $head_size_4;
font-weight: 300;
line-height: $head_line_4;
}
%solo {
@extend %basic;
}
%short {
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis; // vendor
}

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

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

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

@ -1,35 +1,36 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
{% block head %}
<title>{% block title %}{% endblock %} - HIPPIE</title>
<meta name="author" content="Interaktionsweise">
<meta name="description" content="hippie">
<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" />
<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 %}
</head>
<body id="{{ pageId }}" class="{{ pageClass }}">
{% block body_content %}{% endblock %}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
{# <script src="bower_components/jquery/dist/jquery.js"></script> #}
<script src="./js/all.min.js" type="text/javascript"></script>
{% block script %}{% endblock %}
</body>
</html>
<!-- template-demo-default.njk -->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
{% block head %}
<title>{% block title %}{% endblock %} - HIPPIE</title>
<meta name="author" content="Interaktionsweise">
<meta name="description" content="hippie">
<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" />
<link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon">
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
{% endblock %}
</head>
<body id="{{ pageId }}" class="{{ pageClass }}">
{% block body_content %}{% endblock %}
{% block script %}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
{# <script src="bower_components/jquery/dist/jquery.js"></script> #}
{% endblock %}
</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>
<html lang="de">
<head>
@ -28,13 +28,13 @@
<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 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"/> -->
{% endblock %}
</head>
<body id="{{ pageId }}" class="body__demo">
{% include "partials/page-hover.njk" %}
{% include "hippie/partials/page-hover.njk" %}
<div id="root">
<header id="js_head" class="header_site">
{% block body_header %}
@ -50,8 +50,6 @@
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></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 %}
</body>
</html>

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

@ -1,3 +1,4 @@
<!-- template-demo-maintenance.njk -->
<!DOCTYPE html>
<html lang="de">
<head>
@ -17,7 +18,6 @@
<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_basic.css"/>
{% endblock %}
</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