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/
|
||||
###################
|
||||
###################
|
||||
build/
|
||||
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="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="./example.css"/>
|
||||
<link rel="stylesheet" type="text/css" media="all" href="./build/css/example.min.css"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box__page">
|
||||
<div class="height_full">
|
||||
<div class="flex__wrap">
|
||||
<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"
|
||||
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="./code/vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||
<script src="./code/variables.js" type="text/javascript"></script>
|
||||
<script src="./code/functions.js" type="text/javascript"></script>
|
||||
<script src="./code/global.js" type="text/javascript"></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
|
||||
// ------------------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -11,9 +11,12 @@
|
|||
<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="./example.css"/>
|
||||
<link rel="stylesheet" type="text/css" media="all" href="./build/css/example.min.css"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -26,6 +29,7 @@
|
|||
<nav class="nav__page_meta">
|
||||
<ul>
|
||||
<li class="magic"><a href="#begin" id="js_scrolltop" class="a_button_meta"><img src="./art/up.png" alt="" width="32" height="64"></a></li>
|
||||
<li><button class="a_button_meta">Show Meta Information</button></li>
|
||||
<li><a href="#end" id="js_scrolldown" class="a_button_meta"><img src="./art/down.png" alt="" width="32" height="32"></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -402,13 +406,10 @@
|
|||
<h1>Druck</h1>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<header class="header__txt">
|
||||
<h1>Ende der Einführung</h1>
|
||||
</header>
|
||||
<article>
|
||||
<p>Dies war eine Übersicht der grundlegenden Elemente. Nun folgen weitere Elemente mit besonderen Formatierungen.</p>
|
||||
<hr class="hr__dotted"/>
|
||||
</article>
|
||||
</header>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
|
@ -423,7 +424,7 @@
|
|||
</section>
|
||||
|
||||
<section class="sec__main_center">
|
||||
<header>
|
||||
<header class="header__txt">
|
||||
<h1>Medienformat Abfragen</h1>
|
||||
</header>
|
||||
<article>
|
||||
|
|
@ -442,7 +443,7 @@
|
|||
</article>
|
||||
</section>
|
||||
<section class="sec__main_center">
|
||||
<header>
|
||||
<header class="header__txt">
|
||||
<h1>Sammlung formatierter Elemente</h1>
|
||||
<p>Die Elemente werden fortlaufend komplexer</p>
|
||||
</header>
|
||||
|
|
@ -532,8 +533,8 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
|
|||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="pos_abs pos_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>
|
||||
<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>
|
||||
<footer id="js_demo_stop" class="demo__footer">
|
||||
<nav class="nav__column nav__separate">
|
||||
<ul>
|
||||
|
|
@ -623,20 +624,74 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
|
|||
|
||||
</article>
|
||||
</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>
|
||||
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.2.1.min.js"
|
||||
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="./code/vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||
<script src="./code/variables.js" type="text/javascript"></script>
|
||||
<script src="./code/functions.js" type="text/javascript"></script>
|
||||
<script src="./code/global.js" type="text/javascript"></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>
|
||||
|
|
|
|||
|
|
@ -11,13 +11,16 @@
|
|||
<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="./example.css"/>
|
||||
<link rel="stylesheet" type="text/css" media="all" href="./build/css/example.min.css"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box__page">
|
||||
<div class="height_full">
|
||||
<div class="slides">
|
||||
<section>Start</section>
|
||||
<section>Seite 2</section>
|
||||
|
|
@ -28,10 +31,8 @@
|
|||
src="https://code.jquery.com/jquery-3.2.1.min.js"
|
||||
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="./code/vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||
<script src="./code/variables.js" type="text/javascript"></script>
|
||||
<script src="./code/functions.js" type="text/javascript"></script>
|
||||
<script src="./code/global.js" type="text/javascript"></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
|
||||
// ------------------------------------------------------------------------------
|
||||
|
|
|
|||
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
130
gulpfile.js
130
gulpfile.js
|
|
@ -1,43 +1,107 @@
|
|||
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');
|
||||
// Setup project
|
||||
var source = {
|
||||
markup: '*.html',
|
||||
watch: 'source/style/**/*.scss',
|
||||
styles: 'source/style/example.scss',
|
||||
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(){
|
||||
console.log('default gulp task...')
|
||||
// Load plugins
|
||||
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', () =>
|
||||
sass('./*.scss', {sourcemap: true})
|
||||
// .on('error', sass.logError)
|
||||
.pipe(plumber(errorReport("sass error")))
|
||||
.pipe(sourcemaps.write('./'))
|
||||
.pipe(gulp.dest('./'))
|
||||
.pipe(livereload())
|
||||
// Task - Styles
|
||||
gulp.task('styles', () =>
|
||||
sass(source.styles, {sourcemap: true})
|
||||
.on('error', sass.logError)
|
||||
.pipe(prefix('last 2 version'))
|
||||
.pipe(gulp.dest(build.styles))
|
||||
.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() {
|
||||
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']);
|
||||
|
||||
// Task - Scripts
|
||||
gulp.task('scripts', function(cb) {
|
||||
pump([
|
||||
gulp.src(source.scripts),
|
||||
cache('scripts'),
|
||||
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({
|
||||
optimizationLevel: 3,
|
||||
progressive: true,
|
||||
interlaced: true })))
|
||||
)
|
||||
.pipe(gulp.dest(build.images))
|
||||
.pipe(notify({ message: 'Images task complete' }))
|
||||
;
|
||||
});
|
||||
|
||||
// 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']);
|
||||
});
|
||||
|
||||
function errorReport(errTitle) {
|
||||
return plumber({
|
||||
errorHandler: notify.onError({
|
||||
// Customizing error title
|
||||
title: errTitle || "Error running Gulp",
|
||||
message: "Error: <%= error.message %>",
|
||||
sound: true
|
||||
})
|
||||
});
|
||||
}
|
||||
// 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>
|
||||
8892
package-lock.json
generated
8892
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",
|
||||
"devDependencies": {
|
||||
"browser-sync": "^2.18.13",
|
||||
"del": "^3.0.0",
|
||||
"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-plumber": "^1.1.0",
|
||||
"gulp-remember": "^0.3.1",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"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": {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@ function setup() {
|
|||
}
|
||||
|
||||
// get document coordinates of the element
|
||||
function getCoords(elem) {
|
||||
let box = elem.getBoundingClientRect();
|
||||
|
||||
return {
|
||||
top: box.top + pageYOffset,
|
||||
left: box.left + pageXOffset
|
||||
};
|
||||
}
|
||||
// function getCoords(elem) {
|
||||
// let box = elem.getBoundingClientRect();
|
||||
//
|
||||
// return {
|
||||
// top: box.top + pageYOffset,
|
||||
// left: box.left + pageXOffset
|
||||
// };
|
||||
// }
|
||||
|
||||
// https://stackoverflow.com/a/488073/1444149
|
||||
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 h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
|
||||
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 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 basic_ease = 600;
|
||||
|
|
@ -8,9 +8,9 @@
|
|||
|
||||
|
||||
// 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
|
||||
// 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 "other/YOUR-FILES.css";
|
||||
@import "../../vendor/normalizecss/normalize.css";
|
||||
// @import "vendor/YOUR-FILES.css";
|
||||
|
||||
|
||||
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
// Fonts
|
||||
// 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 {
|
||||
padding: $double_space $basic_indent;
|
||||
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 {
|
||||
|
||||
&.right + section {
|
||||
|
|
@ -98,6 +107,15 @@ header {
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
.header__txt {
|
||||
margin-bottom: $space_3;
|
||||
border-bottom: $dotted_border;
|
||||
|
||||
h1 {
|
||||
border-top: $basic_border;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
|
||||
}
|
||||
|
|
@ -41,6 +41,10 @@
|
|||
height: 1024px;
|
||||
}
|
||||
|
||||
.height_full {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.txt_center {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
|
@ -119,7 +123,7 @@
|
|||
position: fixed;
|
||||
}
|
||||
|
||||
.pos_bottom {
|
||||
.pin_bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
|
|
@ -1,9 +1,16 @@
|
|||
.demo__intro {
|
||||
@extend .sec__main_center;
|
||||
border-top-width: $border_width_8;
|
||||
border-top-style: solid;
|
||||
border-color: $basic_border_color;
|
||||
padding-top: $space_3;
|
||||
@extend .sec__main_status;
|
||||
}
|
||||
|
||||
.demo__status {
|
||||
@extend .sec__main_status;
|
||||
min-height: 50vh;
|
||||
border-color: $foxtrot_color;
|
||||
|
||||
h1:first-of-type {
|
||||
margin-top: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.demo__header {
|
||||
|
|
@ -39,6 +46,7 @@
|
|||
.header__fix {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: transparentize($charlie_color, .4);
|
||||
|
||||
|
|
@ -173,3 +181,18 @@
|
|||
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 */
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* 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 {
|
||||
font-family: sans-serif; /* 1 */
|
||||
line-height: 1.15; /* 2 */
|
||||
-ms-text-size-adjust: 100%; /* 3 */
|
||||
-webkit-text-size-adjust: 100%; /* 3 */
|
||||
line-height: 1.15; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
|
|
@ -108,17 +106,7 @@ a {
|
|||
}
|
||||
|
||||
/**
|
||||
* Remove the outline on focused links when they are also active or hovered
|
||||
* in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in 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.
|
||||
*/
|
||||
|
||||
|
|
@ -317,13 +305,11 @@ button:-moz-focusring,
|
|||
}
|
||||
|
||||
/**
|
||||
* Change the border, margin, and padding in all browsers (opinionated).
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
Loading…
Add table
Add a link
Reference in a new issue