Setup static site generator
This commit is contained in:
Maciej Matuszewski
parent
fcff778e3d
commit
278a0c5f50
|
|
@ -0,0 +1,25 @@
|
||||||
|
# EditorConfig helps developers define and maintain consistent
|
||||||
|
# coding styles between different editors and IDEs
|
||||||
|
# editorconfig.org
|
||||||
|
|
||||||
|
root = true
|
||||||
|
|
||||||
|
|
||||||
|
[*]
|
||||||
|
|
||||||
|
# change these settings to your own preference
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
|
||||||
|
# we recommend you to keep these unchanged
|
||||||
|
end_of_line = lf
|
||||||
|
charset = utf-8
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
|
|
||||||
|
[*.md]
|
||||||
|
trim_trailing_whitespace = false
|
||||||
|
|
||||||
|
[{package,bower}.json]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
{
|
||||||
|
"parser": "babel-eslint",
|
||||||
|
"extends": "airbnb-base",
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"node": true,
|
||||||
|
"mocha": true,
|
||||||
|
"es6": true
|
||||||
|
},
|
||||||
|
"plugins": [
|
||||||
|
"import"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"ecmaVersion": 6,
|
||||||
|
"sourceType": "module"
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
"arrow-body-style": [
|
||||||
|
1,
|
||||||
|
"as-needed"
|
||||||
|
],
|
||||||
|
"comma-dangle": [
|
||||||
|
1,
|
||||||
|
"only-multiline"
|
||||||
|
],
|
||||||
|
"import/imports-first": 0,
|
||||||
|
"import/newline-after-import": 0,
|
||||||
|
"import/no-extraneous-dependencies": 0,
|
||||||
|
"import/no-named-as-default": 0,
|
||||||
|
"import/no-unresolved": 2,
|
||||||
|
"import/prefer-default-export": 0,
|
||||||
|
"indent": [
|
||||||
|
2,
|
||||||
|
2, {
|
||||||
|
"SwitchCase": 1
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"max-len": 0,
|
||||||
|
"newline-per-chained-call": 0,
|
||||||
|
"no-console": 1,
|
||||||
|
"no-use-before-define": 0,
|
||||||
|
"prefer-template": 2,
|
||||||
|
"require-yield": 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
* text=auto
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
.tmp
|
||||||
|
.sass-cache
|
||||||
|
bower_components
|
||||||
|
test/bower_components
|
||||||
|
npm-debug.log
|
||||||
|
|
@ -0,0 +1,209 @@
|
||||||
|
{
|
||||||
|
"extends": "stylelint-config-standard",
|
||||||
|
"plugins": [
|
||||||
|
"stylelint-order",
|
||||||
|
"stylelint-scss"
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"color-hex-case": "lower",
|
||||||
|
"string-quotes": "single",
|
||||||
|
"font-family-name-quotes": "always-where-recommended",
|
||||||
|
"number-leading-zero": "never",
|
||||||
|
"at-rule-empty-line-before": ["always", {
|
||||||
|
"ignore": [
|
||||||
|
"after-comment",
|
||||||
|
"inside-block",
|
||||||
|
"blockless-after-same-name-blockless",
|
||||||
|
"blockless-after-blockless"
|
||||||
|
]
|
||||||
|
}],
|
||||||
|
"selector-pseudo-class-no-unknown": [
|
||||||
|
true, {
|
||||||
|
"ignorePseudoClasses": [
|
||||||
|
"global"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"indentation": 2,
|
||||||
|
"order/declaration-block-order": [
|
||||||
|
"dollar-variables",
|
||||||
|
{
|
||||||
|
type: "at-rule",
|
||||||
|
name: "include"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "at-rule",
|
||||||
|
name: "extend"
|
||||||
|
},
|
||||||
|
"declarations",
|
||||||
|
"rules",
|
||||||
|
"at-rules"
|
||||||
|
],
|
||||||
|
"order/declaration-block-properties-specified-order": [
|
||||||
|
[
|
||||||
|
"position",
|
||||||
|
"top",
|
||||||
|
"right",
|
||||||
|
"bottom",
|
||||||
|
"left",
|
||||||
|
"z-index",
|
||||||
|
"display",
|
||||||
|
"align-content",
|
||||||
|
"align-items",
|
||||||
|
"align-self",
|
||||||
|
"flex",
|
||||||
|
"flex-basis",
|
||||||
|
"flex-direction",
|
||||||
|
"flex-flow",
|
||||||
|
"flex-grow",
|
||||||
|
"flex-shrink",
|
||||||
|
"flex-wrap",
|
||||||
|
"justify-content",
|
||||||
|
"order",
|
||||||
|
"float",
|
||||||
|
"width",
|
||||||
|
"height",
|
||||||
|
"max-width",
|
||||||
|
"max-height",
|
||||||
|
"min-width",
|
||||||
|
"min-height",
|
||||||
|
"margin",
|
||||||
|
"margin-top",
|
||||||
|
"margin-right",
|
||||||
|
"margin-bottom",
|
||||||
|
"margin-left",
|
||||||
|
"margin-collapse",
|
||||||
|
"margin-top-collapse",
|
||||||
|
"margin-right-collapse",
|
||||||
|
"margin-bottom-collapse",
|
||||||
|
"margin-left-collapse",
|
||||||
|
"padding",
|
||||||
|
"padding-top",
|
||||||
|
"padding-right",
|
||||||
|
"padding-bottom",
|
||||||
|
"padding-left",
|
||||||
|
"overflow",
|
||||||
|
"overflow-x",
|
||||||
|
"overflow-y",
|
||||||
|
"clip",
|
||||||
|
"clear",
|
||||||
|
"font",
|
||||||
|
"font-family",
|
||||||
|
"font-size",
|
||||||
|
"font-smoothing",
|
||||||
|
"osx-font-smoothing",
|
||||||
|
"font-style",
|
||||||
|
"font-weight",
|
||||||
|
"hyphens",
|
||||||
|
"src",
|
||||||
|
"line-height",
|
||||||
|
"letter-spacing",
|
||||||
|
"word-spacing",
|
||||||
|
"color",
|
||||||
|
"text-align",
|
||||||
|
"text-decoration",
|
||||||
|
"text-indent",
|
||||||
|
"text-overflow",
|
||||||
|
"text-rendering",
|
||||||
|
"text-size-adjust",
|
||||||
|
"text-shadow",
|
||||||
|
"text-transform",
|
||||||
|
"word-break",
|
||||||
|
"word-wrap",
|
||||||
|
"white-space",
|
||||||
|
"vertical-align",
|
||||||
|
"list-style",
|
||||||
|
"list-style-type",
|
||||||
|
"list-style-position",
|
||||||
|
"list-style-image",
|
||||||
|
"pointer-events",
|
||||||
|
"cursor",
|
||||||
|
"background",
|
||||||
|
"background-attachment",
|
||||||
|
"background-clip",
|
||||||
|
"background-color",
|
||||||
|
"background-image",
|
||||||
|
"background-position",
|
||||||
|
"background-repeat",
|
||||||
|
"background-size",
|
||||||
|
"border",
|
||||||
|
"border-collapse",
|
||||||
|
"border-top",
|
||||||
|
"border-right",
|
||||||
|
"border-bottom",
|
||||||
|
"border-left",
|
||||||
|
"border-color",
|
||||||
|
"border-image",
|
||||||
|
"border-top-color",
|
||||||
|
"border-right-color",
|
||||||
|
"border-bottom-color",
|
||||||
|
"border-left-color",
|
||||||
|
"border-spacing",
|
||||||
|
"border-style",
|
||||||
|
"border-top-style",
|
||||||
|
"border-right-style",
|
||||||
|
"border-bottom-style",
|
||||||
|
"border-left-style",
|
||||||
|
"border-width",
|
||||||
|
"border-top-width",
|
||||||
|
"border-right-width",
|
||||||
|
"border-bottom-width",
|
||||||
|
"border-left-width",
|
||||||
|
"border-radius",
|
||||||
|
"border-top-right-radius",
|
||||||
|
"border-bottom-right-radius",
|
||||||
|
"border-bottom-left-radius",
|
||||||
|
"border-top-left-radius",
|
||||||
|
"border-radius-topright",
|
||||||
|
"border-radius-bottomright",
|
||||||
|
"border-radius-bottomleft",
|
||||||
|
"border-radius-topleft",
|
||||||
|
"content",
|
||||||
|
"quotes",
|
||||||
|
"outline",
|
||||||
|
"outline-offset",
|
||||||
|
"outline-width",
|
||||||
|
"outline-style",
|
||||||
|
"outline-color",
|
||||||
|
"opacity",
|
||||||
|
"filter",
|
||||||
|
"visibility",
|
||||||
|
"size",
|
||||||
|
"zoom",
|
||||||
|
"transform",
|
||||||
|
"box-align",
|
||||||
|
"box-flex",
|
||||||
|
"box-orient",
|
||||||
|
"box-pack",
|
||||||
|
"box-shadow",
|
||||||
|
"box-sizing",
|
||||||
|
"table-layout",
|
||||||
|
"animation",
|
||||||
|
"animation-delay",
|
||||||
|
"animation-duration",
|
||||||
|
"animation-iteration-count",
|
||||||
|
"animation-name",
|
||||||
|
"animation-play-state",
|
||||||
|
"animation-timing-function",
|
||||||
|
"animation-fill-mode",
|
||||||
|
"transition",
|
||||||
|
"transition-delay",
|
||||||
|
"transition-duration",
|
||||||
|
"transition-property",
|
||||||
|
"transition-timing-function",
|
||||||
|
"backface-visibility",
|
||||||
|
"resize",
|
||||||
|
"appearance",
|
||||||
|
"user-select",
|
||||||
|
"interpolation-mode",
|
||||||
|
"direction",
|
||||||
|
"marks",
|
||||||
|
"page",
|
||||||
|
"set-link-source",
|
||||||
|
"unicode-bidi",
|
||||||
|
"speak"
|
||||||
|
],
|
||||||
|
{ unspecified: "bottomAlphabetical" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -14,4 +14,8 @@ You can find out more by watching the video below and joining the upcoming meetu
|
||||||
|
|
||||||
Is simply somewhere to keep the #ArtProject website for now and create bounties for any and all of the technical work we will require in order to make this the single greatest and most mind-boggling installation the crypto-world has ever seen!
|
Is simply somewhere to keep the #ArtProject website for now and create bounties for any and all of the technical work we will require in order to make this the single greatest and most mind-boggling installation the crypto-world has ever seen!
|
||||||
|
|
||||||
|
<<<<<<< HEAD
|
||||||
Join us - the revolution will rendered artistically!
|
Join us - the revolution will rendered artistically!
|
||||||
|
=======
|
||||||
|
Join us - the revolution will rendered artistically!
|
||||||
|
>>>>>>> Setup static site generator
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,256 @@
|
||||||
|
import gulp from 'gulp';
|
||||||
|
import gulpLoadPlugins from 'gulp-load-plugins';
|
||||||
|
import browserSync from 'browser-sync';
|
||||||
|
import del from 'del';
|
||||||
|
import sassModuleImporter from 'sass-module-importer';
|
||||||
|
import browserify from 'browserify';
|
||||||
|
import babelify from 'babelify';
|
||||||
|
import rollupify from 'rollupify';
|
||||||
|
import source from 'vinyl-source-stream';
|
||||||
|
import buffer from 'vinyl-buffer';
|
||||||
|
|
||||||
|
const $ = gulpLoadPlugins();
|
||||||
|
const reload = browserSync.reload;
|
||||||
|
|
||||||
|
const packageJSON = require('./package.json');
|
||||||
|
const dependenciesObject = (packageJSON && packageJSON.dependencies) || {};
|
||||||
|
const vendorDeps = Object.keys(dependenciesObject).filter(name => !/\.s?css|\.sass/.test(name));
|
||||||
|
|
||||||
|
function lint(files) {
|
||||||
|
return () => {
|
||||||
|
return gulp.src(files)
|
||||||
|
.pipe($.plumber({
|
||||||
|
errorHandler(err) {
|
||||||
|
console.log(err); // eslint-disable-line no-console
|
||||||
|
this.emit('end');
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
.pipe($.eslint())
|
||||||
|
.pipe($.eslint.format())
|
||||||
|
.pipe($.if(!browserSync.active, $.eslint.failAfterError()));
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
gulp.task('styles', ['styles:lint'], () => {
|
||||||
|
return gulp.src('./src/styles/**/*.scss')
|
||||||
|
.pipe($.plumber({
|
||||||
|
errorHandler(err) {
|
||||||
|
console.log(err); // eslint-disable-line no-console
|
||||||
|
this.emit('end');
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
.pipe($.sass({
|
||||||
|
importer: sassModuleImporter()
|
||||||
|
}))
|
||||||
|
.pipe($.sourcemaps.init())
|
||||||
|
.pipe($.autoprefixer({
|
||||||
|
browsers: ['last 1 version']
|
||||||
|
}))
|
||||||
|
.pipe($.sourcemaps.write())
|
||||||
|
.pipe(gulp.dest('./dist/css'))
|
||||||
|
.pipe(reload({
|
||||||
|
stream: true
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('styles:lint', () => {
|
||||||
|
return gulp.src('./src/styles/**/*.scss')
|
||||||
|
.pipe($.stylelint({
|
||||||
|
reporters: [{
|
||||||
|
formatter: 'string',
|
||||||
|
console: true
|
||||||
|
}]
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('lint', lint('./src/scripts/**/*.js'));
|
||||||
|
gulp.task('lint:test', lint('test/spec/**/*.js'));
|
||||||
|
|
||||||
|
gulp.task('scripts', ['scripts:vendor'], () => {
|
||||||
|
return browserify({
|
||||||
|
entries: './src/scripts/main.js',
|
||||||
|
debug: true,
|
||||||
|
})
|
||||||
|
.external(vendorDeps)
|
||||||
|
.transform(babelify)
|
||||||
|
.transform(rollupify)
|
||||||
|
.bundle()
|
||||||
|
.on('error', $.notify.onError({
|
||||||
|
title: 'Failed running browserify',
|
||||||
|
message: 'Error: <%= error.message %>'
|
||||||
|
}))
|
||||||
|
.pipe(source('main.js'))
|
||||||
|
.pipe(buffer())
|
||||||
|
.pipe($.sourcemaps.init({
|
||||||
|
loadMaps: true
|
||||||
|
}))
|
||||||
|
.pipe($.sourcemaps.write())
|
||||||
|
.pipe(gulp.dest('./dist/js'))
|
||||||
|
.pipe(reload({
|
||||||
|
stream: true,
|
||||||
|
once: true
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('scripts:vendor', () => (
|
||||||
|
browserify()
|
||||||
|
.require(vendorDeps)
|
||||||
|
.transform(rollupify)
|
||||||
|
.bundle()
|
||||||
|
.on('error', $.notify.onError({
|
||||||
|
title: 'Failed running browserify',
|
||||||
|
message: 'Error: <%= error.message %>'
|
||||||
|
}))
|
||||||
|
.pipe(source('vendor.js'))
|
||||||
|
.pipe(buffer())
|
||||||
|
.pipe(gulp.dest('./dist/js'))
|
||||||
|
));
|
||||||
|
|
||||||
|
gulp.task('hbs', () => {
|
||||||
|
return gulp.src('./src/hbs/*.hbs')
|
||||||
|
.pipe($.plumber({
|
||||||
|
errorHandler(err) {
|
||||||
|
console.log(err); // eslint-disable-line no-console
|
||||||
|
this.emit('end');
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
.pipe($.frontMatter({
|
||||||
|
property: 'data',
|
||||||
|
remove: true
|
||||||
|
}))
|
||||||
|
.pipe(
|
||||||
|
$.hb({
|
||||||
|
bustCache: true,
|
||||||
|
helpers: [
|
||||||
|
'./src/hbs/helpers/repeat.js',
|
||||||
|
'./node_modules/handlebars-helpers/lib/fs.js',
|
||||||
|
'./node_modules/handlebars-helpers/lib/comparison.js',
|
||||||
|
'./node_modules/handlebars-helpers/lib/collection.js',
|
||||||
|
'./node_modules/handlebars-helpers/lib/string.js',
|
||||||
|
'./node_modules/handlebars-helpers/lib/math.js',
|
||||||
|
'./node_modules/handlebars-layouts'
|
||||||
|
]
|
||||||
|
})
|
||||||
|
.partials('./src/hbs/layouts/*.hbs')
|
||||||
|
.partials('./src/hbs/partials/**/*.hbs')
|
||||||
|
)
|
||||||
|
.pipe($.rename({
|
||||||
|
extname: '.html',
|
||||||
|
}))
|
||||||
|
.pipe(gulp.dest('./dist'))
|
||||||
|
.pipe(reload({
|
||||||
|
stream: true,
|
||||||
|
once: true
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('html', ['hbs', 'styles', 'scripts'], () => {
|
||||||
|
return gulp.src('./dist/*.html')
|
||||||
|
.pipe($.useref())
|
||||||
|
.pipe($.if('*.js', $.uglify()))
|
||||||
|
.pipe($.if('*.css', $.cleanCss({
|
||||||
|
compatibility: '*'
|
||||||
|
})))
|
||||||
|
.pipe($.if('*.html', $.htmlmin({
|
||||||
|
collapseWhitespace: true,
|
||||||
|
conditionals: true
|
||||||
|
})))
|
||||||
|
.pipe(gulp.dest('./dist'));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('images', () => {
|
||||||
|
return gulp.src('./src/images/**/*.{png,jpg,jpeg,gif,svg}')
|
||||||
|
.pipe($.plumber())
|
||||||
|
.pipe($.if($.if.isFile, $.cache($.imagemin({
|
||||||
|
progressive: true,
|
||||||
|
interlaced: true,
|
||||||
|
// don't remove IDs from SVGs, they are often used
|
||||||
|
// as hooks for embedding and styling
|
||||||
|
svgoPlugins: [{
|
||||||
|
cleanupIDs: false,
|
||||||
|
removeUselessDefs: true,
|
||||||
|
convertStyleToAttrs: true
|
||||||
|
}]
|
||||||
|
}))
|
||||||
|
.on('error', (err) => {
|
||||||
|
console.log(err); // eslint-disable-line no-console
|
||||||
|
this.end();
|
||||||
|
})))
|
||||||
|
.pipe(gulp.dest('dist/images'));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('fonts', () => {
|
||||||
|
return gulp.src(['./src/fonts/*.{eot,svg,ttf,woff,woff2}'])
|
||||||
|
.pipe(gulp.dest('./dist/fonts'));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('extras', () => {
|
||||||
|
return gulp.src([
|
||||||
|
'./src/*.*',
|
||||||
|
'!./src/.DS_Store',
|
||||||
|
'!src/*.html'
|
||||||
|
], {
|
||||||
|
dot: true
|
||||||
|
}).pipe(gulp.dest('dist'));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('clean', () => {
|
||||||
|
return del.sync('./dist');
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('serve', ['clean', 'hbs', 'styles', 'lint', 'scripts'], () => {
|
||||||
|
browserSync({
|
||||||
|
notify: false,
|
||||||
|
port: 9000,
|
||||||
|
server: {
|
||||||
|
baseDir: './dist',
|
||||||
|
routes: {
|
||||||
|
'/images': 'src/images',
|
||||||
|
'/fonts': 'src/fonts'
|
||||||
|
},
|
||||||
|
directory: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$.watch([
|
||||||
|
'./src/hbs/partials/**/*.hbs',
|
||||||
|
'./src/hbs/layouts/*.hbs',
|
||||||
|
'./src/hbs/*.html'
|
||||||
|
], () => {
|
||||||
|
gulp.start('hbs');
|
||||||
|
});
|
||||||
|
|
||||||
|
$.watch('./src/scripts/**/*.js', () => {
|
||||||
|
gulp.start('scripts');
|
||||||
|
gulp.start('lint');
|
||||||
|
});
|
||||||
|
|
||||||
|
$.watch('./src/styles/**/*.scss', () => {
|
||||||
|
gulp.start('styles');
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.watch('./src/images/**/**.{png,jpg,jpeg,gif,svg}').on('change', reload);
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('test', () => {
|
||||||
|
gulp.src('./test/**/*.js', { read: false })
|
||||||
|
.pipe($.mocha());
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('test:watch', ['lint:test', 'test'], () => {
|
||||||
|
$.watch('./test/spec/**/*.js', () => {
|
||||||
|
gulp.start('lint:test');
|
||||||
|
gulp.start('test');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('build', ['clean', 'lint', 'html', 'fonts', 'extras', 'images'], () => {
|
||||||
|
return gulp.src('dist/**/*').pipe($.size({
|
||||||
|
title: 'build',
|
||||||
|
gzip: true
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('default', () => {
|
||||||
|
gulp.start('serve');
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
{
|
||||||
|
"name": "static-site-starter",
|
||||||
|
"description": "Starter for any static site that you want to build.",
|
||||||
|
"version": "1.1.2",
|
||||||
|
"private": true,
|
||||||
|
"engines": {
|
||||||
|
"npm": ">=3"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "./node_modules/gulp/bin/gulp.js serve",
|
||||||
|
"build": "./node_modules/gulp/bin/gulp.js build",
|
||||||
|
"test": "./node_modules/gulp/bin/gulp.js test",
|
||||||
|
"test:watch": "./node_modules/gulp/bin/gulp.js test:watch"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"babel-core": "^5.5.6",
|
||||||
|
"babel-eslint": "^6.1.2",
|
||||||
|
"babel-preset-es2015": "^6.18.0",
|
||||||
|
"babel-preset-stage-0": "^6.16.0",
|
||||||
|
"babelify": "^7.3.0",
|
||||||
|
"browser-sync": "^2.18.1",
|
||||||
|
"browserify": "^13.1.1",
|
||||||
|
"chai": "^3.5.0",
|
||||||
|
"del": "^2.2.2",
|
||||||
|
"eslint": "^3.10.2",
|
||||||
|
"eslint-config-airbnb-base": "^10.0.1",
|
||||||
|
"eslint-plugin-import": "^2.2.0",
|
||||||
|
"gulp": "^3.9.1",
|
||||||
|
"gulp-autoprefixer": "^3.1.1",
|
||||||
|
"gulp-cache": "^0.4.5",
|
||||||
|
"gulp-clean-css": "^2.0.13",
|
||||||
|
"gulp-eslint": "^3.0.1",
|
||||||
|
"gulp-front-matter": "^1.3.0",
|
||||||
|
"gulp-hb": "^5.1.4",
|
||||||
|
"gulp-htmlmin": "^3.0.0",
|
||||||
|
"gulp-if": "^2.0.2",
|
||||||
|
"gulp-imagemin": "^3.1.1",
|
||||||
|
"gulp-load-plugins": "^1.4.0",
|
||||||
|
"gulp-mocha": "^3.0.1",
|
||||||
|
"gulp-notify": "^2.2.0",
|
||||||
|
"gulp-plumber": "^1.1.0",
|
||||||
|
"gulp-rename": "^1.2.2",
|
||||||
|
"gulp-sass": "^2.3.2",
|
||||||
|
"gulp-size": "^2.1.0",
|
||||||
|
"gulp-sourcemaps": "^2.2.0",
|
||||||
|
"gulp-stylelint": "^3.7.0",
|
||||||
|
"gulp-uglify": "^2.0.0",
|
||||||
|
"gulp-useref": "^3.1.2",
|
||||||
|
"gulp-watch": "^4.3.10",
|
||||||
|
"handlebars-helper-repeat": "^0.3.1",
|
||||||
|
"handlebars-helpers": "^0.7.5",
|
||||||
|
"handlebars-layouts": "^3.1.4",
|
||||||
|
"opn": "^4.0.2",
|
||||||
|
"rollupify": "^0.3.5",
|
||||||
|
"sass-module-importer": "^1.4.0",
|
||||||
|
"stylelint": "^7.8.0",
|
||||||
|
"stylelint-config-standard": "^16.0.0",
|
||||||
|
"stylelint-order": "^0.2.2",
|
||||||
|
"stylelint-scss": "^1.4.1",
|
||||||
|
"vinyl-buffer": "^1.0.0",
|
||||||
|
"vinyl-source-stream": "^1.1.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"sanitize.css": "^4.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var repeat = require('handlebars-helper-repeat');
|
||||||
|
|
||||||
|
module.exports.register = function(Handlebars, options) {
|
||||||
|
Handlebars.registerHelper('repeat', repeat);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
---
|
||||||
|
title: 'Home'
|
||||||
|
---
|
||||||
|
|
||||||
|
{{#extend "base"}}
|
||||||
|
{{#content "main"}}
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h1>Hello World!</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{/content}}
|
||||||
|
{{/extend}}
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html class="no-js">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="viewport" content="width=device-width">
|
||||||
|
<title>Static Site Starter | {{@file.data.title}}</title>
|
||||||
|
|
||||||
|
<!-- build:css css/main.css -->
|
||||||
|
<link rel="stylesheet" href="/css/main.css">
|
||||||
|
<!-- endbuild -->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--[if lt IE 10]>
|
||||||
|
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
||||||
|
<![endif]-->
|
||||||
|
|
||||||
|
<div class="wrapper">
|
||||||
|
{{> header}}
|
||||||
|
|
||||||
|
<main class="main">
|
||||||
|
{{{ block "main"}}}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{{> footer}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
|
||||||
|
<!--<script>
|
||||||
|
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
||||||
|
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
||||||
|
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
||||||
|
e.src='https://www.google-analytics.com/analytics.js';
|
||||||
|
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
||||||
|
ga('create','UA-XXXXX-X');ga('send','pageview');
|
||||||
|
</script>-->
|
||||||
|
|
||||||
|
<!-- build:js js/vendor.js -->
|
||||||
|
<script src="/js/vendor.js" type="text/javascript"></script>
|
||||||
|
<!-- endbuild -->
|
||||||
|
|
||||||
|
<!-- build:js js/main.js -->
|
||||||
|
<script src="/js/main.js" type="text/javascript"></script>
|
||||||
|
<!-- endbuild -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<footer>
|
||||||
|
This is footer
|
||||||
|
</footer>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<header>
|
||||||
|
This is header
|
||||||
|
</header>
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
# robotstxt.org/
|
||||||
|
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
console.log('Hello World!'); // eslint-disable-line no-console
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
//=======================
|
||||||
|
// Colors
|
||||||
|
//=======================
|
||||||
|
|
||||||
|
$primary: #fff;
|
||||||
|
$text: #000;
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
//=======================
|
||||||
|
// Core styles
|
||||||
|
//=======================
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: $base-font-family;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.33;
|
||||||
|
color: $text;
|
||||||
|
background-color: $primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
height: auto;
|
||||||
|
min-height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
//=======================
|
||||||
|
// Styles reset
|
||||||
|
//=======================
|
||||||
|
|
||||||
|
* {
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
outline: 0;
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
font-family: $base-font-family;
|
||||||
|
font-size: remify(14px);
|
||||||
|
cursor: pointer;
|
||||||
|
background: none;
|
||||||
|
|
||||||
|
&::-moz-focus-inner {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
font-family: $base-font-family;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
//=======================
|
||||||
|
// Media queries
|
||||||
|
//=======================
|
||||||
|
|
||||||
|
$xs: 480px;
|
||||||
|
$sm: 768px;
|
||||||
|
$md: 992px;
|
||||||
|
$lg: 1200px;
|
||||||
|
|
||||||
|
$grid-gutter: 30px;
|
||||||
|
$grid-columns: 12;
|
||||||
|
|
||||||
|
$container-sm: 720px;
|
||||||
|
$container-md: 940px;
|
||||||
|
$container-lg: 1140px;
|
||||||
|
|
||||||
|
$screen-xs: 'only screen and (min-width: 1px)';
|
||||||
|
$screen-sm: 'only screen and (min-width: #{$sm})';
|
||||||
|
$screen-md: 'only screen and (min-width: #{$md})';
|
||||||
|
$screen-lg: 'only screen and (min-width: #{$lg})';
|
||||||
|
|
||||||
|
$screen-only-xs: 'only screen and (max-width: #{$xs - 1})';
|
||||||
|
$screen-only-sm: 'only screen and (min-width: #{$xs}) and (max-width: #{$md - 1})';
|
||||||
|
$screen-only-md: 'only screen and (min-width: #{$md}) and (max-width: #{$lg - 1})';
|
||||||
|
$screen-only-lg: 'only screen and (min-width: #{$lg})';
|
||||||
|
|
||||||
|
//=======================
|
||||||
|
// Typography
|
||||||
|
//=======================
|
||||||
|
|
||||||
|
// HTML base font size is 16px
|
||||||
|
$base-font-size: 16px;
|
||||||
|
$base-font-family: Arial, sans-serif;
|
||||||
|
|
||||||
|
//=======================
|
||||||
|
// Misc
|
||||||
|
//=======================
|
||||||
|
|
||||||
|
$duration: .2s;
|
||||||
|
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
//=======================
|
||||||
|
// Headings
|
||||||
|
//=======================
|
||||||
|
|
||||||
|
@for $i from 0 through 6 {
|
||||||
|
h#{$i} {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
// *** Styles ***
|
||||||
|
@import 'sanitize.css';
|
||||||
|
|
||||||
|
@import './base/settings';
|
||||||
|
@import './base/colors';
|
||||||
|
|
||||||
|
@import './utils/easings';
|
||||||
|
@import './utils/animations';
|
||||||
|
@import './utils/grid';
|
||||||
|
@import './utils/ui';
|
||||||
|
|
||||||
|
@import './base/core';
|
||||||
|
@import './base/typography';
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
@mixin fade-in($duration: .2s) {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
transition: opacity $duration;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin fade-out($duration: .2s, $easing: linear) {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: opacity $duration $easing 0s, visibility 0s $easing $duration;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin slide-up-in($duration: .2s) {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
transition: opacity $duration, transform $duration;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin slide-down-out($pos, $duration: .2s, $easing: linear) {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transform: translate3d(0, $pos, 0);
|
||||||
|
transition: opacity $duration $easing 0s, transform $duration $easing 0s, visibility 0s $easing $duration;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin scale-up($duration: .2s) {
|
||||||
|
visibility: visible;
|
||||||
|
transform: scale(1);
|
||||||
|
transform-origin: 50% 50%;
|
||||||
|
transition: transform $duration;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin scale-down($duration: .2s, $easing: linear) {
|
||||||
|
visibility: hidden;
|
||||||
|
transform: scale(0);
|
||||||
|
transform-origin: 50% 50%;
|
||||||
|
transition: transform $duration $easing 0s, visibility 0s $easing $duration;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
// Cubic
|
||||||
|
$ease-in-cubic: cubic-bezier(.55, .055, .675, .19);
|
||||||
|
$ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
|
||||||
|
$ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
|
||||||
|
|
||||||
|
// Circ
|
||||||
|
$ease-in-circ: cubic-bezier(.6, .04, .98, .335);
|
||||||
|
$ease-out-circ: cubic-bezier(.075, .82, .165, 1);
|
||||||
|
$ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
|
||||||
|
|
||||||
|
// Expo
|
||||||
|
$ease-in-expo: cubic-bezier(.95, .05, .795, .035);
|
||||||
|
$ease-out-expo: cubic-bezier(.19, 1, .22, 1);
|
||||||
|
$ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
|
||||||
|
|
||||||
|
// Quad
|
||||||
|
$ease-in-quad: cubic-bezier(.55, .085, .68, .53);
|
||||||
|
$ease-out-quad: cubic-bezier(.25, .46, .45, .94);
|
||||||
|
$ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
|
||||||
|
|
||||||
|
// Quart
|
||||||
|
$ease-in-quart: cubic-bezier(.895, .03, .685, .22);
|
||||||
|
$ease-out-quart: cubic-bezier(.165, .84, .44, 1);
|
||||||
|
$ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
|
||||||
|
|
||||||
|
// Quint
|
||||||
|
$ease-in-quint: cubic-bezier(.755, .05, .855, .06);
|
||||||
|
$ease-out-quint: cubic-bezier(.23, 1, .32, 1);
|
||||||
|
$ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
|
||||||
|
|
||||||
|
// Sine
|
||||||
|
$ease-in-sine: cubic-bezier(.47, 0, .745, .715);
|
||||||
|
$ease-out-sine: cubic-bezier(.39, .575, .565, 1);
|
||||||
|
$ease-in-out-sine: cubic-bezier(.445, .05, .55, .95);
|
||||||
|
|
||||||
|
// Back
|
||||||
|
$ease-in-back: cubic-bezier(.6, -.28, .735, .045);
|
||||||
|
$ease-out-back: cubic-bezier(.175, .885, .32, 1.275);
|
||||||
|
$ease-in-out-back: cubic-bezier(.68, -.55, .265, 1.55);
|
||||||
|
|
@ -0,0 +1,146 @@
|
||||||
|
//=======================
|
||||||
|
// Mixins
|
||||||
|
//=======================
|
||||||
|
|
||||||
|
@mixin clearfix {
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
display: table;
|
||||||
|
content: ' ';
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin container {
|
||||||
|
@include clearfix;
|
||||||
|
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
padding: 0 $grid-gutter / 2;
|
||||||
|
|
||||||
|
@media #{$screen-sm} {
|
||||||
|
width: $container-sm + $grid-gutter;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media #{$screen-md} {
|
||||||
|
width: $container-md + $grid-gutter;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media #{$screen-lg} {
|
||||||
|
width: $container-lg + $grid-gutter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin row {
|
||||||
|
@include clearfix;
|
||||||
|
|
||||||
|
margin-right: -($grid-gutter / 2);
|
||||||
|
margin-left: -($grid-gutter / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin row-gutter {
|
||||||
|
margin-right: -($grid-gutter / 2);
|
||||||
|
margin-left: -($grid-gutter / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin row-flex {
|
||||||
|
@include row-gutter;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin column($size) {
|
||||||
|
float: left;
|
||||||
|
width: ($size * 100% / $grid-columns);
|
||||||
|
min-height: 1px;
|
||||||
|
padding-right: $grid-gutter / 2;
|
||||||
|
padding-left: $grid-gutter / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin column-no-float($size) {
|
||||||
|
width: ($size * 100% / $grid-columns);
|
||||||
|
padding-right: $grid-gutter / 2;
|
||||||
|
padding-left: $grid-gutter / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin column-flex($size) {
|
||||||
|
flex: 0 0 ($size * 100% / $grid-columns);
|
||||||
|
max-width: ($size * 100% / $grid-columns);
|
||||||
|
padding-right: $grid-gutter / 2;
|
||||||
|
padding-left: $grid-gutter / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin column-offset($size, $dir: 'right') {
|
||||||
|
@if $dir == 'left' {
|
||||||
|
padding-left: calc(#{($size * 100% / $grid-columns)} + #{($grid-gutter / 2)});
|
||||||
|
}
|
||||||
|
@else if $dir == 'right' {
|
||||||
|
padding-right: calc(#{($size * 100% / $grid-columns)} + #{($grid-gutter / 2)});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin make-columns-grid($quantity) {
|
||||||
|
@for $i from 1 through $quantity {
|
||||||
|
.col-xs-#{$i},
|
||||||
|
.col-sm-#{$i},
|
||||||
|
.col-md-#{$i},
|
||||||
|
.col-lg-#{$i} {
|
||||||
|
@extend %col;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin generate-columns($quantity, $prefix) {
|
||||||
|
@for $i from 1 through $quantity {
|
||||||
|
.col-#{$prefix}-#{$i} {
|
||||||
|
width: ($i * 100% / $quantity);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin generate-columns-media($breakpoint, $prefix) {
|
||||||
|
@media #{$screen-sm} {
|
||||||
|
@include generate-columns(12, $prefix);
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: $container-sm + $grid-gutter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//=======================
|
||||||
|
// Placeholders
|
||||||
|
//=======================
|
||||||
|
|
||||||
|
%clearfix {
|
||||||
|
@include clearfix;
|
||||||
|
}
|
||||||
|
|
||||||
|
%row {
|
||||||
|
@extend %clearfix;
|
||||||
|
|
||||||
|
margin-right: -($grid-gutter / 2);
|
||||||
|
margin-left: -($grid-gutter / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
%col {
|
||||||
|
float: left;
|
||||||
|
padding-right: $grid-gutter / 2;
|
||||||
|
padding-left: $grid-gutter / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
%container-fluid {
|
||||||
|
@include clearfix;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
%container {
|
||||||
|
@include container;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
//=======================
|
||||||
|
// Form fields
|
||||||
|
//=======================
|
||||||
|
|
||||||
|
@mixin placeholder {
|
||||||
|
$placeholders: ':-webkit-input' ':-moz' '-moz' '-ms-input';
|
||||||
|
|
||||||
|
@each $placeholder in $placeholders {
|
||||||
|
&:#{$placeholder}-placeholder {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//=======================
|
||||||
|
// Typography
|
||||||
|
//=======================
|
||||||
|
|
||||||
|
@function remify($px) {
|
||||||
|
@return ($px / $base-font-size) * 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
%list-reset {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
//=======================
|
||||||
|
// Scaling
|
||||||
|
//=======================
|
||||||
|
|
||||||
|
@function calc-vw($size, $base-size) {
|
||||||
|
@return ($size / $base-size) * 100 * 1vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
@function calc-vh($size, $base-size) {
|
||||||
|
@return ($size / $base-size) * 100 * 1vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
@function calc-vm($size, $base-size) {
|
||||||
|
@return ($size / $base-size) * 100 * 1vm;
|
||||||
|
}
|
||||||
|
|
||||||
|
@function calc-vmin($size, $base-size) {
|
||||||
|
@return ($size / $base-size) * 100 * 1vmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
@function calc-vmax($size, $base-size) {
|
||||||
|
@return ($size / $base-size) * 100 * 1vmax;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Maintain full page height on mobile device browsers
|
||||||
|
// using viewport height unit.
|
||||||
|
@mixin get-fixed-vh($prop, $size, $offset: 0) {
|
||||||
|
#{$prop}: calc(#{$size * 1vh} - #{$offset});
|
||||||
|
|
||||||
|
@media screen and (max-device-aspect-ratio: 3 / 4) {
|
||||||
|
#{$prop}: calc(#{$size * 1vw * 1.333} - #{$offset});
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-device-aspect-ratio: 2 / 3) {
|
||||||
|
#{$prop}: calc(#{$size * 1vw * 1.5} - #{$offset});
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-device-aspect-ratio: 10 / 16) {
|
||||||
|
#{$prop}: calc(#{$size * 1vw * 1.6} - #{$offset});
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-device-aspect-ratio: 9 / 16) {
|
||||||
|
#{$prop}: calc(#{$size * 1vw * 1.778} - #{$offset});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { assert } from 'chai';
|
||||||
|
|
||||||
|
describe('Give it some context', () => {
|
||||||
|
describe('maybe a bit more context here', () => {
|
||||||
|
it('should run here few assertions', () => {
|
||||||
|
assert.isOk(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue