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
130
gulpfile.js
130
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({
|
||||||
|
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) {
|
// The default task (called when you run `gulp` from cli)
|
||||||
return plumber({
|
gulp.task('default', ['clean', 'styles', 'scripts']);
|
||||||
errorHandler: notify.onError({
|
|
||||||
// Customizing error title
|
|
||||||
title: errTitle || "Error running Gulp",
|
|
||||||
message: "Error: <%= error.message %>",
|
|
||||||
sound: true
|
|
||||||
})
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
|
||||||
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",
|
"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 {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
@import "color";
|
@import "color";
|
||||||
@import "shade";
|
@import "shade";
|
||||||
@import "tint";
|
@import "tint";
|
||||||
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
@ -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,4 +1,4 @@
|
||||||
@import "media_query";
|
@import "media_query";
|
||||||
@import "flow";
|
@import "flow";
|
||||||
@import "color";
|
@import "color";
|
||||||
@import "user_agent";
|
@import "user_agent";
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,35 +1,35 @@
|
||||||
//Sections for Media Queries
|
//Sections for Media Queries
|
||||||
@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_tiny) { @content; } //600px
|
@media (min-width: $screen_tiny) { @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; }
|
||||||
}
|
}
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
@mixin overrideUserAgent() {
|
@mixin overrideUserAgent() {
|
||||||
@if $no_agent_focus == true {
|
@if $no_agent_focus == true {
|
||||||
@each $el in $basic_focus_list {
|
@each $el in $basic_focus_list {
|
||||||
#{$el}:focus {
|
#{$el}:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,46 +1,46 @@
|
||||||
.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 {
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 {}
|
||||||
}
|
}
|
||||||
|
|
@ -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