interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

10 years later #1

Merged
sthag merged 374 commits from development into main 2026-03-07 00:18:59 +01:00
Conversation 0 Commits 374 Files changed 135 +6912 -5247
56 changed files with 6912 additions and 5247 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit a4a1fbc14d - Show all commits

7
.jshintrc Normal file
View file

@ -0,0 +1,7 @@
{
"undef": true,
"unused": true,
"globals": {
}
}

2579
example.css → build/css/example.css
View file

File diff suppressed because it is too large Load diff

2
build/css/example.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

4
build/js/all.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

11
demo-explorer.html
View file

@ -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>
@ -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
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------

27
demo-index.html
View file

@ -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>
@ -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" 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
demo-presentation.html
View file

@ -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>
@ -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
View 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
View file

@ -1,43 +1,105 @@
const gulp = require('gulp'); // Setup project
const sass = require('gulp-ruby-sass'); var source = {
const sourcemaps = require('gulp-sourcemaps'); styles: 'source/style/example.scss',
const plumber = require('gulp-plumber'); scripts: ['source/code/variables.js', 'source/code/functions.js', 'source/code/global.js', 'source/code/**/*.coffee', '!source/vendor/**/*', ],
const notify = require('gulp-notify'); images: 'source/art/**/*'
const livereload = require('gulp-livereload'); };
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.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) { // 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
})
});
}

8892
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

17
package.json
View file

@ -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": {}
} }

16
code/functions.js → source/code/functions.js
View file

@ -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() {

7
code/global.js → source/code/global.js
View file

@ -119,13 +119,6 @@ $( document ).ready(function() {
// jq-sticky-anything
$('#js_demo_fix').stickThis({
pushup: '#js_demo_stop'
});
}); });

4
code/variables.js → source/code/variables.js
View file

@ -1,5 +1,5 @@
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 = false;

4
_abovethefold.scss → source/style/_abovethefold.scss
View file

@ -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";

8
_hippie.scss → source/style/_hippie.scss
View file

@ -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/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";

0
_settings.scss → source/style/_settings.scss
View file

0
elements/_embedded.scss → source/style/elements/_embedded.scss
View file

0
elements/_grouping.scss → source/style/elements/_grouping.scss
View file

0
elements/_interactive.scss → source/style/elements/_interactive.scss
View file

0
elements/_new.scss → source/style/elements/_new.scss
View file

0
elements/_sections.scss → source/style/elements/_sections.scss
View file

0
elements/_tables.scss → source/style/elements/_tables.scss
View file

0
elements/_textlevel.scss → source/style/elements/_textlevel.scss
View file

0
elements/_typography.scss → source/style/elements/_typography.scss
View file

0
example.scss → source/style/example.scss
View file

6
functions/_all.scss → source/style/functions/_all.scss
View file

@ -1,3 +1,3 @@
@import "color"; @import "color";
@import "shade"; @import "shade";
@import "tint"; @import "tint";

26
functions/_color.scss → source/style/functions/_color.scss
View file

@ -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);
} }

48
functions/_shade.scss → source/style/functions/_shade.scss
View file

@ -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);
} }

48
functions/_tint.scss → source/style/functions/_tint.scss
View file

@ -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);
} }

0
global/_common.scss → source/style/global/_common.scss
View file

0
global/_config.scss → source/style/global/_config.scss
View file

8
mixins/_all.scss → source/style/mixins/_all.scss
View file

@ -1,4 +1,4 @@
@import "media_query"; @import "media_query";
@import "flow"; @import "flow";
@import "color"; @import "color";
@import "user_agent"; @import "user_agent";

40
mixins/_color.scss → source/style/mixins/_color.scss
View file

@ -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;
} }
} }

50
mixins/_flow.scss → source/style/mixins/_flow.scss
View file

@ -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;
} }
} }

70
mixins/_media_query.scss → source/style/mixins/_media_query.scss
View file

@ -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; }
} }

18
mixins/_user_agent.scss → source/style/mixins/_user_agent.scss
View file

@ -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;
} }
} }
} }
} }

0
modules/_vendor.scss → source/style/modules/_vendor.scss
View file

92
modules/breakpoint/_breakpoint_module.scss → source/style/modules/breakpoint/_breakpoint_module.scss
View file

@ -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 {}
} }

0
modules/card/_card_module.scss → source/style/modules/card/_card_module.scss
View file

0
modules/card/_extends.scss → source/style/modules/card/_extends.scss
View file

0
modules/card/_mixins.scss → source/style/modules/card/_mixins.scss
View file

1
modules/demo/_demo_module.scss → source/style/modules/demo/_demo_module.scss
View file

@ -39,6 +39,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);

0
modules/editor/_editor_module.scss → source/style/modules/editor/_editor_module.scss
View file

0
modules/editor/_extends.scss → source/style/modules/editor/_extends.scss
View file

0
modules/editor/_mixins.scss → source/style/modules/editor/_mixins.scss
View file

0
modules/explanation/_explanation_module.scss → source/style/modules/explanation/_explanation_module.scss
View file

0
modules/explanation/_extends.scss → source/style/modules/explanation/_extends.scss
View file

0
modules/explanation/_mixins.scss → source/style/modules/explanation/_mixins.scss
View file

0
modules/navigation/_nav_module.scss → source/style/modules/navigation/_nav_module.scss
View file

0
modules/print/_extends.scss → source/style/modules/print/_extends.scss
View file

0
modules/print/_mixins.scss → source/style/modules/print/_mixins.scss
View file

0
modules/print/_print_module.scss → source/style/modules/print/_print_module.scss
View file

0
modules/tables/_tables_module.scss → source/style/modules/tables/_tables_module.scss
View file

0
code/vendor/jq-sticky-anything.min.js → vendor/jq-sticky-anything.min.js vendored
View file

0
other/normalize.css → vendor/normalize.css vendored
View file