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

10 years later #1

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

392
.gitignore vendored
View file

@ -1,196 +1,196 @@
# hippie # hippie
################### ###################
################### ###################
build/** build/**
reports/** reports/**
source/art/*.* source/art/*.*
source/art/images/*.* source/art/images/*.*
source/art/sprites/ source/art/sprites/
!source/art/**/demo/ !source/art/**/demo/
# https://gist.github.com/octocat/9257657 # https://gist.github.com/octocat/9257657
################### ###################
################### ###################
# Compiled source # # Compiled source #
################### ###################
*.com *.com
*.class *.class
*.dll *.dll
*.exe *.exe
*.o *.o
*.so *.so
# Packages # # Packages #
############ ############
# it's better to unpack these files and commit the raw source # it's better to unpack these files and commit the raw source
# git has its own built in compression methods # git has its own built in compression methods
*.7z *.7z
*.dmg *.dmg
*.gz *.gz
*.iso *.iso
*.jar *.jar
*.rar *.rar
*.tar *.tar
*.zip *.zip
# Logs and databases # # Logs and databases #
###################### ######################
*.log *.log
*.sql *.sql
*.sqlite *.sqlite
# OS generated files # # OS generated files #
###################### ######################
.DS_Store .DS_Store
.DS_Store? .DS_Store?
._* ._*
.Spotlight-V100 .Spotlight-V100
.Trashes .Trashes
ehthumbs.db ehthumbs.db
Thumbs.db Thumbs.db
# https://github.com/github/gitignore # https://github.com/github/gitignore
################### ###################
################### ###################
# https://github.com/github/gitignore/blob/master/Global/Windows.gitignore # https://github.com/github/gitignore/blob/master/Global/Windows.gitignore
################### ###################
# Windows thumbnail cache files # Windows thumbnail cache files
Thumbs.db Thumbs.db
ehthumbs.db ehthumbs.db
ehthumbs_vista.db ehthumbs_vista.db
# Dump file # Dump file
*.stackdump *.stackdump
# Folder config file # Folder config file
Desktop.ini Desktop.ini
# Recycle Bin used on file shares # Recycle Bin used on file shares
$RECYCLE.BIN/ $RECYCLE.BIN/
# Windows Installer files # Windows Installer files
*.cab *.cab
*.msi *.msi
*.msm *.msm
*.msp *.msp
# Windows shortcuts # Windows shortcuts
*.lnk *.lnk
# https://github.com/github/gitignore/blob/master/Global/macOS.gitignore # https://github.com/github/gitignore/blob/master/Global/macOS.gitignore
################### ###################
# General # General
*.DS_Store *.DS_Store
.AppleDouble .AppleDouble
.LSOverride .LSOverride
# Icon must end with two \r # Icon must end with two \r
Icon Icon
# Thumbnails # Thumbnails
._* ._*
# Files that might appear in the root of a volume # Files that might appear in the root of a volume
.DocumentRevisions-V100 .DocumentRevisions-V100
.fseventsd .fseventsd
.Spotlight-V100 .Spotlight-V100
.TemporaryItems .TemporaryItems
.Trashes .Trashes
.VolumeIcon.icns .VolumeIcon.icns
.com.apple.timemachine.donotpresent .com.apple.timemachine.donotpresent
# Directories potentially created on remote AFP share # Directories potentially created on remote AFP share
.AppleDB .AppleDB
.AppleDesktop .AppleDesktop
Network Trash Folder Network Trash Folder
Temporary Items Temporary Items
.apdisk .apdisk
https://github.com/github/gitignore/blob/master/Global/Linux.gitignore https://github.com/github/gitignore/blob/master/Global/Linux.gitignore
################### ###################
*~ *~
# temporary files which can be created if a process still has a handle open of a deleted file # temporary files which can be created if a process still has a handle open of a deleted file
.fuse_hidden* .fuse_hidden*
# KDE directory preferences # KDE directory preferences
.directory .directory
# Linux trash folder which might appear on any partition or disk # Linux trash folder which might appear on any partition or disk
.Trash-* .Trash-*
# .nfs files are created when an open file is removed but is still being accessed # .nfs files are created when an open file is removed but is still being accessed
.nfs* .nfs*
# https://github.com/github/gitignore/blob/master/Node.gitignore # https://github.com/github/gitignore/blob/master/Node.gitignore
################### ###################
# Logs # Logs
logs logs
*.log *.log
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
# Runtime data # Runtime data
pids pids
*.pid *.pid
*.seed *.seed
*.pid.lock *.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover # Directory for instrumented libs generated by jscoverage/JSCover
lib-cov lib-cov
# Coverage directory used by tools like istanbul # Coverage directory used by tools like istanbul
coverage coverage
# nyc test coverage # nyc test coverage
.nyc_output .nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt .grunt
# Bower dependency directory (https://bower.io/) # Bower dependency directory (https://bower.io/)
bower_components bower_components
# node-waf configuration # node-waf configuration
.lock-wscript .lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html) # Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release build/Release
# Dependency directories # Dependency directories
node_modules/ node_modules/
jspm_packages/ jspm_packages/
# Typescript v1 declaration files # Typescript v1 declaration files
typings/ typings/
# Optional npm cache directory # Optional npm cache directory
.npm .npm
# Optional eslint cache # Optional eslint cache
.eslintcache .eslintcache
# Optional REPL history # Optional REPL history
.node_repl_history .node_repl_history
# Output of 'npm pack' # Output of 'npm pack'
*.tgz *.tgz
# Yarn Integrity file # Yarn Integrity file
.yarn-integrity .yarn-integrity
# dotenv environment variables file # dotenv environment variables file
.env .env
# https://github.com/github/gitignore/blob/master/Sass.gitignore # https://github.com/github/gitignore/blob/master/Sass.gitignore
################### ###################
.sass-cache/ .sass-cache/
*.css.map *.css.map

182
.jshintrc
View file

@ -1,91 +1,91 @@
{ {
// JSHint Default Configuration File (as on JSHint website) // JSHint Default Configuration File (as on JSHint website)
// See http://jshint.com/docs/ for more details // See http://jshint.com/docs/ for more details
"maxerr" : 50, // {int} Maximum error before stopping "maxerr" : 50, // {int} Maximum error before stopping
// Enforcing // Enforcing
"bitwise" : true, // true: Prohibit bitwise operators (&, |, ^, etc.) "bitwise" : true, // true: Prohibit bitwise operators (&, |, ^, etc.)
"camelcase" : false, // true: Identifiers must be in camelCase "camelcase" : false, // true: Identifiers must be in camelCase
"curly" : true, // true: Require {} for every new block or scope "curly" : true, // true: Require {} for every new block or scope
"eqeqeq" : true, // true: Require triple equals (===) for comparison "eqeqeq" : true, // true: Require triple equals (===) for comparison
"forin" : true, // true: Require filtering for..in loops with obj.hasOwnProperty() "forin" : true, // true: Require filtering for..in loops with obj.hasOwnProperty()
"freeze" : true, // true: prohibits overwriting prototypes of native objects such as Array, Date etc. "freeze" : true, // true: prohibits overwriting prototypes of native objects such as Array, Date etc.
"immed" : false, // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());` "immed" : false, // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());`
"latedef" : false, // true: Require variables/functions to be defined before being used "latedef" : false, // true: Require variables/functions to be defined before being used
"newcap" : false, // true: Require capitalization of all constructor functions e.g. `new F()` "newcap" : false, // true: Require capitalization of all constructor functions e.g. `new F()`
"noarg" : true, // true: Prohibit use of `arguments.caller` and `arguments.callee` "noarg" : true, // true: Prohibit use of `arguments.caller` and `arguments.callee`
"noempty" : true, // true: Prohibit use of empty blocks "noempty" : true, // true: Prohibit use of empty blocks
"nonbsp" : true, // true: Prohibit "non-breaking whitespace" characters. "nonbsp" : true, // true: Prohibit "non-breaking whitespace" characters.
"nonew" : false, // true: Prohibit use of constructors for side-effects (without assignment) "nonew" : false, // true: Prohibit use of constructors for side-effects (without assignment)
"plusplus" : false, // true: Prohibit use of `++` and `--` "plusplus" : false, // true: Prohibit use of `++` and `--`
"quotmark" : true, // Quotation mark consistency: "quotmark" : true, // Quotation mark consistency:
// false : do nothing (default) // false : do nothing (default)
// true : ensure whatever is used is consistent // true : ensure whatever is used is consistent
// "single" : require single quotes // "single" : require single quotes
// "double" : require double quotes // "double" : require double quotes
"undef" : true, // true: Require all non-global variables to be declared (prevents global leaks) "undef" : true, // true: Require all non-global variables to be declared (prevents global leaks)
"unused" : false, // Unused variables: "unused" : false, // Unused variables:
// true : all variables, last function parameter // true : all variables, last function parameter
// "vars" : all variables only // "vars" : all variables only
// "strict" : all variables, all function parameters // "strict" : all variables, all function parameters
"strict" : true, // true: Requires all functions run in ES5 Strict Mode "strict" : true, // true: Requires all functions run in ES5 Strict Mode
"maxparams" : false, // {int} Max number of formal params allowed per function "maxparams" : false, // {int} Max number of formal params allowed per function
"maxdepth" : false, // {int} Max depth of nested blocks (within functions) "maxdepth" : false, // {int} Max depth of nested blocks (within functions)
"maxstatements" : false, // {int} Max number statements per function "maxstatements" : false, // {int} Max number statements per function
"maxcomplexity" : false, // {int} Max cyclomatic complexity per function "maxcomplexity" : false, // {int} Max cyclomatic complexity per function
"maxlen" : false, // {int} Max number of characters per line "maxlen" : false, // {int} Max number of characters per line
"varstmt" : false, // true: Disallow any var statements. Only `let` and `const` are allowed. "varstmt" : false, // true: Disallow any var statements. Only `let` and `const` are allowed.
// Relaxing // Relaxing
"asi" : false, // true: Tolerate Automatic Semicolon Insertion (no semicolons) "asi" : false, // true: Tolerate Automatic Semicolon Insertion (no semicolons)
"boss" : false, // true: Tolerate assignments where comparisons would be expected "boss" : false, // true: Tolerate assignments where comparisons would be expected
"debug" : false, // true: Allow debugger statements e.g. browser breakpoints. "debug" : false, // true: Allow debugger statements e.g. browser breakpoints.
"eqnull" : false, // true: Tolerate use of `== null` "eqnull" : false, // true: Tolerate use of `== null`
"esversion" : 5, // {int} Specify the ECMAScript version to which the code must adhere. "esversion" : 5, // {int} Specify the ECMAScript version to which the code must adhere.
"moz" : false, // true: Allow Mozilla specific syntax (extends and overrides esnext features) "moz" : false, // true: Allow Mozilla specific syntax (extends and overrides esnext features)
// (ex: `for each`, multiple try/catch, function expression…) // (ex: `for each`, multiple try/catch, function expression…)
"evil" : false, // true: Tolerate use of `eval` and `new Function()` "evil" : false, // true: Tolerate use of `eval` and `new Function()`
"expr" : false, // true: Tolerate `ExpressionStatement` as Programs "expr" : false, // true: Tolerate `ExpressionStatement` as Programs
"funcscope" : false, // true: Tolerate defining variables inside control statements "funcscope" : false, // true: Tolerate defining variables inside control statements
"globalstrict" : false, // true: Allow global "use strict" (also enables 'strict') "globalstrict" : false, // true: Allow global "use strict" (also enables 'strict')
"iterator" : false, // true: Tolerate using the `__iterator__` property "iterator" : false, // true: Tolerate using the `__iterator__` property
"lastsemic" : false, // true: Tolerate omitting a semicolon for the last statement of a 1-line block "lastsemic" : false, // true: Tolerate omitting a semicolon for the last statement of a 1-line block
"laxbreak" : false, // true: Tolerate possibly unsafe line breakings "laxbreak" : false, // true: Tolerate possibly unsafe line breakings
"laxcomma" : false, // true: Tolerate comma-first style coding "laxcomma" : false, // true: Tolerate comma-first style coding
"loopfunc" : false, // true: Tolerate functions being defined in loops "loopfunc" : false, // true: Tolerate functions being defined in loops
"multistr" : false, // true: Tolerate multi-line strings "multistr" : false, // true: Tolerate multi-line strings
"noyield" : false, // true: Tolerate generator functions with no yield statement in them. "noyield" : false, // true: Tolerate generator functions with no yield statement in them.
"notypeof" : false, // true: Tolerate invalid typeof operator values "notypeof" : false, // true: Tolerate invalid typeof operator values
"proto" : false, // true: Tolerate using the `__proto__` property "proto" : false, // true: Tolerate using the `__proto__` property
"scripturl" : false, // true: Tolerate script-targeted URLs "scripturl" : false, // true: Tolerate script-targeted URLs
"shadow" : false, // true: Allows re-define variables later in code e.g. `var x=1; x=2;` "shadow" : false, // true: Allows re-define variables later in code e.g. `var x=1; x=2;`
"sub" : false, // true: Tolerate using `[]` notation when it can still be expressed in dot notation "sub" : false, // true: Tolerate using `[]` notation when it can still be expressed in dot notation
"supernew" : false, // true: Tolerate `new function () { ... };` and `new Object;` "supernew" : false, // true: Tolerate `new function () { ... };` and `new Object;`
"validthis" : false, // true: Tolerate using this in a non-constructor function "validthis" : false, // true: Tolerate using this in a non-constructor function
// Environments // Environments
"browser" : true, // Web Browser (window, document, etc) "browser" : true, // Web Browser (window, document, etc)
"browserify" : false, // Browserify (node.js code in the browser) "browserify" : false, // Browserify (node.js code in the browser)
"couch" : false, // CouchDB "couch" : false, // CouchDB
"devel" : true, // Development/debugging (alert, confirm, etc) "devel" : true, // Development/debugging (alert, confirm, etc)
"dojo" : false, // Dojo Toolkit "dojo" : false, // Dojo Toolkit
"jasmine" : false, // Jasmine "jasmine" : false, // Jasmine
"jquery" : true, // jQuery "jquery" : true, // jQuery
"mocha" : true, // Mocha "mocha" : true, // Mocha
"mootools" : false, // MooTools "mootools" : false, // MooTools
"node" : false, // Node.js "node" : false, // Node.js
"nonstandard" : false, // Widely adopted globals (escape, unescape, etc) "nonstandard" : false, // Widely adopted globals (escape, unescape, etc)
"phantom" : false, // PhantomJS "phantom" : false, // PhantomJS
"prototypejs" : false, // Prototype and Scriptaculous "prototypejs" : false, // Prototype and Scriptaculous
"qunit" : false, // QUnit "qunit" : false, // QUnit
"rhino" : false, // Rhino "rhino" : false, // Rhino
"shelljs" : false, // ShellJS "shelljs" : false, // ShellJS
"typed" : false, // Globals for typed array constructions "typed" : false, // Globals for typed array constructions
"worker" : false, // Web Workers "worker" : false, // Web Workers
"wsh" : false, // Windows Scripting Host "wsh" : false, // Windows Scripting Host
"yui" : false, // Yahoo User Interface "yui" : false, // Yahoo User Interface
// Custom Globals // Custom Globals
"globals" : {"hippie": true} // additional predefined global variables "globals" : {"hippie": true} // additional predefined global variables
} }

110
.sasslintrc
View file

@ -1,55 +1,55 @@
{ {
"options": { "options": {
"merge-default-rules": false, "merge-default-rules": false,
"formatter": "html" "formatter": "html"
}, },
"rules": { "rules": {
"extends-before-mixins": 2, "extends-before-mixins": 2,
"extends-before-declarations": 2, "extends-before-declarations": 2,
"placeholder-in-extend": 2, "placeholder-in-extend": 2,
"mixins-before-declarations": [ "mixins-before-declarations": [
2, 2,
{ {
"exclude": [ "exclude": [
"breakpoint", "breakpoint",
"mq" "mq"
] ]
} }
], ],
"no-warn": 1, "no-warn": 1,
"no-debug": 1, "no-debug": 1,
"no-ids": 2, "no-ids": 2,
"no-important": 2, "no-important": 2,
"hex-notation": [ "hex-notation": [
2, 2,
{ {
"style": "uppercase" "style": "uppercase"
} }
], ],
"indentation": [ "indentation": [
2, 2,
{ {
"size": 2 "size": 2
} }
], ],
"property-sort-order": [ "property-sort-order": [
1, 1,
{ {
"order": [ "order": [
"display", "display",
"margin" "margin"
], ],
"ignore-custom-properties": true "ignore-custom-properties": true
} }
], ],
"variable-for-property": [ "variable-for-property": [
2, 2,
{ {
"properties": [ "properties": [
"margin", "margin",
"content" "content"
] ]
} }
] ]
} }
} }

42
LICENSE
View file

@ -1,21 +1,21 @@
The MIT License (MIT) The MIT License (MIT)
Copyright (c) 2016 Stephan Hagedorn Copyright (c) 2016 Stephan Hagedorn
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions: furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software. copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. SOFTWARE.

38
README.md
View file

@ -1,19 +1,19 @@
# HIPPIE # HIPPIE
## USE (work in progress (it is not ready to be used)) ## USE (work in progress (it is not ready to be used))
Clone the repo `https://github.com/sthag/hippie.git`. Clone the repo `https://github.com/sthag/hippie.git`.
Change to the newly created folder. By default this would be *hippie*. Change to the newly created folder. By default this would be *hippie*.
Run the command `npm install`. Run the command `npm install`.
This will install all nodejs dependencies into the filder *node_modules*. This will install all nodejs dependencies into the filder *node_modules*.
Run the command `gulp`. Run the command `gulp`.
This will create a folder *build* with the resulting files. This will create a folder *build* with the resulting files.
## LOGIC ## LOGIC
Klassennamen enthalten Objektnamen und Funktionen Klassennamen enthalten Objektnamen und Funktionen
Sie sind mit `-` und `_` unterteilt. Sie sind mit `-` und `_` unterteilt.
Der Bindestrich `-` trennt Objektnamen von Funktionen. Der Unterstrich `_` wiederum unterteilt Funktionsbezeichnungen. Der Bindestrich `-` trennt Objektnamen von Funktionen. Der Unterstrich `_` wiederum unterteilt Funktionsbezeichnungen.

6
TODO.md
View file

@ -1,4 +1,4 @@
- add dynamic content to robots.txt during build process - add dynamic content to robots.txt during build process
- add dynamic content to sitemap.xml - add dynamic content to sitemap.xml
- add build process for normalize.css from github.com/necolas/normalize.css - add build process for normalize.css from github.com/necolas/normalize.css
- add build process for bourbon from https://github.com/thoughtbot/bourbon - add build process for bourbon from https://github.com/thoughtbot/bourbon

19576
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

94
package.json
View file

@ -1,47 +1,47 @@
{ {
"name": "hippie", "name": "hippie",
"version": "0.4.1", "version": "0.4.1",
"description": "Hippie interweaves preeminent personal interface elements", "description": "Hippie interweaves preeminent personal interface elements",
"main": "gulpfile.js", "main": "gulpfile.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+https://github.com/sthag/hippie.git" "url": "git+https://github.com/sthag/hippie.git"
}, },
"author": "Stephan Hagedorn", "author": "Stephan Hagedorn",
"license": "MIT", "license": "MIT",
"bugs": { "bugs": {
"url": "https://github.com/sthag/hippie/issues" "url": "https://github.com/sthag/hippie/issues"
}, },
"homepage": "https://github.com/sthag/hippie#readme", "homepage": "https://github.com/sthag/hippie#readme",
"devDependencies": { "devDependencies": {
"browser-sync": "^2.26.3", "browser-sync": "^2.26.3",
"del": "^4.0.0", "del": "^4.0.0",
"gulp": "^4.0.0", "gulp": "^4.0.0",
"gulp-autoprefixer": "^6.0.0", "gulp-autoprefixer": "^6.0.0",
"gulp-cached": "^1.1.1", "gulp-cached": "^1.1.1",
"gulp-changed": "^3.2.0", "gulp-changed": "^3.2.0",
"gulp-clean-css": "^4.0.0", "gulp-clean-css": "^4.0.0",
"gulp-concat": "^2.6.1", "gulp-concat": "^2.6.1",
"gulp-data": "^1.3.1", "gulp-data": "^1.3.1",
"gulp-if": "^2.0.2", "gulp-if": "^2.0.2",
"gulp-jshint": "^2.1.0", "gulp-jshint": "^2.1.0",
"gulp-json-concat": "^0.1.1", "gulp-json-concat": "^0.1.1",
"gulp-notify": "^3.2.0", "gulp-notify": "^3.2.0",
"gulp-nunjucks-render": "^2.2.3", "gulp-nunjucks-render": "^2.2.3",
"gulp-plumber": "^1.2.1", "gulp-plumber": "^1.2.1",
"gulp-remember": "^1.0.1", "gulp-remember": "^1.0.1",
"gulp-rename": "^1.4.0", "gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.2", "gulp-sass": "^4.0.2",
"gulp-sass-lint": "^1.4.0", "gulp-sass-lint": "^1.4.0",
"gulp-uglify": "^3.0.2", "gulp-uglify": "^3.0.2",
"gulp.spritesmith": "^6.9.0", "gulp.spritesmith": "^6.9.0",
"jshint": "^2.10.2", "jshint": "^2.10.2",
"jshint-stylish": "^2.2.1", "jshint-stylish": "^2.2.1",
"merge-stream": "^1.0.1", "merge-stream": "^1.0.1",
"pump": "^3.0.0" "pump": "^3.0.0"
}, },
"dependencies": {} "dependencies": {}
} }

6
robots.txt
View file

@ -1,3 +1,3 @@
user-agent: * user-agent: *
disallow: /private/ disallow: /private/
sitemap: http://domain.tld/sitemap.xml sitemap: http://domain.tld/sitemap.xml

18
sitemap.xml
View file

@ -1,10 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url> <url>
<loc>http://domain.tld/</loc> <loc>http://domain.tld/</loc>
<lastmod>YYYY-MM-DD</lastmod> <lastmod>YYYY-MM-DD</lastmod>
<changefreq>monthly</changefreq> <changefreq>monthly</changefreq>
<priority>1.0</priority> <priority>1.0</priority>
</url> </url>
</urlset> </urlset>

120
source/code/hippie/functions.js
View file

@ -1,60 +1,60 @@
"use strict"; "use strict";
function setup() { function setup() {
console.log('\n', hippie_brand, '\n\n'); console.log('\n', hippie_brand, '\n\n');
console.info('Debug information:\n\nHTML height is', html_height, '\nBODY height is', body_height, '\nVIEW height is', view_height); console.info('Debug information:\n\nHTML height is', html_height, '\nBODY height is', body_height, '\nVIEW height is', view_height);
if($('#js_tph').length && full_view_hover) { if($('#js_tph').length && full_view_hover) {
// $('body').prepend("<div id=\"js_tph\" class=\"layer__hover hover_full_view_change\"></div>"); // $('body').prepend("<div id=\"js_tph\" class=\"layer__hover hover_full_view_change\"></div>");
$('#js_tph').addClass("hover_full_view_change"); $('#js_tph').addClass("hover_full_view_change");
} }
} }
// get document coordinates of the element // get document coordinates of the element
// function getCoords(elem) { // function getCoords(elem) {
// let box = elem.getBoundingClientRect(); // let box = elem.getBoundingClientRect();
// //
// return { // return {
// top: box.top + pageYOffset, // top: box.top + pageYOffset,
// left: box.left + pageXOffset // left: box.left + pageXOffset
// }; // };
// } // }
// https://stackoverflow.com/a/488073/1444149 // https://stackoverflow.com/a/488073/1444149
function Utils() {} function Utils() {}
Utils.prototype = { Utils.prototype = {
constructor: Utils, constructor: Utils,
isElementInView: function (element, fullyInView) { isElementInView: function (element, fullyInView) {
var pageTop = $(window).scrollTop(); var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height(); var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top; var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height(); var elementBottom = elementTop + $(element).height();
if (fullyInView === true) { if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom)); return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else { } else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop)); return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
} }
} }
}; };
var Utils = new Utils(); var Utils = new Utils();
// TEST // TEST
function scrollNav() { function scrollNav() {
$('.nav a').click(function(){ $('.nav a').click(function(){
//Toggle Class //Toggle Class
$(".active").removeClass("active"); $(".active").removeClass("active");
$(this).closest('li').addClass("active"); $(this).closest('li').addClass("active");
var theClass = $(this).attr("class"); var theClass = $(this).attr("class");
$('.'+theClass).parent('li').addClass('active'); $('.'+theClass).parent('li').addClass('active');
//Animate //Animate
$('html, body').stop().animate({ $('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top - 160 scrollTop: $( $(this).attr('href') ).offset().top - 160
}, 400); }, 400);
return false; return false;
}); });
$('.scrollTop a').scrollTop(); $('.scrollTop a').scrollTop();
} }

310
source/code/hippie/global.js
View file

@ -1,155 +1,155 @@
"use strict"; "use strict";
// DOM ready // DOM ready
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$( document ).ready(function() { $( document ).ready(function() {
// Setup // Setup
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
setup(); setup();
// Modules // Modules
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
// Explanation module scripts // Explanation module scripts
var exp_mode = false; var exp_mode = false;
// Displays explanation popup // Displays explanation popup
$(".js_pop").hover( $(".js_pop").hover(
function() { function() {
var $this = $(this); var $this = $(this);
// if($(this).attr("emmet")){ // if($(this).attr("emmet")){
// //
// } // }
$(this).next(".exp_pop").show(); $(this).next(".exp_pop").show();
}, function() { }, function() {
$(this).next(".exp_pop").hide(); $(this).next(".exp_pop").hide();
} }
).mousemove( ).mousemove(
function(ev) { function(ev) {
$(this).next(".exp_pop").css({ $(this).next(".exp_pop").css({
"top": ev.pageY - $(this).next(".exp_pop").outerHeight() - 4, "top": ev.pageY - $(this).next(".exp_pop").outerHeight() - 4,
"left": ev.pageX + 8 "left": ev.pageX + 8
// "left": ev.pageX - $(this).offset().left + 8 // "left": ev.pageX - $(this).offset().left + 8
}); });
// TODO - needs more love // TODO - needs more love
// console.log(ev.pageX); // console.log(ev.pageX);
} }
); );
// WIP Activates layer with explanation elements // WIP Activates layer with explanation elements
// Besser ::after oder ::before benutzen // Besser ::after oder ::before benutzen
$(".js_showmeta").click(function(e){ $(".js_showmeta").click(function(e){
var $wrap, $pop; var $wrap, $pop;
if(exp_mode !== true){ if(exp_mode !== true){
exp_mode = true; exp_mode = true;
$(".js_pop").each(function(i, e){ $(".js_pop").each(function(i, e){
if($(this).css("position") === "static") { if($(this).css("position") === "static") {
$(this).addClass("js_changed_pos"); $(this).addClass("js_changed_pos");
$(this).css("position", "relative"); $(this).css("position", "relative");
} }
$pop = $(this).next(".exp_pop").detach(); $pop = $(this).next(".exp_pop").detach();
$wrap = $(this).wrap("<span class=\"exp_wrap\"></span>").parent().prepend("<span class=\"exp_marker_pop\"></span>"); $wrap = $(this).wrap("<span class=\"exp_wrap\"></span>").parent().prepend("<span class=\"exp_marker_pop\"></span>");
$wrap.after($pop); $wrap.after($pop);
}); });
} else { } else {
$(".js_pop").each(function(i, e){ $(".js_pop").each(function(i, e){
$wrap = $(this).parent(".exp_wrap"); $wrap = $(this).parent(".exp_wrap");
$pop = $wrap.next(".exp_pop").detach(); $pop = $wrap.next(".exp_pop").detach();
$wrap.find(".exp_marker_pop").remove(); $wrap.find(".exp_marker_pop").remove();
$(this).unwrap(".exp_wrap"); $(this).unwrap(".exp_wrap");
$(this).after($pop); $(this).after($pop);
if($(this).hasClass("js_changed_pos")){ if($(this).hasClass("js_changed_pos")){
$(this).css("position", ""); $(this).css("position", "");
if($(this).attr("style") === "") { if($(this).attr("style") === "") {
$(this).removeAttr("style"); $(this).removeAttr("style");
} }
$(this).removeClass("js_changed_pos"); $(this).removeClass("js_changed_pos");
} }
}); });
exp_mode = false; exp_mode = false;
} }
console.log("Explanation mode", exp_mode); console.log("Explanation mode", exp_mode);
}); });
// WIP Scroll to top // WIP Scroll to top
$('.js_scrolltop').click(function(event) { $('.js_scrolltop').click(function(event) {
event.preventDefault(); event.preventDefault();
console.log('scroll to the top'); console.log('scroll to the top');
document.documentElement.scrollTop = document.body.scrollTop = 0; document.documentElement.scrollTop = document.body.scrollTop = 0;
// var body = document.querySelector('body'); // var body = document.querySelector('body');
// // get scroll position in px // // get scroll position in px
// console.log(body.scrollTop); // console.log(body.scrollTop);
// // set scroll position in px // // set scroll position in px
// body.scrollTop = 0; // body.scrollTop = 0;
// $('body')[0].scrollTop = 0; // $('body')[0].scrollTop = 0;
// $('body').animate({scrollTop: 0}, basic_ease, function() { // $('body').animate({scrollTop: 0}, basic_ease, function() {
// console.log('arrived at top'); // console.log('arrived at top');
// }); // });
}); });
$('.js_scrolldown').click(function(event) { $('.js_scrolldown').click(function(event) {
event.preventDefault(); event.preventDefault();
var pos = Math.max(html_height, body_height) - view_height; var pos = Math.max(html_height, body_height) - view_height;
console.log('scroll down to', pos); console.log('scroll down to', pos);
document.documentElement.scrollTop = pos; document.documentElement.scrollTop = pos;
}); });
$( "#gameIcon" ).click(function(event) { $( "#gameIcon" ).click(function(event) {
event.preventDefault(); event.preventDefault();
$( this ).clone().appendTo( "#gameDetail" ); $( this ).clone().appendTo( "#gameDetail" );
$( this ).siblings().clone().appendTo( "#gameDetail" ); $( this ).siblings().clone().appendTo( "#gameDetail" );
$( "#gameDetail" ).removeClass( "magic" ); $( "#gameDetail" ).removeClass( "magic" );
}); });
var i = 0; var i = 0;
$( ".pass-def dd" ).each(function() { $( ".pass-def dd" ).each(function() {
$( this ).find( "li" ).each(function( index ) { $( this ).find( "li" ).each(function( index ) {
if ( 0 === $( this ).children( "ul" ).length ) { if ( 0 === $( this ).children( "ul" ).length ) {
//console.log(index, ":", $( this ).text()); //console.log(index, ":", $( this ).text());
var tempContent = $( this ).html(); var tempContent = $( this ).html();
//$( this ).html( "<span class=\"list-count\"></span>" ); //$( this ).html( "<span class=\"list-count\"></span>" );
$( this ).html(tempContent + "<span class=\"list-count\">" + i + "</span>"); $( this ).html(tempContent + "<span class=\"list-count\">" + i + "</span>");
i++; i++;
} }
}); });
}); });
}); });
// Scroll // Scroll
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$( document ).scroll(function() { $( document ).scroll(function() {
// Toggle navigation elements // Toggle navigation elements
doc_pos_y = $( document ).scrollTop(); doc_pos_y = $( document ).scrollTop();
// console.log(doc_pos_y); // console.log(doc_pos_y);
// var demo_margin = $('.header__fix'); // var demo_margin = $('.header__fix');
if (doc_pos_y > scroll_y_margin) { if (doc_pos_y > scroll_y_margin) {
$('.js_scrolltop').parent().removeClass('magic'); $('.js_scrolltop').parent().removeClass('magic');
} else { } else {
$('.js_scrolltop').parent().addClass('magic'); $('.js_scrolltop').parent().addClass('magic');
} }
}); });

32
source/code/hippie/variables.js
View file

@ -1,16 +1,16 @@
var hippie_brand = "|-| | |^ |^ | [- "; var hippie_brand = "|-| | |^ |^ | [- ";
var view_width = Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0); var view_width = Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0);
var view_height = Math.max(document.documentElement.clientHeight, window.innerHeight, 0); var view_height = Math.max(document.documentElement.clientHeight, window.innerHeight, 0);
var html_height = Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0); var html_height = Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0);
var body_height = Math.max(document.body.offsetHeight, document.body.clientHeight, 0); var body_height = Math.max(document.body.offsetHeight, document.body.clientHeight, 0);
var body_width = Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0); var body_width = Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0);
var full_view_hover = true; var full_view_hover = true;
var doc_pos_y = 0; var doc_pos_y = 0;
var basic_ease = 600; var basic_ease = 600;
var scroll_y_margin = view_height; var scroll_y_margin = view_height;
var onerow_alphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ "; var onerow_alphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ ";
var onerow_digits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) "; var onerow_digits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) ";

44
source/data/demo.json
View file

@ -1,22 +1,22 @@
{ {
"demo": [ "demo": [
{ {
"demo1": "1", "demo1": "1",
"demo2": "2" "demo2": "2"
}, },
{ {
"demo1": "1", "demo1": "1",
"demo2": "2" "demo2": "2"
}, },
{ {
"demo1": "1", "demo1": "1",
"demo2": "2" "demo2": "2"
} }
], ],
"test": [ "test": [
{ {
"test1": "3", "test1": "3",
"test2": "4" "test2": "4"
} }
] ]
} }

104
source/screens/demo.njk
View file

@ -1,52 +1,52 @@
<!-- page-index.njk --> <!-- page-index.njk -->
{% set pageId = "index" %} {% set pageId = "index" %}
{% set pageClass = "height_full" %} {% set pageClass = "height_full" %}
{% extends "demo/_default.njk" %} {% extends "demo/_default.njk" %}
{% block title %}Index{% endblock %} {% block title %}Index{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="wrap"> <div class="wrap">
<div class="hello"> <div class="hello">
<h2>This is {{hippie.brand | upper}}</h2> <h2>This is {{hippie.brand | upper}}</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>To do this you need to open the file <code>/gulpfile.js</code> and comment out the line <code>index: "demo.html",</code>. Then you need to place your index file (<code>index.njk</code>) into the folder <code>/source/pages</code>.</p> <p>To do this you need to open the file <code>/gulpfile.js</code> and comment out the line <code>index: "demo.html",</code>. Then you need to place your index file (<code>index.njk</code>) into the folder <code>/source/pages</code>.</p>
<p>For a very basic start you can make a copy of the demo page <code>blank.njk</code>. You can find it at <code>/source/pages/demo</code>.</p> <p>For a very basic start you can make a copy of the demo page <code>blank.njk</code>. You can find it at <code>/source/pages/demo</code>.</p>
<p>The <i>demo</i> folder contains an overview of all elements and also examples for style combinations and even whole page layouts.<br/>Follow the white rabbit.</p> <p>The <i>demo</i> folder contains an overview of all elements and also examples for style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
<h3>Overview</h3> <h3>Overview</h3>
<nav> <nav>
<ul class="list_link"> <ul class="list_link">
<!-- Loops through "demoadditionallinks" array --> <!-- Loops through "demoadditionallinks" array -->
{% for link in data.demoadditionallinks %} {% for link in data.demoadditionallinks %}
<li><a href="{{link.href}}">{{link.text}}</a></li> <li><a href="{{link.href}}">{{link.text}}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>
</nav> </nav>
<div class="pos_rel"> <div class="pos_rel">
<pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>C(")(")</pre> <pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>C(")(")</pre>
<h3>Demo Pages</h3> <h3>Demo Pages</h3>
</div> </div>
<ul class="list_link"> <ul class="list_link">
<!-- Loops through "demo-links" array --> <!-- Loops through "demo-links" array -->
{% for link in data.demolinks %} {% for link in data.demolinks %}
<li><a href="{{link.href}}">{{link.text}}</a></li> <li><a href="{{link.href}}">{{link.text}}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
{% block script %} {% block script %}
{{ super() }} {{ super() }}
<script src="./js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> <script src="./js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript"> <script type="text/javascript">
// Page specific // Page specific
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$( document ).ready(function() { $( document ).ready(function() {
}); });
</script> </script>
{% endblock %} {% endblock %}

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

@ -1,15 +1,15 @@
<!-- page-blank.njk --> <!-- page-blank.njk -->
{% set pageId = "blank" %} {% set pageId = "blank" %}
{% set pageClass = "height_full" %} {% set pageClass = "height_full" %}
{% extends "demo/_default.njk" %} {% extends "demo/_default.njk" %}
{% block title %}Blank{% endblock %} {% block title %}Blank{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block body %} {% block body %}
{% endblock %} {% endblock %}

162
source/screens/demo/elements.njk
View file

@ -1,81 +1,81 @@
<!-- page-elements.njk --> <!-- page-elements.njk -->
{% set pageId = "elements" %} {% set pageId = "elements" %}
{% set pageClass = "" %} {% set pageClass = "" %}
{% extends "demo/_extended.njk" %} {% extends "demo/_extended.njk" %}
{% block title %}Elements{% endblock %} {% block title %}Elements{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block main %} {% block main %}
<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> -->
{% include "hippie/partials/_body_nav.njk" %} {% include "hippie/partials/_body_nav.njk" %}
</div> </div>
<div id="begin" class=""> <div id="begin" class="">
<section class="sec_main_center"> <section class="sec_main_center">
<header class="header_txt"> <header class="header_txt">
<h1>Medienformat Abfragen</h1> <h1>Medienformat Abfragen</h1>
</header> </header>
<article> <article>
<div class="demo__query_example">Umbruch bei&nbsp;</div> <div class="demo__query_example">Umbruch bei&nbsp;</div>
<div class="demo__queries"> <div class="demo__queries">
<p class="query_phoneUp">Telefone und größer</p> <p class="query_phoneUp">Telefone und größer</p>
<p class="query_phoneOnly">Nur Telefone</p> <p class="query_phoneOnly">Nur Telefone</p>
<p class="query_tabletPortaitOnly"Nur >Schreibtafeln hochkant</p> <p class="query_tabletPortaitOnly"Nur >Schreibtafeln hochkant</p>
<p class="query_tabletPortraitUp">Schreibtafeln und größer</p> <p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
<p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p> <p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
<p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p> <p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>
<p class="query_desktopOnly">Nur Arbeitsplatzrechner</p> <p class="query_desktopOnly">Nur Arbeitsplatzrechner</p>
<p class="query_desktopUp">Arbeitsplatzrechner und größer</p> <p class="query_desktopUp">Arbeitsplatzrechner und größer</p>
<p class="query_bigDesktopUp">Richtige Monitore und größer</p> <p class="query_bigDesktopUp">Richtige Monitore und größer</p>
</div> </div>
</article> </article>
</section> </section>
<section class="sec_main_center"> <section class="sec_main_center">
<header class="header_txt"> <header class="header_txt">
<h1>Übersicht aller Elemente</h1> <h1>Übersicht aller Elemente</h1>
<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://www.w3.org/TR/2017/REC-html52-20171214/index.html#contents">www.w3.org/TR/2017/REC-html52-20171214/index.html#contents</a>) verwendet.</p> <p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://www.w3.org/TR/2017/REC-html52-20171214/index.html#contents">www.w3.org/TR/2017/REC-html52-20171214/index.html#contents</a>) verwendet.</p>
<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML Dokument als Emmet Syntax dargestellt.</p> <p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML Dokument als Emmet Syntax dargestellt.</p>
</header> </header>
<article> <article>
<h1>Bereiche</h1> <h1>Bereiche</h1>
<p>Elemente:</p> <p>Elemente:</p>
<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre> <pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
<h2>&lt;body&gt;</h2> <h2>&lt;body&gt;</h2>
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p> <p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
<h2>&lt;article&gt;</h2> <h2>&lt;article&gt;</h2>
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p> <p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
<h2>&lt;section&gt;</h2> <h2>&lt;section&gt;</h2>
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p> <p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
<h4>Varianten</h4> <h4>Varianten</h4>
<pre class="pre_code"><code>section.sec_main_center</code></pre> <pre class="pre_code"><code>section.sec_main_center</code></pre>
<pre class="pre_code"><code>section.sec_main_status</code></pre> <pre class="pre_code"><code>section.sec_main_status</code></pre>
<h2>&lt;h3&gt;</h2> <h2>&lt;h3&gt;</h2>
<h2>&lt;h4&gt;</h2> <h2>&lt;h4&gt;</h2>
</article> </article>
</section> </section>
</div> </div>
{% include "hippie/partials/_footer.njk" %} {% include "hippie/partials/_footer.njk" %}
{% endblock %} {% endblock %}
{% block script %} {% block script %}
{{ super() }} {{ super() }}
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script> <script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> <script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript"> <script type="text/javascript">
// Page specific // Page specific
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$( document ).ready(function() { $( document ).ready(function() {
// jq-sticky-anything // jq-sticky-anything
$('#js_demo_fix').stickThis({ $('#js_demo_fix').stickThis({
pushup: '#js_demo_stop' pushup: '#js_demo_stop'
}); });
}); });
</script> </script>
{% endblock %} {% endblock %}

46
source/screens/demo/error/304.njk
View file

@ -1,23 +1,23 @@
<!-- page-error-404.njk --> <!-- page-error-404.njk -->
{% set pageId = "304" %} {% set pageId = "304" %}
{% set pageClass = "body_status" %} {% set pageClass = "body_status" %}
{% extends "demo/_maintenance.njk" %} {% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %} {% block title %}{{ pageId }}{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block main %} {% block main %}
<main class="main_site"> <main class="main_site">
<h1>{{ pageId }}</h1> <h1>{{ pageId }}</h1>
<h3>Umleitung</h3> <h3>Umleitung</h3>
<p>Unverändert <dfn>Not Modified</dfn></p> <p>Unverändert <dfn>Not Modified</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung"> <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">
<p>Der Inhalt der angeforderten Ressource hat sich seit der letzten Abfrage des Clients nicht verändert und wird deshalb nicht übertragen. Zu den Einzelheiten siehe <a href="https://de.wikipedia.org/wiki/Browser-Cache#Versionsvergleich" title="Browser-Cache">Browser-Cache-Versionsvergleich</a>.</p> <p>Der Inhalt der angeforderten Ressource hat sich seit der letzten Abfrage des Clients nicht verändert und wird deshalb nicht übertragen. Zu den Einzelheiten siehe <a href="https://de.wikipedia.org/wiki/Browser-Cache#Versionsvergleich" title="Browser-Cache">Browser-Cache-Versionsvergleich</a>.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">Wikipedia</a></p> <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">Wikipedia</a></p>
</blockquote> </blockquote>
</main> </main>
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}

46
source/screens/demo/error/400.njk
View file

@ -1,23 +1,23 @@
<!-- page-error-404.njk --> <!-- page-error-404.njk -->
{% set pageId = "400" %} {% set pageId = "400" %}
{% set pageClass = "body_status" %} {% set pageClass = "body_status" %}
{% extends "demo/_maintenance.njk" %} {% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %} {% block title %}{{ pageId }}{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block main %} {% block main %}
<main class="main_site"> <main class="main_site">
<h1>{{ pageId }}</h1> <h1>{{ pageId }}</h1>
<h3>Client-Fehler</h3> <h3>Client-Fehler</h3>
<p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p> <p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler"> <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<p>Die Anfrage-Nachricht war fehlerhaft aufgebaut.</p> <p>Die Anfrage-Nachricht war fehlerhaft aufgebaut.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p> <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote> </blockquote>
</main> </main>
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}

46
source/screens/demo/error/403.njk
View file

@ -1,23 +1,23 @@
<!-- page-error-404.njk --> <!-- page-error-404.njk -->
{% set pageId = "403" %} {% set pageId = "403" %}
{% set pageClass = "body_status" %} {% set pageClass = "body_status" %}
{% extends "demo/_maintenance.njk" %} {% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %} {% block title %}{{ pageId }}{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block main %} {% block main %}
<main class="main_site"> <main class="main_site">
<h1>{{ pageId }}</h1> <h1>{{ pageId }}</h1>
<h3>Client-Fehler</h3> <h3>Client-Fehler</h3>
<p>Nicht erlaubt! <dfn>Forbidden</dfn></p> <p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler"> <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
<p>Die Anfrage wurde mangels Berechtigung des Clients nicht durchgeführt, bspw. weil der authentifizierte Benutzer nicht berechtigt ist, oder eine als HTTPS konfigurierte URL nur mit HTTP aufgerufen wurde.</p> <p>Die Anfrage wurde mangels Berechtigung des Clients nicht durchgeführt, bspw. weil der authentifizierte Benutzer nicht berechtigt ist, oder eine als HTTPS konfigurierte URL nur mit HTTP aufgerufen wurde.</p>
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p> <p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
</blockquote> </blockquote>
</main> </main>
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}

46
source/screens/demo/error/404.njk
View file

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

46
source/screens/demo/error/500.njk
View file

@ -1,23 +1,23 @@
<!-- page-error-500.njk --> <!-- page-error-500.njk -->
{% set pageId = "500" %} {% set pageId = "500" %}
{% set pageClass = "body_status" %} {% set pageClass = "body_status" %}
{% extends "demo/_maintenance.njk" %} {% extends "demo/_maintenance.njk" %}
{% block title %}{{ pageId }}{% endblock %} {% block title %}{{ pageId }}{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block main %} {% block main %}
<main class="main_site"> <main class="main_site">
<h1>{{ pageId }}</h1> <h1>{{ pageId }}</h1>
<h3>Server-Fehler</h3> <h3>Server-Fehler</h3>
<p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p> <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"> <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>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> <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> </blockquote>
</main> </main>
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}

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

@ -1,244 +1,244 @@
<!-- page-elements.njk --> <!-- page-elements.njk -->
{% set pageId = "examples" %} {% set pageId = "examples" %}
{% set pageClass = "" %} {% set pageClass = "" %}
{% extends "demo/_extended.njk" %} {% extends "demo/_extended.njk" %}
{% block title %}Examples{% endblock %} {% block title %}Examples{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block main %} {% block main %}
<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> -->
{% include "hippie/partials/_body_nav.njk" %} {% include "hippie/partials/_body_nav.njk" %}
</div> </div>
<div id="begin" class=""> <div id="begin" class="">
<section class="sec_main_center"> <section class="sec_main_center">
<header class="header_txt"> <header class="header_txt">
<h1>Sammlung formatierter Elemente</h1> <h1>Sammlung formatierter Elemente</h1>
<p>Die Elemente werden fortlaufend komplexer</p> <p>Die Elemente werden fortlaufend komplexer</p>
</header> </header>
<article> <article>
<h2>&lt;h3&gt;</h2> <h2>&lt;h3&gt;</h2>
<h4>Beispiele</h4> <h4>Beispiele</h4>
<pre class="pre_code"><code>h3.txt_color_dark+p</code></pre> <pre class="pre_code"><code>h3.txt_color_dark+p</code></pre>
<h3 class="txt_color_dark">Dunkle Überschrift</h3> <h3 class="txt_color_dark">Dunkle Überschrift</h3>
<p>Mit normalem Textabsatz</p> <p>Mit normalem Textabsatz</p>
<h2>&lt;h4&gt;</h2> <h2>&lt;h4&gt;</h2>
<h4>Beispiele</h4> <h4>Beispiele</h4>
<pre class="pre_code"><code>a>h4</code></pre> <pre class="pre_code"><code>a>h4</code></pre>
<a href=""><h4>Überschrift als Block-Verweis</h4></a> <a href=""><h4>Überschrift als Block-Verweis</h4></a>
<h2>&lt;section&gt;</h2> <h2>&lt;section&gt;</h2>
<pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre> <pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre>
<section class="overflow"> <section class="overflow">
<div class="float_space_left demo__avatar"><img src="../art/demo/flag_websafe_128x80.gif" width="256" height="160" alt="Fahne von interaktionsweise"></div> <div class="float_space_left demo__avatar"><img src="../art/demo/flag_websafe_128x80.gif" width="256" height="160" alt="Fahne von interaktionsweise"></div>
<p>Vorname Name<br>Straße 1, 01234 Stadt</p><p>+49 (0)123 1337 0000<br><a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a></p> <p>Vorname Name<br>Straße 1, 01234 Stadt</p><p>+49 (0)123 1337 0000<br><a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a></p>
</section> </section>
<pre class="pre_code"><code>div.space_left_fourth</code></pre> <pre class="pre_code"><code>div.space_left_fourth</code></pre>
<div class="space_left_fourth"> <div class="space_left_fourth">
<hr/> <hr/>
<p>Eingerückter Inhalt</p> <p>Eingerückter Inhalt</p>
<hr/> <hr/>
</div> </div>
<pre class="pre_code"><code>nav>ul>(li>a.a_button{Punkt $})*4nav>ul>(li>a.a_button_border{Stufe $})*4</code></pre> <pre class="pre_code"><code>nav>ul>(li>a.a_button{Punkt $})*4nav>ul>(li>a.a_button_border{Stufe $})*4</code></pre>
<div class="overflow"> <div class="overflow">
<nav class="float_space_left"> <nav class="float_space_left">
<ul> <ul>
<li><a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a></li> <li><a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a></li>
<li><a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a></li> <li><a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a></li>
<li><a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a></li> <li><a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a></li>
<li><a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a></li> <li><a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a></li>
</ul> </ul>
</nav> </nav>
<nav> <nav>
<ul> <ul>
<li><a href="" class="a_button_border">Stufe 1</a></li> <li><a href="" class="a_button_border">Stufe 1</a></li>
<li><a href="" class="a_button_border">Stufe 2</a></li> <li><a href="" class="a_button_border">Stufe 2</a></li>
<li><a href="" class="a_button_border">Stufe 3</a></li> <li><a href="" class="a_button_border">Stufe 3</a></li>
<li><a href="" class="a_button_border">Stufe 4</a></li> <li><a href="" class="a_button_border">Stufe 4</a></li>
</ul> </ul>
</nav> </nav>
</div> </div>
<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{Abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{Typ $})*4</code></pre> <pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{Abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{Typ $})*4</code></pre>
<nav class="nav_horizontal"> <nav class="nav_horizontal">
<ul> <ul>
<li><a href="" class="a_button">Abschnitt 1</a></li> <li><a href="" class="a_button">Abschnitt 1</a></li>
<li><a href="" class="a_button">Abschnitt 2</a></li> <li><a href="" class="a_button">Abschnitt 2</a></li>
<li><a href="" class="a_button">Abschnitt 3</a></li> <li><a href="" class="a_button">Abschnitt 3</a></li>
<li><a href="" class="a_button">Abschnitt 4</a></li> <li><a href="" class="a_button">Abschnitt 4</a></li>
</ul> </ul>
</nav> </nav>
<div class="overflow"> <div class="overflow">
<nav class="nav_center_old"> <nav class="nav_center_old">
<ul> <ul>
<li><a href="" class="a_button">Typ 1</a></li> <li><a href="" class="a_button">Typ 1</a></li>
<li><a href="" class="a_button">Typ 2</a></li> <li><a href="" class="a_button">Typ 2</a></li>
<li><a href="" class="a_button">Typ 3</a></li> <li><a href="" class="a_button">Typ 3</a></li>
<li><a href="" class="a_button">Typ 4</a></li> <li><a href="" class="a_button">Typ 4</a></li>
</ul> </ul>
</nav> </nav>
</div> </div>
<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{Nav $})*4^+nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre> <pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{Nav $})*4^+nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
<header class="header_page demo__header header_fancy"> <header class="header_page demo__header header_fancy">
<h1>Aufmacher</h1> <h1>Aufmacher</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
<nav class="nav_separate_right"> <nav class="nav_separate_right">
<ul> <ul>
<li><a href="" class="a_button">Mensch</a></li> <li><a href="" class="a_button">Mensch</a></li>
<li><a href="" class="a_button">Pflanze</a></li> <li><a href="" class="a_button">Pflanze</a></li>
</ul> </ul>
</nav> </nav>
<nav class="nav_right"> <nav class="nav_right">
<ul> <ul>
<li><a href="" class="a_button">Blau</a></li> <li><a href="" class="a_button">Blau</a></li>
<li><a href="" class="a_button">Gelb</a></li> <li><a href="" class="a_button">Gelb</a></li>
</ul> </ul>
</nav> </nav>
</header> </header>
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre> <pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
<div class="box_space height_basic"> <div class="box_space height_basic">
<header id="js_demo_fix" class="header_page demo__header header_fix"> <header id="js_demo_fix" class="header_page demo__header header_fix">
<nav class="nav_right"> <nav class="nav_right">
<ul> <ul>
<li><a href="" class="a_button">Eins</a></li> <li><a href="" class="a_button">Eins</a></li>
<li><a href="" class="a_button">Zwei</a></li> <li><a href="" class="a_button">Zwei</a></li>
</ul> </ul>
</nav> </nav>
</header> </header>
<div class="pos_abs pin_bottom width_full"> <div class="pos_abs pin_bottom width_full">
<pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre> <pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
<footer id="js_demo_stop" class="demo_footer"> <footer id="js_demo_stop" class="demo_footer">
<nav class="nav_column nav_separate"> <nav class="nav_column nav_separate">
<ul> <ul>
<li><a href="" class="a_button_text">Alpha</a></li> <li><a href="" class="a_button_text">Alpha</a></li>
<li><a href="" class="a_button_text">Bravo</a></li> <li><a href="" class="a_button_text">Bravo</a></li>
<li><a href="" class="a_button_text">Charlie</a></li> <li><a href="" class="a_button_text">Charlie</a></li>
<li><a href="" class="a_button_text">Delta</a></li> <li><a href="" class="a_button_text">Delta</a></li>
</ul> </ul>
</nav> </nav>
<p class="txt_center demo__credits"><i class="i_bright">👨‍💻</i> mit <i class="i_bright">❤</i> von <a href="https://interaktionsweise.de">Interaktionsweise</a></p> <p class="txt_center demo__credits"><i class="i_bright">👨‍💻</i> mit <i class="i_bright">❤</i> von <a href="https://interaktionsweise.de">Interaktionsweise</a></p>
</footer> </footer>
</div> </div>
</div> </div>
<div class="flex"> <div class="flex">
<div class="flex_child"></div> <div class="flex_child"></div>
<div class="flex_child"></div> <div class="flex_child"></div>
<div class="flex_child"></div> <div class="flex_child"></div>
<div class="flex_child"></div> <div class="flex_child"></div>
<div class="flex_child"></div> <div class="flex_child"></div>
</div> </div>
<div class="flex_column_wrap"> <div class="flex_column_wrap">
<div class="flex_column"><input value="Undefiniert"/></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="Text"/></div>
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled/></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="button" value="Auswählen"></div>
<div class="flex_column"><input type="submit" value="Senden" disabled/></div> <div class="flex_column"><input type="submit" value="Senden" disabled/></div>
</div> </div>
<form action="" method="get"> <form action="" method="get">
<p class="label"> <p class="label">
Show me a <select name="F"> Show me a <select name="F">
<option value="0"> Plain list</option> <option value="0"> Plain list</option>
<option value="1" selected="selected"> Fancy list</option> <option value="1" selected="selected"> Fancy list</option>
<option value="2"> Table list</option> <option value="2"> Table list</option>
</select> </select>
Sorted by <select name="C"> Sorted by <select name="C">
<option value="N" selected="selected"> Name</option> <option value="N" selected="selected"> Name</option>
<option value="M"> Date Modified</option> <option value="M"> Date Modified</option>
<option value="S"> Size</option> <option value="S"> Size</option>
<option value="D"> Description</option> <option value="D"> Description</option>
</select> </select>
<select name="O"> <select name="O">
<option value="A" selected="selected"> Ascending</option> <option value="A" selected="selected"> Ascending</option>
<option value="D"> Descending</option> <option value="D"> Descending</option>
</select> </select>
<select name="V"> <select name="V">
<option value="0" selected="selected"> in Normal order</option> <option value="0" selected="selected"> in Normal order</option>
<option value="1"> in Version order</option> <option value="1"> in Version order</option>
</select> </select>
Matching <input type="text" name="P" value="*" /> Matching <input type="text" name="P" value="*" />
<input type="submit" name="X" value="Go" /> <input type="submit" name="X" value="Go" />
</p> </p>
</form> </form>
<h2>Gruppierung</h2> <h2>Gruppierung</h2>
<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre> <pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
<ul class="list_link"> <ul class="list_link">
<li><a href=""><img src="../art/letter.gif" alt="">name@domain.tld</a></li> <li><a href=""><img src="../art/letter.gif" alt="">name@domain.tld</a></li>
<li><a href="">Work</a></li> <li><a href="">Work</a></li>
<li><a href="">Projects</a></li> <li><a href="">Projects</a></li>
</ul> </ul>
<h2>Tabellen</h2> <h2>Tabellen</h2>
<pre class="pre_code"><code>table.table_link>thead>tr>th{&amp;nbsp;}+th{Ab / Zy}+th{Neu / Alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16 height=16]^+td.cell_link>a[target=_blank]{Name}+a[target=_blank]{URL}^+td.cell_date[rowspan="2"]{YYY-MM-DD}^tr>td.cell_text>div.shorten{Beschreibung})*2</code></pre> <pre class="pre_code"><code>table.table_link>thead>tr>th{&amp;nbsp;}+th{Ab / Zy}+th{Neu / Alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16 height=16]^+td.cell_link>a[target=_blank]{Name}+a[target=_blank]{URL}^+td.cell_date[rowspan="2"]{YYY-MM-DD}^tr>td.cell_text>div.shorten{Beschreibung})*2</code></pre>
<table class="table_link js_pop"> <table class="table_link js_pop">
<thead> <thead>
<tr> <tr>
<th>&nbsp;</th> <th>&nbsp;</th>
<th>Ab / Zy</th> <th>Ab / Zy</th>
<th>Neu / Alt</th> <th>Neu / Alt</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td> <td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
<td class="cell_link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td> <td class="cell_link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
<td class="cell_date" rowspan="2">YYYY-MM-DD</td> <td class="cell_date" rowspan="2">YYYY-MM-DD</td>
</tr> </tr>
<tr> <tr>
<td class="cell_text"> <td class="cell_text">
<div class="shorten">Beschreibung</div> <div class="shorten">Beschreibung</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tbody> <tbody>
<tr> <tr>
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td> <td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
<td class="cell_link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td> <td class="cell_link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
<td class="cell_date" rowspan="2">YYYY-MM-DD</td> <td class="cell_date" rowspan="2">YYYY-MM-DD</td>
</tr> </tr>
<tr> <tr>
<td class="cell_text"> <td class="cell_text">
<div class="shorten">Beschreibung</div> <div class="shorten">Beschreibung</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<h2>Eingebettet</h2> <h2>Eingebettet</h2>
<div class="demo__flag"> <div class="demo__flag">
<svg version="1.1" id="vector" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1920 1200" preserveAspectRatio="xMinYMax slice" alt="Background flag"> <svg version="1.1" id="vector" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1920 1200" preserveAspectRatio="xMinYMax slice" alt="Background flag">
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect> <rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon> <polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon> <polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon> <polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon> <polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon> <polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon> <polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon> <polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon> <polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
</svg> </svg>
</div> </div>
</article> </article>
</section> </section>
</div> </div>
{% include "hippie/partials/_footer.njk" %} {% include "hippie/partials/_footer.njk" %}
{% endblock %} {% endblock %}
{% block script %} {% block script %}
{{ super() }} {{ super() }}
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script> <script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> <script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript"> <script type="text/javascript">
// Page specific // Page specific
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$( document ).ready(function() { $( document ).ready(function() {
// jq-sticky-anything // jq-sticky-anything
$('#js_demo_fix').stickThis({ $('#js_demo_fix').stickThis({
pushup: '#js_demo_stop' pushup: '#js_demo_stop'
}); });
}); });
</script> </script>
{% endblock %} {% endblock %}

1186
source/screens/demo/intro.njk
View file

File diff suppressed because it is too large Load diff

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

@ -1,17 +1,17 @@
<!-- page-maintenance.njk --> <!-- page-maintenance.njk -->
{% set pageId = "blank" %} {% set pageId = "blank" %}
{% set pageClass = "height_full" %} {% set pageClass = "height_full" %}
{% extends "demo/_maintenance.njk" %} {% extends "demo/_maintenance.njk" %}
{% block title %}Maintenance{% endblock %} {% block title %}Maintenance{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block main %} {% block main %}
<div id="root" class="overflow"> <div id="root" class="overflow">
<h1 class="txt_hero txt_center txt_gradient">HIPPIE</h1> <h1 class="txt_hero txt_center txt_gradient">HIPPIE</h1>
</div> </div>
{% endblock %} {% endblock %}

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

@ -1,146 +1,146 @@
<!-- page-os.njk --> <!-- page-os.njk -->
{% set pageId = "os" %} {% set pageId = "os" %}
{% set pageClass = "" %} {% set pageClass = "" %}
{% extends "demo/_extended.njk" %} {% extends "demo/_extended.njk" %}
{% block title %}OS{% endblock %} {% block title %}OS{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block main %} {% block main %}
<div class="height_full"> <div class="height_full">
<div class="flex_wrap"> <div class="flex_wrap">
<button class="demo__button_32"></button> <button class="demo__button_32"></button>
<button class="demo__button_32"></button> <button class="demo__button_32"></button>
<button class="demo__button_32"></button> <button class="demo__button_32"></button>
<button class="demo__button_32"></button> <button class="demo__button_32"></button>
<button class="demo__button_32"></button> <button class="demo__button_32"></button>
<button class="demo__button_32"></button> <button class="demo__button_32"></button>
</div> </div>
<div class="flex"> <div class="flex">
<div class="flex_child"> <div class="flex_child">
<!-- (nav>ul.list_data>(li>a>img+p{Punkt $})*6)*2 --> <!-- (nav>ul.list_data>(li>a>img+p{Punkt $})*6)*2 -->
<nav> <nav>
<ul class="list_files"> <ul class="list_files">
<li><a href=""> <li><a href="">
<img src="" alt=""> <img src="" alt="">
<p>Punkt 1</p> <p>Punkt 1</p>
</a></li> </a></li>
<li><a href=""> <li><a href="">
<img src="" alt=""> <img src="" alt="">
<p>Punkt 2</p> <p>Punkt 2</p>
</a></li> </a></li>
<li><a href=""> <li><a href="">
<img src="" alt=""> <img src="" alt="">
<p>Punkt 3</p> <p>Punkt 3</p>
</a></li> </a></li>
<li><a href=""> <li><a href="">
<img src="" alt=""> <img src="" alt="">
<p>Punkt 4</p> <p>Punkt 4</p>
</a></li> </a></li>
<li><a href=""> <li><a href="">
<img src="" alt=""> <img src="" alt="">
<p>Punkt 5</p> <p>Punkt 5</p>
</a></li> </a></li>
<li><a href=""> <li><a href="">
<img src="" alt=""> <img src="" alt="">
<p>Punkt 6</p> <p>Punkt 6</p>
</a></li> </a></li>
</ul> </ul>
</nav> </nav>
<nav> <nav>
<ul class="list_files"> <ul class="list_files">
<li><a href=""> <li><a href="">
<img src="" alt=""> <img src="" alt="">
<p>Punkt 1</p> <p>Punkt 1</p>
</a></li> </a></li>
<li><a href=""> <li><a href="">
<img src="" alt=""> <img src="" alt="">
<p>Punkt 2</p> <p>Punkt 2</p>
</a></li> </a></li>
<li><a href=""> <li><a href="">
<img src="" alt=""> <img src="" alt="">
<p>Punkt 3</p> <p>Punkt 3</p>
</a></li> </a></li>
<li><a href=""> <li><a href="">
<img src="" alt=""> <img src="" alt="">
<p>Punkt 4</p> <p>Punkt 4</p>
</a></li> </a></li>
<li><a href=""> <li><a href="">
<img src="" alt=""> <img src="" alt="">
<p>Punkt 5</p> <p>Punkt 5</p>
</a></li> </a></li>
<li><a href=""> <li><a href="">
<img src="" alt=""> <img src="" alt="">
<p>Punkt 6</p> <p>Punkt 6</p>
</a></li> </a></li>
</ul> </ul>
</nav> </nav>
</div> </div>
<div class="flex_child_one flex_row"> <div class="flex_child_one flex_row">
<!-- div.flex_child.box_file_wrp>(div.box_file_tile>img[src="./art/icon_default.svg"]^+p{Dateiname $}+p{Auszeichnung $})*4^+div.flex_child>table.table_file_simple>(tr>td>img^+td{Objektname $}+td.cell_file_path{Objektpfad $})*2 --> <!-- div.flex_child.box_file_wrp>(div.box_file_tile>img[src="./art/icon_default.svg"]^+p{Dateiname $}+p{Auszeichnung $})*4^+div.flex_child>table.table_file_simple>(tr>td>img^+td{Objektname $}+td.cell_file_path{Objektpfad $})*2 -->
<div class="flex_child box_file_wrp"> <div class="flex_child box_file_wrp">
<div class="flex_wrap box_file_tile"> <div class="flex_wrap box_file_tile">
<div class="flex_child"><img src="./art/icon_default.svg" alt=""></div> <div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
<div class="box_flex_one"> <div class="box_flex_one">
<p>Dateiname 1</p> <p>Dateiname 1</p>
<p>Auszeichnung 1</p> <p>Auszeichnung 1</p>
</div> </div>
</div> </div>
<div class="flex_wrap box_file_tile"> <div class="flex_wrap box_file_tile">
<div class="flex_child"><img src="./art/icon_default.svg" alt=""></div> <div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
<div class="box_flex_one"> <div class="box_flex_one">
<p>Dateiname 2</p> <p>Dateiname 2</p>
<p>Auszeichnung 2</p> <p>Auszeichnung 2</p>
</div> </div>
</div> </div>
<div class="flex_wrap box_file_tile"> <div class="flex_wrap box_file_tile">
<div class="flex_child"><img src="./art/icon_default.svg" alt=""></div> <div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
<div class="box_flex_one"> <div class="box_flex_one">
<p>Dateiname 3</p> <p>Dateiname 3</p>
<p>Auszeichnung 3</p> <p>Auszeichnung 3</p>
</div> </div>
</div> </div>
<div class="flex_wrap box_file_tile"> <div class="flex_wrap box_file_tile">
<div class="flex_child"><img src="./art/icon_default.svg" alt=""></div> <div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
<div class="box_flex_one"> <div class="box_flex_one">
<p>Dateiname 4</p> <p>Dateiname 4</p>
<p>Auszeichnung 4</p> <p>Auszeichnung 4</p>
</div> </div>
</div> </div>
</div> </div>
<div class="flex_child_one"> <div class="flex_child_one">
<table class="table_file_simple"> <table class="table_file_simple">
<tr> <tr>
<td><img src="" alt=""></td> <td><img src="" alt=""></td>
<td>Objektname 1</td> <td>Objektname 1</td>
<td class="cell_file_path">Objektpfad 1</td> <td class="cell_file_path">Objektpfad 1</td>
</tr> </tr>
<tr> <tr>
<td><img src="" alt=""></td> <td><img src="" alt=""></td>
<td>Objektname 2</td> <td>Objektname 2</td>
<td class="cell_file_path">Objektpfad 2</td> <td class="cell_file_path">Objektpfad 2</td>
</tr> </tr>
</table> </table>
</div> </div>
<div class="flex_child"> <div class="flex_child">
<p>Status</p> <p>Status</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
{% block script %} {% block script %}
{{ super() }} {{ super() }}
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script> <script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> <script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript"> <script type="text/javascript">
// Page specific // Page specific
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$( document ).ready(function() { $( document ).ready(function() {
}); });
</script> </script>
{% endblock %} {% endblock %}

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

@ -1,94 +1,94 @@
<!-- page-tests.njk --> <!-- page-tests.njk -->
{% set pageId = "tests" %} {% set pageId = "tests" %}
{% set pageClass = "height_full" %} {% set pageClass = "height_full" %}
{% extends "demo/_default.njk" %} {% extends "demo/_default.njk" %}
{% import "demo/macros/_nav.njk" as nav %} {% import "demo/macros/_nav.njk" as nav %}
{% block title %}Tests{% endblock %} {% block title %}Tests{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
<style> <style>
#error { #error {
border: 1px solid #FFFF66; border: 1px solid #FFFF66;
background-color: #FFFFCC; background-color: #FFFFCC;
display: inline-block; display: inline-block;
margin-left: 10px; margin-left: 10px;
padding: 3px; padding: 3px;
display: none; display: none;
} }
</style> </style>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<input type="password" name="txtPassword" onkeypress="capLock(event)" /> <input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div> <div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
<form action=""> <form action="">
<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>
<p>Navigation</p> <p>Navigation</p>
{{ nav.main(data.demoadditionallinks, 'Tests') }} {{ nav.main(data.demoadditionallinks, 'Tests') }}
{% endblock %} {% endblock %}
{% block script %} {% block script %}
{{ super() }} {{ super() }}
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> <script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript"> <script type="text/javascript">
// Page specific // Page specific
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$( document ).ready(function() { $( document ).ready(function() {
console.log('HIPPIE Tests'); console.log('HIPPIE Tests');
}); });
function capLock(e){ function capLock(e){
kc = e.keyCode?e.keyCode:e.which; kc = e.keyCode?e.keyCode:e.which;
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false); sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk)) if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
document.getElementById('divMayus').style.visibility = 'visible'; document.getElementById('divMayus').style.visibility = 'visible';
else else
document.getElementById('divMayus').style.visibility = 'hidden'; document.getElementById('divMayus').style.visibility = 'hidden';
} }
function capsDetect() { function capsDetect() {
var body = document.getElementsByTagName('body')[0]; var body = document.getElementsByTagName('body')[0];
var isShiftPressed = false; var isShiftPressed = false;
var isCapsOn = false; var isCapsOn = false;
var capsWarning = document.getElementById('error'); var capsWarning = document.getElementById('error');
body.addEventListener('keydown', function(e) { body.addEventListener('keydown', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which; var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode === 16) { if (keyCode === 16) {
isShiftPressed = true; isShiftPressed = true;
} }
}); });
body.addEventListener('keyup', function(e) { body.addEventListener('keyup', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which; var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode === 16) { if (keyCode === 16) {
isShiftPressed = false; isShiftPressed = false;
} }
if (keyCode === 20) { if (keyCode === 20) {
if (isCapsOn) { if (isCapsOn) {
isCapsOn = false; isCapsOn = false;
capsWarning.style.display = 'none'; capsWarning.style.display = 'none';
} else { } else {
isCapsOn = true; isCapsOn = true;
capsWarning.style.display = 'inline-block'; capsWarning.style.display = 'inline-block';
} }
} }
}); });
body.addEventListener('keypress', function(e) { body.addEventListener('keypress', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which; var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode <= 40) if (keyCode <= 40)
return; return;
if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) { if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
isCapsOn = true; isCapsOn = true;
capsWarning.style.display = 'inline-block'; capsWarning.style.display = 'inline-block';
} else { } else {
capsWarning.style.display = 'none'; capsWarning.style.display = 'none';
} }
}); });
} }
capsDetect(); capsDetect();
</script> </script>
{% endblock %} {% endblock %}

12
source/style/_demo_config.scss
View file

@ -1,6 +1,6 @@
// Override for configuration file // Override for configuration file
// All variables setup with !default in global/_config.scss can be used // All variables setup with !default in global/_config.scss can be used
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
// $color_back_basic: beige; // $color_back_basic: beige;
// $color_link_basic: crimson; // $color_link_basic: crimson;

28
source/style/demo.scss
View file

@ -1,14 +1,14 @@
// Start a new project by creating YOUR-PROJECT.scss and _YOUR-CONFIG.scss // Start a new project by creating YOUR-PROJECT.scss and _YOUR-CONFIG.scss
// Then import your config and hippie // Then import your config and hippie
// NOTE // No css rules allowed in here // NOTE // No css rules allowed in here
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
@import "demo_config"; @import "demo_config";
@import "hippie/hippie"; @import "hippie/hippie";
// Additional Modules and variables // Additional Modules and variables
// in dependency to other basic styles // in dependency to other basic styles
// could be defined here // could be defined here
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@import "modules/demo/demo_module"; @import "modules/demo/demo_module";
// @import "modules/YOUR-MODULE/YOUR-FILES"; // @import "modules/YOUR-MODULE/YOUR-FILES";

28
source/style/demo_basic.scss
View file

@ -1,14 +1,14 @@
// Start a new project by creating YOUR-PROJECT.scss and _YOUR-CONFIG.scss // Start a new project by creating YOUR-PROJECT.scss and _YOUR-CONFIG.scss
// Then import your config and hippie // Then import your config and hippie
// NOTE // No css rules allowed in here // NOTE // No css rules allowed in here
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
@import "demo_config"; @import "demo_config";
@import "hippie/basic"; @import "hippie/basic";
// Additional Modules and variables // Additional Modules and variables
// in dependency to other basic styles // in dependency to other basic styles
// could be defined here // could be defined here
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@import "modules/demo/demo_module"; @import "modules/demo/demo_module";
// @import "modules/YOUR-MODULE/YOUR-FILES"; // @import "modules/YOUR-MODULE/YOUR-FILES";

46
source/style/hippie/_abovethefold.scss
View file

@ -1,23 +1,23 @@
/* /*
* # TABLE OF CONTENTS * # TABLE OF CONTENTS
* *
* - Reset * - Reset
* - Priority CSS Rules * - Priority CSS Rules
* *
*/ */
// Reset // Reset
// Use a file outside of hippie i.e. vendor/normalize.css // Use a file outside of hippie i.e. vendor/normalize.css
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// @import "vendor/normalize.css"; // @import "vendor/normalize.css";
/* /*
* # NOTE * # NOTE
* *
* CSS rules for content which is presented immediately * CSS rules for content which is presented immediately
* to the screen and needs priority loading * to the screen and needs priority loading
* *
*/ */

66
source/style/hippie/_hippie.scss
View file

@ -1,33 +1,33 @@
/* /*
* # TABLE OF CONTENTS * # TABLE OF CONTENTS
* *
* - Reset * - Reset
* - Global functions and mixins * - Global functions and mixins
* - Configuration * - Configuration
* - Special modules * - Special modules
* - Basic styles * - Basic styles
* - Common * - Common
* - Typography * - Typography
* *
* - Sections * - Sections
* - Grouping * - Grouping
* - Textlevel * - Textlevel
* - Embedded * - Embedded
* - Tables * - Tables
* - Interactive * - Interactive
* - Modules * - Modules
- Breakpoint - Breakpoint
- Tables - Tables
- Maintenance - Maintenance
* *
*/ */
@import "basic"; @import "basic";
// Additional Modules and variables // Additional Modules and variables
// in dependency to other basic styles // in dependency to other basic styles
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@import "modules/navigation/nav_module"; @import "modules/navigation/nav_module";
@import "modules/card/card_module"; @import "modules/card/card_module";
@import "modules/editor/editor_module"; @import "modules/editor/editor_module";
@import "modules/explanation/explanation_module"; @import "modules/explanation/explanation_module";
@import "modules/print/print_module"; @import "modules/print/print_module";

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

@ -1,64 +1,64 @@
// Embedded content // Embedded content
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// picture // picture
// source // source
// img // img
// iframe // iframe
// embed // embed
// object // object
// param // param
// video // video
// audio // audio
// track // track
// map // map
// area // area
picture { picture {
} }
source { source {
} }
img { img {
vertical-align: top; vertical-align: top;
} }
iframe { iframe {
} }
embed { embed {
} }
object { object {
} }
param { param {
} }
video { video {
} }
audio { audio {
} }
track { track {
} }
map { map {
} }
area { area {
} }

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

@ -1,330 +1,330 @@
// Grouping content // Grouping content
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// p // p
// address // address
// hr // hr
// pre // pre
// blockquote // blockquote
// ol // ol
// ul // ul
// li // li
// dl // dl
// dt // dt
// dd // dd
// figure // figure
// figcaption // figcaption
// main // main
// div // div
// Paragraph // Paragraph
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
p { p {
@extend %basic; @extend %basic;
margin-top: $space_basic; margin-top: $space_basic;
margin-bottom: $space_basic; margin-bottom: $space_basic;
code { code {
padding: $space_tiny $space_half; padding: $space_tiny $space_half;
font-size: 1em; font-size: 1em;
line-height: 1; line-height: 1;
} }
} }
.column_line { .column_line {
column-rule: $border_basic; column-rule: $border_basic;
} }
.column_2, .column_3 { .column_2, .column_3 {
@extend p; @extend p;
} }
.column_2 { .column_2 {
column-count: 2; column-count: 2;
column-gap: $space_small; column-gap: $space_small;
} }
.column_3 { .column_3 {
column-count: 3; column-count: 3;
column-gap: $space_medium; column-gap: $space_medium;
} }
// Address // Address
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
address { address {
// @extend %basic; // @extend %basic;
margin-top: $space_double; margin-top: $space_double;
margin-bottom: $space_double; margin-bottom: $space_double;
} }
// Line // Line
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
hr { hr {
margin-top: $space_small; margin-top: $space_small;
margin-bottom: $space_small; margin-bottom: $space_small;
border-width: $width_border_basic 0 0; border-width: $width_border_basic 0 0;
border-style: solid; border-style: solid;
border-color: $color_border_basic; border-color: $color_border_basic;
} }
.hr_hidden { .hr_hidden {
@extend hr; @extend hr;
border-color: transparent; border-color: transparent;
} }
.hr_dotted { .hr_dotted {
@extend hr; @extend hr;
border-style: dotted; border-style: dotted;
} }
// Preformat // Preformat
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
pre { pre {
@extend %basic_mono; @extend %basic_mono;
white-space: pre-wrap; white-space: pre-wrap;
} }
.pre_code { .pre_code {
overflow-x: auto; overflow-x: auto;
border-color: darken($color_back_basic, $color_diff_tiny); border-color: darken($color_back_basic, $color_diff_tiny);
border-style: dotted; border-style: dotted;
border-width: 0 0 0 $width_border_4; border-width: 0 0 0 $width_border_4;
border-radius: $radius_basic; border-radius: $radius_basic;
padding: $space_basic; padding: $space_basic;
background-color: lighten($color_back_basic, $color_diff_tiny); background-color: lighten($color_back_basic, $color_diff_tiny);
code { code {
background-color: transparent; background-color: transparent;
} }
} }
// Quote // Quote
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
blockquote { blockquote {
margin: $space_basic 0; margin: $space_basic 0;
padding-right: $indent_basic; padding-right: $indent_basic;
padding-left: $indent_basic; padding-left: $indent_basic;
} }
.quote_mark { .quote_mark {
p::before { p::before {
content: "\201E \0020"; content: "\201E \0020";
} }
p::after { p::after {
content: "\0020 \201C"; content: "\0020 \201C";
} }
.quote_source { .quote_source {
&::before, &::after { &::before, &::after {
content: ""; content: "";
} }
} }
} }
// List // List
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
dl, ul, ol { dl, ul, ol {
margin: $space_double 0; margin: $space_double 0;
} }
ul, ol { ul, ol {
padding-left: $indent_basic; padding-left: $indent_basic;
} }
dl { dl {
margin-left: $indent_basic; margin-left: $indent_basic;
} }
li, dt, dd { li, dt, dd {
@extend %basic; @extend %basic;
} }
dd, .list_basic li { dd, .list_basic li {
margin-bottom: $space_basic; margin-bottom: $space_basic;
} }
dd { dd {
margin-left: $indent_basic; margin-left: $indent_basic;
} }
ul { ul {
li { li {
list-style: square; list-style: square;
} }
} }
.list_dash { .list_dash {
li { li {
list-style: none; list-style: none;
position: relative; position: relative;
&::before { &::before {
content: "_"; content: "_";
position: absolute; position: absolute;
left: -1em; left: -1em;
} }
} }
} }
.list_link { .list_link {
li { li {
margin-bottom: $space_tiny * 2; margin-bottom: $space_tiny * 2;
text-transform: uppercase; text-transform: uppercase;
a { a {
display: block; display: block;
padding: $padding_basic; padding: $padding_basic;
color: $color_text_basic; color: $color_text_basic;
img { img {
margin-right: $space_basic; margin-right: $space_basic;
padding-bottom: 0.2em; padding-bottom: 0.2em;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
background-color: $color_action_basic; background-color: $color_action_basic;
color: $color_highlight_basic; color: $color_highlight_basic;
} }
} }
} }
} }
.list_horizontal { .list_horizontal {
overflow: auto; overflow: auto;
li { li {
@extend .float_space_left; @extend .float_space_left;
} }
} }
// Embedded // Embedded
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
figure { figure {
margin: $space_double $indent_basic; margin: $space_double $indent_basic;
} }
figcaption { figcaption {
@extend %basic; @extend %basic;
color: $color_darker; color: $color_darker;
} }
// Main content // Main content
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
main { main {
} }
// Div // Div
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
div { div {
} }
.div_info { .div_info {
padding: $space_double $indent_basic; padding: $space_double $indent_basic;
border-right: $space_basic solid rgba($echo_color, 0.6); border-right: $space_basic solid rgba($echo_color, 0.6);
background-color: rgba($echo_color, 0.1) !important; background-color: rgba($echo_color, 0.1) !important;
} }
.box_space { .box_space {
position: relative; position: relative;
width: 100%; width: 100%;
} }
.box_cube { .box_cube {
float: left; float: left;
display: table; display: table;
width: $space_medium; width: $space_medium;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
span { span {
display: table-cell; display: table-cell;
} }
} }
.box_placeholder { .box_placeholder {
width: 100%; width: 100%;
height: $space_medium; height: $space_medium;
border: $width_border_4 solid transparentize($alpha_color, 0.1); border: $width_border_4 solid transparentize($alpha_color, 0.1);
border-radius: $radius_basic; border-radius: $radius_basic;
background-color: transparentize($alpha_color, 0.2); background-color: transparentize($alpha_color, 0.2);
} }
.box_placeholder_bkg { .box_placeholder_bkg {
width: 100%; width: 100%;
height: $space_medium * 2; height: $space_medium * 2;
border: $width_border_4 solid transparentize($color_front_basic, 0.1); border: $width_border_4 solid transparentize($color_front_basic, 0.1);
border-radius: $radius_basic; border-radius: $radius_basic;
padding: $space_basic; padding: $space_basic;
/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/ /*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='100%' stroke='%23FFF' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='%23FFF' stroke-width='.5'/></svg>") no-repeat; background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='100%' stroke='%23FFF' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='%23FFF' stroke-width='.5'/></svg>") no-repeat;
background-color: transparentize($color_front_basic, 0.1); background-color: transparentize($color_front_basic, 0.1);
} }
.box_file_tile { .box_file_tile {
@extend .float_space_left; @extend .float_space_left;
} }
// Flex // Flex
.flex { .flex {
display: flex; display: flex;
} }
.flex_wrap { .flex_wrap {
@extend .flex; @extend .flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.flex_row { .flex_row {
@extend .flex; @extend .flex;
flex-direction: column; flex-direction: column;
// align-items: flex-start; // align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
} }
.flex_child { .flex_child {
flex: 0 1 auto; flex: 0 1 auto;
} }
.flex_child_one { .flex_child_one {
flex: 1; flex: 1;
} }
.flex_child_end { .flex_child_end {
align-self: flex-end; align-self: flex-end;
} }
.flex_column_wrap { .flex_column_wrap {
@extend .flex_wrap; @extend .flex_wrap;
.flex_column { .flex_column {
@extend .flex_child; @extend .flex_child;
flex-grow: 1; flex-grow: 1;
} }
} }
// Grid // Grid
.grid { .grid {
display: grid; display: grid;
grid-gap: $space_basic; grid-gap: $space_basic;
& > input, & > input,
& > select, & > select,
& > textarea { & > textarea {
margin: 0; margin: 0;
} }
& > label { & > label {
margin: $width_border_io; margin: $width_border_io;
padding: $space_half; padding: $space_half;
} }
} }
.grid_column_2 { .grid_column_2 {
grid-template-columns: max-content max-content; grid-template-columns: max-content max-content;
} }
.grid_column_4 { .grid_column_4 {
grid-template-columns: max-content max-content max-content max-content; grid-template-columns: max-content max-content max-content max-content;
} }
// Sprites // Sprites
.sprite_img { .sprite_img {
display: inline-block; display: inline-block;
} }

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

@ -1,259 +1,259 @@
// Forms // Forms
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// form // form
// label // label
// input // input
// button // button
// select // select
// datalist // datalist
// optgroup // optgroup
// option // option
// textarea // textarea
// output // output
// progress // progress
// meter // meter
// fieldset // fieldset
// legend // legend
// Form // Form
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
form { form {
} }
// Label // Label
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
label { label {
@extend %basic; @extend %basic;
input, button, textarea, select { input, button, textarea, select {
margin-left: $space_basic; margin-left: $space_basic;
} }
} }
input + label { input + label {
margin-left: $space_basic; margin-left: $space_basic;
} }
.label { .label {
line-height: 2.5; line-height: 2.5;
} }
.label > input, .label > input,
.label > textarea, .label > textarea,
.label > select { .label > select {
margin: 0 $space_basic; margin: 0 $space_basic;
} }
// Input // Input
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
input { input {
} }
label + input { label + input {
margin-left: $space_basic; margin-left: $space_basic;
} }
input, button, textarea, select { input, button, textarea, select {
margin: $margin_io; margin: $margin_io;
&[disabled="disabled"], &[disabled="disabled"],
&[disabled] { &[disabled] {
cursor: not-allowed; cursor: not-allowed;
} }
} }
td > input, td > input,
td > button, td > button,
td > select, td > select,
td > textarea { td > textarea {
margin: 0; margin: 0;
} }
@each $input in $io_input_list, textarea, select { @each $input in $io_input_list, textarea, select {
#{$input} { #{$input} {
@extend %basic_mono; @extend %basic_mono;
line-height: 1; line-height: 1;
} }
} }
.io_input, .io_textarea, .io_select { .io_input, .io_textarea, .io_select {
padding: $space_half; padding: $space_half;
color: $color_text_io; color: $color_text_io;
background-color: $color_back_io; background-color: $color_back_io;
&:hover { &:hover {
background-color: $color_highlight_basic; background-color: $color_highlight_basic;
} }
&[readonly="readonly"], &[readonly="readonly"],
&[readonly] { &[readonly] {
background-color: darken($color_back_io, $color_diff_double); background-color: darken($color_back_io, $color_diff_double);
} }
&[disabled="disabled"], &[disabled="disabled"],
&[disabled] { &[disabled] {
&:hover { &:hover {
background-color: $color_back_io; background-color: $color_back_io;
} }
} }
} }
@each $input in $io_date_list { @each $input in $io_date_list {
#{$input} { #{$input} {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
} }
@each $input in $io_input_list, textarea { @each $input in $io_input_list, textarea {
#{$input} { #{$input} {
// border: $border_io; // border: $border_io;
} }
} }
.io_input, .io_textarea { .io_input, .io_textarea {
border: $border_io; border: $border_io;
&[readonly="readonly"], &[readonly="readonly"],
&[readonly] { &[readonly] {
border-color: darken($color_border_io, $color_diff_double); border-color: darken($color_border_io, $color_diff_double);
} }
&[disabled="disabled"], &[disabled="disabled"],
&[disabled] { &[disabled] {
border-color: transparent; border-color: transparent;
} }
} }
// Fieldset // Fieldset
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
fieldset { fieldset {
margin: $margin_double; margin: $margin_double;
padding: $space_basic; padding: $space_basic;
border: $border_basic; border: $border_basic;
} }
// Legend // Legend
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
legend { legend {
@extend %basic; @extend %basic;
padding: 0 $space_half; padding: 0 $space_half;
} }
// Button // Button
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
button { button {
} }
.io_button { .io_button {
@extend %basic_button; @extend %basic_button;
border: $width_border_io solid $color_border_button; border: $width_border_io solid $color_border_button;
padding: $padding_basic; padding: $padding_basic;
color: $color_text_button; color: $color_text_button;
background-color: $color_back_button; background-color: $color_back_button;
&:hover { &:hover {
// border-color: #0059F6; // border-color: #0059F6;
border-color: transparent; border-color: transparent;
color: white; color: white;
background-color: $foxtrot_color; background-color: $foxtrot_color;
} }
&[disabled="disabled"], &[disabled="disabled"],
&[disabled] { &[disabled] {
border-color: transparent; border-color: transparent;
color: lighten($color_text_button, $color_diff_double); color: lighten($color_text_button, $color_diff_double);
&:hover { &:hover {
background-color: $color_back_button; background-color: $color_back_button;
} }
} }
} }
// Selection // Selection
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
select { select {
border: none; border: none;
} }
// Datalist // Datalist
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
datalist { datalist {
} }
// Options // Options
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
optgroup { optgroup {
} }
option { option {
} }
// Textarea // Textarea
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
textarea { textarea {
} }
.io_textarea { .io_textarea {
line-height: 1.2; line-height: 1.2;
} }
// Output // Output
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
output { output {
} }
// Progress // Progress
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
progress { progress {
} }
meter { meter {
} }
// Interactive elements // Interactive elements
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// details // details
// summary // summary
// dialog // dialog
details { details {
} }
summary { summary {
} }
dialog { dialog {
} }
// Scripting // Scripting
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// script // script
// noscript // noscript
// template // template
// canvas // canvas
canvas { canvas {
} }

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

@ -1,189 +1,189 @@
// Root // Root
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
html { html {
// height: 100%; // height: 100%;
} }
// Sections // Sections
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// body // body
// article // article
// section // section
// nav // nav
// aside // aside
// h1-h6 // h1-h6
// header // header
// footer // footer
// Body // Body
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
body { body {
position: relative; position: relative;
box-sizing: $box_sizing; box-sizing: $box_sizing;
margin: 0; margin: 0;
font-family: $family_text_basic; font-family: $family_text_basic;
font-size: $size_text_basic; font-size: $size_text_basic;
line-height: $line_basic; line-height: $line_basic;
line-height: $line_text_basic; line-height: $line_text_basic;
color: $color_text_basic; color: $color_text_basic;
background-color: $color_back_basic; background-color: $color_back_basic;
*, *,
::before, ::before,
::after { ::after {
box-sizing: inherit; box-sizing: inherit;
} }
&:hover { &:hover {
.layer_hover { .layer_hover {
background-color: transparent !important; background-color: transparent !important;
transition: background-color $duration_double $timing_basic 0s !important; transition: background-color $duration_double $timing_basic 0s !important;
} }
} }
} }
// Article // Article
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
article { article {
} }
// Section // Section
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
section { section {
} }
.sec_main_center { .sec_main_center {
width: $width_basic; width: $width_basic;
margin: 0 auto; margin: 0 auto;
padding-top: $space_small; padding-top: $space_small;
@include forTabletPortraitUp { @include forTabletPortraitUp {
width: $width_small; width: $width_small;
} }
@include forTabletLandscapeUp { @include forTabletLandscapeUp {
width: $width_medium; width: $width_medium;
} }
@include forBigDesktopUp { @include forBigDesktopUp {
width: $width_large; width: $width_large;
} }
} }
.sec_main_status { .sec_main_status {
border-top-width: $width_border_8; border-top-width: $width_border_8;
border-top-style: solid; border-top-style: solid;
border-color: $color_border_basic; border-color: $color_border_basic;
padding-top: $space_small; padding-top: $space_small;
} }
// Navigation // Navigation
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
nav { nav {
} }
// Aside element // Aside element
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
aside { aside {
width: $width_aside_basic; width: $width_aside_basic;
&.right + .bside { &.right + .bside {
margin-right: calc(#{$width_aside_basic} + #{$space_basic}); margin-right: calc(#{$width_aside_basic} + #{$space_basic});
} }
&.left + .bside { &.left + .bside {
margin-left: calc(#{$width_aside_basic} + #{$space_basic}); margin-left: calc(#{$width_aside_basic} + #{$space_basic});
} }
&.right { &.right {
float: right; float: right;
} }
&.left { &.left {
float: left; float: left;
} }
*:first-child { *:first-child {
margin-top: 0; margin-top: 0;
} }
} }
// Headings // Headings
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
@extend %head_all; @extend %head_all;
} }
h1 { h1 {
@extend %head_1; @extend %head_1;
margin: $space_large 0 $space_small; margin: $space_large 0 $space_small;
} }
h1 + h1 { h1 + h1 {
margin-top: 0; margin-top: 0;
} }
h2 { h2 {
@extend %head_2; @extend %head_2;
margin: $space_medium 0 $space_small; margin: $space_medium 0 $space_small;
} }
h2 + h2 { h2 + h2 {
margin-top: 0; margin-top: 0;
} }
h3 { h3 {
@extend %head_3; @extend %head_3;
margin: $space_double 0; margin: $space_double 0;
text-transform: uppercase; text-transform: uppercase;
} }
h4 { h4 {
@extend %head_3; @extend %head_3;
margin: $space_double 0; margin: $space_double 0;
text-transform: none; text-transform: none;
} }
h5 { h5 {
@extend %head_4; @extend %head_4;
margin: $space_double 0 $space_basic; margin: $space_double 0 $space_basic;
text-transform: none; text-transform: none;
} }
h6 { h6 {
@extend %basic; @extend %basic;
margin: $space_basic 0; margin: $space_basic 0;
text-transform: none; text-transform: none;
font-weight: bold; font-weight: bold;
} }
// Header // Header
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
header { header {
} }
.header_page { .header_page {
overflow: auto; overflow: auto;
} }
.header_txt { .header_txt {
margin-bottom: $space_small; margin-bottom: $space_small;
border-bottom: $border_dotted; border-bottom: $border_dotted;
h1 { h1 {
border-top: $border_basic; border-top: $border_basic;
} }
} }
// Footer // Footer
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
footer { footer {
} }

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

@ -1,130 +1,130 @@
// Tabular data // Tabular data
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// table // table
// caption // caption
// colgroup // colgroup
// col // col
// tbody // tbody
// thead // thead
// tfoot // tfoot
// tr // tr
// td // td
// th // th
// Table // Table
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
table { table {
margin: $margin_double; margin: $margin_double;
border: $border_basic; border: $border_basic;
border-collapse: collapse; border-collapse: collapse;
} }
.table_blank { .table_blank {
border: $width_border_basic solid transparent; border: $width_border_basic solid transparent;
th, td { th, td {
border: $width_border_basic solid transparent; border: $width_border_basic solid transparent;
} }
} }
.table_free { .table_free {
border: $width_border_basic solid transparent; border: $width_border_basic solid transparent;
} }
.table_stripe { .table_stripe {
td { td {
border-top: 0; border-top: 0;
border-bottom: 0; border-bottom: 0;
} }
tr:nth-child(even) td { tr:nth-child(even) td {
background-color: lighten($color_back_basic, $color_diff_tiny); background-color: lighten($color_back_basic, $color_diff_tiny);
} }
} }
.table_fix { .table_fix {
table-layout: fixed; table-layout: fixed;
} }
.table_file_simple { .table_file_simple {
@extend .width_full; @extend .width_full;
} }
// Caption // Caption
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
caption { caption {
@extend p; @extend p;
padding: $space_half 0; padding: $space_half 0;
border: $border_dotted; border: $border_dotted;
text-align: center; text-align: center;
} }
// Columns // Columns
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
colgroup { colgroup {
} }
col { col {
} }
// Table body // Table body
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
tbody { tbody {
} }
// Table head // Table head
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
thead { thead {
} }
// Table foot // Table foot
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
tfoot { tfoot {
tr:first-child td { tr:first-child td {
border-top: $border_basic; border-top: $border_basic;
} }
} }
// Row // Row
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
tr { tr {
} }
// Cells // Cells
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
th, td { th, td {
@extend %basic; @extend %basic;
padding: $space_half; padding: $space_half;
} }
th { th {
border: $border_basic; border: $border_basic;
text-align: left; text-align: left;
} }
td { td {
border-right: $border_basic; border-right: $border_basic;
border-bottom: $border_basic; border-bottom: $border_basic;
} }
td:last-child { td:last-child {
border-right: 0; border-right: 0;
td { td {
border-bottom: 0; border-bottom: 0;
} }
} }
.cell_pre { .cell_pre {
// border-right-width: $width_border_4; // border-right-width: $width_border_4;
// border-right-color: lighten($color_back_basic, $color_diff_basic); // border-right-color: lighten($color_back_basic, $color_diff_basic);
background-color: lighten($color_back_basic, $color_diff_tiny); background-color: lighten($color_back_basic, $color_diff_tiny);
} }

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

@ -1,303 +1,303 @@
// Text-Level semantics // Text-Level semantics
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// a // a
// em // em
// strong // strong
// small // small
// s // s
// cite // cite
// q // q
// dfn // dfn
// abbr // abbr
// ruby // ruby
// rb // rb
// rt // rt
// rtc // rtc
// rp // rp
// data // data
// time // time
// code // code
// var // var
// samp // samp
// kbd // kbd
// sub // sub
// sup // sup
// i // i
// b // b
// u // u
// mark // mark
// bdi // bdi
// bdo // bdo
// span // span
// br // br
// wbr // wbr
// Links // Links
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
a { a {
color: $color_link_basic; color: $color_link_basic;
// color: lighten($color_action_basic, 20%); // color: lighten($color_action_basic, 20%);
text-decoration: none; text-decoration: none;
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
color: $color_highlight_basic; color: $color_highlight_basic;
} }
} }
.a_internal { .a_internal {
color: $charlie_color; color: $charlie_color;
} }
.a_external { .a_external {
color: $delta_color; color: $delta_color;
} }
.a_line { .a_line {
border-bottom-width: $space_tiny; border-bottom-width: $space_tiny;
border-bottom-style: dotted; border-bottom-style: dotted;
border-color: $color_border_basic; border-color: $color_border_basic;
color: $color_text_basic; color: $color_text_basic;
background-color: transparent; background-color: transparent;
transition: color $duration_basic $timing_basic; transition: color $duration_basic $timing_basic;
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
color: $color_highlight_basic; color: $color_highlight_basic;
background-color: $color_action_basic; background-color: $color_action_basic;
} }
} }
.a_button { .a_button {
display: inline-block; display: inline-block;
padding: $padding_basic; padding: $padding_basic;
border-radius: $radius_basic; border-radius: $radius_basic;
background-color: transparentize($color_link_basic, 0.8); background-color: transparentize($color_link_basic, 0.8);
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
border-color: transparent; border-color: transparent;
background-color: transparentize($color_highlight_basic, 0.8); background-color: transparentize($color_highlight_basic, 0.8);
} }
} }
.a_button_text { .a_button_text {
@extend .a_button; @extend .a_button;
padding: $padding_link; padding: $padding_link;
color: $color_text_basic; color: $color_text_basic;
background-color: transparent; background-color: transparent;
} }
.a_button_border { .a_button_border {
@extend .a_button_text; @extend .a_button_text;
border: $border_basic; border: $border_basic;
} }
// Italic, Emphasis // Italic, Emphasis
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
i, em { i, em {
font-style: italic; font-style: italic;
} }
.i_bright { .i_bright {
color: $color_highlight_basic; color: $color_highlight_basic;
font-style: normal; font-style: normal;
} }
// Bold, Strong // Bold, Strong
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
b, strong { b, strong {
font-weight: 500; // TODO maybe bolder font-weight: 500; // TODO maybe bolder
} }
// Small // Small
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
small { small {
} }
// No longer accurate or no longer relevant // No longer accurate or no longer relevant
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
s { s {
} }
// Citation // Citation
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
cite { cite {
font-style: italic; font-style: italic;
} }
// Phrasing content, quoted // Phrasing content, quoted
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
q { q {
} }
// Definition // Definition
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
dfn { dfn {
} }
// Abbreviation // Abbreviation
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
abbr { abbr {
} }
// Ruby annotations // Ruby annotations
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
ruby { ruby {
} }
rb { rb {
} }
rt { rt {
} }
rtc { rtc {
} }
rp { rp {
} }
// Machine readable data // Machine readable data
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
data { data {
} }
// Machine readable time // Machine readable time
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
time { time {
} }
// Code // Code
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
code { code {
@extend %basic_mono; @extend %basic_mono;
color: lighten($color_text_basic, $color_diff_basic); color: lighten($color_text_basic, $color_diff_basic);
background-color: lighten($color_back_basic, $color_diff_tiny); background-color: lighten($color_back_basic, $color_diff_tiny);
} }
.code_solo { .code_solo {
@extend %basic_mono; @extend %basic_mono;
padding: $space_tiny $space_half; padding: $space_tiny $space_half;
color: $color_text_basic; color: $color_text_basic;
} }
// Variable // Variable
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
var { var {
} }
// Sample // Sample
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
samp { samp {
@extend %basic_mono; @extend %basic_mono;
} }
// Keyboard input // Keyboard input
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
kbd { kbd {
@extend %basic_mono; @extend %basic_mono;
// font-size: .9em; // font-size: .9em;
// font-weight: bold; // font-weight: bold;
padding: 0 $space_half; padding: 0 $space_half;
border-width: $width_border_basic; border-width: $width_border_basic;
border-style: solid; border-style: solid;
border-color: $color_darker; border-color: $color_darker;
border-radius: $radius_basic; border-radius: $radius_basic;
color: lighten($color_text_basic, $color_diff_basic); color: lighten($color_text_basic, $color_diff_basic);
} }
// Sub- and superscript // Sub- and superscript
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
sub, sup { sub, sup {
} }
// Unarticulated, non-textual annotation // Unarticulated, non-textual annotation
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
u { u {
} }
// Marks // Marks
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
mark { mark {
background-color: $alpha_color; background-color: $alpha_color;
} }
.mark_cursor { .mark_cursor {
color: invert($color_text_basic); color: invert($color_text_basic);
background-color: $color_text_basic; background-color: $color_text_basic;
} }
::-moz-selection { ::-moz-selection {
color: invert($color_text_basic); color: invert($color_text_basic);
background-color: $color_text_basic; background-color: $color_text_basic;
} }
::selection { ::selection {
color: invert($color_text_basic); color: invert($color_text_basic);
background-color: $color_text_basic; background-color: $color_text_basic;
} }
// Text direction // Text direction
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
bdi, bdo { bdi, bdo {
} }
// Span // Span
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
span { span {
} }
.span_solo { .span_solo {
@extend %solo; @extend %solo;
} }
// Linebreaks // Linebreaks
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
br { br {
} }
wbr { wbr {
} }
// Edits // Edits
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// ins // ins
// del // del
ins { ins {
} }
del { del {
} }

6
source/style/hippie/functions/_all.scss
View file

@ -1,3 +1,3 @@
@import "color"; @import "color";
@import "shade"; @import "shade";
@import "tint"; @import "tint";

26
source/style/hippie/functions/_color.scss
View file

@ -1,13 +1,13 @@
@function createColorMap($color, $percentage, $opacity) { @function createColorMap($color, $percentage, $opacity) {
$map: ( $map: (
base: $color, base: $color,
light: lighten($color, $percentage), light: lighten($color, $percentage),
dark: darken($color, $percentage), dark: darken($color, $percentage),
trans: transparentize($color, $opacity) trans: transparentize($color, $opacity)
); );
@return $map; @return $map;
} }
@function basic_color($key: 'alpha') { @function basic_color($key: 'alpha') {
@return map-get($color_palette, $key); @return map-get($color_palette, $key);
} }

48
source/style/hippie/functions/_shade.scss
View file

@ -1,24 +1,24 @@
@charset "UTF-8"; @charset "UTF-8";
// Mixes a color with black. // Mixes a color with black.
// //
// @param {Color} $color // @param {Color} $color
// //
// @param {Number (Percentage)} $percent // @param {Number (Percentage)} $percent
// The amount of black to be mixed in. // The amount of black to be mixed in.
// //
// @example scss - Usage // @example scss - Usage
// .element { // .element {
// background-color: shade(#0c85ff, 60%); // background-color: shade(#0c85ff, 60%);
// } // }
// //
// @example css - CSS Output // @example css - CSS Output
// .element { // .element {
// background-color: #074f99; // background-color: #074f99;
// } // }
// //
// @return {Color} // @return {Color}
@function shade($color, $percent) { @function shade($color, $percent) {
@return mix(#000, $color, $percent); @return mix(#000, $color, $percent);
} }

48
source/style/hippie/functions/_tint.scss
View file

@ -1,24 +1,24 @@
@charset "UTF-8"; @charset "UTF-8";
// Mixes a color with white. // Mixes a color with white.
// //
// @param {Color} $color // @param {Color} $color
// //
// @param {Number (Percentage)} $percent // @param {Number (Percentage)} $percent
// The amount of white to be mixed in. // The amount of white to be mixed in.
// //
// @example scss - Usage // @example scss - Usage
// .element { // .element {
// background-color: tint(#0c85ff, 40%); // background-color: tint(#0c85ff, 40%);
// } // }
// //
// @example css - CSS Output // @example css - CSS Output
// .element { // .element {
// background-color: #9dceff; // background-color: #9dceff;
// } // }
// //
// @return {Color} // @return {Color}
@function tint($color, $percent) { @function tint($color, $percent) {
@return mix(#fff, $color, $percent); @return mix(#fff, $color, $percent);
} }

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

@ -1,304 +1,304 @@
// General classes // General classes
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
%size_content { %size_content {
box-sizing: content-box; box-sizing: content-box;
} }
%size_content_solo { %size_content_solo {
@extend %size_content; @extend %size_content;
*, *,
::before, ::before,
::after { ::after {
box-sizing: $box_sizing; box-sizing: $box_sizing;
} }
} }
%hidden { %hidden {
display: none; display: none;
} }
.magic { .magic {
@extend %hidden; @extend %hidden;
} }
.space_even_auto { .space_even_auto {
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }
.space_even_half { .space_even_half {
margin-right: 25%; margin-right: 25%;
margin-left: 25%; margin-left: 25%;
} }
.space_even_fourth { .space_even_fourth {
margin-right: 37.5%; margin-right: 37.5%;
margin-left: 37.5%; margin-left: 37.5%;
} }
@each $size, $variable in (basic, #{$space_basic}), @each $size, $variable in (basic, #{$space_basic}),
(small, #{$space_small}), (small, #{$space_small}),
(medium, #{$space_medium}), (medium, #{$space_medium}),
(large, #{$space_large}) { (large, #{$space_large}) {
.space_top_#{$size} { .space_top_#{$size} {
margin-top: $variable; margin-top: $variable;
} }
.space_right_#{$size} { .space_right_#{$size} {
margin-right: $variable; margin-right: $variable;
} }
.space_bottom_#{$size} { .space_bottom_#{$size} {
margin-bottom: $variable; margin-bottom: $variable;
} }
.space_left_#{$size} { .space_left_#{$size} {
margin-left: $variable; margin-left: $variable;
} }
} }
.space_left_fourth { .space_left_fourth {
margin-left: 25%; margin-left: 25%;
} }
.width_full { .width_full {
width: 100%; width: 100%;
margin-right: 0; margin-right: 0;
margin-left: 0; margin-left: 0;
} }
.width_half { .width_half {
width: 50%; width: 50%;
margin-right: 0; margin-right: 0;
margin-left: 0; margin-left: 0;
} }
.width_third { .width_third {
width: 33.3%; width: 33.3%;
margin-right: 0; margin-right: 0;
margin-left: 0; margin-left: 0;
} }
.height_basic { .height_basic {
height: 1024px; height: 1024px;
} }
.height_full { .height_full {
height: 100vh; height: 100vh;
} }
.wrap_center { .wrap_center {
& > * { & > * {
margin-right: (100% - $width_basic) / 2; margin-right: (100% - $width_basic) / 2;
margin-left: (100% - $width_basic) / 2; margin-left: (100% - $width_basic) / 2;
@include forTabletPortraitUp { @include forTabletPortraitUp {
margin-right: (100% - $width_small) / 2; margin-right: (100% - $width_small) / 2;
margin-left: (100% - $width_small) / 2; margin-left: (100% - $width_small) / 2;
} }
@include forTabletLandscapeUp { @include forTabletLandscapeUp {
margin-right: (100% - $width_medium) / 2; margin-right: (100% - $width_medium) / 2;
margin-left: (100% - $width_medium) / 2; margin-left: (100% - $width_medium) / 2;
} }
@include forBigDesktopUp { @include forBigDesktopUp {
margin-right: (100% - $width_large) / 2; margin-right: (100% - $width_large) / 2;
margin-left: (100% - $width_large) / 2; margin-left: (100% - $width_large) / 2;
} }
} }
} }
// Clearing and floating // Clearing and floating
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
.clear { .clear {
clear: both; clear: both;
&::before, &::before,
&::after { &::after {
clear: both; clear: both;
} }
} }
.overflow { .overflow {
overflow: auto; overflow: auto;
} }
.float_left { .float_left {
float: left; float: left;
} }
.float_right { .float_right {
float: right; float: right;
} }
.float_space_left { .float_space_left {
@extend .float_left; @extend .float_left;
margin-right: $space_small; margin-right: $space_small;
} }
.float_half_size { .float_half_size {
float: left; float: left;
width: 50%; width: 50%;
} }
.x_long { .x_long {
overflow-x: scroll; overflow-x: scroll;
} }
// Inlining // Inlining
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
.inline { .inline {
display: inline-block; display: inline-block;
} }
// Positioned elements // Positioned elements
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
%full_viewport { %full_viewport {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
} }
%full_parent { %full_parent {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
// width: 100%; // width: 100%;
// height: 100%; // height: 100%;
} }
.pos_abs { .pos_abs {
position: absolute; position: absolute;
} }
.pos_rel { .pos_rel {
position: relative; position: relative;
} }
.pos_fix { .pos_fix {
position: fixed; position: fixed;
} }
.pin_top { .pin_top {
top: 0; top: 0;
} }
.pin_right { .pin_right {
right: 0; right: 0;
} }
.pin_bottom { .pin_bottom {
bottom: 0; bottom: 0;
} }
.pin_left { .pin_left {
left: 0; 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);
} }
.pos_full_page { .pos_full_page {
@extend %full_parent; @extend %full_parent;
background-color: rgba($charlie_color, 0.25); background-color: rgba($charlie_color, 0.25);
} }
.hover_back_change { .hover_back_change {
background-color: $color_darker; background-color: $color_darker;
transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out;
&:hover { &:hover {
background-color: $color_back_basic; background-color: $color_back_basic;
} }
} }
.hover_full_view_change { .hover_full_view_change {
@extend %full_viewport; @extend %full_viewport;
z-index: $z_heaven; z-index: $z_heaven;
background-color: transparentize($color_darkest, 0.5); background-color: transparentize($color_darkest, 0.5);
transition: background-color $duration_long $timing_basic $duration_long; transition: background-color $duration_long $timing_basic $duration_long;
pointer-events: none; pointer-events: none;
} }
// Colors // Colors
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
.txt_color_light { .txt_color_light {
color: $color_brighter; color: $color_brighter;
} }
.txt_color_dark { .txt_color_dark {
color: $color_darker; color: $color_darker;
} }
// Text // Text
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
.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;
} }
.txt_hero { .txt_hero {
font-size: $size_hero; font-size: $size_hero;
} }
.txt_center { .txt_center {
text-align: center !important; text-align: center !important;
} }
.txt_right { .txt_right {
text-align: right !important; text-align: right !important;
} }
.txt_left { .txt_left {
text-align: left !important; text-align: left !important;
} }
.txt_top { .txt_top {
vertical-align: top !important; vertical-align: top !important;
} }
.txt_bottom { .txt_bottom {
vertical-align: bottom !important; vertical-align: bottom !important;
} }
.txt_white { .txt_white {
color: white; color: white;
} }
.txt_black { .txt_black {
color: black; color: black;
} }
.txt_gradient { .txt_gradient {
background: linear-gradient(165deg, $alpha_color 30%, $bravo_color 45%, $charlie_color 50%, $delta_color, $echo_color 80%, $foxtrot_color); background: linear-gradient(165deg, $alpha_color 30%, $bravo_color 45%, $charlie_color 50%, $delta_color, $echo_color 80%, $foxtrot_color);
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }

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

@ -1,271 +1,271 @@
// Default configuration // Default configuration
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
// TEXT // TEXT
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$size_text_basic: 17px !default; $size_text_basic: 17px !default;
$size_text_print: 10pt !default; $size_text_print: 10pt !default;
$line_basic: 1; $line_basic: 1;
// $i: 1; // $i: 1;
// @while $i < 7 { // @while $i < 7 {
// %head_#{$i} { width: 2em * $i; } // %head_#{$i} { width: 2em * $i; }
// $i: $i + 1; // $i: $i + 1;
// } // }
// $head_sizes: (h1: 3.1em, h2: 2.5em, h3: 1.8em, h4: 1.35em); // $head_sizes: (h1: 3.1em, h2: 2.5em, h3: 1.8em, h4: 1.35em);
// //
// @each $head, $size in $head_sizes { // @each $head, $size in $head_sizes {
// #{$head} { // #{$head} {
// font-size: $size; // font-size: $size;
// } // }
// } // }
// $head_sizes: ( // $head_sizes: (
// basic: ( // basic: (
// 'h1': ('font-size': 24), // 'h1': ('font-size': 24),
// 'h2': ('font-size': 20), // 'h2': ('font-size': 20),
// 'h3': ('font-size': 19), // 'h3': ('font-size': 19),
// 'h4': ('font-size': 18), // 'h4': ('font-size': 18),
// 'h5': ('font-size': 17), // 'h5': ('font-size': 17),
// 'h6': ('font-size': 16), // 'h6': ('font-size': 16),
// ), // ),
// print: ( // print: (
// 'h1': ('font-size': 48), // 'h1': ('font-size': 48),
// 'h2': ('font-size': 40), // 'h2': ('font-size': 40),
// 'h3': ('font-size': 31), // 'h3': ('font-size': 31),
// 'h4': ('font-size': 25), // 'h4': ('font-size': 25),
// 'h5': ('font-size': 20), // 'h5': ('font-size': 20),
// 'h6': ('font-size': 16), // 'h6': ('font-size': 16),
// ), // ),
// ); // );
$size_head_1: 3.1em !default; $size_head_1: 3.1em !default;
$size_head_2: 2.5em !default; $size_head_2: 2.5em !default;
$size_head_3: 1.8em !default; $size_head_3: 1.8em !default;
$size_head_4: 1.35em !default; $size_head_4: 1.35em !default;
$size_text_1: 1em; $size_text_1: 1em;
$size_text_2: 20; $size_text_2: 20;
$size_hero: $size_head_1 * 3; $size_hero: $size_head_1 * 3;
$line_text_basic: 1.28 !default; $line_text_basic: 1.28 !default;
$line_text_mono: 1.1 !default; $line_text_mono: 1.1 !default;
$line_head_basic: $line_text_basic !default; $line_head_basic: $line_text_basic !default;
$family_text_basic: #{'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default; $family_text_basic: #{'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default;
$family_text_print: #{'Times New Roman', times} !default; $family_text_print: #{'Times New Roman', times} !default;
$family_text_mono: #{'Courier New', monospace} !default; $family_text_mono: #{'Courier New', monospace} !default;
$family_head_basic: $family_text_basic !default; $family_head_basic: $family_text_basic !default;
// COLORS // COLORS
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$color_palette: ( $color_palette: (
alpha: #fad803, alpha: #fad803,
bravo: #d30a51, bravo: #d30a51,
charlie: #273f8b, charlie: #273f8b,
delta: #b7e0f0, delta: #b7e0f0,
echo: #52bed1, echo: #52bed1,
foxtrot: #0c85ff foxtrot: #0c85ff
) !default; ) !default;
@include addDefaultColors; @include addDefaultColors;
$color_diff_basic: 12% !default; $color_diff_basic: 12% !default;
$color_diff_tiny: 4% !default; $color_diff_tiny: 4% !default;
$color_diff_double: $color_diff_basic * 2; $color_diff_double: $color_diff_basic * 2;
$color_darkest: black !default; $color_darkest: black !default;
$color_brightest: white !default; $color_brightest: white !default;
$color_text_basic: black !default; $color_text_basic: black !default;
$color_back_basic: #808080 !default; $color_back_basic: #808080 !default;
$color_border_basic: lighten($color_text_basic, $color_diff_basic) !default; $color_border_basic: lighten($color_text_basic, $color_diff_basic) !default;
$color_front_basic: white !default; $color_front_basic: white !default;
$color_medium: lighten($color_darkest, 50%); $color_medium: lighten($color_darkest, 50%);
$color_dark: lighten($color_darkest, $color_diff_double); $color_dark: lighten($color_darkest, $color_diff_double);
$color_darker: darken($color_back_basic, $color_diff_basic); $color_darker: darken($color_back_basic, $color_diff_basic);
$color_brighter: lighten($color_back_basic, $color_diff_basic); $color_brighter: lighten($color_back_basic, $color_diff_basic);
$color_bright: darken($color_brightest, $color_diff_double); $color_bright: darken($color_brightest, $color_diff_double);
$color_head_basic: $color_text_basic !default; $color_head_basic: $color_text_basic !default;
$color_link_basic: $delta_color !default; $color_link_basic: $delta_color !default;
$color_highlight_basic: $color_front_basic !default; $color_highlight_basic: $color_front_basic !default;
$color_action_basic: $foxtrot_color !default; $color_action_basic: $foxtrot_color !default;
// default shadow colors // default shadow colors
// $shadow_color: fade-out($color_medium, 0.5); // $shadow_color: fade-out($color_medium, 0.5);
$color_list: (); $color_list: ();
@each $key, $value in $color_palette { @each $key, $value in $color_palette {
$map: (); $map: ();
$map: map-merge($map, ($key: createColorMap($value, 15%, 0.5)) ); $map: map-merge($map, ($key: createColorMap($value, 15%, 0.5)) );
$color_list: map-merge($color_list, $map); $color_list: map-merge($color_list, $map);
} }
// LAYOUT // LAYOUT
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$box_sizing: border-box !default; $box_sizing: border-box !default;
$z_heaven: 100 !default; $z_heaven: 100 !default;
$z_top: 10 !default; $z_top: 10 !default;
$z_basic: 1 !default; $z_basic: 1 !default;
$z_earth: -100 !default; $z_earth: -100 !default;
$width_basic: 96% !default; $width_basic: 96% !default;
$width_small: 80% !default; $width_small: 80% !default;
$width_medium: 60% !default; $width_medium: 60% !default;
$width_large: 48% !default; $width_large: 48% !default;
$width_aside_basic: 20% !default; $width_aside_basic: 20% !default;
$space_tiny: 1px !default; $space_tiny: 1px !default;
$space_basic: $space_tiny * 8 !default; $space_basic: $space_tiny * 8 !default;
$space_half: $space_basic / 2; $space_half: $space_basic / 2;
$space_double: $space_basic * 2; $space_double: $space_basic * 2;
$space_small: $space_basic * 4; $space_small: $space_basic * 4;
$space_medium: $space_basic * 8; $space_medium: $space_basic * 8;
$space_large: $space_basic * 16; $space_large: $space_basic * 16;
$margin_basic: $space_basic 0 !default; $margin_basic: $space_basic 0 !default;
$margin_double: $space_double 0 !default; $margin_double: $space_double 0 !default;
$margin_io: 0 $space_small 0 0 !default; $margin_io: 0 $space_small 0 0 !default;
$padding_basic: calc(#{$space_basic} - 3px) $space_basic !default; $padding_basic: calc(#{$space_basic} - 3px) $space_basic !default;
$padding_link: calc(#{$space_basic} - 1px) calc(#{$space_basic} * 2) !default; $padding_link: calc(#{$space_basic} - 1px) calc(#{$space_basic} * 2) !default;
$indent_basic: 2em !default; $indent_basic: 2em !default;
$border_basic: $space_tiny solid $color_border_basic; $border_basic: $space_tiny solid $color_border_basic;
$border_dotted: $space_tiny dotted $color_border_basic; $border_dotted: $space_tiny dotted $color_border_basic;
$width_border_basic: $space_tiny !default; $width_border_basic: $space_tiny !default;
$width_border_4: $width_border_basic * 4; $width_border_4: $width_border_basic * 4;
$width_border_8: $width_border_basic * 8; $width_border_8: $width_border_basic * 8;
$radius_basic: $space_tiny * 2 !default; $radius_basic: $space_tiny * 2 !default;
// IO // IO
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$io_input_list: $io_input_list:
'input[type="text"]', 'input[type="text"]',
'input[type="number"]', 'input[type="number"]',
'input[type="color"]', 'input[type="color"]',
'input[type="range"]', 'input[type="range"]',
'input[type="date"]', 'input[type="date"]',
'input[type="time"]', 'input[type="time"]',
'input[type="datetime-local"]', 'input[type="datetime-local"]',
'input[type="month"]', 'input[type="month"]',
'input[type="week"]', 'input[type="week"]',
'input[type="email"]', 'input[type="email"]',
'input[type="password"]', 'input[type="password"]',
'input[type="tel"]', 'input[type="tel"]',
'input[type="url"]', 'input[type="url"]',
'input[type="search"]', 'input[type="search"]',
'input:not([type])'; 'input:not([type])';
$io_date_list: $io_date_list:
'.io_input[type="date"]', '.io_input[type="date"]',
'.io_input[type="time"]', '.io_input[type="time"]',
'.io_input[type="datetime-local"]', '.io_input[type="datetime-local"]',
'.io_input[type="month"]', '.io_input[type="month"]',
'.io_input[type="week"]'; '.io_input[type="week"]';
$io_button_list: $io_button_list:
'button', 'button',
'input[type="button"]', 'input[type="button"]',
// 'input[type="file"]', // 'input[type="file"]',
'input[type="reset"]', 'input[type="reset"]',
'input[type="image"]', 'input[type="image"]',
'input[type="submit"]'; 'input[type="submit"]';
$io_focus_list: $io_focus_list:
'a[href]', 'a[href]',
'area[href]', 'area[href]',
'button:not([disabled])', 'button:not([disabled])',
'input:not([disabled])', 'input:not([disabled])',
'select:not([disabled])', 'select:not([disabled])',
'textarea:not([disabled])', 'textarea:not([disabled])',
'*[tabindex]'; '*[tabindex]';
$color_text_io: lighten($color_text_basic, $color_diff_basic) !default; $color_text_io: lighten($color_text_basic, $color_diff_basic) !default;
$color_text_button: $color_text_basic !default; $color_text_button: $color_text_basic !default;
$color_back_io: darken($color_front_basic, $color_diff_basic) !default; $color_back_io: darken($color_front_basic, $color_diff_basic) !default;
$color_back_button: $color_darker !default; $color_back_button: $color_darker !default;
$color_border_io: $color_front_basic !default; $color_border_io: $color_front_basic !default;
$color_border_button: $color_dark !default; $color_border_button: $color_dark !default;
$width_border_io: $space_tiny * 2 !default; $width_border_io: $space_tiny * 2 !default;
$border_io: $width_border_io solid $color_border_io; $border_io: $width_border_io solid $color_border_io;
$border_io_dotted: $width_border_io dotted $color_border_io; $border_io_dotted: $width_border_io dotted $color_border_io;
$shadow_basic: inset 0 1px 3px rgba($color_darkest, 0.06); $shadow_basic: inset 0 1px 3px rgba($color_darkest, 0.06);
$shadow_focus: $shadow_basic, 0 0 5px adjust-color($color_action_basic, $lightness: -5%, $alpha: -0.3); $shadow_focus: $shadow_basic, 0 0 5px adjust-color($color_action_basic, $lightness: -5%, $alpha: -0.3);
// ANIMATIONS // ANIMATIONS
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$duration_basic: 250ms !default; $duration_basic: 250ms !default;
$duration_double: $duration_basic * 2; $duration_double: $duration_basic * 2;
$duration_long: 2s !default; $duration_long: 2s !default;
$timing_basic: ease-out !default; $timing_basic: ease-out !default;
// HARDWARE BREAKPOINTS // HARDWARE BREAKPOINTS
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$screen_tiny: 768px; $screen_tiny: 768px;
$screen_small: 1024px; $screen_small: 1024px;
$screen_medium: 1280px; $screen_medium: 1280px;
$screen_large: 1440px; $screen_large: 1440px;
$screen_huge: 1680px; $screen_huge: 1680px;
$screen_gigantic: 1920px; $screen_gigantic: 1920px;
// VENDOR PREFIX // VENDOR PREFIX
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$prefix_defaults: -moz- -webkit- -o- -ms- ''; $prefix_defaults: -moz- -webkit- -o- -ms- '';
$webkit_support: -webkit- ''; $webkit_support: -webkit- '';
$moz_support: -moz- ''; $moz_support: -moz- '';
$ms_support: -ms- ''; $ms_support: -ms- '';
$moz_webkit_support: -moz- -webkit- ''; $moz_webkit_support: -moz- -webkit- '';
$moz_ms_support: -moz- -ms- ''; $moz_ms_support: -moz- -ms- '';
$webkit_ms_support: -webkit- -ms- ''; $webkit_ms_support: -webkit- -ms- '';
// SYMBOLS // SYMBOLS
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$icons: ( $icons: (
glass: "\f000", glass: "\f000",
music: "\f001", music: "\f001",
search: "\f002", search: "\f002",
envelope-o: "\f003", envelope-o: "\f003",
heart: "\f004" heart: "\f004"
); );
@each $name, $icon in $icons { @each $name, $icon in $icons {
.sym_#{$name}::before { .sym_#{$name}::before {
content: $icon; content: $icon;
} }
} }
// USER AGENT // USER AGENT
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$no_agent_focus: true; $no_agent_focus: true;
@include overrideUserAgent; @include overrideUserAgent;

120
source/style/hippie/global/_typography.scss
View file

@ -1,60 +1,60 @@
// Basic styles // Basic styles
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
%basic { %basic {
font-family: $family_text_basic; font-family: $family_text_basic;
font-size: $size_text_1; font-size: $size_text_1;
line-height: $line_text_basic; line-height: $line_text_basic;
} }
%basic_mono { %basic_mono {
font-family: $family_text_mono; font-family: $family_text_mono;
font-size: $size_text_1; font-size: $size_text_1;
line-height: $line_text_mono; line-height: $line_text_mono;
} }
%basic_print { %basic_print {
font-family: $family_text_print; font-family: $family_text_print;
font-size: $size_text_1; font-size: $size_text_1;
line-height: $line_text_basic; line-height: $line_text_basic;
} }
%head_all { %head_all {
color: $color_head_basic; color: $color_head_basic;
font-family: $family_head_basic; font-family: $family_head_basic;
line-height: $line_head_basic; line-height: $line_head_basic;
} }
%head_1 { %head_1 {
font-size: $size_head_1; font-size: $size_head_1;
font-weight: 300; font-weight: 300;
} }
%head_2 { %head_2 {
font-size: $size_head_2; font-size: $size_head_2;
font-weight: 300; font-weight: 300;
} }
%head_3 { %head_3 {
font-size: $size_head_3; font-size: $size_head_3;
font-weight: 300; font-weight: 300;
} }
%head_4 { %head_4 {
font-size: $size_head_4; font-size: $size_head_4;
font-weight: 300; font-weight: 300;
} }
%basic_button { %basic_button {
@extend %basic; @extend %basic;
} }
%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
} }

10
source/style/hippie/mixins/_all.scss
View file

@ -1,5 +1,5 @@
@import "media_query"; @import "media_query";
@import "sprite"; @import "sprite";
@import "flow"; @import "flow";
@import "color"; @import "color";
@import "user_agent"; @import "user_agent";

40
source/style/hippie/mixins/_color.scss
View file

@ -1,20 +1,20 @@
@mixin addDefaultColors() { @mixin addDefaultColors() {
@if map-has-key($color_palette, alpha) { @if map-has-key($color_palette, alpha) {
$alpha_color: map-get($color_palette, alpha) !global; $alpha_color: map-get($color_palette, alpha) !global;
} }
@if map-has-key($color_palette, bravo) { @if map-has-key($color_palette, bravo) {
$bravo_color: map-get($color_palette, bravo) !global; $bravo_color: map-get($color_palette, bravo) !global;
} }
@if map-has-key($color_palette, charlie) { @if map-has-key($color_palette, charlie) {
$charlie_color: map-get($color_palette, charlie) !global; $charlie_color: map-get($color_palette, charlie) !global;
} }
@if map-has-key($color_palette, delta) { @if map-has-key($color_palette, delta) {
$delta_color: map-get($color_palette, delta) !global; $delta_color: map-get($color_palette, delta) !global;
} }
@if map-has-key($color_palette, echo) { @if map-has-key($color_palette, echo) {
$echo_color: map-get($color_palette, echo) !global; $echo_color: map-get($color_palette, echo) !global;
} }
@if map-has-key($color_palette, foxtrot) { @if map-has-key($color_palette, foxtrot) {
$foxtrot_color: map-get($color_palette, foxtrot) !global; $foxtrot_color: map-get($color_palette, foxtrot) !global;
} }
} }

50
source/style/hippie/mixins/_flow.scss
View file

@ -1,25 +1,25 @@
@charset "UTF-8"; @charset "UTF-8";
// Provides an easy way to include a clearflow for containing floats. // Provides an easy way to include a clearflow for containing floats.
// //
// @link http://cssmojo.com/latest_new_clearfix_so_far/ // @link http://cssmojo.com/latest_new_clearfix_so_far/
// //
// @example scss - Usage // @example scss - Usage
// .element { // .element {
// @include clearFlow; // @include clearFlow;
// } // }
// //
// @example css - CSS Output // @example css - CSS Output
// .element::after { // .element::after {
// content: ""; // content: "";
// clear: both; // clear: both;
// display: table; // display: table;
// } // }
@mixin clearFlow { @mixin clearFlow {
&::after { &::after {
content: ""; content: "";
clear: both; clear: both;
display: table; display: table;
} }
} }

76
source/style/hippie/mixins/_media_query.scss
View file

@ -1,38 +1,38 @@
//Sections for Media Queries //Sections for Media Queries
@mixin forPhoneUp { @mixin forPhoneUp {
@media (min-width: #{$screen_tiny - 1}) { @content; } //599px @media (min-width: #{$screen_tiny - 1}) { @content; } //599px
} }
@mixin forPhoneOnly { @mixin forPhoneOnly {
@media (max-width: #{$screen_tiny - 1}) { @content; } //599px @media (max-width: #{$screen_tiny - 1}) { @content; } //599px
} }
@mixin forTabletPortraitUp { @mixin forTabletPortraitUp {
@media (min-width: $screen_small) { @content; } //600px @media (min-width: $screen_small) { @content; } //600px
} }
@mixin forTabletPortraitOnly { @mixin forTabletPortraitOnly {
@media (min-width: $screen_tiny) and (max-width: #{$screen_small - 1}) { @content; } //600px - 899px @media (min-width: $screen_tiny) and (max-width: #{$screen_small - 1}) { @content; } //600px - 899px
} }
@mixin forTabletLandscapeUp { @mixin forTabletLandscapeUp {
@media (min-width: $screen_small) { @content; } //900px @media (min-width: $screen_small) { @content; } //900px
} }
@mixin forTabletLandscapeOnly { @mixin forTabletLandscapeOnly {
@media (min-width: $screen_small) and (max-width: #{$screen_medium - 1}) { @content; } //900px - 1199px @media (min-width: $screen_small) and (max-width: #{$screen_medium - 1}) { @content; } //900px - 1199px
} }
@mixin forDesktopUp { @mixin forDesktopUp {
@media (min-width: $screen_medium) { @content; } //1200px @media (min-width: $screen_medium) { @content; } //1200px
} }
@mixin forDesktopOnly { @mixin forDesktopOnly {
@media (min-width: $screen_medium) and (max-width: #{$screen_huge - 1}) { @content; } //1200px - 1799px @media (min-width: $screen_medium) and (max-width: #{$screen_huge - 1}) { @content; } //1200px - 1799px
} }
@mixin forBigDesktopUp { @mixin forBigDesktopUp {
@media (min-width: $screen_huge) { @content; } //1800px @media (min-width: $screen_huge) { @content; } //1800px
} }
//Mobile-first Media Query //Mobile-first Media Query
@mixin goingLarge($width) { @mixin goingLarge($width) {
@media (min-width: $width/16+em) { @content; } @media (min-width: $width/16+em) { @content; }
} }
//Desktop-first Media Query //Desktop-first Media Query
@mixin goingSmall($width) { @mixin goingSmall($width) {
@media (max-width: $width/16+em) { @content; } @media (max-width: $width/16+em) { @content; }
} }

18
source/style/hippie/mixins/_user_agent.scss
View file

@ -1,9 +1,9 @@
@mixin overrideUserAgent() { @mixin overrideUserAgent() {
@if $no_agent_focus == true { @if $no_agent_focus == true {
@each $el in $io_focus_list { @each $el in $io_focus_list {
#{$el}:focus { #{$el}:focus {
outline: 0; outline: 0;
} }
} }
} }
} }

46
source/style/hippie/modules/_vendor.scss
View file

@ -1,23 +1,23 @@
/** /**
* @description * @description
* Generates cross-browser-compatible output for a given element with its value. * Generates cross-browser-compatible output for a given element with its value.
* *
* @author sthag * @author sthag
* *
* @param values * @param values
* @returns * @returns
* -webkit-<name>: <values> * -webkit-<name>: <values>
* ...-<name>: <values> * ...-<name>: <values>
* *
* @example * @example
* .selector * .selector
* @include vendor-prefix(hyphens, auto) * @include vendor-prefix(hyphens, auto)
*/ */
@mixin vendor-prefix($name, $argument) { @mixin vendor-prefix($name, $argument) {
-webkit-#{$name}: #{$argument}; -webkit-#{$name}: #{$argument};
-ms-#{$name}: #{$argument}; -ms-#{$name}: #{$argument};
-moz-#{$name}: #{$argument}; -moz-#{$name}: #{$argument};
-o-#{$name}: #{$argument}; -o-#{$name}: #{$argument};
#{$name}: #{$argument}; #{$name}: #{$argument};
} }

94
source/style/hippie/modules/breakpoint/_breakpoint_module.scss
View file

@ -1,47 +1,47 @@
.query_goingLarge { .query_goingLarge {
@include goingLarge($screen_tiny) {}; @include goingLarge($screen_tiny) {};
} }
.query_goingSmall { .query_goingSmall {
@include goingSmall($screen_gigantic) {}; @include goingSmall($screen_gigantic) {};
} }
.query_phoneUp { .query_phoneUp {
@include forPhoneUp {} @include forPhoneUp {}
} }
.query_phoneOnly { .query_phoneOnly {
@include forPhoneOnly {} @include forPhoneOnly {}
} }
.query_tabletPortaitOnly { .query_tabletPortaitOnly {
@include forTabletPortraitOnly { @include forTabletPortraitOnly {
} }
} }
.query_tabletPortraitUp { .query_tabletPortraitUp {
@include forTabletPortraitUp { @include forTabletPortraitUp {
} }
} }
.query_tabletLandscapeOnly { .query_tabletLandscapeOnly {
@include forTabletLandscapeOnly {} @include forTabletLandscapeOnly {}
} }
.query_tabletLandscapeUp { .query_tabletLandscapeUp {
@include forTabletLandscapeUp {} @include forTabletLandscapeUp {}
} }
.query_desktopOnly { .query_desktopOnly {
@include forDesktopOnly { @include forDesktopOnly {
} }
} }
.query_desktopUp { .query_desktopUp {
@include forDesktopUp { @include forDesktopUp {
} }
} }
.query_bigDesktopUp { .query_bigDesktopUp {
@include forBigDesktopUp {} @include forBigDesktopUp {}
} }

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

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

46
source/style/hippie/modules/editor/_editor_module.scss
View file

@ -1,23 +1,23 @@
// Custom extends and mixins // Custom extends and mixins
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
@import "mixins"; @import "mixins";
@import "extends"; @import "extends";
// Editor module styles // Editor module styles
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
%wip { %wip {
border-right: $space_basic solid rgba(crimson, 0.8); border-right: $space_basic solid rgba(crimson, 0.8);
background-color: rgba(crimson, 0.1) !important; background-color: rgba(crimson, 0.1) !important;
} }
.wip { .wip {
@extend %wip; @extend %wip;
&::before, &::after { &::before, &::after {
content: ""; content: "";
display: block; display: block;
height: 48px; height: 48px;
} }
} }
.wip_txt { .wip_txt {
@extend %wip; @extend %wip;
} }

230
source/style/hippie/modules/explanation/_explanation_module.scss
View file

@ -1,115 +1,115 @@
// Custom extends and mixins // Custom extends and mixins
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
@import "mixins"; @import "mixins";
@import "extends"; @import "extends";
// Explanation module styles // Explanation module styles
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
%expose_after { %expose_after {
&::after { &::after {
content: ""; content: "";
display: block; display: block;
height: 48px; height: 48px;
background-color: rgba($delta_color, 0.1) !important; background-color: rgba($delta_color, 0.1) !important;
} }
} }
%expose_before { %expose_before {
&::before { &::before {
content: ""; content: "";
display: block; display: block;
height: 48px; height: 48px;
background-color: rgba($delta_color, 0.1) !important; background-color: rgba($delta_color, 0.1) !important;
} }
} }
%expose { %expose {
&::before, &::after { &::before, &::after {
content: ""; content: "";
display: block; display: block;
height: 48px; height: 48px;
background-color: rgba($delta_color, 0.1) !important; background-color: rgba($delta_color, 0.1) !important;
} }
} }
%exp { %exp {
} }
%exp_hidden { %exp_hidden {
display: none; display: none;
} }
.exp_wrap { .exp_wrap {
position: relative; position: relative;
} }
.exp_pop { .exp_pop {
@extend %exp_hidden !optional; @extend %exp_hidden !optional;
position: absolute; position: absolute;
z-index: 100; z-index: 100;
top: $space_large; top: $space_large;
left: $space_large; left: $space_large;
padding: $space_half; padding: $space_half;
border: 4px solid $color_back_basic; border: 4px solid $color_back_basic;
border-radius: 4px; border-radius: 4px;
background-color: $color_back_basic; background-color: $color_back_basic;
pointer-events: none; pointer-events: none;
} }
.exp_marker_pop { .exp_marker_pop {
position: absolute; position: absolute;
top: -$size_text_basic / 4 * 3; top: -$size_text_basic / 4 * 3;
right: -$size_text_basic / 2; right: -$size_text_basic / 2;
width: $size_text_basic; width: $size_text_basic;
height: $size_text_basic; height: $size_text_basic;
border: $space_tiny solid $color_highlight_basic; border: $space_tiny solid $color_highlight_basic;
border-radius: $size_text_basic; border-radius: $size_text_basic;
color: $color_highlight_basic; color: $color_highlight_basic;
background-color: $color_darkest; background-color: $color_darkest;
} }
.exp_expose { .exp_expose {
@extend %expose !optional; @extend %expose !optional;
} }
.exp_expose_pre { .exp_expose_pre {
@extend %expose_after; @extend %expose_after;
} }
.exp_expose_post { .exp_expose_post {
@extend %expose_before; @extend %expose_before;
} }
.exp_overlay_btn { .exp_overlay_btn {
position: fixed; position: fixed;
width: 3em; width: 3em;
height: 2em; height: 2em;
// padding: $space_basic $space_basic * 2; // padding: $space_basic $space_basic * 2;
cursor: pointer; cursor: pointer;
} }
.exp_help_btn { .exp_help_btn {
display: table; display: table;
right: $space_double; right: $space_double;
bottom: $space_double; bottom: $space_double;
background-color: rgba($color_darkest, 0.4); background-color: rgba($color_darkest, 0.4);
&:hover { &:hover {
background-color: $color_brightest; background-color: $color_brightest;
> .span_solo { > .span_solo {
color: $color_darkest; color: $color_darkest;
} }
} }
.span_solo { .span_solo {
display: table-cell; display: table-cell;
color: rgba($color_brightest, 0.8); color: rgba($color_brightest, 0.8);
font-family: $family_text_mono; font-family: $family_text_mono;
font-size: 1.4em; font-size: 1.4em;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
} }
} }
.expose_height { .expose_height {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: rgba($delta_color, 0.1) !important; background-color: rgba($delta_color, 0.1) !important;
@include vendor-prefix(transition, height 0.5s ease); @include vendor-prefix(transition, height 0.5s ease);
} }

38
source/style/hippie/modules/maintenance/_maintenance_module.scss
View file

@ -1,19 +1,19 @@
.body_status { .body_status {
@extend .sec_main_status; @extend .sec_main_status;
height: 100vh; height: 100vh;
border-color: $foxtrot_color; border-color: $foxtrot_color;
.main_site { .main_site {
@extend .wrap_center; @extend .wrap_center;
& > h1:first-of-type { & > h1:first-of-type {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
font-weight: bold; font-weight: bold;
line-height: 1; line-height: 1;
} }
& > h1 + h3 { & > h1 + h3 {
margin-top: 0; margin-top: 0;
margin-bottom: $space_small; margin-bottom: $space_small;
} }
} }
} }

8
source/style/hippie/modules/media/_media_module.scss
View file

@ -1,4 +1,4 @@
.nomedia { .nomedia {
@extend .box_placeholder; @extend .box_placeholder;
height: inherit; height: inherit;
} }

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

@ -1,171 +1,171 @@
nav { nav {
ul { ul {
padding-left: 0; padding-left: 0;
} }
li { li {
margin-bottom: $space_basic; margin-bottom: $space_basic;
list-style: none; list-style: none;
} }
} }
.nav_horizontal { .nav_horizontal {
ul { ul {
@extend .overflow; @extend .overflow;
ul { ul {
margin: $space_basic 0; margin: $space_basic 0;
} }
li { li {
@extend .float_space_left; @extend .float_space_left;
margin-right: $space_basic; margin-right: $space_basic;
margin-bottom: 0; margin-bottom: 0;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }
} }
} }
.nav_right { .nav_right {
float: right; float: right;
margin-left: $space_basic; margin-left: $space_basic;
.align_parent { .align_parent {
margin-right: $space_basic * -1; margin-right: $space_basic * -1;
} }
} }
.nav_separate { .nav_separate {
li { li {
position: relative; position: relative;
padding-left: $space_tiny; padding-left: $space_tiny;
&:not(:first-child) { &:not(:first-child) {
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
width: $space_tiny; width: $space_tiny;
height: 100%; height: 100%;
left: 0; left: 0;
top: 0; top: 0;
background-color: $color_border_basic; background-color: $color_border_basic;
} }
} }
} }
} }
.nav_separate_right { .nav_separate_right {
float: right; float: right;
li { li {
position: relative; position: relative;
&:first-child { &:first-child {
padding-left: $space_basic * 2 + $space_tiny; padding-left: $space_basic * 2 + $space_tiny;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
width: $space_tiny; width: $space_tiny;
height: 100%; height: 100%;
left: 0; left: 0;
top: 0; top: 0;
background-color: $color_front_basic; background-color: $color_front_basic;
margin: 0 $space_basic; margin: 0 $space_basic;
} }
} }
} }
} }
.nav_center_old { .nav_center_old {
@extend .nav_horizontal; @extend .nav_horizontal;
float: right; float: right;
position: relative; position: relative;
left: -50%; left: -50%;
ul { ul {
position: relative; position: relative;
left: 50%; left: 50%;
text-align: center; text-align: center;
} }
} }
.nav_column { .nav_column {
position: relative; position: relative;
margin: $space_basic 0; margin: $space_basic 0;
ul { ul {
@extend .flex; @extend .flex;
margin: 0 $space_large; margin: 0 $space_large;
li { li {
@extend .flex_child; @extend .flex_child;
flex-grow: 1; flex-grow: 1;
margin: 0; margin: 0;
text-align: center; text-align: center;
a { a {
display: block; display: block;
} }
} }
} }
} }
.nav_page_meta { .nav_page_meta {
position: fixed; position: fixed;
// display: table; // display: table;
// width: 3em; // width: 3em;
right: $space_half; right: $space_half;
bottom: $space_double; bottom: $space_double;
ul { ul {
margin: $space_basic 0; margin: $space_basic 0;
} }
li { li {
margin-bottom: 0; margin-bottom: 0;
line-height: 1; line-height: 1;
} }
button { button {
width: 32px; width: 32px;
margin-right: 0; margin-right: 0;
margin-left: 0; margin-left: 0;
} }
.a_button_meta { .a_button_meta {
// display: table-cell; // display: table-cell;
display: inline-block; display: inline-block;
&:active, &:active,
&:focus { &:focus {
background-color: transparent; background-color: transparent;
} }
&:hover { &:hover {
background-color: $color_action_basic; background-color: $color_action_basic;
} }
} }
.sprite_img { .sprite_img {
vertical-align: top; vertical-align: top;
} }
} }
.header_page { .header_page {
nav { nav {
@extend .nav_horizontal; @extend .nav_horizontal;
a { a {
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
background-color: rgba($color_text_basic, 0.2); background-color: rgba($color_text_basic, 0.2);
color: $color_text_basic; color: $color_text_basic;
} }
} }
} }
} }

256
source/style/hippie/modules/print/_print_module.scss
View file

@ -1,128 +1,128 @@
// Custom extends and mixins // Custom extends and mixins
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
@import "mixins"; @import "mixins";
@import "extends"; @import "extends";
// Print module styles // Print module styles
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
%paper { %paper {
background-color: $color_front_basic; background-color: $color_front_basic;
} }
$a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm; $a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm;
$a5: ".dina5" 0 0 0 1.2cm; $a5: ".dina5" 0 0 0 1.2cm;
$a6: ".dina6" 0 0 0 1.2cm; $a6: ".dina6" 0 0 0 1.2cm;
$din: $a4, $a5, $a6; $din: $a4, $a5, $a6;
.print_body { .print_body {
font-size: $size_text_print; font-size: $size_text_print;
margin: 10vh 20vw; margin: 10vh 20vw;
@page { @page {
size: A4; size: A4;
margin: 1.2cm; margin: 1.2cm;
} }
@page:first { @page:first {
size: A4; size: A4;
margin: 0; margin: 0;
} }
@each $space in $din { @each $space in $din {
#{nth($space, 1)} { #{nth($space, 1)} {
padding-top: nth($space, 2); padding-top: nth($space, 2);
padding-right: nth($space, 3); padding-right: nth($space, 3);
padding-bottom: nth($space, 4); padding-bottom: nth($space, 4);
padding-left: nth($space, 5); padding-left: nth($space, 5);
.page_head, .page_foot { .page_head, .page_foot {
right: nth($space, 3); right: nth($space, 3);
left: nth($space, 5); left: nth($space, 5);
} }
.page_head { .page_head {
top: nth($space, 2); top: nth($space, 2);
} }
.page_foot { .page_foot {
bottom: nth($space, 4); bottom: nth($space, 4);
} }
} }
} }
*[class^="din"] { *[class^="din"] {
@extend %paper; @extend %paper;
position: relative; position: relative;
overflow: auto; overflow: auto;
p { p {
@extend %basic_print; @extend %basic_print;
} }
.page_head, .page_foot { .page_head, .page_foot {
position: absolute; position: absolute;
} }
.page_head { .page_head {
page: cover; page: cover;
} }
.page_foot { .page_foot {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
*:last-child { *:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
p { p {
flex: 1 0 auto; flex: 1 0 auto;
margin: 0; margin: 0;
font-size: 8pt; font-size: 8pt;
line-height: 10pt; line-height: 10pt;
text-align: center; text-align: center;
} }
.page_no { .page_no {
flex: 1 0 auto; flex: 1 0 auto;
font-size: 20pt; font-size: 20pt;
line-height: 1; line-height: 1;
text-align: right; text-align: right;
} }
p:first-child { p:first-child {
text-align: left; text-align: left;
} }
} }
.page_content { .page_content {
margin-top: 10cm; margin-top: 10cm;
margin-bottom: 2cm; margin-bottom: 2cm;
} }
margin: $space_small auto; margin: $space_small auto;
} }
.page_title, .page_date { .page_title, .page_date {
font-size: 14pt; font-size: 14pt;
} }
.page_title { .page_title {
margin: 0; margin: 0;
} }
.page_date, .page_no { .page_date, .page_no {
@extend %head_1; @extend %head_1;
float: right; float: right;
} }
.page_author { .page_author {
position: absolute; position: absolute;
top: 5cm; top: 5cm;
right: 0; right: 0;
text-align: right; text-align: right;
} }
.page_recipient { .page_recipient {
position: absolute; position: absolute;
top: 5cm; top: 5cm;
left: 0; left: 0;
} }
} }

136
source/style/hippie/modules/tables/_tables_module.scss
View file

@ -1,68 +1,68 @@
.table_link { .table_link {
width: 100%; width: 100%;
border: 0; border: 0;
table-layout: auto; table-layout: auto;
tbody { tbody {
border-bottom: $border_basic; border-bottom: $border_basic;
&:hover { &:hover {
background-color: $color_bright; background-color: $color_bright;
} }
} }
th, td { th, td {
border: 0; border: 0;
} }
.cell_icon { .cell_icon {
width: 48px; width: 48px;
text-align: center; text-align: center;
img { img {
vertical-align: text-top; vertical-align: text-top;
} }
} }
.cell_link { .cell_link {
padding-right: $space_basic; padding-right: $space_basic;
padding-left: $space_basic; padding-left: $space_basic;
&:hover { &:hover {
background-color: $foxtrot_color; background-color: $foxtrot_color;
a:first-child { a:first-child {
display: none; display: none;
} }
a:last-child { a:last-child {
display: block; display: block;
color: $color_highlight_basic; color: $color_highlight_basic;
} }
} }
a { a {
display: block; display: block;
} }
a:last-child { a:last-child {
display: none; display: none;
} }
} }
th:last-child, .cell_date { th:last-child, .cell_date {
width: 16%; width: 16%;
text-align: center; text-align: center;
} }
.cell_text { .cell_text {
padding-right: $space_basic; padding-right: $space_basic;
padding-left: $space_basic; padding-left: $space_basic;
div { div {
width: 100%; width: 100%;
} }
.shorten { .shorten {
@extend %short; @extend %short;
max-height: 44px; max-height: 44px;
} }
} }
} }

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

@ -1,252 +1,252 @@
.demo__intro { .demo__intro {
@extend .sec_main_center; @extend .sec_main_center;
@extend .sec_main_status; @extend .sec_main_status;
} }
.demo__status { .demo__status {
@extend .sec_main_status; @extend .sec_main_status;
position: relative; position: relative;
min-height: 50vh; min-height: 50vh;
border-color: $foxtrot_color; border-color: $foxtrot_color;
h1:first-of-type { h1:first-of-type {
margin-top: 0; margin-top: 0;
font-weight: bold; font-weight: bold;
} }
@media (max-height: 512px) { @media (max-height: 512px) {
.pos_abs { .pos_abs {
position: static !important; position: static !important;
} }
} }
} }
.demo__header { .demo__header {
padding: $space_double; padding: $space_double;
nav { nav {
ul { ul {
margin: 0; margin: 0;
} }
} }
} }
.header_fancy { .header_fancy {
background-color: transparentize($bravo_color, 0.4); background-color: transparentize($bravo_color, 0.4);
nav { nav {
a { a {
background-color: transparentize($alpha_color, 0.4); background-color: transparentize($alpha_color, 0.4);
color: $alpha_color; color: $alpha_color;
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
background-color: rgba($color_brightest, 0.2); background-color: rgba($color_brightest, 0.2);
color: $color_brightest; color: $color_brightest;
} }
} }
} }
} }
.header_fix { .header_fix {
position: relative; position: relative;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
background-color: transparentize($charlie_color, 0.4); background-color: transparentize($charlie_color, 0.4);
nav { nav {
a { a {
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
background-color: rgba($color_brightest, 0.2); background-color: rgba($color_brightest, 0.2);
color: $color_brightest; color: $color_brightest;
} }
} }
} }
} }
.demo__footer { .demo__footer {
width: 100%; width: 100%;
// height: 128px; // height: 128px;
padding: $space_double 0; padding: $space_double 0;
background-color: $color_dark; background-color: $color_dark;
color: $color_bright; color: $color_bright;
nav { nav {
a { a {
color: $color_brightest; color: $color_brightest;
} }
} }
} }
.demo__sprite_down { .demo__sprite_down {
@include sprite($down); @include sprite($down);
// width: 32px; // width: 32px;
// height: 32px; // height: 32px;
// background-image: url(../art/sprites.png); // background-image: url(../art/sprites.png);
// background-position: -32px 0; // background-position: -32px 0;
} }
.demo__sprite_up { .demo__sprite_up {
@include sprite($up); @include sprite($up);
// width: 32px; // width: 32px;
// height: 64px; // height: 64px;
// background-image: url(../art/sprites.png); // background-image: url(../art/sprites.png);
// background-position: 0 0; // background-position: 0 0;
} }
.demo__sprite_meta { .demo__sprite_meta {
@include sprite($meta); @include sprite($meta);
// width: 32px; // width: 32px;
// height: 32px; // height: 32px;
// background-image: url(../art/sprites.png); // background-image: url(../art/sprites.png);
// background-position: -32px 32px; // background-position: -32px 32px;
} }
.demo__avatar { .demo__avatar {
img { img {
opacity: 1; opacity: 1;
width: 128px; width: 128px;
height: auto; height: auto;
min-width: 128px; min-width: 128px;
min-height: 128px; min-height: 128px;
border-radius: 50%; border-radius: 50%;
background-color: $delta_color; background-color: $delta_color;
} }
} }
.demo__flag { .demo__flag {
height: 40vh; height: 40vh;
} }
.demo__credits { .demo__credits {
margin: $space_small 0 $space_basic 0; margin: $space_small 0 $space_basic 0;
} }
.demo__button_32 { .demo__button_32 {
width: 32px; width: 32px;
height: 32px; height: 32px;
} }
.demo__queries > p { .demo__queries > p {
padding: $padding_basic; padding: $padding_basic;
} }
.query_phoneUp { .query_phoneUp {
@include forPhoneUp {background-color: rgba($color_text_basic, 0.2)}; @include forPhoneUp {background-color: rgba($color_text_basic, 0.2)};
} }
.query_phoneOnly { .query_phoneOnly {
@include forPhoneOnly { background-color: rgba($color_text_basic, 0.2); } @include forPhoneOnly { background-color: rgba($color_text_basic, 0.2); }
} }
.query_tabletPortaitOnly { .query_tabletPortaitOnly {
@include forTabletPortraitOnly { background-color: rgba($color_text_basic, 0.2); } @include forTabletPortraitOnly { background-color: rgba($color_text_basic, 0.2); }
} }
.query_tabletPortraitUp { .query_tabletPortraitUp {
@include forTabletPortraitUp { background-color: rgba($color_text_basic, 0.2); } @include forTabletPortraitUp { background-color: rgba($color_text_basic, 0.2); }
} }
.query_tabletLandscapeOnly { .query_tabletLandscapeOnly {
@include forTabletLandscapeOnly { background-color: rgba($color_text_basic, 0.2); } @include forTabletLandscapeOnly { background-color: rgba($color_text_basic, 0.2); }
} }
.query_tabletLandscapeUp { .query_tabletLandscapeUp {
@include forTabletLandscapeUp { background-color: rgba($color_text_basic, 0.2); } @include forTabletLandscapeUp { background-color: rgba($color_text_basic, 0.2); }
} }
.query_desktopOnly { .query_desktopOnly {
@include forDesktopOnly { background-color: rgba($color_text_basic, 0.2); } @include forDesktopOnly { background-color: rgba($color_text_basic, 0.2); }
} }
.query_desktopUp { .query_desktopUp {
@include forDesktopUp { background-color: rgba($color_text_basic, 0.2); } @include forDesktopUp { background-color: rgba($color_text_basic, 0.2); }
} }
.query_bigDesktopUp { .query_bigDesktopUp {
@include forBigDesktopUp { background-color: rgba($color_text_basic, 0.2); } @include forBigDesktopUp { background-color: rgba($color_text_basic, 0.2); }
} }
.demo__query_example { .demo__query_example {
@include goingLarge($screen_tiny/1px) {background-color: $alpha_color; } @include goingLarge($screen_tiny/1px) {background-color: $alpha_color; }
@include goingLarge($screen_small/1px) {background-color: $bravo_color; } @include goingLarge($screen_small/1px) {background-color: $bravo_color; }
@include goingLarge($screen_medium/1px) {background-color: $charlie_color; } @include goingLarge($screen_medium/1px) {background-color: $charlie_color; }
@include goingLarge($screen_large/1px) {background-color: $delta_color; } @include goingLarge($screen_large/1px) {background-color: $delta_color; }
@include goingLarge($screen_huge/1px) {background-color: $echo_color; } @include goingLarge($screen_huge/1px) {background-color: $echo_color; }
@include goingLarge($screen_gigantic/1px) {background-color: $foxtrot_color; } @include goingLarge($screen_gigantic/1px) {background-color: $foxtrot_color; }
margin-bottom: $space_small; margin-bottom: $space_small;
padding: $space_small; padding: $space_small;
text-align: center; text-align: center;
&:after { &:after {
@extend code; @extend code;
@include goingLarge($screen_tiny/1px) { @include goingLarge($screen_tiny/1px) {
& { content: '768px'; } & { content: '768px'; }
} }
@include goingLarge($screen_small/1px) { @include goingLarge($screen_small/1px) {
& { content: '1024px'; } & { content: '1024px'; }
} }
@include goingLarge($screen_medium/1px) { @include goingLarge($screen_medium/1px) {
& { content: '1280px'; } & { content: '1280px'; }
} }
@include goingLarge($screen_huge/1px) { @include goingLarge($screen_huge/1px) {
& { content: '1680px'; } & { content: '1680px'; }
} }
@include goingLarge($screen_gigantic/1px) { @include goingLarge($screen_gigantic/1px) {
& { content: '1920px'; } & { content: '1920px'; }
} }
content: '< 768px'; content: '< 768px';
padding: $padding_basic; padding: $padding_basic;
border-radius: $radius_basic; border-radius: $radius_basic;
color: $color_brightest; color: $color_brightest;
background-color: rgba($color_front_basic, 0.2); background-color: rgba($color_front_basic, 0.2);
} }
} }
// Tables // Tables
.demo__td_no_bl { .demo__td_no_bl {
border-left: none; border-left: none;
} }
.demo__td_no_br { .demo__td_no_br {
border-right: none; border-right: none;
} }
.demo__td_pr { .demo__td_pr {
padding-right: $space_double; padding-right: $space_double;
} }
.demo__td_pl { .demo__td_pl {
padding-left: $space_double; padding-left: $space_double;
} }
// Index // Index
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
.wrap { .wrap {
display: flex; display: flex;
// height: 100%; // height: 100%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.hello { .hello {
flex: 0 1 auto; flex: 0 1 auto;
width: 80%; width: 80%;
ul { ul {
padding: 1em 5em; padding: 1em 5em;
background-color: $color_darker; background-color: $color_darker;
} }
} }

58
source/templates/demo/_default.njk
View file

@ -1,29 +1,29 @@
<!-- template-default.njk --> <!-- template-default.njk -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
{% block head %} {% block head %}
<title>{% block title %}{% endblock %} - HIPPIE</title> <title>{% block title %}{% endblock %} - HIPPIE</title>
{% include "demo/partials/_meta.njk" %} {% include "demo/partials/_meta.njk" %}
{% block link %}{% endblock %} {% block link %}{% endblock %}
<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="{{ pageClass }}"> <body id="{{ pageId }}" class="{{ pageClass }}">
{% block body %}{% endblock %} {% block body %}{% endblock %}
{% block script %} {% block script %}
<script <script
src="https://code.jquery.com/jquery-3.2.1.min.js" src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
{% endblock %} {% endblock %}
</body> </body>
</html> </html>

98
source/templates/demo/_extended.njk
View file

@ -1,49 +1,49 @@
<!-- template-extended.njk --> <!-- template-extended.njk -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
{% block head %} {% block head %}
<title>{% block title %}{% endblock %} - HIPPIE</title> <title>{% block title %}{% endblock %} - HIPPIE</title>
{% include "demo/partials/_meta.njk" %} {% include "demo/partials/_meta.njk" %}
<!--[if lte IE 9]> <!--[if lte IE 9]>
<script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]--> <![endif]-->
<!--[if lte IE 9]> <!--[if lte IE 9]>
<script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
<![endif]--> <![endif]-->
<!--Local alternative: <script src="./code/html5shiv.min.js"></script>--> <!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
<!--Only use one of the above!--> <!--Only use one of the above!-->
{% block link %}{% endblock %} {% block link %}{% endblock %}
<!-- <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="{{ pageClass }}"> <body id="{{ pageId }}" class="{{ pageClass }}">
{% include "hippie/partials/_body_hover.njk" %} {% include "hippie/partials/_body_hover.njk" %}
<div id="root"> <div id="root">
{% include "hippie/partials/_header.njk" %} {% include "hippie/partials/_header.njk" %}
<main class="main_site"> <main class="main_site">
{% block main %}{% endblock %} {% block main %}{% endblock %}
</main> </main>
{% include "hippie/partials/_footer.njk" %} {% include "hippie/partials/_footer.njk" %}
</div> </div>
{% block script %} {% block script %}
<script <script
src="https://code.jquery.com/jquery-3.2.1.min.js" src="https://code.jquery.com/jquery-3.2.1.min.js"
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> #}
{% endblock %} {% endblock %}
</body> </body>
</html> </html>

54
source/templates/demo/_maintenance.njk
View file

@ -1,27 +1,27 @@
<!-- template-maintenance.njk --> <!-- template-maintenance.njk -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
{% block head %} {% block head %}
<title>{% block title %}{% endblock %} - HIPPIE</title> <title>{% block title %}{% endblock %} - HIPPIE</title>
{% include "demo/partials/_meta.njk" %} {% include "demo/partials/_meta.njk" %}
<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="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAH7SURBVDiNldM/aJNBGMfx71viH7TqIoLiIOoiSJRu0qE4uIiDm5OI4ODk4uYioqBuUkR0kKJNFC1mqUltlbZSqE3RYt+2SUyTppCmeU2bkiZ907z3vnfnUEU0NrXPeMd97p6H+xlaa02D0oDRYL+p4WEN9yZm8dT6dzQEQtkCuiIJxHKbBxZrLiNWmc8vRxn7lMGRanPAw0QW49Uwp8ODJEZmCCSt/wcGrCWavte44LRz7FyYnd+yxMZz2J7cGKh6kvczRUp3X9BnmFyLzHNVRpkeShNM1b+iDngUn2Oue4qLLV3cf+YST2tiLf3sj04wmypSEt76wFixwoJpcbKnh/ZMmuXK2vqdYJXLxyPMDiTpTOX/DbhK88bMMh4Y5sSZt3R2/+53aRkCzgT+oX4Kls2i49YDT+M5JkMmV+aj3BrII/+a15MuSevZEPl3UzxP5/8EMiurfO1L0hyNU27tZehL/c/zJNzsLXB+uoNySZBfFQD4tIbHHxJMfoxxu2pi7rK5fsm3FgL5MwXKQAPaMzh8JMbg61E6mn3c8B/CF5yx2L1tC/5TR4nsAS/RhlNzcR0P6TggFVoDGrYqyYMkLOybZ4fQZFZqGOHsgi4KF1tIakrhKIXj/WrBQAuJV3EQtsBbEQjbQVQEB/0HUHu3Y2wU5/XKVRqhFD8AgpYX2M9TNGcAAAAASUVORK5CYII="> <link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAH7SURBVDiNldM/aJNBGMfx71viH7TqIoLiIOoiSJRu0qE4uIiDm5OI4ODk4uYioqBuUkR0kKJNFC1mqUltlbZSqE3RYt+2SUyTppCmeU2bkiZ907z3vnfnUEU0NrXPeMd97p6H+xlaa02D0oDRYL+p4WEN9yZm8dT6dzQEQtkCuiIJxHKbBxZrLiNWmc8vRxn7lMGRanPAw0QW49Uwp8ODJEZmCCSt/wcGrCWavte44LRz7FyYnd+yxMZz2J7cGKh6kvczRUp3X9BnmFyLzHNVRpkeShNM1b+iDngUn2Oue4qLLV3cf+YST2tiLf3sj04wmypSEt76wFixwoJpcbKnh/ZMmuXK2vqdYJXLxyPMDiTpTOX/DbhK88bMMh4Y5sSZt3R2/+53aRkCzgT+oX4Kls2i49YDT+M5JkMmV+aj3BrII/+a15MuSevZEPl3UzxP5/8EMiurfO1L0hyNU27tZehL/c/zJNzsLXB+uoNySZBfFQD4tIbHHxJMfoxxu2pi7rK5fsm3FgL5MwXKQAPaMzh8JMbg61E6mn3c8B/CF5yx2L1tC/5TR4nsAS/RhlNzcR0P6TggFVoDGrYqyYMkLOybZ4fQZFZqGOHsgi4KF1tIakrhKIXj/WrBQAuJV3EQtsBbEQjbQVQEB/0HUHu3Y2wU5/XKVRqhFD8AgpYX2M9TNGcAAAAASUVORK5CYII=">
<link rel="stylesheet" type="text/css" media="all" href="/css/demo_basic.css"/> <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"/> --> <!-- <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 main %} {% block main %}
{% import "hippie/macros/footer-status.njk" as status %} {% import "hippie/macros/footer-status.njk" as status %}
{{ status.footer() }} {{ status.footer() }}
{% endblock %} {% endblock %}
</body> </body>
</html> </html>

116
source/templates/demo/data.json
View file

@ -1,58 +1,58 @@
{ {
"demoadditionallinks": [ "demoadditionallinks": [
{ {
"href": "/demo.html", "href": "/demo.html",
"text": "Index" "text": "Index"
}, },
{ {
"href": "/demo/intro.html", "href": "/demo/intro.html",
"text": "Intro" "text": "Intro"
}, },
{ {
"href": "/demo/elements.html", "href": "/demo/elements.html",
"text": "Elements" "text": "Elements"
}, },
{ {
"href": "/demo/examples.html", "href": "/demo/examples.html",
"text": "Examples" "text": "Examples"
}, },
{ {
"href": "/demo/tests.html", "href": "/demo/tests.html",
"text": "Tests" "text": "Tests"
} }
], ],
"demolinks": [ "demolinks": [
{ {
"href": "demo/blank.html", "href": "demo/blank.html",
"text": "Blank" "text": "Blank"
}, },
{ {
"href": "demo/maintenance.html", "href": "demo/maintenance.html",
"text": "Maintenance" "text": "Maintenance"
}, },
{ {
"href": "demo/error/304.html", "href": "demo/error/304.html",
"text": "304" "text": "304"
}, },
{ {
"href": "demo/error/404.html", "href": "demo/error/404.html",
"text": "404" "text": "404"
}, },
{ {
"href": "demo/error/403.html", "href": "demo/error/403.html",
"text": "403" "text": "403"
}, },
{ {
"href": "demo/error/400.html", "href": "demo/error/400.html",
"text": "400" "text": "400"
}, },
{ {
"href": "demo/error/500.html", "href": "demo/error/500.html",
"text": "500" "text": "500"
}, },
{ {
"href": "demo/os.html", "href": "demo/os.html",
"text": "OS" "text": "OS"
} }
] ]
} }

20
source/templates/demo/macros/_nav.njk
View file

@ -1,10 +1,10 @@
<!-- nav.main.macro --> <!-- nav.main.macro -->
{% macro main(data, active='') %} {% macro main(data, active='') %}
<nav> <nav>
<ul> <ul>
{% for link in data %} {% for link in data %}
<li{%if active == link.text %} class="active_txt"{% endif %}>{%if active == link.text %}{{ link.text }}{%else%}<a href="{{ link.href }}">{{ link.text }}</a>{% endif %}</li> <li{%if active == link.text %} class="active_txt"{% endif %}>{%if active == link.text %}{{ link.text }}{%else%}<a href="{{ link.href }}">{{ link.text }}</a>{% endif %}</li>
{% endfor %} {% endfor %}
</ul> </ul>
</nav> </nav>
{% endmacro %} {% endmacro %}

26
source/templates/demo/partials/_meta.njk
View file

@ -1,13 +1,13 @@
<!-- meta.partial --> <!-- meta.partial -->
<meta name="author" content="Interaktionsweise"> <meta name="author" content="Interaktionsweise">
<meta name="description" content="hippie"> <meta name="description" content="hippie">
<meta name="generator" content="Notepad++, Atom"> <meta name="generator" content="Notepad++, Atom">
<meta name="robots" content="noindex"> <meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
{# <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> #} {# <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 http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
{# <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="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEACABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQEAAAIBAQCbjUIABQQCAGdfKgDcxYUAiXpGABkWCgDXxnEApmxRAMGZawAIBwMArZ5PAKFydQBmIZIAoGJFAIx+QwBSSyIA1biBADlx0gBNn+0AgztQAMimcQAMCwQADAsFANS/dAB7P3EAeuH7ANb4/gBQPLwAp2pNAI6CQwCilEwAr3hdADyH5ADw/f8A////AHTU+AB6M2YA0LN4ABMRBwA/OhsAyKR2AGYvjQCf7PwA7fz/AENy2gCrclkAk4ZDAAYFAgDNtXEAjkhHAEul7QD8//8AlOn8AGk1hwDWvXsAGBYJAJaHSgCnbE4AVy6rAML0/gD7/v8AQ6vuAKx1YwCZjEQALCgTALyOZwB+NVoAZ8D0AL30/QBLULMA2sV+AB4bCwDFpm0Ak087AFArvgBv4PoAjOf7AIzm+wCN4/sAjuH7AI7h+gCP3fkAOI/sAKVvcwCfkUQAfnM6ANO2hAC3iGkAk150AI9OcACKRmkAhj9kAH84YQB9NWEAfTRgAH0zYAB6MWYAei9lAItFUADdy3wAKCQPAFtTJQB2bDIAhXk5AJKGPwCbjkQAq5xOALepWwDEtGcAzLlwAMyzcgDKrXIAx6NwALyNZgDWu4IApJZHAAcGAwANDAUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB3eGhpamtsbW5vcHFycwt0dXZYWVpbXF1eX2BhYmNkZWZnAktMTU5PUFFRUlNUVVZXAABDREVGJSUlJSUlR0hJSgAAADs8PT4lJSUlP0BBQgAAAAAyMzQ1NiUlJTc4OToAAAAAACorLC0lJS4vMDEAAAAAAAAAISIjJCUmJygpAAAAAAAAABkaGxwdHh8gAAAAAAAAAAAAEhMUFRYXGAAAAAAAAAAAAAANDg8QEQAAAAAAAAAAAAAACAkKCwwAAAAAAAAAAAAAAAAFBgcAAAAAAAAAAAAAAAAAAgMEAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA="> <link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEACABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQEAAAIBAQCbjUIABQQCAGdfKgDcxYUAiXpGABkWCgDXxnEApmxRAMGZawAIBwMArZ5PAKFydQBmIZIAoGJFAIx+QwBSSyIA1biBADlx0gBNn+0AgztQAMimcQAMCwQADAsFANS/dAB7P3EAeuH7ANb4/gBQPLwAp2pNAI6CQwCilEwAr3hdADyH5ADw/f8A////AHTU+AB6M2YA0LN4ABMRBwA/OhsAyKR2AGYvjQCf7PwA7fz/AENy2gCrclkAk4ZDAAYFAgDNtXEAjkhHAEul7QD8//8AlOn8AGk1hwDWvXsAGBYJAJaHSgCnbE4AVy6rAML0/gD7/v8AQ6vuAKx1YwCZjEQALCgTALyOZwB+NVoAZ8D0AL30/QBLULMA2sV+AB4bCwDFpm0Ak087AFArvgBv4PoAjOf7AIzm+wCN4/sAjuH7AI7h+gCP3fkAOI/sAKVvcwCfkUQAfnM6ANO2hAC3iGkAk150AI9OcACKRmkAhj9kAH84YQB9NWEAfTRgAH0zYAB6MWYAei9lAItFUADdy3wAKCQPAFtTJQB2bDIAhXk5AJKGPwCbjkQAq5xOALepWwDEtGcAzLlwAMyzcgDKrXIAx6NwALyNZgDWu4IApJZHAAcGAwANDAUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB3eGhpamtsbW5vcHFycwt0dXZYWVpbXF1eX2BhYmNkZWZnAktMTU5PUFFRUlNUVVZXAABDREVGJSUlJSUlR0hJSgAAADs8PT4lJSUlP0BBQgAAAAAyMzQ1NiUlJTc4OToAAAAAACorLC0lJS4vMDEAAAAAAAAAISIjJCUmJygpAAAAAAAAABkaGxwdHh8gAAAAAAAAAAAAEhMUFRYXGAAAAAAAAAAAAAANDg8QEQAAAAAAAAAAAAAACAkKCwwAAAAAAAAAAAAAAAAFBgcAAAAAAAAAAAAAAAAAAgMEAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=">

14
source/templates/demo/partials/exp-colors.njk
View file

@ -1,7 +1,7 @@
<!-- explanation-colors.partial --> <!-- explanation-colors.partial -->
{# var colors = [{name: "alpha", class: "alpha_color"}] #} {# var colors = [{name: "alpha", class: "alpha_color"}] #}
{% set cls = cycler("odd", "even") %} {% set cls = cycler("odd", "even") %}
{% for row in rows %} {% for row in rows %}
<div class="{{ cls.next() }}">{{ row.name }}</div> <div class="{{ cls.next() }}">{{ row.name }}</div>
{% endfor %} {% endfor %}

26
source/templates/hippie/macros/footer-status.njk
View file

@ -1,13 +1,13 @@
<!-- footer-status.macro --> <!-- footer-status.macro -->
{% macro footer(email='admin@domain.tld', app='Application', version='ver.s.ion', system='System Name', domain='domain.tld:port', type) %} {% macro footer(email='admin@domain.tld', app='Application', version='ver.s.ion', system='System Name', domain='domain.tld:port', type) %}
{% if not type or type == 'status' %} {% if not type or type == 'status' %}
<footer class="pos_abs pin_bottom width_full"> <footer class="pos_abs pin_bottom width_full">
<address class="txt_center">Kontakt: <a class="lineLink" href="mailto:{{ email }}">{{ email }}</a> * Server: {{ app }}/{{ version }} ({{ system }}) * Domain: {{ domain }}</address> <address class="txt_center">Kontakt: <a class="lineLink" href="mailto:{{ email }}">{{ email }}</a> * Server: {{ app }}/{{ version }} ({{ system }}) * Domain: {{ domain }}</address>
</footer> </footer>
{% else %} {% else %}
<footer class="pos_abs pin_bottom width_full"> <footer class="pos_abs pin_bottom width_full">
<p>Platzhalter unten fixiert</p> <p>Platzhalter unten fixiert</p>
</footer> </footer>
{% endif %} {% endif %}
{% endmacro %} {% endmacro %}

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

@ -1,5 +1,5 @@
{% macro field(name, value='', type='text') %} {% macro field(name, value='', type='text') %}
<div class="field"> <div class="field">
<input type="{{ type }}" name="{{ name }}" value="{{ value | escape }}" /> <input type="{{ type }}" name="{{ name }}" value="{{ value | escape }}" />
</div> </div>
{% endmacro %} {% endmacro %}

4
source/templates/hippie/partials/_body_hover.njk
View file

@ -1,2 +1,2 @@
<!-- body_hover.partial --> <!-- body_hover.partial -->
<div id="js_tph" class="layer_hover"></div> <div id="js_tph" class="layer_hover"></div>

56
source/templates/hippie/partials/_body_nav.njk
View file

@ -1,28 +1,28 @@
<!-- body_nav.partial --> <!-- body_nav.partial -->
<div class="pos_rel"> <div class="pos_rel">
<nav class="nav_page_meta"> <nav class="nav_page_meta">
<ul> <ul>
<li class="magic"> <li class="magic">
<a href="#begin" class="js_scrolltop a_button_meta"> <a href="#begin" class="js_scrolltop a_button_meta">
<div class="sprite_img demo__sprite_up"></div> <div class="sprite_img demo__sprite_up"></div>
{# <img src="../art/up.png" alt="" width="32" height="64"> #} {# <img src="../art/up.png" alt="" width="32" height="64"> #}
</a> </a>
</li> </li>
<li> <li>
{# <button class="">Show Meta Information</button> #} {# <button class="">Show Meta Information</button> #}
<a href="#meta" class="js_showmeta a_button_meta"> <a href="#meta" class="js_showmeta a_button_meta">
<div class="sprite_img demo__sprite_meta meta"></div> <div class="sprite_img demo__sprite_meta meta"></div>
</a> </a>
</li> </li>
<li> <li>
<a href="#end" class="js_scrolldown a_button_meta"> <a href="#end" class="js_scrolldown a_button_meta">
<div class="sprite_img demo__sprite_down"></div> <div class="sprite_img demo__sprite_down"></div>
{# <img src="../art/down.png" alt="" width="32" height="32"> #} {# <img src="../art/down.png" alt="" width="32" height="32"> #}
</a> </a>
</li> </li>
</ul> </ul>
</nav> </nav>
</div> </div>
{# <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> #}

8
source/templates/hippie/partials/_footer.njk
View file

@ -1,4 +1,4 @@
<!-- footer.partial --> <!-- footer.partial -->
<footer class="footer_site"> <footer class="footer_site">
<div id="end"></div> <div id="end"></div>
</footer> </footer>

10
vendor/jq-sticky-anything.min.js vendored
View file

@ -1,5 +1,5 @@
/** /**
* @preserve Sticky Anything 2.0.1 | @senff | GPL2 Licensed * @preserve Sticky Anything 2.0.1 | @senff | GPL2 Licensed
*/ */
!function(a){function b(b,c,d,e,f,g,h){$listenerElement=a(".sticky-element-active");var i=$listenerElement.offset();if(orgElementTop=i.top,f){var j=a(f).offset();pushElementTop=j.top}var k=window,l="inner";if("innerWidth"in window||(l="client",k=document.documentElement||document.body),viewport=k[l+"Width"],a(window).scrollTop()>=orgElementTop-b&&viewport>=c&&viewport<=d){coordsOrgElement=$listenerElement.offset(),leftOrgElement=coordsOrgElement.left,widthPlaceholder=$listenerElement[0].getBoundingClientRect().width,widthPlaceholder||(widthPlaceholder=$listenerElement.css("width")),heightPlaceholder=$listenerElement[0].getBoundingClientRect().height,heightPlaceholder||(heightPlaceholder=$listenerElement.css("height")),widthSticky=a(".sticky-element-original").css("width"),"0px"==widthSticky&&(widthSticky=a(".sticky-element-original")[0].getBoundingClientRect().width),heightSticky=a(".sticky-element-original").height(),paddingOrgElement=[a(".sticky-element-original").css("padding-top"),a(".sticky-element-original").css("padding-right"),a(".sticky-element-original").css("padding-bottom"),a(".sticky-element-original").css("padding-left")],paddingSticky=paddingOrgElement[0]+" "+paddingOrgElement[1]+" "+paddingOrgElement[2]+" "+paddingOrgElement[3],marginOrgElement=[$listenerElement.css("margin-top"),$listenerElement.css("margin-right"),$listenerElement.css("margin-bottom"),$listenerElement.css("margin-left")],marginPlaceholder=marginOrgElement[0]+" "+marginOrgElement[1]+" "+marginOrgElement[2]+" "+marginOrgElement[3],assignedStyles="";for(var m in g)"inline"==g[m]?assignedStyles+=m+":inline-block; ":assignedStyles+=m+":"+g[m]+"; ";elementHeight=0,heightPlaceholder<1?elementHeight=a(".sticky-element-cloned").outerHeight():elementHeight=a(".sticky-element-original").outerHeight(),f&&a(window).scrollTop()>pushElementTop-b-elementHeight?stickyTopMargin=pushElementTop-b-elementHeight-a(window).scrollTop():stickyTopMargin=0,assignedStyles+="width:"+widthPlaceholder+"px; height:"+heightPlaceholder+"px; margin:"+marginPlaceholder+";",a(".sticky-element-original").removeClass("sticky-element-not-sticky").addClass("sticky-element-sticky").removeClass("sticky-element-active").css("position","fixed").css("left",leftOrgElement+"px").css("top",b+"px").css("width",widthSticky).css("margin-left",0).css("padding",paddingSticky).css("margin-top",stickyTopMargin).css("z-index",e),a(".sticky-element-placeholder").hasClass("sticky-element-active")||a(".sticky-element-placeholder").addClass("sticky-element-active").attr("style",assignedStyles)}else a(".sticky-element-original").addClass("sticky-element-not-sticky").removeClass("sticky-element-sticky").addClass("sticky-element-active").attr("style",h),a(".sticky-element-placeholder").hasClass("sticky-element-active")&&a(".sticky-element-placeholder").removeClass("sticky-element-active").removeAttr("style").css("width","0").css("height","0").css("margin","0").css("padding","0")}function c(){a(".sticky-element-original").addClass("sticky-element-active").before('<div class="sticky-element-placeholder" style="width:0; height:0; margin:0; padding:0; visibility:hidden;"></div>')}function d(a){return o={},o.display=a.css("display"),o.float=a.css("float"),o.flex=a.css("flex"),o["box-sizing"]=a.css("box-sizing"),o.clear=a.css("clear"),o.overflow=a.css("overflow"),o.transform=a.css("transform"),o}a.fn.stickThis=function(e){var f=a.extend({top:0,minscreenwidth:0,maxscreenwidth:99999,zindex:1,debugmode:!1,pushup:""},e),g=a(this).length,h=a(f.pushup).length;return h<1?(1==f.debugmode&&f.pushup&&console.error('STICKY ANYTHING DEBUG: There are no elements with the selector/class/ID you selected for the Push-up element ("'+f.pushup+'").'),f.pushup=""):h>1&&(1==f.debugmode&&console.error("STICKY ANYTHING DEBUG: There are "+h+' elements on the page with the selector/class/ID you selected for the push-up element ("'+f.pushup+'"). You can select only ONE element to push the sticky element up.'),f.pushup=""),g<1?1==f.debugmode&&console.error('STICKY ANYTHING DEBUG: There are no elements with the selector/class/ID you selected for the sticky element ("'+this.selector+'").'):g>1?1==f.debugmode&&console.error("STICKY ANYTHING DEBUG: There There are "+h+' elements with the selector/class/ID you selected for the sticky element ("'+this.selector+'"). You can only make ONE element sticky.'):(a(this).addClass("sticky-element-original").addClass("sticky-element-not-sticky"),orgAssignedStyles=d(a(this)),orgInlineStyles=a(".sticky-element-original").attr("style"),null==orgInlineStyles&&(orgInlineStyles=""),c(),checkElement=setInterval(function(){b(f.top,f.minscreenwidth,f.maxscreenwidth,f.zindex,f.pushup,orgAssignedStyles,orgInlineStyles)},10)),this}}(jQuery); !function(a){function b(b,c,d,e,f,g,h){$listenerElement=a(".sticky-element-active");var i=$listenerElement.offset();if(orgElementTop=i.top,f){var j=a(f).offset();pushElementTop=j.top}var k=window,l="inner";if("innerWidth"in window||(l="client",k=document.documentElement||document.body),viewport=k[l+"Width"],a(window).scrollTop()>=orgElementTop-b&&viewport>=c&&viewport<=d){coordsOrgElement=$listenerElement.offset(),leftOrgElement=coordsOrgElement.left,widthPlaceholder=$listenerElement[0].getBoundingClientRect().width,widthPlaceholder||(widthPlaceholder=$listenerElement.css("width")),heightPlaceholder=$listenerElement[0].getBoundingClientRect().height,heightPlaceholder||(heightPlaceholder=$listenerElement.css("height")),widthSticky=a(".sticky-element-original").css("width"),"0px"==widthSticky&&(widthSticky=a(".sticky-element-original")[0].getBoundingClientRect().width),heightSticky=a(".sticky-element-original").height(),paddingOrgElement=[a(".sticky-element-original").css("padding-top"),a(".sticky-element-original").css("padding-right"),a(".sticky-element-original").css("padding-bottom"),a(".sticky-element-original").css("padding-left")],paddingSticky=paddingOrgElement[0]+" "+paddingOrgElement[1]+" "+paddingOrgElement[2]+" "+paddingOrgElement[3],marginOrgElement=[$listenerElement.css("margin-top"),$listenerElement.css("margin-right"),$listenerElement.css("margin-bottom"),$listenerElement.css("margin-left")],marginPlaceholder=marginOrgElement[0]+" "+marginOrgElement[1]+" "+marginOrgElement[2]+" "+marginOrgElement[3],assignedStyles="";for(var m in g)"inline"==g[m]?assignedStyles+=m+":inline-block; ":assignedStyles+=m+":"+g[m]+"; ";elementHeight=0,heightPlaceholder<1?elementHeight=a(".sticky-element-cloned").outerHeight():elementHeight=a(".sticky-element-original").outerHeight(),f&&a(window).scrollTop()>pushElementTop-b-elementHeight?stickyTopMargin=pushElementTop-b-elementHeight-a(window).scrollTop():stickyTopMargin=0,assignedStyles+="width:"+widthPlaceholder+"px; height:"+heightPlaceholder+"px; margin:"+marginPlaceholder+";",a(".sticky-element-original").removeClass("sticky-element-not-sticky").addClass("sticky-element-sticky").removeClass("sticky-element-active").css("position","fixed").css("left",leftOrgElement+"px").css("top",b+"px").css("width",widthSticky).css("margin-left",0).css("padding",paddingSticky).css("margin-top",stickyTopMargin).css("z-index",e),a(".sticky-element-placeholder").hasClass("sticky-element-active")||a(".sticky-element-placeholder").addClass("sticky-element-active").attr("style",assignedStyles)}else a(".sticky-element-original").addClass("sticky-element-not-sticky").removeClass("sticky-element-sticky").addClass("sticky-element-active").attr("style",h),a(".sticky-element-placeholder").hasClass("sticky-element-active")&&a(".sticky-element-placeholder").removeClass("sticky-element-active").removeAttr("style").css("width","0").css("height","0").css("margin","0").css("padding","0")}function c(){a(".sticky-element-original").addClass("sticky-element-active").before('<div class="sticky-element-placeholder" style="width:0; height:0; margin:0; padding:0; visibility:hidden;"></div>')}function d(a){return o={},o.display=a.css("display"),o.float=a.css("float"),o.flex=a.css("flex"),o["box-sizing"]=a.css("box-sizing"),o.clear=a.css("clear"),o.overflow=a.css("overflow"),o.transform=a.css("transform"),o}a.fn.stickThis=function(e){var f=a.extend({top:0,minscreenwidth:0,maxscreenwidth:99999,zindex:1,debugmode:!1,pushup:""},e),g=a(this).length,h=a(f.pushup).length;return h<1?(1==f.debugmode&&f.pushup&&console.error('STICKY ANYTHING DEBUG: There are no elements with the selector/class/ID you selected for the Push-up element ("'+f.pushup+'").'),f.pushup=""):h>1&&(1==f.debugmode&&console.error("STICKY ANYTHING DEBUG: There are "+h+' elements on the page with the selector/class/ID you selected for the push-up element ("'+f.pushup+'"). You can select only ONE element to push the sticky element up.'),f.pushup=""),g<1?1==f.debugmode&&console.error('STICKY ANYTHING DEBUG: There are no elements with the selector/class/ID you selected for the sticky element ("'+this.selector+'").'):g>1?1==f.debugmode&&console.error("STICKY ANYTHING DEBUG: There There are "+h+' elements with the selector/class/ID you selected for the sticky element ("'+this.selector+'"). You can only make ONE element sticky.'):(a(this).addClass("sticky-element-original").addClass("sticky-element-not-sticky"),orgAssignedStyles=d(a(this)),orgInlineStyles=a(".sticky-element-original").attr("style"),null==orgInlineStyles&&(orgInlineStyles=""),c(),checkElement=setInterval(function(){b(f.top,f.minscreenwidth,f.maxscreenwidth,f.zindex,f.pushup,orgAssignedStyles,orgInlineStyles)},10)),this}}(jQuery);

894
vendor/normalizecss/normalize.css vendored
View file

@ -1,447 +1,447 @@
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document /* Document
========================================================================== */ ========================================================================== */
/** /**
* 1. Correct the line height in all browsers. * 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in * 2. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS. * IE on Windows Phone and in iOS.
*/ */
html { html {
line-height: 1.15; /* 1 */ line-height: 1.15; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */
} }
/* Sections /* Sections
========================================================================== */ ========================================================================== */
/** /**
* Remove the margin in all browsers (opinionated). * Remove the margin in all browsers (opinionated).
*/ */
body { body {
margin: 0; margin: 0;
} }
/** /**
* Add the correct display in IE 9-. * Add the correct display in IE 9-.
*/ */
article, article,
aside, aside,
footer, footer,
header, header,
nav, nav,
section { section {
display: block; display: block;
} }
/** /**
* Correct the font size and margin on `h1` elements within `section` and * Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari. * `article` contexts in Chrome, Firefox, and Safari.
*/ */
h1 { h1 {
font-size: 2em; font-size: 2em;
margin: 0.67em 0; margin: 0.67em 0;
} }
/* Grouping content /* Grouping content
========================================================================== */ ========================================================================== */
/** /**
* Add the correct display in IE 9-. * Add the correct display in IE 9-.
* 1. Add the correct display in IE. * 1. Add the correct display in IE.
*/ */
figcaption, figcaption,
figure, figure,
main { /* 1 */ main { /* 1 */
display: block; display: block;
} }
/** /**
* Add the correct margin in IE 8. * Add the correct margin in IE 8.
*/ */
figure { figure {
margin: 1em 40px; margin: 1em 40px;
} }
/** /**
* 1. Add the correct box sizing in Firefox. * 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE. * 2. Show the overflow in Edge and IE.
*/ */
hr { hr {
box-sizing: content-box; /* 1 */ box-sizing: content-box; /* 1 */
height: 0; /* 1 */ height: 0; /* 1 */
overflow: visible; /* 2 */ overflow: visible; /* 2 */
} }
/** /**
* 1. Correct the inheritance and scaling of font size in all browsers. * 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers. * 2. Correct the odd `em` font sizing in all browsers.
*/ */
pre { pre {
font-family: monospace, monospace; /* 1 */ font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */ font-size: 1em; /* 2 */
} }
/* Text-level semantics /* Text-level semantics
========================================================================== */ ========================================================================== */
/** /**
* 1. Remove the gray background on active links in IE 10. * 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/ */
a { a {
background-color: transparent; /* 1 */ background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */ -webkit-text-decoration-skip: objects; /* 2 */
} }
/** /**
* 1. Remove the bottom border in Chrome 57- and Firefox 39-. * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/ */
abbr[title] { abbr[title] {
border-bottom: none; /* 1 */ border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */ text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */ text-decoration: underline dotted; /* 2 */
} }
/** /**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6. * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/ */
b, b,
strong { strong {
font-weight: inherit; font-weight: inherit;
} }
/** /**
* Add the correct font weight in Chrome, Edge, and Safari. * Add the correct font weight in Chrome, Edge, and Safari.
*/ */
b, b,
strong { strong {
font-weight: bolder; font-weight: bolder;
} }
/** /**
* 1. Correct the inheritance and scaling of font size in all browsers. * 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers. * 2. Correct the odd `em` font sizing in all browsers.
*/ */
code, code,
kbd, kbd,
samp { samp {
font-family: monospace, monospace; /* 1 */ font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */ font-size: 1em; /* 2 */
} }
/** /**
* Add the correct font style in Android 4.3-. * Add the correct font style in Android 4.3-.
*/ */
dfn { dfn {
font-style: italic; font-style: italic;
} }
/** /**
* Add the correct background and color in IE 9-. * Add the correct background and color in IE 9-.
*/ */
mark { mark {
background-color: #ff0; background-color: #ff0;
color: #000; color: #000;
} }
/** /**
* Add the correct font size in all browsers. * Add the correct font size in all browsers.
*/ */
small { small {
font-size: 80%; font-size: 80%;
} }
/** /**
* Prevent `sub` and `sup` elements from affecting the line height in * Prevent `sub` and `sup` elements from affecting the line height in
* all browsers. * all browsers.
*/ */
sub, sub,
sup { sup {
font-size: 75%; font-size: 75%;
line-height: 0; line-height: 0;
position: relative; position: relative;
vertical-align: baseline; vertical-align: baseline;
} }
sub { sub {
bottom: -0.25em; bottom: -0.25em;
} }
sup { sup {
top: -0.5em; top: -0.5em;
} }
/* Embedded content /* Embedded content
========================================================================== */ ========================================================================== */
/** /**
* Add the correct display in IE 9-. * Add the correct display in IE 9-.
*/ */
audio, audio,
video { video {
display: inline-block; display: inline-block;
} }
/** /**
* Add the correct display in iOS 4-7. * Add the correct display in iOS 4-7.
*/ */
audio:not([controls]) { audio:not([controls]) {
display: none; display: none;
height: 0; height: 0;
} }
/** /**
* Remove the border on images inside links in IE 10-. * Remove the border on images inside links in IE 10-.
*/ */
img { img {
border-style: none; border-style: none;
} }
/** /**
* Hide the overflow in IE. * Hide the overflow in IE.
*/ */
svg:not(:root) { svg:not(:root) {
overflow: hidden; overflow: hidden;
} }
/* Forms /* Forms
========================================================================== */ ========================================================================== */
/** /**
* 1. Change the font styles in all browsers (opinionated). * 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari. * 2. Remove the margin in Firefox and Safari.
*/ */
button, button,
input, input,
optgroup, optgroup,
select, select,
textarea { textarea {
font-family: sans-serif; /* 1 */ font-family: sans-serif; /* 1 */
font-size: 100%; /* 1 */ font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */ line-height: 1.15; /* 1 */
margin: 0; /* 2 */ margin: 0; /* 2 */
} }
/** /**
* Show the overflow in IE. * Show the overflow in IE.
* 1. Show the overflow in Edge. * 1. Show the overflow in Edge.
*/ */
button, button,
input { /* 1 */ input { /* 1 */
overflow: visible; overflow: visible;
} }
/** /**
* Remove the inheritance of text transform in Edge, Firefox, and IE. * Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox. * 1. Remove the inheritance of text transform in Firefox.
*/ */
button, button,
select { /* 1 */ select { /* 1 */
text-transform: none; text-transform: none;
} }
/** /**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4. * controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari. * 2. Correct the inability to style clickable types in iOS and Safari.
*/ */
button, button,
html [type="button"], /* 1 */ html [type="button"], /* 1 */
[type="reset"], [type="reset"],
[type="submit"] { [type="submit"] {
-webkit-appearance: button; /* 2 */ -webkit-appearance: button; /* 2 */
} }
/** /**
* Remove the inner border and padding in Firefox. * Remove the inner border and padding in Firefox.
*/ */
button::-moz-focus-inner, button::-moz-focus-inner,
[type="button"]::-moz-focus-inner, [type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { [type="submit"]::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
/** /**
* Restore the focus styles unset by the previous rule. * Restore the focus styles unset by the previous rule.
*/ */
button:-moz-focusring, button:-moz-focusring,
[type="button"]:-moz-focusring, [type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring, [type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring { [type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText; outline: 1px dotted ButtonText;
} }
/** /**
* Correct the padding in Firefox. * Correct the padding in Firefox.
*/ */
fieldset { fieldset {
padding: 0.35em 0.75em 0.625em; padding: 0.35em 0.75em 0.625em;
} }
/** /**
* 1. Correct the text wrapping in Edge and IE. * 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE. * 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out * 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers. * `fieldset` elements in all browsers.
*/ */
legend { legend {
box-sizing: border-box; /* 1 */ box-sizing: border-box; /* 1 */
color: inherit; /* 2 */ color: inherit; /* 2 */
display: table; /* 1 */ display: table; /* 1 */
max-width: 100%; /* 1 */ max-width: 100%; /* 1 */
padding: 0; /* 3 */ padding: 0; /* 3 */
white-space: normal; /* 1 */ white-space: normal; /* 1 */
} }
/** /**
* 1. Add the correct display in IE 9-. * 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/ */
progress { progress {
display: inline-block; /* 1 */ display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */ vertical-align: baseline; /* 2 */
} }
/** /**
* Remove the default vertical scrollbar in IE. * Remove the default vertical scrollbar in IE.
*/ */
textarea { textarea {
overflow: auto; overflow: auto;
} }
/** /**
* 1. Add the correct box sizing in IE 10-. * 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-. * 2. Remove the padding in IE 10-.
*/ */
[type="checkbox"], [type="checkbox"],
[type="radio"] { [type="radio"] {
box-sizing: border-box; /* 1 */ box-sizing: border-box; /* 1 */
padding: 0; /* 2 */ padding: 0; /* 2 */
} }
/** /**
* Correct the cursor style of increment and decrement buttons in Chrome. * Correct the cursor style of increment and decrement buttons in Chrome.
*/ */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { [type="number"]::-webkit-outer-spin-button {
height: auto; height: auto;
} }
/** /**
* 1. Correct the odd appearance in Chrome and Safari. * 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari. * 2. Correct the outline style in Safari.
*/ */
[type="search"] { [type="search"] {
-webkit-appearance: textfield; /* 1 */ -webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */ outline-offset: -2px; /* 2 */
} }
/** /**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS. * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/ */
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration { [type="search"]::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }
/** /**
* 1. Correct the inability to style clickable types in iOS and Safari. * 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari. * 2. Change font properties to `inherit` in Safari.
*/ */
::-webkit-file-upload-button { ::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */ -webkit-appearance: button; /* 1 */
font: inherit; /* 2 */ font: inherit; /* 2 */
} }
/* Interactive /* Interactive
========================================================================== */ ========================================================================== */
/* /*
* Add the correct display in IE 9-. * Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox. * 1. Add the correct display in Edge, IE, and Firefox.
*/ */
details, /* 1 */ details, /* 1 */
menu { menu {
display: block; display: block;
} }
/* /*
* Add the correct display in all browsers. * Add the correct display in all browsers.
*/ */
summary { summary {
display: list-item; display: list-item;
} }
/* Scripting /* Scripting
========================================================================== */ ========================================================================== */
/** /**
* Add the correct display in IE 9-. * Add the correct display in IE 9-.
*/ */
canvas { canvas {
display: inline-block; display: inline-block;
} }
/** /**
* Add the correct display in IE. * Add the correct display in IE.
*/ */
template { template {
display: none; display: none;
} }
/* Hidden /* Hidden
========================================================================== */ ========================================================================== */
/** /**
* Add the correct display in IE 10-. * Add the correct display in IE 10-.
*/ */
[hidden] { [hidden] {
display: none; display: none;
} }