ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated to gulp 4.x and removed use of chroma-sass for colours, it is not updated anymore.

Browse source
This commit is contained in:
Fredrik Jonsson 2018-09-08 19:37:28 +02:00
commit 83ce4e0cc2
22 changed files with 2674 additions and 3508 deletions
Download patch file Download diff file Expand all files Collapse all files

108
gulpfile.js
View file

@ -52,65 +52,41 @@ options.gulpWatchOptions = {interval: 600};
// options.gulpWatchOptions = {interval: 1000, mode: 'poll'}; // options.gulpWatchOptions = {interval: 1000, mode: 'poll'};
// ################################
// Load Gulp and tools we will use. // Load Gulp and tools we will use.
// ################################
var gulp = require('gulp'), var gulp = require('gulp'),
$ = require('gulp-load-plugins')(), $ = require('gulp-load-plugins')(),
del = require('del'), del = require('del'),
// gulp-load-plugins will report "undefined" error unless you load gulp-sass manually. // gulp-load-plugins will report "undefined" error unless you load gulp-sass manually.
sass = require('gulp-sass'), sass = require('gulp-sass'),
kss = require('kss'),
cleanCSS = require('gulp-clean-css'); cleanCSS = require('gulp-clean-css');
// The default task. // The sass files to process.
gulp.task('default', ['build']);
// #################
// Build everything.
// #################
gulp.task('build', ['styles:production', 'lint']);
// ##########
// Build CSS.
// ##########
var sassFiles = [ var sassFiles = [
options.theme.sass + '**/*.scss', options.theme.sass + '**/*.scss',
// Do not open Sass partials as they will be included as needed. // Do not open Sass partials as they will be included as needed.
'!' + options.theme.sass + '**/_*.scss' '!' + options.theme.sass + '**/_*.scss'
]; ];
gulp.task('styles', ['clean:css'], function() { // Clean CSS files.
return gulp.src(sassFiles) gulp.task('clean:css', function clean () {
.pipe($.sourcemaps.init()) return del([
.pipe(sass(options.sass).on('error', sass.logError)) options.theme.css + '**/*.css',
.pipe($.size({showFiles: true})) options.theme.css + '**/*.map'
.pipe($.sourcemaps.write('./')) ], {force: true});
.pipe(gulp.dest(options.theme.css))
}); });
gulp.task('styles:production', ['clean:css'], function() { // Clean all directories.
return gulp.src(sassFiles) gulp.task('clean', gulp.series('clean:css'));
.pipe(sass(options.sass).on('error', sass.logError))
.pipe($.size({showFiles: true}))
.pipe(cleanCSS({compatibility: 'ie10'}))
.pipe(gulp.dest(options.theme.css));
});
// #########################
// Lint Sass and JavaScript.
// #########################
gulp.task('lint', ['lint:sass', 'lint:js']);
// Lint JavaScript. // Lint JavaScript.
gulp.task('lint:js', function() { gulp.task('lint:js', function lint () {
return gulp.src(options.eslint.files) return gulp.src(options.eslint.files)
.pipe($.eslint()) .pipe($.eslint())
.pipe($.eslint.format()); .pipe($.eslint.format());
}); });
// Lint JavaScript and throw an error for a CI to catch. // Lint JavaScript and throw an error for a CI to catch.
gulp.task('lint:js-with-fail', function() { gulp.task('lint:js-with-fail', function lint () {
return gulp.src(options.eslint.files) return gulp.src(options.eslint.files)
.pipe($.eslint()) .pipe($.eslint())
.pipe($.eslint.format()) .pipe($.eslint.format())
@ -118,49 +94,61 @@ gulp.task('lint:js-with-fail', function() {
}); });
// Lint Sass. // Lint Sass.
gulp.task('lint:sass', function() { gulp.task('lint:sass', function lint () {
return gulp.src(options.theme.sass + '**/*.scss') return gulp.src(options.theme.sass + '**/*.scss')
.pipe($.sassLint()) .pipe($.sassLint())
.pipe($.sassLint.format()); .pipe($.sassLint.format());
}); });
// Lint Sass and throw an error for a CI to catch. // Lint Sass and throw an error for a CI to catch.
gulp.task('lint:sass-with-fail', function() { gulp.task('lint:sass-with-fail', function lint () {
return gulp.src(options.theme.sass + '**/*.scss') return gulp.src(options.theme.sass + '**/*.scss')
.pipe($.sassLint()) .pipe($.sassLint())
.pipe($.sassLint.format()) .pipe($.sassLint.format())
.pipe($.sassLint.failOnError()); .pipe($.sassLint.failOnError());
}); });
// ############################## // Lint Sass and JavaScript.
gulp.task('lint', gulp.parallel('lint:sass', 'lint:js'));
// Build CSS.
gulp.task('styles', gulp.series('clean:css', function css () {
return gulp.src(sassFiles)
.pipe($.sourcemaps.init())
.pipe(sass(options.sass).on('error', sass.logError))
.pipe($.size({showFiles: true}))
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest(options.theme.css));
}));
gulp.task('styles:production', gulp.series('clean:css', function css () {
return gulp.src(sassFiles)
.pipe(sass(options.sass).on('error', sass.logError))
.pipe($.size({showFiles: true}))
.pipe(cleanCSS())
.pipe(gulp.dest(options.theme.css));
}));
// Watch for changes and rebuild. // Watch for changes and rebuild.
// ############################## gulp.task('watch:css', gulp.series('styles', function watch () {
gulp.task('watch', ['watch:css', 'watch:lint', 'watch:js']); return gulp.watch(options.theme.sass + '**/*.scss', options.gulpWatchOptions, gulp.series('styles'));
}));
gulp.task('watch:css', ['styles'], function() { gulp.task('watch:lint', gulp.series('lint:sass', function watch () {
return gulp.watch(options.theme.sass + '**/*.scss', options.gulpWatchOptions, ['styles']); return gulp.watch(options.theme.sass + '**/*.scss', options.gulpWatchOptions, gulp.series('lint:sass'));
}); }));
gulp.task('watch:lint', ['lint:sass'], function() { gulp.task('watch:js', gulp.series('lint:js', function watch () {
return gulp.watch(options.theme.sass + '**/*.scss', options.gulpWatchOptions, ['lint:sass']); return gulp.watch(options.eslint.files, options.gulpWatchOptions, gulp.series('lint:js'));
}); }));
gulp.task('watch:js', ['lint:js'], function() { gulp.task('watch', gulp.parallel('watch:css', 'watch:lint', 'watch:js'));
return gulp.watch(options.eslint.files, options.gulpWatchOptions, ['lint:js']);
});
// ###################### // Build everything.
// Clean all directories. gulp.task('build', gulp.parallel('styles:production', 'lint'));
// ######################
gulp.task('clean', ['clean:css']);
// Clean CSS files. // The default task.
gulp.task('clean:css', function() { gulp.task('default', gulp.series('build'));
return del([
options.theme.css + '**/*.css',
options.theme.css + '**/*.map'
], {force: true});
});
// Resources used to create this gulpfile.js: // Resources used to create this gulpfile.js:

5728
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

12
package.json
View file

@ -14,22 +14,20 @@
"license": "GPL-2.0", "license": "GPL-2.0",
"devDependencies": { "devDependencies": {
"breakpoint-sass": "^2.7.1", "breakpoint-sass": "^2.7.1",
"chroma-sass": "^1.2.6",
"del": "^3.0.0", "del": "^3.0.0",
"gulp": "^3.9.1", "gulp": "^4.0.0",
"gulp-clean-css": "^3.9.3", "gulp-clean-css": "^3.10.0",
"gulp-eslint": "^4.0.2", "gulp-eslint": "^5.0.0",
"gulp-load-plugins": "^1.5.0", "gulp-load-plugins": "^1.5.0",
"gulp-sass": "^4.0.1", "gulp-sass": "^4.0.1",
"gulp-sass-lint": "^1.3.4", "gulp-sass-lint": "^1.4.0",
"gulp-size": "^3.0.0", "gulp-size": "^3.0.0",
"gulp-sourcemaps": "^2.6.4", "gulp-sourcemaps": "^2.6.4",
"kss": "^3.0.0-beta.19",
"node-sass-import-once": "^1.2.0", "node-sass-import-once": "^1.2.0",
"typey": "^1.1.2" "typey": "^1.1.2"
}, },
"engines": { "engines": {
"node": ">=7.0.0" "node": ">=9.0.0"
}, },
"private": true "private": true
} }

1
sass/_custom.scss
View file

@ -1,3 +1,4 @@
// sass-lint:disable no-css-comments, no-color-hex, no-color-literals // sass-lint:disable no-css-comments, no-color-hex, no-color-literals
// Site custom styles // Site custom styles

5
sass/_init.scss
View file

@ -18,7 +18,6 @@
// The following Sass functions/mixins are required to generate some variables' // The following Sass functions/mixins are required to generate some variables'
// values, so we load them first. // values, so we load them first.
@import 'breakpoint'; @import 'breakpoint';
@import 'chroma/functions';
@import 'init/colors'; @import 'init/colors';
@import 'init/variables'; @import 'init/variables';
@ -28,16 +27,12 @@
// //
// The following sass modules are shared with all .scss files: // The following sass modules are shared with all .scss files:
// - [Breakpoint](http://breakpoint-sass.com/) // - [Breakpoint](http://breakpoint-sass.com/)
// - [Chroma](https://github.com/JohnAlbin/chroma)
// - [Typey](https://github.com/jptaranto/typey) // - [Typey](https://github.com/jptaranto/typey)
// //
// Additional pre-built libraries can be found on the [Sache website](http://www.sache.in/). // Additional pre-built libraries can be found on the [Sache website](http://www.sache.in/).
// //
// Style guide: sass.modules // Style guide: sass.modules
// Add Chroma to manage colors.
@import 'chroma';
@import 'chroma/kss';
// Add typey to manage font sizes and margins. // Add typey to manage font sizes and margins.
@import 'typey'; @import 'typey';

54
sass/_zen.scss
View file

@ -8,11 +8,11 @@ pre {
// Page // Page
body { body {
background-color: color(backdrop); background-color: $backdrop;
} }
.page { .page {
background-color: color(body-bg); background-color: $body-bg;
} }
.header { .header {
@ -27,7 +27,7 @@ body {
@include margin-top(1.5); @include margin-top(1.5);
@include padding(.5 0); @include padding(.5 0);
text-align: center; text-align: center;
border-top: 2px solid color(brand); border-top: 2px solid $brand;
p { p {
margin: 0; margin: 0;
@ -72,7 +72,7 @@ article > header,
.header, .header,
.footer { .footer {
@include typeface(headings); @include typeface(headings);
color: color(headings); color: $headings;
font-weight: normal; font-weight: normal;
} }
@ -90,7 +90,7 @@ aside {
article { article {
& > header { & > header {
color: color('text-meta'); color: $text-meta;
p { p {
@include margin(.2 0); @include margin(.2 0);
@ -136,11 +136,11 @@ article {
} }
pre { pre {
color: color(code); color: $code;
border-radius: 3px; border-radius: 3px;
padding: 5px; padding: 5px;
border: 1px solid color(border); border: 1px solid $border;
background-color: color(text-bg); background-color: $text-bg;
overflow: auto; overflow: auto;
max-height: 250px; max-height: 250px;
max-width: 90vw; max-width: 90vw;
@ -156,7 +156,7 @@ article {
} }
.content-dates { .content-dates {
color: color('text-meta'); color: $text-meta;
text-align: right; text-align: right;
} }
} }
@ -223,19 +223,19 @@ figcaption {
a { a {
display: block; display: block;
background-color: color(brand); background-color: $brand;
color: color(text-bg); color: $text-bg;
padding: 2px 8px; padding: 2px 8px;
text-decoration: none; text-decoration: none;
&:hover, &:hover,
&:focus { &:focus {
background-color: color(brand-dark); background-color: $brand-dark;
} }
&:active, &:active,
&.active { &.active {
background-color: color(brand); background-color: $brand;
text-decoration: underline; text-decoration: underline;
} }
} }
@ -254,21 +254,21 @@ figcaption {
width: 95%; width: 95%;
&.status { &.status {
background-color: color(status-bg); background-color: $status-bg;
color: color(status); color: $status;
border-color: color(status); border-color: $status;
} }
&.warning { &.warning {
background-color: color(warning-bg); background-color: $warning-bg;
color: color(warning); color: $warning;
border-color: color(warning); border-color: $warning;
} }
&.error { &.error {
background-color: color(error-bg); background-color: $error-bg;
color: color(error); color: $error;
border-color: color(error); border-color: $error;
} }
} }
@ -311,16 +311,16 @@ figcaption {
&:required+span::after { &:required+span::after {
content: ' *'; content: ' *';
color: color('red'); color: $red;
vertical-align: top; vertical-align: top;
} }
&:not(:placeholder-shown):valid { &:not(:placeholder-shown):valid {
background-color: color(status-bg); background-color: $status-bg;
} }
&:not(:placeholder-shown):invalid { &:not(:placeholder-shown):invalid {
background-color: color(error-bg); background-color: $error-bg;
} }
} }
@ -333,11 +333,11 @@ figcaption {
input, input,
textarea { textarea {
&:valid { &:valid {
background-color: color(status-bg); background-color: $status-bg;
} }
&:invalid { &:invalid {
background-color: color(error-bg); background-color: $error-bg;
} }
} }
} }

2
sass/base/forms/_forms.scss
View file

@ -168,7 +168,7 @@ input {
fieldset { fieldset {
// Correct the padding in Firefox. // Correct the padding in Firefox.
@include padding(.35 .5 .65); @include padding(.35 .5 .65);
border: 1px solid color(border); border: 1px solid $border;
} }
legend { legend {

8
sass/base/links/_links.scss
View file

@ -13,7 +13,7 @@
a, a,
%link { %link {
color: color(link); color: $link;
// sass-lint:disable no-vendor-prefixes // sass-lint:disable no-vendor-prefixes
// Remove gaps in links underline in iOS 8+ and Safari 8+. // Remove gaps in links underline in iOS 8+ and Safari 8+.
-webkit-text-decoration-skip: objects; -webkit-text-decoration-skip: objects;
@ -23,16 +23,16 @@ a,
// safely lower this selector's specificity. This also ensures visited links // safely lower this selector's specificity. This also ensures visited links
// with additional styles won't have their styles overridden. // with additional styles won't have their styles overridden.
:visited { :visited {
color: color(link-visited); color: $link-visited;
} }
a:hover, a:hover,
a:focus { a:focus {
color: color(link-hover); color: $link-hover;
} }
a:active { a:active {
color: color(link-active); color: $link-active;
&:not(.button) { &:not(.button) {
// Remove the gray background on active links in IE 10. // Remove the gray background on active links in IE 10.

4
sass/base/text/_text.scss
View file

@ -110,8 +110,8 @@ ins {
mark { mark {
// Add the correct background and color in IE 9-. // Add the correct background and color in IE 9-.
background-color: color(mark-bg); background-color: $mark-bg;
color: color(text); color: $text;
} }
// Quote // Quote

6
sass/components/box/_box.scss
View file

@ -20,7 +20,7 @@
.box, .box,
%box { %box {
@include margin-bottom(1); @include margin-bottom(1);
border: 5px solid color(border); border: 5px solid $border;
padding: 1em; padding: 1em;
// Sass compiles this to the selector: .box__title, %box__title {} // Sass compiles this to the selector: .box__title, %box__title {}
@ -44,7 +44,7 @@
&:hover, &:hover,
&.is-focus, &.is-focus,
&--is-focus { &--is-focus {
border-color: color(text); border-color: $text;
} }
// Sass compiles this to the selector: .box--highlight, %box--highlight {} // Sass compiles this to the selector: .box--highlight, %box--highlight {}
@ -52,6 +52,6 @@
// the "highlight" is a _modifier_, creating a new variation of the standard // the "highlight" is a _modifier_, creating a new variation of the standard
// "box" component. // "box" component.
&--highlight { &--highlight {
border-color: color(link); border-color: $link;
} }
} }

18
sass/components/button/_button.scss
View file

@ -44,7 +44,7 @@ button,
text-decoration: none; text-decoration: none;
// Improve usability and consistency of cursor style between image-type `input` and others. // Improve usability and consistency of cursor style between image-type `input` and others.
cursor: pointer; cursor: pointer;
color: color(button); color: $button;
text-align: center; text-align: center;
background-image: linear-gradient(#f6f6f6, #e2e2e2); background-image: linear-gradient(#f6f6f6, #e2e2e2);
border: 1px solid #e4e4e4; border: 1px solid #e4e4e4;
@ -72,14 +72,14 @@ button,
&:active { &:active {
// Override any link underlines and color changes. // Override any link underlines and color changes.
text-decoration: none; text-decoration: none;
color: color(button); color: $button;
} }
&:active { &:active {
border-color: #555; border-color: #555;
text-shadow: color(button) 0 -1px 0; text-shadow: $button 0 -1px 0;
background: color(grey-dark); background: $grey-dark;
color: color(text-bg); color: $text-bg;
} }
} }
@ -96,9 +96,9 @@ button,
%button--disabled[disabled] { %button--disabled[disabled] {
// Re-set default cursor for disabled elements. // Re-set default cursor for disabled elements.
cursor: default; cursor: default;
color: color(button-disabled); color: $button-disabled;
background-color: color(grey-extra-light); background-color: $grey-extra-light;
border-color: color(grey-extra-light); border-color: $grey-extra-light;
background-image: none; background-image: none;
text-shadow: none; text-shadow: none;
@ -106,6 +106,6 @@ button,
&:focus, &:focus,
&:active { &:active {
// Override any link underlines and color changes. // Override any link underlines and color changes.
color: color(button-disabled); color: $button-disabled;
} }
} }

2
sass/components/divider/_divider.scss
View file

@ -6,7 +6,7 @@
%divider { %divider {
@include margin(1 0); @include margin(1 0);
border: 0; border: 0;
border-top: 1px solid color(border); border-top: 1px solid $border;
// If used as a container, add a top margin to the first child. // If used as a container, add a top margin to the first child.
> :first-child { > :first-child {

2
sass/components/header/_header.scss
View file

@ -34,7 +34,7 @@
&__site-link { &__site-link {
&:link, &:link,
&:visited { &:visited {
color: color(text); color: $text;
text-decoration: none; text-decoration: none;
} }

2
sass/components/highlight-mark/_highlight-mark.scss
View file

@ -6,7 +6,7 @@
.highlight-mark, .highlight-mark,
%highlight-mark { %highlight-mark {
color: color(mark-highlight); color: $mark-highlight;
// Remove background highlighting from <mark> in normalize. // Remove background highlighting from <mark> in normalize.
background-color: transparent; background-color: transparent;
} }

6
sass/components/inverted-box/_inverted-box.scss
View file

@ -3,13 +3,13 @@
.inverted-box, .inverted-box,
%inverted-box { %inverted-box {
@include padding(.5); @include padding(.5);
background: color(brand); background: $brand;
color: color(text-bg); color: $text-bg;
border-radius: 5px; border-radius: 5px;
:link, :link,
:visited { :visited {
color: color(text-bg); color: $text-bg;
} }
p, p,

2
sass/components/watermark/_watermark.scss
View file

@ -10,7 +10,7 @@
overflow: visible; overflow: visible;
// Remove background highlighting from <mark> in normalize. // Remove background highlighting from <mark> in normalize.
background-color: transparent; background-color: transparent;
color: color(watermark); color: $watermark;
font-size: 75px; font-size: 75px;
line-height: 1; line-height: 1;
text-align: center; text-align: center;

2
sass/components/wireframe/_wireframe.scss
View file

@ -12,7 +12,7 @@ $with-wireframes: false !default;
.wireframe, .wireframe,
%wireframe { %wireframe {
outline: 1px solid color(border); outline: 1px solid $border;
} }
// //

125
sass/init/_colors.scss
View file

@ -1,88 +1,73 @@
// sass-lint:disable indentation, no-color-keywords, no-color-hex // sass-lint:disable no-color-keywords; no-color-hex
// Colors // Base colors.
// $black: #000;
// Use the `color()` function to add colors to CSS properties. To learn more, $nearblack: lighten($black, 20%); // #333
// [read the Chroma documentation](http://johnalbin.github.io/chroma/). $grey-dark: lighten($black, 40%); // #666
$grey: lighten($black, 60%); // #999
$grey-light: lighten($black, 80%); // #ccc
$grey-extra-light: lighten($black, 93.33%); // #eee
$white: #fff;
// Define the default color scheme's color names. $blue: #0072b9;
$chroma: define-default-color-scheme('branding', 'The site\'s main colors. Can be used to define colors in other color schemes.'); $red: #c00;
$green: #43a808;
$yellow: #fd0;
$chroma: add-colors(( // Colors used in the main content area.
black: #000, $brand: $nearblack;
nearblack: ('black' lighten 20%), // #333 $brand-alt: $grey;
grey-dark: ('black' lighten 40%), // #666 $brand-dark: $grey-dark;
'grey': ('black' lighten 60%), // #999 $text: $black;
grey-light: ('black' lighten 80%), // #ccc $text-bg: $white;
grey-extra-light: ('black' lighten 93.33%), // #eee $text-meta: $grey-dark;
white: #fff,
blue: #0072b9, $link: $black;
red: #c00, $link-visited: $black;
green: #43a808, $link-hover: $brand;
yellow: #fd0, $link-active: $red;
));
// Define color names for functional uses. $border: $grey-light;
$chroma: define-color-scheme('functional', 'Colors used by functional parts of the design.'); $border-dark: $nearblack;
$chroma: add-colors('functional', (
// Colors used in the main content area.
brand: 'nearblack',
brand-alt: 'grey',
brand-dark: 'grey-dark',
text: 'black',
text-bg: 'white',
text-meta: 'grey-dark',
link: 'black', $autocomplete: $text;
link-visited: 'black', $autocomplete-bg: $text-bg;
link-hover: 'brand', $autocomplete-select: $white;
link-active: 'red', $autocomplete-select-bg: $blue;
border: 'grey-light', $body-bg: $white;
border-dark: 'nearblack', $header-bg: $brand;
$backdrop: $grey-extra-light;
autocomplete: 'text', $mobile-menu: $header-bg;
autocomplete-bg: 'text-bg', $mobile-menu-cover: rgba($black, .2);
autocomplete-select: 'white',
autocomplete-select-bg: 'blue',
body-bg: 'white', $button: $nearblack;
header-bg: 'brand', $button-disabled: $grey;
backdrop: 'grey-extra-light',
mobile-menu: 'header-bg', $form-error: $red;
mobile-menu-cover: ('black' rgba .2),
button: 'nearblack', $mark-highlight: $red;
button-disabled: 'grey', $mark-bg: $yellow;
form-error: 'red', $menu-active: $text;
mark-highlight: 'red', $preview-bg: lighten($yellow, 43%);
mark-bg: 'yellow',
menu-active: 'text', $row-stripe: $white;
$row-disabled: $grey-light;
preview-bg: ('yellow' lighten 43%), $status: $green;
$status-bg: lighten($status, 62%);
$status-highlight: $text;
$warning: $text;
$warning-bg: lighten($yellow, 45%);
$warning-border: $yellow;
$error: $red;
$error-bg: lighten($error, 57%);
row-stripe: 'white', $watermark: $grey-extra-light;
row-disabled: 'grey-light',
status: 'green', $headings: $nearblack;
status-bg: (status lighten 62%),
status-highlight: text,
warning: text,
warning-bg: ('yellow' lighten 45%),
warning-border: 'yellow',
error: 'red',
error-bg: (error lighten 57%),
watermark: 'grey-extra-light', $code: $nearblack;
headings: 'nearblack',
code: 'nearblack',
));
$chroma-active-scheme: 'functional';

1
sass/init/_variables.scss
View file

@ -158,3 +158,4 @@ $zen-gutters: 20px;
$indent-amount: 2 * $base-font-size; $indent-amount: 2 * $base-font-size;
$include-rtl: false; $include-rtl: false;

2
sass/layouts/_layouts.scss
View file

@ -29,7 +29,7 @@
&__grid-notice { &__grid-notice {
margin: $zen-gutters/2; margin: $zen-gutters/2;
padding: $zen-gutters/2; padding: $zen-gutters/2;
border: 2px dashed color('red'); border: 2px dashed $red;
} }
} }

Some files were not shown because too many files have changed in this diff Show more