demo.4

* 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

source/style/hippie/_basic.scss

@@ -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";

source/style/hippie/elements/_embedded.scss

@@ -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 {
 
 }

source/style/hippie/elements/_grouping.scss

@@ -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;
+}

source/style/hippie/elements/_interactive.scss

@@ -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;
+			}
+		}
+	}
+}

source/style/hippie/elements/_sections.scss

@@ -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;
-}

source/style/hippie/elements/_tables.scss

@@ -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;

source/style/hippie/elements/_textlevel.scss

@@ -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;
 }
 

source/style/hippie/global/_common.scss

@@ -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);

source/style/hippie/global/_config.scss

@@ -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;

source/style/hippie/global/_typography.scss

@@ -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
+}

source/style/hippie/modules/navigation/_nav_module.scss

@@ -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;
 

source/style/modules/demo/_demo_module.scss

@@ -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 {