Stephan
GitHub
commit
b9003c4a28
56 changed files with 5780 additions and 5296 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -187,4 +187,5 @@ typings/
|
||||||
# https://interaktionsweise.de/
|
# https://interaktionsweise.de/
|
||||||
###################
|
###################
|
||||||
###################
|
###################
|
||||||
|
build/
|
||||||
art/
|
art/
|
||||||
|
|
|
||||||
7
.jshintrc
Normal file
7
.jshintrc
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"undef": true,
|
||||||
|
"unused": true,
|
||||||
|
"globals": {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -11,13 +11,16 @@
|
||||||
<meta name="robots" content="noindex">
|
<meta name="robots" content="noindex">
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
|
||||||
|
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon">
|
||||||
|
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
|
||||||
|
|
||||||
<!-- <link 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="./example.css"/>
|
<link rel="stylesheet" type="text/css" media="all" href="./build/css/example.min.css"/>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="box__page">
|
<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>
|
||||||
|
|
@ -143,10 +146,8 @@
|
||||||
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="./code/vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
<script src="./vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||||
<script src="./code/variables.js" type="text/javascript"></script>
|
<script src="./build/js/all.min.js" type="text/javascript"></script>
|
||||||
<script src="./code/functions.js" type="text/javascript"></script>
|
|
||||||
<script src="./code/global.js" type="text/javascript"></script>
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
// Page specific
|
// Page specific
|
||||||
// ------------------------------------------------------------------------------
|
// ------------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
|
@ -11,9 +11,12 @@
|
||||||
<meta name="robots" content="noindex">
|
<meta name="robots" content="noindex">
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
|
||||||
|
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon">
|
||||||
|
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
|
||||||
|
|
||||||
<!-- <link 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="./example.css"/>
|
<link rel="stylesheet" type="text/css" media="all" href="./build/css/example.min.css"/>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -26,6 +29,7 @@
|
||||||
<nav class="nav__page_meta">
|
<nav class="nav__page_meta">
|
||||||
<ul>
|
<ul>
|
||||||
<li class="magic"><a href="#begin" id="js_scrolltop" class="a_button_meta"><img src="./art/up.png" alt="" width="32" height="64"></a></li>
|
<li class="magic"><a href="#begin" id="js_scrolltop" class="a_button_meta"><img src="./art/up.png" alt="" width="32" height="64"></a></li>
|
||||||
|
<li><button class="a_button_meta">Show Meta Information</button></li>
|
||||||
<li><a href="#end" id="js_scrolldown" class="a_button_meta"><img src="./art/down.png" alt="" width="32" height="32"></a></li>
|
<li><a href="#end" id="js_scrolldown" class="a_button_meta"><img src="./art/down.png" alt="" width="32" height="32"></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
@ -402,13 +406,10 @@
|
||||||
<h1>Druck</h1>
|
<h1>Druck</h1>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<header>
|
<header class="header__txt">
|
||||||
<h1>Ende der Einführung</h1>
|
<h1>Ende der Einführung</h1>
|
||||||
</header>
|
|
||||||
<article>
|
|
||||||
<p>Dies war eine Übersicht der grundlegenden Elemente. Nun folgen weitere Elemente mit besonderen Formatierungen.</p>
|
<p>Dies war eine Übersicht der grundlegenden Elemente. Nun folgen weitere Elemente mit besonderen Formatierungen.</p>
|
||||||
<hr class="hr__dotted"/>
|
</header>
|
||||||
</article>
|
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -423,7 +424,7 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="sec__main_center">
|
<section class="sec__main_center">
|
||||||
<header>
|
<header class="header__txt">
|
||||||
<h1>Medienformat Abfragen</h1>
|
<h1>Medienformat Abfragen</h1>
|
||||||
</header>
|
</header>
|
||||||
<article>
|
<article>
|
||||||
|
|
@ -442,7 +443,7 @@
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
<section class="sec__main_center">
|
<section class="sec__main_center">
|
||||||
<header>
|
<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>
|
||||||
|
|
@ -532,8 +533,8 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
<div class="pos_abs pos_bottom width_full">
|
<div class="pos_abs pin_bottom width_full">
|
||||||
<pre class="pre__code"><code>footer.pos_abs.pos_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>
|
||||||
|
|
@ -623,20 +624,74 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
<section>
|
||||||
|
<header class="sec__main_center header__txt">
|
||||||
|
<h1>Autarke Seiten</h1>
|
||||||
|
<p>Diese Elemente repräsentieren jeweils eine eigene Seite.</p>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<section class="sec_main_status demo__status">
|
||||||
|
<h1>404</h1>
|
||||||
|
<p>Hier ist nichts.</p>
|
||||||
|
<blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
|
||||||
|
<p>Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.</p>
|
||||||
|
<p class="quote_source"><a href="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">Wikipedia</a></p>
|
||||||
|
</blockquote>
|
||||||
|
<div class="pos_abs pin_bottom width_full">
|
||||||
|
<p class="txt_center">domain.tld * <a class="lineLink" href="mailto:admin@domain.tld">admin@domain.tld</a></p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="sec_main_status demo__status">
|
||||||
|
<h1>403</h1>
|
||||||
|
<p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
|
||||||
|
<blockquote>
|
||||||
|
<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>
|
||||||
|
</blockquote>
|
||||||
|
<div class="pos_abs pin_bottom width_full">
|
||||||
|
<p class="txt_center">domain.tld * <a class="lineLink" href="mailto:admin@domain.tld">admin@domain.tld</a></p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="sec_main_status demo__status">
|
||||||
|
<h1>400</h1>
|
||||||
|
<p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
|
||||||
|
<blockquote>
|
||||||
|
<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>
|
||||||
|
</blockquote>
|
||||||
|
<div class="pos_abs pin_bottom width_full">
|
||||||
|
<p class="txt_center">domain.tld * <a class="lineLink" href="mailto:admin@domain.tld">admin@domain.tld</a></p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
<div id="end"></div>
|
<div id="end"></div>
|
||||||
|
|
||||||
<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="./code/vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
<script src="./vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||||
<script src="./code/variables.js" type="text/javascript"></script>
|
<script src="./build/js/all.min.js" type="text/javascript"></script>
|
||||||
<script src="./code/functions.js" type="text/javascript"></script>
|
|
||||||
<script src="./code/global.js" type="text/javascript"></script>
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
// Page specific
|
// Page specific
|
||||||
// ------------------------------------------------------------------------------
|
// ------------------------------------------------------------------------------
|
||||||
|
$( document ).ready(function() {
|
||||||
|
// jq-sticky-anything
|
||||||
|
$('#js_demo_fix').stickThis({
|
||||||
|
pushup: '#js_demo_stop'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// $(window).scroll(function(){
|
||||||
|
// var windowTopPos = $(window).scrollTop();
|
||||||
|
// var footerTopPos = $('#js_demo_stop').offset().top;
|
||||||
|
// var navBottomPos = $('#js_demo_fix').offset().top + $('#js_demo_fix').outerHeight();
|
||||||
|
//
|
||||||
|
// if(navBottomPos >= footerTopPos) {
|
||||||
|
// $('#js_demo_fix').css('position', 'absolute');
|
||||||
|
// }
|
||||||
|
// });
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -11,13 +11,16 @@
|
||||||
<meta name="robots" content="noindex">
|
<meta name="robots" content="noindex">
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
|
||||||
|
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon">
|
||||||
|
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
|
||||||
|
|
||||||
<!-- <link 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="./example.css"/>
|
<link rel="stylesheet" type="text/css" media="all" href="./build/css/example.min.css"/>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="box__page">
|
<div class="height_full">
|
||||||
<div class="slides">
|
<div class="slides">
|
||||||
<section>Start</section>
|
<section>Start</section>
|
||||||
<section>Seite 2</section>
|
<section>Seite 2</section>
|
||||||
|
|
@ -28,10 +31,8 @@
|
||||||
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="./code/vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
<script src="./vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||||
<script src="./code/variables.js" type="text/javascript"></script>
|
<script src="./build/js/all.min.js" type="text/javascript"></script>
|
||||||
<script src="./code/functions.js" type="text/javascript"></script>
|
|
||||||
<script src="./code/global.js" type="text/javascript"></script>
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
// Page specific
|
// Page specific
|
||||||
// ------------------------------------------------------------------------------
|
// ------------------------------------------------------------------------------
|
||||||
|
|
|
||||||
35
demo-raw.html
Normal file
35
demo-raw.html
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
<title>HIPPIE Dummy</title>
|
||||||
|
|
||||||
|
<meta name="author" content="Interaktionsweise">
|
||||||
|
<meta name="description" content="hippie example">
|
||||||
|
<meta name="generator" content="Notepad++, Atom">
|
||||||
|
<meta name="robots" content="noindex">
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
|
||||||
|
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon">
|
||||||
|
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
|
||||||
|
|
||||||
|
<!-- <link 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="./build/css/example.min.css"/>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<script
|
||||||
|
src="https://code.jquery.com/jquery-3.2.1.min.js"
|
||||||
|
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
<script src="./build/js/all.min.js" type="text/javascript"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
// Page specific
|
||||||
|
// ------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1276
example.css
1276
example.css
File diff suppressed because it is too large
Load diff
132
gulpfile.js
132
gulpfile.js
|
|
@ -1,43 +1,107 @@
|
||||||
const gulp = require('gulp');
|
// Setup project
|
||||||
const sass = require('gulp-ruby-sass');
|
var source = {
|
||||||
const sourcemaps = require('gulp-sourcemaps');
|
markup: '*.html',
|
||||||
const plumber = require('gulp-plumber');
|
watch: 'source/style/**/*.scss',
|
||||||
const notify = require('gulp-notify');
|
styles: 'source/style/example.scss',
|
||||||
const livereload = require('gulp-livereload');
|
scripts: ['source/code/variables.js', 'source/code/functions.js', 'source/code/global.js', 'source/code/**/*.coffee', '!source/vendor/**/*', ],
|
||||||
|
images: 'source/art/**/*'
|
||||||
|
};
|
||||||
|
var build = {
|
||||||
|
styles: 'build/css',
|
||||||
|
scripts: 'build/js',
|
||||||
|
images: 'build/art'
|
||||||
|
}
|
||||||
|
|
||||||
gulp.task('default', function(){
|
// Load plugins
|
||||||
console.log('default gulp task...')
|
const gulp = require('gulp'),
|
||||||
|
rename = require('gulp-rename'),
|
||||||
|
del = require('del');
|
||||||
|
concat = require('gulp-concat'),
|
||||||
|
pump = require('pump'),
|
||||||
|
sourcemap = require('gulp-sourcemaps'),
|
||||||
|
prefix = require('gulp-autoprefixer'),
|
||||||
|
sass = require('gulp-ruby-sass'),
|
||||||
|
cssnano = require('gulp-cssnano'),
|
||||||
|
jshint = require('gulp-jshint'),
|
||||||
|
uglify = require('gulp-uglify'),
|
||||||
|
// imagemin = require('gulp-imagemin'),
|
||||||
|
cache = require('gulp-cached'),
|
||||||
|
remember = require('gulp-remember'),
|
||||||
|
changed = require('gulp-changed'),
|
||||||
|
notify = require('gulp-notify'),
|
||||||
|
browsersync = require('browser-sync').create();
|
||||||
|
|
||||||
|
|
||||||
|
// Task - Clean build directory
|
||||||
|
gulp.task('clean', function() {
|
||||||
|
return del([build.scripts, build.styles, 'build/**']);
|
||||||
});
|
});
|
||||||
|
|
||||||
gulp.task('sass', () =>
|
// Task - Styles
|
||||||
sass('./*.scss', {sourcemap: true})
|
gulp.task('styles', () =>
|
||||||
// .on('error', sass.logError)
|
sass(source.styles, {sourcemap: true})
|
||||||
.pipe(plumber(errorReport("sass error")))
|
.on('error', sass.logError)
|
||||||
.pipe(sourcemaps.write('./'))
|
.pipe(prefix('last 2 version'))
|
||||||
.pipe(gulp.dest('./'))
|
.pipe(gulp.dest(build.styles))
|
||||||
.pipe(livereload())
|
.pipe(rename({suffix: '.min'}))
|
||||||
|
.pipe(cssnano())
|
||||||
|
.pipe(sourcemap.write('.', {
|
||||||
|
includeContent: false,
|
||||||
|
sourceRoot: 'source'
|
||||||
|
}))
|
||||||
|
.pipe(gulp.dest(build.styles))
|
||||||
|
.pipe(browsersync.stream({match: '**/*.css'}))
|
||||||
|
// .pipe(notify({message: 'Style task complete'}))
|
||||||
);
|
);
|
||||||
|
|
||||||
gulp.task('watch', function() {
|
// Task - Scripts
|
||||||
livereload.listen();
|
gulp.task('scripts', function(cb) {
|
||||||
gulp.watch('./**/*.scss', ['sass']);
|
pump([
|
||||||
gulp.watch(['*.html']).on('change', livereload.changed);
|
gulp.src(source.scripts),
|
||||||
// gulp.watch('js/src/*.js', ['js']);
|
cache('scripts'),
|
||||||
// gulp.watch('img/src/*.{png,jpg,gif}', ['img']);
|
jshint('.jshintrc'),
|
||||||
|
jshint.reporter('default'),
|
||||||
|
sourcemap.init(),
|
||||||
|
uglify(),
|
||||||
|
remember('scripts'),
|
||||||
|
concat('all.min.js'),
|
||||||
|
sourcemap.write(),
|
||||||
|
gulp.dest(build.scripts),
|
||||||
|
browsersync.stream()
|
||||||
|
], cb);
|
||||||
});
|
});
|
||||||
|
|
||||||
gulp.task('default', ['sass', 'watch']);
|
// Task - Images
|
||||||
|
gulp.task('images', function() {
|
||||||
|
return gulp.src(source.images)
|
||||||
|
.pipe(changed(cache(imagemin({
|
||||||
function errorReport(errTitle) {
|
optimizationLevel: 3,
|
||||||
return plumber({
|
progressive: true,
|
||||||
errorHandler: notify.onError({
|
interlaced: true })))
|
||||||
// Customizing error title
|
)
|
||||||
title: errTitle || "Error running Gulp",
|
.pipe(gulp.dest(build.images))
|
||||||
message: "Error: <%= error.message %>",
|
.pipe(notify({ message: 'Images task complete' }))
|
||||||
sound: true
|
;
|
||||||
})
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Watch for file changes
|
||||||
|
gulp.task('watch', ['clean', 'styles', 'scripts'], function() {
|
||||||
|
browsersync.init({
|
||||||
|
server: "./",
|
||||||
|
// proxy: "http://verser.vrt/virtual/"
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.watch(source.watch, ['styles']);
|
||||||
|
gulp.watch(source.scripts, ['scripts']).on('change', function(event) {
|
||||||
|
if (event.type === 'deleted') {
|
||||||
|
delete cache.caches['scripts'][event.path];
|
||||||
|
remember.forget('scripts', event.path);
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
gulp.watch(source.markup).on('change', browsersync.reload);
|
||||||
|
// gulp.watch(['build/**']).on('change', browsersync.reload);
|
||||||
|
// gulp.watch(source.images, ['images']);
|
||||||
|
});
|
||||||
|
|
||||||
|
// The default task (called when you run `gulp` from cli)
|
||||||
|
gulp.task('default', ['clean', 'styles', 'scripts']);
|
||||||
|
|
|
||||||
61
index.html
Normal file
61
index.html
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
<title>HIPPIE Index</title>
|
||||||
|
|
||||||
|
<meta name="author" content="Interaktionsweise">
|
||||||
|
<meta name="description" content="hippie example">
|
||||||
|
<meta name="generator" content="Notepad++, Atom">
|
||||||
|
<meta name="robots" content="noindex">
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
|
||||||
|
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon">
|
||||||
|
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
|
||||||
|
|
||||||
|
<!-- <link 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="./build/css/example.min.css"/>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="height_full">
|
||||||
|
<div id="js_tph" class="layer__hover"></div>
|
||||||
|
|
||||||
|
<div class="wrap">
|
||||||
|
<ul class="list__link hello">
|
||||||
|
<li><a href="demo-index.html">Index</a></li>
|
||||||
|
<li><a href="demo-raw.html">Raw</a></li>
|
||||||
|
<li><a href="demo-explorer.html">Explorer</a></li>
|
||||||
|
<li><a href="demo-presentation.html">Presentation</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script
|
||||||
|
src="https://code.jquery.com/jquery-3.2.1.min.js"
|
||||||
|
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
<script src="./vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||||
|
<script src="./build/js/all.min.js" type="text/javascript"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
// Page specific
|
||||||
|
// ------------------------------------------------------------------------------
|
||||||
|
$( document ).ready(function() {
|
||||||
|
// jq-sticky-anything
|
||||||
|
$('#js_demo_fix').stickThis({
|
||||||
|
pushup: '#js_demo_stop'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// $(window).scroll(function(){
|
||||||
|
// var windowTopPos = $(window).scrollTop();
|
||||||
|
// var footerTopPos = $('#js_demo_stop').offset().top;
|
||||||
|
// var navBottomPos = $('#js_demo_fix').offset().top + $('#js_demo_fix').outerHeight();
|
||||||
|
//
|
||||||
|
// if(navBottomPos >= footerTopPos) {
|
||||||
|
// $('#js_demo_fix').css('position', 'absolute');
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
8008
package-lock.json
generated
8008
package-lock.json
generated
File diff suppressed because it is too large
Load diff
17
package.json
17
package.json
|
|
@ -17,12 +17,23 @@
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/sthag/hippie#readme",
|
"homepage": "https://github.com/sthag/hippie#readme",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"browser-sync": "^2.18.13",
|
||||||
|
"del": "^3.0.0",
|
||||||
"gulp": "^3.9.1",
|
"gulp": "^3.9.1",
|
||||||
"gulp-livereload": "^3.8.1",
|
"gulp-autoprefixer": "^4.0.0",
|
||||||
|
"gulp-cached": "^1.1.1",
|
||||||
|
"gulp-changed": "^3.1.0",
|
||||||
|
"gulp-concat": "^2.6.1",
|
||||||
|
"gulp-cssnano": "^2.1.2",
|
||||||
|
"gulp-jshint": "^2.0.4",
|
||||||
"gulp-notify": "^3.0.0",
|
"gulp-notify": "^3.0.0",
|
||||||
"gulp-plumber": "^1.1.0",
|
"gulp-remember": "^0.3.1",
|
||||||
|
"gulp-rename": "^1.2.2",
|
||||||
"gulp-ruby-sass": "^2.1.1",
|
"gulp-ruby-sass": "^2.1.1",
|
||||||
"gulp-sourcemaps": "^2.6.0"
|
"gulp-sourcemaps": "^2.6.1",
|
||||||
|
"gulp-uglify": "^3.0.0",
|
||||||
|
"jshint": "^2.9.5",
|
||||||
|
"pump": "^1.0.2"
|
||||||
},
|
},
|
||||||
"dependencies": {}
|
"dependencies": {}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,14 +6,14 @@ function setup() {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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() {
|
||||||
|
|
@ -119,13 +119,6 @@ $( document ).ready(function() {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// jq-sticky-anything
|
|
||||||
$('#js_demo_fix').stickThis({
|
|
||||||
pushup: '#js_demo_stop'
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
|
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
||||||
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
|
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
||||||
|
|
||||||
var full_view_hover = false;
|
var full_view_hover = true;
|
||||||
|
|
||||||
var doc_pos_y = 0;
|
var doc_pos_y = 0;
|
||||||
var basic_ease = 600;
|
var basic_ease = 600;
|
||||||
|
|
@ -8,9 +8,9 @@
|
||||||
|
|
||||||
|
|
||||||
// Reset
|
// Reset
|
||||||
// Use a file outside of hippie i.e. other/normalize.css
|
// Use a file outside of hippie i.e. vendor/normalize.css
|
||||||
// -----------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------
|
||||||
// @import "other/normalize.css";
|
// @import "vendor/normalize.css";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -21,10 +21,10 @@
|
||||||
|
|
||||||
|
|
||||||
// Reset
|
// Reset
|
||||||
// Use a file outside of hippie i.e. other/normalize.css
|
// Use a file outside of hippie i.e. vendor/normalize.css
|
||||||
// -----------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------
|
||||||
@import "other/normalize.css";
|
@import "../../vendor/normalizecss/normalize.css";
|
||||||
// @import "other/YOUR-FILES.css";
|
// @import "vendor/YOUR-FILES.css";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -39,7 +39,7 @@
|
||||||
// Fonts
|
// Fonts
|
||||||
// Use a central file outside of hippie for font definitions with @font-face
|
// Use a central file outside of hippie for font definitions with @font-face
|
||||||
// -----------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------
|
||||||
// @import "other/fonts.css";
|
// @import "vendor/fonts.css";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -164,10 +164,6 @@ div {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.box__page {
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box__info {
|
.box__info {
|
||||||
padding: $double_space $basic_indent;
|
padding: $double_space $basic_indent;
|
||||||
border-right: $basic_space solid rgba($echo_color, .6);
|
border-right: $basic_space solid rgba($echo_color, .6);
|
||||||
|
|
@ -58,6 +58,15 @@ section {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sec__main_status {
|
||||||
|
@extend .sec__main_center;
|
||||||
|
position: relative;
|
||||||
|
border-top-width: $border_width_8;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-color: $basic_border_color;
|
||||||
|
padding-top: $space_3;
|
||||||
|
}
|
||||||
|
|
||||||
aside {
|
aside {
|
||||||
|
|
||||||
&.right + section {
|
&.right + section {
|
||||||
|
|
@ -98,6 +107,15 @@ header {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header__txt {
|
||||||
|
margin-bottom: $space_3;
|
||||||
|
border-bottom: $dotted_border;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
border-top: $basic_border;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -41,6 +41,10 @@
|
||||||
height: 1024px;
|
height: 1024px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.height_full {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
.txt_center {
|
.txt_center {
|
||||||
text-align: center !important;
|
text-align: center !important;
|
||||||
}
|
}
|
||||||
|
|
@ -119,7 +123,7 @@
|
||||||
position: fixed;
|
position: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pos_bottom {
|
.pin_bottom {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1,9 +1,16 @@
|
||||||
.demo__intro {
|
.demo__intro {
|
||||||
@extend .sec__main_center;
|
@extend .sec__main_status;
|
||||||
border-top-width: $border_width_8;
|
}
|
||||||
border-top-style: solid;
|
|
||||||
border-color: $basic_border_color;
|
.demo__status {
|
||||||
padding-top: $space_3;
|
@extend .sec__main_status;
|
||||||
|
min-height: 50vh;
|
||||||
|
border-color: $foxtrot_color;
|
||||||
|
|
||||||
|
h1:first-of-type {
|
||||||
|
margin-top: 0;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.demo__header {
|
.demo__header {
|
||||||
|
|
@ -39,6 +46,7 @@
|
||||||
.header__fix {
|
.header__fix {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: transparentize($charlie_color, .4);
|
background-color: transparentize($charlie_color, .4);
|
||||||
|
|
||||||
|
|
@ -173,3 +181,18 @@
|
||||||
background-color: rgba($basic_front_color, .2);
|
background-color: rgba($basic_front_color, .2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Index
|
||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
.wrap {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hello {
|
||||||
|
flex: 0 1 auto;
|
||||||
|
padding: 1em 5em;
|
||||||
|
background-color: rgba(black, .25);
|
||||||
|
}
|
||||||
|
|
@ -1,20 +1,18 @@
|
||||||
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
|
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Change the default font family in all browsers (opinionated).
|
|
||||||
* 2. Correct the line height in all browsers.
|
|
||||||
* 3. Prevent adjustments of font size after orientation changes in
|
|
||||||
* IE on Windows Phone and in iOS.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* Document
|
/* Document
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the line height in all browsers.
|
||||||
|
* 2. Prevent adjustments of font size after orientation changes in
|
||||||
|
* IE on Windows Phone and in iOS.
|
||||||
|
*/
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-family: sans-serif; /* 1 */
|
line-height: 1.15; /* 1 */
|
||||||
line-height: 1.15; /* 2 */
|
-ms-text-size-adjust: 100%; /* 2 */
|
||||||
-ms-text-size-adjust: 100%; /* 3 */
|
-webkit-text-size-adjust: 100%; /* 2 */
|
||||||
-webkit-text-size-adjust: 100%; /* 3 */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sections
|
/* Sections
|
||||||
|
|
@ -108,17 +106,7 @@ a {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Remove the outline on focused links when they are also active or hovered
|
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
|
||||||
* in all browsers (opinionated).
|
|
||||||
*/
|
|
||||||
|
|
||||||
a:active,
|
|
||||||
a:hover {
|
|
||||||
outline-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Remove the bottom border in 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.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
@ -317,13 +305,11 @@ button:-moz-focusring,
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Change the border, margin, and padding in all browsers (opinionated).
|
* Correct the padding in Firefox.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
border: 1px solid #c0c0c0;
|
padding: 0.35em 0.75em 0.625em;
|
||||||
margin: 0 2px;
|
|
||||||
padding: 0.35em 0.625em 0.75em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
Loading…
Add table
Add a link
Reference in a new issue