gulp and file structure overhaul
new gulp setup including new npm packages new file structure moved all development files to source/ used files are in build/ now
This commit is contained in:
Stephan Hagedorn
parent
3a2140dad6
commit
a4a1fbc14d
56 changed files with 6912 additions and 5247 deletions
7
.jshintrc
Normal file
7
.jshintrc
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"undef": true,
|
||||
"unused": true,
|
||||
"globals": {
|
||||
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
2
build/css/example.min.css
vendored
Normal file
2
build/css/example.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
4
build/js/all.min.js
vendored
Normal file
4
build/js/all.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -629,14 +633,27 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
|
|||
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,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>
|
||||
|
|
@ -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>
|
||||
128
gulpfile.js
128
gulpfile.js
|
|
@ -1,43 +1,105 @@
|
|||
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 = {
|
||||
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.styles, ['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("./*.html").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']);
|
||||
|
|
|
|||
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,5 +1,5 @@
|
|||
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;
|
||||
|
||||
|
|
@ -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/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";
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
@import "color";
|
||||
@import "shade";
|
||||
@import "tint";
|
||||
@import "color";
|
||||
@import "shade";
|
||||
@import "tint";
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
@function createColorMap($color, $percentage, $opacity) {
|
||||
$map: (
|
||||
base: $color,
|
||||
light: lighten($color, $percentage),
|
||||
dark: darken($color, $percentage),
|
||||
trans: transparentize($color, $opacity)
|
||||
);
|
||||
@return $map;
|
||||
}
|
||||
|
||||
@function basic_color($key: 'alpha') {
|
||||
@return map-get($color_palette, $key);
|
||||
}
|
||||
@function createColorMap($color, $percentage, $opacity) {
|
||||
$map: (
|
||||
base: $color,
|
||||
light: lighten($color, $percentage),
|
||||
dark: darken($color, $percentage),
|
||||
trans: transparentize($color, $opacity)
|
||||
);
|
||||
@return $map;
|
||||
}
|
||||
|
||||
@function basic_color($key: 'alpha') {
|
||||
@return map-get($color_palette, $key);
|
||||
}
|
||||
|
|
@ -1,24 +1,24 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
// Mixes a color with black.
|
||||
//
|
||||
// @param {Color} $color
|
||||
//
|
||||
// @param {Number (Percentage)} $percent
|
||||
// The amount of black to be mixed in.
|
||||
//
|
||||
// @example scss - Usage
|
||||
// .element {
|
||||
// background-color: shade(#0c85ff, 60%);
|
||||
// }
|
||||
//
|
||||
// @example css - CSS Output
|
||||
// .element {
|
||||
// background-color: #074f99;
|
||||
// }
|
||||
//
|
||||
// @return {Color}
|
||||
|
||||
@function shade($color, $percent) {
|
||||
@return mix(#000, $color, $percent);
|
||||
}
|
||||
@charset "UTF-8";
|
||||
|
||||
// Mixes a color with black.
|
||||
//
|
||||
// @param {Color} $color
|
||||
//
|
||||
// @param {Number (Percentage)} $percent
|
||||
// The amount of black to be mixed in.
|
||||
//
|
||||
// @example scss - Usage
|
||||
// .element {
|
||||
// background-color: shade(#0c85ff, 60%);
|
||||
// }
|
||||
//
|
||||
// @example css - CSS Output
|
||||
// .element {
|
||||
// background-color: #074f99;
|
||||
// }
|
||||
//
|
||||
// @return {Color}
|
||||
|
||||
@function shade($color, $percent) {
|
||||
@return mix(#000, $color, $percent);
|
||||
}
|
||||
|
|
@ -1,24 +1,24 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
// Mixes a color with white.
|
||||
//
|
||||
// @param {Color} $color
|
||||
//
|
||||
// @param {Number (Percentage)} $percent
|
||||
// The amount of white to be mixed in.
|
||||
//
|
||||
// @example scss - Usage
|
||||
// .element {
|
||||
// background-color: tint(#0c85ff, 40%);
|
||||
// }
|
||||
//
|
||||
// @example css - CSS Output
|
||||
// .element {
|
||||
// background-color: #9dceff;
|
||||
// }
|
||||
//
|
||||
// @return {Color}
|
||||
|
||||
@function tint($color, $percent) {
|
||||
@return mix(#fff, $color, $percent);
|
||||
}
|
||||
@charset "UTF-8";
|
||||
|
||||
// Mixes a color with white.
|
||||
//
|
||||
// @param {Color} $color
|
||||
//
|
||||
// @param {Number (Percentage)} $percent
|
||||
// The amount of white to be mixed in.
|
||||
//
|
||||
// @example scss - Usage
|
||||
// .element {
|
||||
// background-color: tint(#0c85ff, 40%);
|
||||
// }
|
||||
//
|
||||
// @example css - CSS Output
|
||||
// .element {
|
||||
// background-color: #9dceff;
|
||||
// }
|
||||
//
|
||||
// @return {Color}
|
||||
|
||||
@function tint($color, $percent) {
|
||||
@return mix(#fff, $color, $percent);
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import "media_query";
|
||||
@import "flow";
|
||||
@import "color";
|
||||
@import "user_agent";
|
||||
@import "media_query";
|
||||
@import "flow";
|
||||
@import "color";
|
||||
@import "user_agent";
|
||||
|
|
@ -1,20 +1,20 @@
|
|||
@mixin addDefaultColors() {
|
||||
@if map-has-key($color_palette, alpha) {
|
||||
$alpha_color: map-get($color_palette, alpha) !global;
|
||||
}
|
||||
@if map-has-key($color_palette, bravo) {
|
||||
$bravo_color: map-get($color_palette, bravo) !global;
|
||||
}
|
||||
@if map-has-key($color_palette, charlie) {
|
||||
$charlie_color: map-get($color_palette, charlie) !global;
|
||||
}
|
||||
@if map-has-key($color_palette, delta) {
|
||||
$delta_color: map-get($color_palette, delta) !global;
|
||||
}
|
||||
@if map-has-key($color_palette, echo) {
|
||||
$echo_color: map-get($color_palette, echo) !global;
|
||||
}
|
||||
@if map-has-key($color_palette, foxtrot) {
|
||||
$foxtrot_color: map-get($color_palette, foxtrot) !global;
|
||||
}
|
||||
}
|
||||
@mixin addDefaultColors() {
|
||||
@if map-has-key($color_palette, alpha) {
|
||||
$alpha_color: map-get($color_palette, alpha) !global;
|
||||
}
|
||||
@if map-has-key($color_palette, bravo) {
|
||||
$bravo_color: map-get($color_palette, bravo) !global;
|
||||
}
|
||||
@if map-has-key($color_palette, charlie) {
|
||||
$charlie_color: map-get($color_palette, charlie) !global;
|
||||
}
|
||||
@if map-has-key($color_palette, delta) {
|
||||
$delta_color: map-get($color_palette, delta) !global;
|
||||
}
|
||||
@if map-has-key($color_palette, echo) {
|
||||
$echo_color: map-get($color_palette, echo) !global;
|
||||
}
|
||||
@if map-has-key($color_palette, foxtrot) {
|
||||
$foxtrot_color: map-get($color_palette, foxtrot) !global;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,25 +1,25 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
// Provides an easy way to include a clearflow for containing floats.
|
||||
//
|
||||
// @link http://cssmojo.com/latest_new_clearfix_so_far/
|
||||
//
|
||||
// @example scss - Usage
|
||||
// .element {
|
||||
// @include clearFlow;
|
||||
// }
|
||||
//
|
||||
// @example css - CSS Output
|
||||
// .element::after {
|
||||
// content: "";
|
||||
// clear: both;
|
||||
// display: table;
|
||||
// }
|
||||
|
||||
@mixin clearFlow {
|
||||
&::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
@charset "UTF-8";
|
||||
|
||||
// Provides an easy way to include a clearflow for containing floats.
|
||||
//
|
||||
// @link http://cssmojo.com/latest_new_clearfix_so_far/
|
||||
//
|
||||
// @example scss - Usage
|
||||
// .element {
|
||||
// @include clearFlow;
|
||||
// }
|
||||
//
|
||||
// @example css - CSS Output
|
||||
// .element::after {
|
||||
// content: "";
|
||||
// clear: both;
|
||||
// display: table;
|
||||
// }
|
||||
|
||||
@mixin clearFlow {
|
||||
&::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,35 +1,35 @@
|
|||
//Sections for Media Queries
|
||||
@mixin forPhoneOnly {
|
||||
@media (max-width: #{$screen_tiny - 1}) { @content; } //599px
|
||||
}
|
||||
@mixin forTabletPortraitUp {
|
||||
@media (min-width: $screen_tiny) { @content; } //600px
|
||||
}
|
||||
@mixin forTabletPortraitOnly {
|
||||
@media (min-width: $screen_tiny) and (max-width: #{$screen_small - 1}) { @content; } //600px - 899px
|
||||
}
|
||||
@mixin forTabletLandscapeUp {
|
||||
@media (min-width: $screen_small) { @content; } //900px
|
||||
}
|
||||
@mixin forTabletLandscapeOnly {
|
||||
@media (min-width: $screen_small) and (max-width: #{$screen_medium - 1}) { @content; } //900px - 1199px
|
||||
}
|
||||
@mixin forDesktopUp {
|
||||
@media (min-width: $screen_medium) { @content; } //1200px
|
||||
}
|
||||
@mixin forDesktopOnly {
|
||||
@media (min-width: $screen_medium) and (max-width: #{$screen_huge - 1}) { @content; } //1200px - 1799px
|
||||
}
|
||||
@mixin forBigDesktopUp {
|
||||
@media (min-width: $screen_huge) { @content; } //1800px
|
||||
}
|
||||
|
||||
//Mobile-first Media Query
|
||||
@mixin goingLarge($width) {
|
||||
@media (min-width: $width/16+em) { @content; }
|
||||
}
|
||||
|
||||
//Desktop-first Media Query
|
||||
@mixin goingSmall($width) {
|
||||
@media (max-width: $width/16+em) { @content; }
|
||||
}
|
||||
//Sections for Media Queries
|
||||
@mixin forPhoneOnly {
|
||||
@media (max-width: #{$screen_tiny - 1}) { @content; } //599px
|
||||
}
|
||||
@mixin forTabletPortraitUp {
|
||||
@media (min-width: $screen_tiny) { @content; } //600px
|
||||
}
|
||||
@mixin forTabletPortraitOnly {
|
||||
@media (min-width: $screen_tiny) and (max-width: #{$screen_small - 1}) { @content; } //600px - 899px
|
||||
}
|
||||
@mixin forTabletLandscapeUp {
|
||||
@media (min-width: $screen_small) { @content; } //900px
|
||||
}
|
||||
@mixin forTabletLandscapeOnly {
|
||||
@media (min-width: $screen_small) and (max-width: #{$screen_medium - 1}) { @content; } //900px - 1199px
|
||||
}
|
||||
@mixin forDesktopUp {
|
||||
@media (min-width: $screen_medium) { @content; } //1200px
|
||||
}
|
||||
@mixin forDesktopOnly {
|
||||
@media (min-width: $screen_medium) and (max-width: #{$screen_huge - 1}) { @content; } //1200px - 1799px
|
||||
}
|
||||
@mixin forBigDesktopUp {
|
||||
@media (min-width: $screen_huge) { @content; } //1800px
|
||||
}
|
||||
|
||||
//Mobile-first Media Query
|
||||
@mixin goingLarge($width) {
|
||||
@media (min-width: $width/16+em) { @content; }
|
||||
}
|
||||
|
||||
//Desktop-first Media Query
|
||||
@mixin goingSmall($width) {
|
||||
@media (max-width: $width/16+em) { @content; }
|
||||
}
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
@mixin overrideUserAgent() {
|
||||
@if $no_agent_focus == true {
|
||||
@each $el in $basic_focus_list {
|
||||
#{$el}:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin overrideUserAgent() {
|
||||
@if $no_agent_focus == true {
|
||||
@each $el in $basic_focus_list {
|
||||
#{$el}:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,46 +1,46 @@
|
|||
.query__goingLarge {
|
||||
@include goingLarge($screen_tiny) {};
|
||||
}
|
||||
|
||||
.query__goingSmall {
|
||||
@include goingSmall($screen_gigantic) {};
|
||||
}
|
||||
|
||||
.query__phoneUp {
|
||||
}
|
||||
|
||||
.query__phoneOnly {
|
||||
@include forPhoneOnly {}
|
||||
}
|
||||
|
||||
.query__tabletPortaitOnly {
|
||||
@include forTabletPortraitOnly {
|
||||
}
|
||||
}
|
||||
|
||||
.query__tabletPortraitUp {
|
||||
@include forTabletPortraitUp {
|
||||
}
|
||||
}
|
||||
|
||||
.query__tabletLandscapeOnly {
|
||||
@include forTabletLandscapeOnly {}
|
||||
}
|
||||
|
||||
.query__tabletLandscapeUp {
|
||||
@include forTabletLandscapeUp {}
|
||||
}
|
||||
|
||||
.query__desktopOnly {
|
||||
@include forDesktopOnly {
|
||||
}
|
||||
}
|
||||
|
||||
.query__desktopUp {
|
||||
@include forDesktopUp {
|
||||
}
|
||||
}
|
||||
|
||||
.query__bigDesktopUp {
|
||||
@include forBigDesktopUp {}
|
||||
}
|
||||
.query__goingLarge {
|
||||
@include goingLarge($screen_tiny) {};
|
||||
}
|
||||
|
||||
.query__goingSmall {
|
||||
@include goingSmall($screen_gigantic) {};
|
||||
}
|
||||
|
||||
.query__phoneUp {
|
||||
}
|
||||
|
||||
.query__phoneOnly {
|
||||
@include forPhoneOnly {}
|
||||
}
|
||||
|
||||
.query__tabletPortaitOnly {
|
||||
@include forTabletPortraitOnly {
|
||||
}
|
||||
}
|
||||
|
||||
.query__tabletPortraitUp {
|
||||
@include forTabletPortraitUp {
|
||||
}
|
||||
}
|
||||
|
||||
.query__tabletLandscapeOnly {
|
||||
@include forTabletLandscapeOnly {}
|
||||
}
|
||||
|
||||
.query__tabletLandscapeUp {
|
||||
@include forTabletLandscapeUp {}
|
||||
}
|
||||
|
||||
.query__desktopOnly {
|
||||
@include forDesktopOnly {
|
||||
}
|
||||
}
|
||||
|
||||
.query__desktopUp {
|
||||
@include forDesktopUp {
|
||||
}
|
||||
}
|
||||
|
||||
.query__bigDesktopUp {
|
||||
@include forBigDesktopUp {}
|
||||
}
|
||||
|
|
@ -39,6 +39,7 @@
|
|||
.header__fix {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: transparentize($charlie_color, .4);
|
||||
|
||||
0
other/normalize.css → vendor/normalize.css
vendored
0
other/normalize.css → vendor/normalize.css
vendored
Loading…
Add table
Add a link
Reference in a new issue