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 %}

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

@ -1,8 +1,8 @@
<!-- demo.njk -->
<!-- page-elements.njk -->
{% set pageId = "elements" %}
{% set pageClass = "" %}
{% extends "demo.njk" %}
{% extends "hippie/demo-extended.njk" %}
{% block title %}Elements{% endblock %}
{% block head %}
@ -14,13 +14,7 @@
<!-- <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>
{% include "hippie/partials/nav-page-meta.njk" %}
</div>
<div id="begin" class="">
<article>
@ -57,10 +51,13 @@
</footer>
</article>
</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
// ------------------------------------------------------------------------------

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

@ -1,12 +1,14 @@
<!-- index.njk -->
<!-- page-error-404.njk -->
{% set pageId = "404" %}
{% set pageClass = "body__status" %}
{% extends "maintenance.njk" %}
{% 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 %}
@ -19,5 +21,5 @@
<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" %}
{% include "hippie/partials/footer-status.njk" %}
{% endblock %}

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

@ -1,12 +1,14 @@
<!-- index.njk -->
<!-- page-error-500.njk -->
{% set pageId = "500" %}
{% set pageClass = "body__status" %}
{% extends "maintenance.njk" %}
{% 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 %}
@ -19,5 +21,5 @@
<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" %}
{% include "hippie/partials/footer-status.njk" %}
{% endblock %}

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

@ -1,8 +1,8 @@
<!-- demo.njk -->
<!-- page-intro.njk -->
{% set pageId = "intro" %}
{% set pageClass = "" %}
{% extends "demo.njk" %}
{% extends "hippie/demo-extended.njk" %}
{% block title %}Intro{% endblock %}
{% block head %}
@ -14,17 +14,11 @@
<!-- <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>
{% include "hippie/partials/nav-page-meta.njk" %}
</div>
<div id="begin" class="demo__intro">
Dies ist einfach nur Text.<br>Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.
Dies ist einfach nur Text.<br>Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.<br>Dies ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung verwendet.<br><br>
<p>Es wirken nur die Eigenschaften des <code>&lt;body&gt;</code> Elements. Dieses Element umschließt den gesamten Inhalt des Dokumentes und kommt daher nur einmal vor. Inhalte sind normalerweise durch Elemente definiert. Grundlegende Elemente teilen das Dokument zunächst in Abschnitte.</p>
<h1>Bereiche</h1>
<article>
@ -48,6 +42,7 @@
<p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code>&lt;footer&gt;</code> eingesetzt.</p>
</footer>
</section>
<address>Das Element <code>&lt;address&gt;</code> hat den Zweck, Kontaktinformationen bereit zu stellen. Diese werden, je nach Position des Elements im Kontext der gesamten Seite, anders gewertet.</address>
<!-- </div> -->
</article>
<article>
@ -75,9 +70,9 @@
<hr class="hr__dotted js_pop" emmet/><div class="exp_pop"><code class="code__solo">hr.hr__dotted</code></div><!--hr.hr__dotted-->
<hr class="center_50 js_pop"/><div class="exp_pop"><code class="code__solo">hr.center_50</code></div>
<hr class="hr__dotted center_25 js_pop"/><div class="exp_pop"><code class="code__solo">hr.hr__dotted.center_25</code></div>
<p class="block__column_2 js_pop">Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu. Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilanfang zu finden. Die vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung viele Formen annehmen.</p><div class="exp_pop"><code class="code__solo">p.block__column_2</code></div>
<p class="block__column_3 block__column_line js_pop">Drei Spalten gilt es jetzt also zu Füllen. Dann erst wird die Trennung der Spalten durch eine Linie sichtbar.</p><div class="exp_pop"><code class="code__solo">p.block__column_3.block__column_line</code></div>
<p class="block__column_3 block__column_line">Ist der Text nicht lang genug bleibt eventuell eine Spalte leer. Diesmal wird dies aber nicht passieren, denn das Anschauungsbeispiel ist ja nun durch den vorherigen Absatz schon gegeben.<br>Oft ist es sinnvoll, Absätze mit mehreren Spalten deutlich von nachfolgenden Absätzen zu trennen. Da der Textfluss spaltenweise verläuft, liest man eventuell an der falschen Stelle weiter. Ach das ziegen diese beiden Absätze ganz gut.</p>
<p class="column__2 js_pop">Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu. Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilanfang zu finden. Die vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung viele Formen annehmen.</p><div class="exp_pop"><code class="code__solo">p.column__2</code></div>
<p class="column__3 column__line js_pop">Drei Spalten gilt es jetzt also zu Füllen. Dann erst wird die Trennung der Spalten durch eine Linie sichtbar.</p><div class="exp_pop"><code class="code__solo">p.column__3.column__line</code></div>
<p class="column__3 column__line">Ist der Text nicht lang genug bleibt eventuell eine Spalte leer. Diesmal wird dies aber nicht passieren, denn das Anschauungsbeispiel ist ja nun durch den vorherigen Absatz schon gegeben.<br>Oft ist es sinnvoll, Absätze mit mehreren Spalten deutlich von nachfolgenden Absätzen zu trennen. Da der Textfluss spaltenweise verläuft, liest man eventuell an der falschen Stelle weiter. Ach das ziegen diese beiden Absätze ganz gut.</p>
<p>Es gibt die Möglichkeit vorformatierten Text darzustellen <code>&lt;pre&gt;</code>.</p>
<pre>Dadurch<br> bleiben<br> Einrückungen<br> durch<br> Tabulatoren<br> erhalten.</pre>
<p>Text bekommt durch Listen besondere optische wie auch inhaltliche Struktur. Es gibt ungeordnete <code>&lt;ul&gt;</code> und geordnete Listen <code>&lt;ol&gt;</code> sowie Beschreibungslisten <code>&lt;dl&gt;</code>. Die beiden ersten Varianten beinhalten das Listenelement <code>&lt;li&gt;</code>. Beschreibungslisten beinhalten jeweils das Paar von Ausdruck <code>&lt;dt&gt;</code> und Beschreibung <code>&lt;dd&gt;</code>. Im Folgenden eine Liste der Listen in ihrer Ausgangskonfiguration:</p>
@ -587,11 +582,11 @@
<div class="flex__child"></div>
</div>
<div class="flex__column_wrap">
<div class="column"><input value="Undefiniert"/></div>
<div class="column"><input type="text" size="8" value="Text"/></div>
<div class="column"><input type="text" size="8" value="Deaktiviert" disabled/></div>
<div class="column"><input type="button" value="Auswählen"></div>
<div class="column"><input type="submit" value="Senden" disabled/></div>
<div class="flex__column"><input value="Undefiniert"/></div>
<div class="flex__column"><input type="text" size="8" value="Text"/></div>
<div class="flex__column"><input type="text" size="8" value="Deaktiviert" disabled/></div>
<div class="flex__column"><input type="button" value="Auswählen"></div>
<div class="flex__column"><input type="submit" value="Senden" disabled/></div>
</div>
<h2>Gruppierung</h2>
@ -670,7 +665,7 @@
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</div>
{% include "partials/footer-status.njk" %}
{% include "hippie/partials/footer-status.njk" %}
</section>
<section class="sec_main_status demo__status">
<div class="wrap_center">
@ -681,7 +676,7 @@
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</div>
{% include "partials/footer-status.njk" %}
{% include "hippie/partials/footer-status.njk" %}
</section>
<section class="sec_main_status demo__status">
<div class="wrap_center">
@ -692,14 +687,17 @@
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote>
</div>
{% include "partials/footer-status.njk" %}
{% include "hippie/partials/footer-status.njk" %}
</section>
</article>
</section>
{% 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
// ------------------------------------------------------------------------------

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;

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

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 {

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

@ -1,3 +1,4 @@
<!-- template-demo-default.njk -->
<!DOCTYPE html>
<html lang="de">
<head>
@ -17,19 +18,19 @@
<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 %}
{% 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> #}
<script src="./js/all.min.js" type="text/javascript"></script>
{% block script %}{% endblock %}
{% 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