diff --git a/.gitignore b/.gitignore index b251e3f..6c7d6d4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,13 +1,56 @@ -# ========================= -# Operating System Files -# ========================= +# https://gist.github.com/octocat/9257657 -# Windows -# ========================= +# Compiled source # +################### +*.com +*.class +*.dll +*.exe +*.o +*.so -# Windows image file caches +# Packages # +############ +# it's better to unpack these files and commit the raw source +# git has its own built in compression methods +*.7z +*.dmg +*.gz +*.iso +*.jar +*.rar +*.tar +*.zip + +# Logs and databases # +###################### +*.log +*.sql +*.sqlite + +# OS generated files # +###################### +.DS_Store +.DS_Store? +._* +.Spotlight-V100 +.Trashes +ehthumbs.db +Thumbs.db + + + +# https://github.com/github/gitignore + +# https://github.com/github/gitignore/blob/master/Global/Windows.gitignore +################### +# Windows thumbnail cache files Thumbs.db ehthumbs.db +ehthumbs_vista.db + +# Dump file +*.stackdump # Folder config file Desktop.ini @@ -24,17 +67,16 @@ $RECYCLE.BIN/ # Windows shortcuts *.lnk -# OSX -# ========================= - -.DS_Store +# https://github.com/github/gitignore/blob/master/Global/macOS.gitignore +################### +# General +*.DS_Store .AppleDouble .LSOverride # Icon must end with two \r Icon - # Thumbnails ._* @@ -45,6 +87,7 @@ Icon .TemporaryItems .Trashes .VolumeIcon.icns +.com.apple.timemachine.donotpresent # Directories potentially created on remote AFP share .AppleDB @@ -53,6 +96,87 @@ Network Trash Folder Temporary Items .apdisk +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 +.fuse_hidden* + +# KDE directory preferences +.directory + +# Linux trash folder which might appear on any partition or disk +.Trash-* + +# .nfs files are created when an open file is removed but is still being accessed +.nfs* + +# https://github.com/github/gitignore/blob/master/Node.gitignore +################### +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Typescript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + + + +# https://interaktionsweise.de/ + # ========================= # Other files # ========================= diff --git a/basic/_common.scss b/basic/_common.scss index c53db7d..f8a2168 100644 --- a/basic/_common.scss +++ b/basic/_common.scss @@ -57,30 +57,12 @@ // Structure attributes // ------------------------------------------------------------------------------ -// Simulate new body element -.screen_body { - width: $basic_width; - @media screen and (orientation: landscape) { - @media (min-width: $screen_small) { - width: $width_2; - } - @media (min-width: $screen_medium) { - width: $width_3; - } - @media (min-width: $screen_large) { - width: $width_4; - } - } - @media screen and (orientation: portrait) { - @media (min-width: $screen_small) { - width: $width_2; - } - } - margin: 0 auto; - border-top-width: $border_width_8; - border-top-style: solid; - border-color: $basic_border_color; - padding-top: $space_3; +%full_viewport { + position: absolute; + top: 0; + left: 0; + width: 100vw; + height: 100vh; } // Fixed elements @@ -95,13 +77,18 @@ } // Absolute elements -.fullscreen_body { - position: absolute; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background-color: transparentize($alpha_color, .5);; +.viewport-full-body { + @extend %full_viewport; + background-color: transparentize($alpha_color, .5); +} + +.viewport-hover-body { + @extend %full_viewport; + background-color: darken($basic_background_color, 20%); + transition: background-color .2s ease-in-out; + &:hover { + background-color: $basic_background_color; + } } diff --git a/basic/_grouping.scss b/basic/_grouping.scss index 41389ce..a3694a1 100644 --- a/basic/_grouping.scss +++ b/basic/_grouping.scss @@ -115,7 +115,7 @@ ul { li { list-style: none; position: relative; - + &:before { content: "_"; position: absolute; @@ -144,4 +144,29 @@ main { div { -} \ No newline at end of file +} + +.screen-box { + width: $basic_width; + @media screen and (orientation: landscape) { + @media (min-width: $screen_small) { + width: $width_2; + } + @media (min-width: $screen_medium) { + width: $width_3; + } + @media (min-width: $screen_large) { + width: $width_4; + } + } + @media screen and (orientation: portrait) { + @media (min-width: $screen_small) { + width: $width_2; + } + } + margin: 0 auto; + border-top-width: $border_width_8; + border-top-style: solid; + border-color: $basic_border_color; + padding-top: $space_3; +} diff --git a/basic/_textlevel.scss b/basic/_textlevel.scss index f8650d8..9f3a554 100644 --- a/basic/_textlevel.scss +++ b/basic/_textlevel.scss @@ -39,7 +39,7 @@ i, em { } b, strong { - font-weight: 500; + font-weight: 500; // TODO maybe bolder } small { @@ -143,4 +143,4 @@ ins { del { -} \ No newline at end of file +} diff --git a/example.css b/example.css index bd54738..79b0d64 100644 --- a/example.css +++ b/example.css @@ -59,26 +59,12 @@ margin-right: 0; margin-left: 0; } -.screen_body { - width: 96%; - margin: 0 auto; - border-top-width: 8px; - border-top-style: solid; - border-color: black; - padding-top: 32px; } -@media screen and (orientation: landscape) and (min-width: 1024px) { - .screen_body { - width: 80%; } } -@media screen and (orientation: landscape) and (min-width: 1280px) { - .screen_body { - width: 60%; } } -@media screen and (orientation: landscape) and (min-width: 1920px) { - .screen_body { - width: 48%; } } - -@media screen and (orientation: portrait) and (min-width: 1024px) { - .screen_body { - width: 80%; } } +.viewport-full-body, .viewport-hover-body { + position: absolute; + top: 0; + left: 0; + width: 100vw; + height: 100vh; } .relative { position: relative; } @@ -89,14 +75,15 @@ .bottom { bottom: 0; } -.fullscreen_body { - position: absolute; - top: 0; - left: 0; - width: 100vw; - height: 100vh; +.viewport-full-body { background-color: rgba(250, 216, 3, 0.5); } +.viewport-hover-body { + background-color: #4d4d4d; + transition: background-color .2s ease-in-out; } + .viewport-hover-body:hover { + background-color: gray; } + .space_box { float: left; display: table; @@ -317,6 +304,27 @@ ul li { figure { margin: 16px 2em; } +.screen-box { + width: 96%; + margin: 0 auto; + border-top-width: 8px; + border-top-style: solid; + border-color: black; + padding-top: 32px; } +@media screen and (orientation: landscape) and (min-width: 1024px) { + .screen-box { + width: 80%; } } +@media screen and (orientation: landscape) and (min-width: 1280px) { + .screen-box { + width: 60%; } } +@media screen and (orientation: landscape) and (min-width: 1920px) { + .screen-box { + width: 48%; } } + +@media screen and (orientation: portrait) and (min-width: 1024px) { + .screen-box { + width: 80%; } } + a { color: #52bed1; text-decoration: none; } @@ -491,21 +499,21 @@ legend { .card_body { height: 100%; - /* .full { - position: absolute; - width: 128px; - height: 128px; - top: 16px; - left: 16px; - background-color: #fff; - } - .mark { - float: left; - width: 32px; - height: 32px; - margin-top: 16px; - } - */ } + /* .full { + position: absolute; + width: 128px; + height: 128px; + top: 16px; + left: 16px; + background-color: #fff; + } + .mark { + float: left; + width: 32px; + height: 32px; + margin-top: 16px; + } + */ } .card_body .bkg_box { transition-duration: 800ms; overflow: hidden; diff --git a/example.html b/example.html index 1172baa..a561e56 100644 --- a/example.html +++ b/example.html @@ -7,26 +7,26 @@ - + - + -
+
?
-
+
Dies ist einfach nur Text.
Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.

Es wirken nur die Eigenschaften des <body> Elements. Dieses Element umschließt den gesamten Inhalt des Dokumentes und kommt daher nur einmal vor. Inhalte sind normalerweise durch Elemente definiert. Grundlegende Elemente teilen das Dokument zunächst in Abschnitte.

Bereiche

-

Einen Abschnitt, welcher für sich alleine stehen kann, definiert sich durch <article>. Solch ein Element wird oft detailliert gestaltet kommt aber auch ohne jegliche Gestaltung aus.

+

Einen Abschnitt, welcher für sich alleine stehen kann, definiert sich durch <article>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne jegliche Gestaltung aus.

Noch allgemeiner ist das <section> Element. Es schafft Bereiche um Inhalte zu strukturieren.

Bestimmte Bereiche haben einen vorgegebene Zweck.
Folgende Bereiche sind vorgegeben:

@@ -203,7 +203,7 @@ A B - + Tabelle @@ -483,4 +483,4 @@ }); - \ No newline at end of file + diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..6e07165 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,46 @@ +const gulp = require('gulp'); +const sass = require('gulp-ruby-sass'); +const sourcemaps = require('gulp-sourcemaps'); +const plumber = require('gulp-plumber'); +const notify = require('gulp-notify'); +const livereload = require('gulp-livereload'); + +gulp.task('default', function(){ + console.log('default gulp task...') +}); + +gulp.task('sass', () => +sass('./*.scss', {sourcemap: true}) +// .on('error', sass.logError) +.pipe(plumber(errorReport("sass error"))) +.pipe(sourcemaps.write('./', { + includeContent: false, + sourceRoot: 'source' +})) +.pipe(gulp.dest('./')) +.pipe(livereload()) +); + +gulp.task('watch', function() { + livereload.listen(); + gulp.watch('./**/*.scss', ['sass']); + gulp.watch(['*.html']).on('change', livereload.changed); + // gulp.watch('js/src/*.js', ['js']); + // gulp.watch('img/src/*.{png,jpg,gif}', ['img']); + +}); + +gulp.task('default', ['sass', 'watch']); + + + +function errorReport(errTitle) { + return plumber({ + errorHandler: notify.onError({ + // Customizing error title + title: errTitle || "Error running Gulp", + message: "Error: <%= error.message %>", + sound: true + }) + }); +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..d309568 --- /dev/null +++ b/package.json @@ -0,0 +1,22 @@ +{ + "name": "hippie", + "version": "0.3.3", + "description": "Hippie interweaves preeminent personal interface elements", + "main": "gulpfile.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/sthag/hippie.git" + }, + "author": "Interaktionsweise", + "license": "ISC", + "bugs": { + "url": "https://github.com/sthag/hippie/issues" + }, + "homepage": "https://github.com/sthag/hippie#readme", + "devDependencies": { + "gulp": "^3.9.1" + } +}