diff --git a/.babelrc b/.babelrc
index cda65df..946fa2f 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,4 +1,4 @@
{
- "presets": ["es2015"],
- "compact": false
-}
+ "presets": [ "@babel/preset-env" ],
+ "compact": false
+}
\ No newline at end of file
diff --git a/.bowerrc b/.bowerrc
deleted file mode 100644
index 44491d3..0000000
--- a/.bowerrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "directory": "bower_components"
-}
diff --git a/.browserslistrc b/.browserslistrc
new file mode 100644
index 0000000..3739808
--- /dev/null
+++ b/.browserslistrc
@@ -0,0 +1,5 @@
+# Browsers that we support
+last 2 versions
+ie >= 9
+ios >= 7
+android >= 4.4
diff --git a/.gitignore b/.gitignore
index b4c9f65..4f1353b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,10 +1,10 @@
# Mac OS X
.DS_Store
# Node artifacts
node_modules
npm-debug.log
-bower_components
+yarn.lock
# Released version
dist
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4d57fcd..92c530c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,20 +1,25 @@
# Changelog
All notable changes to this project will be documented in this file.
This project adheres to [semantic versioning](http://semver.org/).
+## [0.2.0] - 2018-10-12
+### Changed
+- Update site builder to use ZURB WebApp Template at 0ce53ed.
+- Migrate Foundation icons font from Bower to a Node module.
+
## [0.1.0] - 2016-07-24
### Added
- Motion UI animations.
- Easter egg around these animations.
## [0.0.2] - 2016-07-24
### Fixed
- Call for actions buttons back to 100% in smaller viewports.
- Small vertical spacing issues are fixed.
### Changed
- More punchy icon color.
## [0.0.1] - 2016-07-24
### Added
- Initial version.
diff --git a/bower.json b/bower.json
deleted file mode 100644
index 2f98c06..0000000
--- a/bower.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
- "name": "daeghrefn-www",
- "version": "0.1.0",
- "authors": [
- "Sébastien Santoro aka Dereckson <dereckson@espace-win.org>"
- ],
- "description": "Website for Dæghrefn.",
- "main": "gulpfile.js",
- "license": "CC-BY-4.0",
- "ignore": [
- "**/.*",
- "node_modules",
- "bower_components",
- "test",
- "tests"
- ],
- "dependencies": {
- "foundation-sites": "~6.2.3",
- "motion-ui": "~1.2.2",
- "foundation-icon-fonts": "*"
- },
- "private": true
-}
diff --git a/config.yml b/config.yml
index 8188cf1..530c6cd 100644
--- a/config.yml
+++ b/config.yml
@@ -1,62 +1,34 @@
# Your project's server will run on localhost:xxxx at this port
PORT: 8000
# Autoprefixer will make sure your CSS works with these browsers
COMPATIBILITY:
- "last 2 versions"
- "ie >= 9"
+ - "ios >= 7"
# UnCSS will use these settings
UNCSS_OPTIONS:
html:
- - "src/**/*.html"
+ # Search for used CSS classes in generated HTML files
+ - "dist/**/*.html"
ignore:
- !!js/regexp .foundation-mq
- !!js/regexp ^\.is-.*
# Gulp will reference these paths when it copies files
PATHS:
# Path to dist folder
- dist: "dist"
+ dist: "dist"
# Paths to static assets that aren't images, CSS, or JavaScript
assets:
- "src/assets/**/*"
- "!src/assets/scss"
- "!src/assets/{img,js,scss}/**/*"
# Paths to Sass libraries, which can then be loaded with @import
sass:
- - "bower_components/foundation-sites/scss"
- - "bower_components/motion-ui/src"
- - "bower_components/foundation-icon-fonts"
- # Paths to JavaScript libraries, which are compined into one file
- javascript:
- # Libraries requried by Foundation
- - "bower_components/jquery/dist/jquery.js"
- - "bower_components/what-input/what-input.js"
- # Core Foundation files
- - "bower_components/foundation-sites/js/foundation.core.js"
- - "bower_components/foundation-sites/js/foundation.util.*.js"
- # Individual Foundation components
- # If you aren't using a component, just remove it from the list
- - "bower_components/foundation-sites/js/foundation.abide.js"
- - "bower_components/foundation-sites/js/foundation.accordion.js"
- - "bower_components/foundation-sites/js/foundation.accordionMenu.js"
- - "bower_components/foundation-sites/js/foundation.drilldown.js"
- - "bower_components/foundation-sites/js/foundation.dropdown.js"
- - "bower_components/foundation-sites/js/foundation.dropdownMenu.js"
- - "bower_components/foundation-sites/js/foundation.equalizer.js"
- - "bower_components/foundation-sites/js/foundation.interchange.js"
- - "bower_components/foundation-sites/js/foundation.magellan.js"
- - "bower_components/foundation-sites/js/foundation.offcanvas.js"
- - "bower_components/foundation-sites/js/foundation.orbit.js"
- - "bower_components/foundation-sites/js/foundation.responsiveMenu.js"
- - "bower_components/foundation-sites/js/foundation.responsiveToggle.js"
- - "bower_components/foundation-sites/js/foundation.reveal.js"
- - "bower_components/foundation-sites/js/foundation.slider.js"
- - "bower_components/foundation-sites/js/foundation.sticky.js"
- - "bower_components/foundation-sites/js/foundation.tabs.js"
- - "bower_components/foundation-sites/js/foundation.toggler.js"
- - "bower_components/foundation-sites/js/foundation.tooltip.js"
- # Paths to your own project code are here
- - "src/assets/js/!(app).js"
+ - "node_modules/foundation-sites/scss"
+ - "node_modules/motion-ui/src"
+ # Paths to JavaScript entry points for webpack to bundle modules
+ entries:
- "src/assets/js/app.js"
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index f341a98..d8e1dc1 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -1,143 +1,169 @@
'use strict';
-import plugins from 'gulp-load-plugins';
-import yargs from 'yargs';
-import browser from 'browser-sync';
-import gulp from 'gulp';
-import panini from 'panini';
-import rimraf from 'rimraf';
-import sherpa from 'style-sherpa';
-import yaml from 'js-yaml';
-import fs from 'fs';
+import plugins from 'gulp-load-plugins';
+import yargs from 'yargs';
+import browser from 'browser-sync';
+import gulp from 'gulp';
+import panini from 'panini';
+import rimraf from 'rimraf';
+import yaml from 'js-yaml';
+import fs from 'fs';
+import webpackStream from 'webpack-stream';
+import webpack2 from 'webpack';
+import named from 'vinyl-named';
+import uncss from 'uncss';
+import autoprefixer from 'autoprefixer';
// Load all Gulp plugins into one variable
const $ = plugins();
// Check for --production flag
const PRODUCTION = !!(yargs.argv.production);
// Load settings from settings.yml
const { COMPATIBILITY, PORT, UNCSS_OPTIONS, PATHS } = loadConfig();
function loadConfig() {
let ymlFile = fs.readFileSync('config.yml', 'utf8');
return yaml.load(ymlFile);
}
// Build the "dist" folder by running all of the below tasks
+// Sass must be run later so UnCSS can search for used classes in the others assets.
gulp.task('build',
- gulp.series(
- clean,
- gulp.parallel(pages, sass, javascript, images, cssfonts, copy)
- )
-);
+ gulp.series(clean, gulp.parallel(pages, javascript, images, fonts, copy), sass));
// Build the site, run the server, and watch for file changes
gulp.task('default',
gulp.series('build', server, watch));
// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
rimraf(PATHS.dist, done);
}
// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copy() {
return gulp.src(PATHS.assets)
.pipe(gulp.dest(PATHS.dist + '/assets'));
}
// Copy page templates into finished HTML files
function pages() {
return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
data: 'src/data/',
helpers: 'src/helpers/'
}))
.pipe(gulp.dest(PATHS.dist));
}
// Load updated HTML templates and partials into Panini
function resetPages(done) {
panini.refresh();
done();
}
// Compile Sass into CSS
// In production, the CSS is compressed
function sass() {
+
+ const postCssPlugins = [
+ // Autoprefixer
+ autoprefixer({ browsers: COMPATIBILITY }),
+
+ // UnCSS - Uncomment to remove unused styles in production
+ // PRODUCTION && uncss.postcssPlugin(UNCSS_OPTIONS),
+ ].filter(Boolean);
+
return gulp.src('src/assets/scss/app.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
includePaths: PATHS.sass
})
.on('error', $.sass.logError))
- .pipe($.autoprefixer({
- browsers: COMPATIBILITY
- }))
- // Comment in the pipe below to run UnCSS in production
- //.pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))
- .pipe($.if(PRODUCTION, $.cssnano()))
+ .pipe($.postcss(postCssPlugins))
+ .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/css'))
.pipe(browser.reload({ stream: true }));
}
+let webpackConfig = {
+ mode: (PRODUCTION ? 'production' : 'development'),
+ module: {
+ rules: [
+ {
+ test: /\.js$/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ presets: [ "@babel/preset-env" ],
+ compact: false
+ }
+ }
+ }
+ ]
+ },
+ devtool: !PRODUCTION && 'source-map'
+}
+
// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
- return gulp.src(PATHS.javascript)
+ return gulp.src(PATHS.entries)
+ .pipe(named())
.pipe($.sourcemaps.init())
- .pipe($.babel())
- .pipe($.concat('app.js'))
+ .pipe(webpackStream(webpackConfig, webpack2))
.pipe($.if(PRODUCTION, $.uglify()
.on('error', e => { console.log(e); })
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/js'));
}
// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
return gulp.src('src/assets/img/**/*')
- .pipe($.if(PRODUCTION, $.imagemin({
- progressive: true
- })))
+ .pipe($.if(PRODUCTION, $.imagemin([
+ $.imagemin.jpegtran({ progressive: true }),
+ ])))
.pipe(gulp.dest(PATHS.dist + '/assets/img'));
}
// Copy fonts used in CSS to the "dist" folder
-function cssfonts() {
- return gulp.src('./bower_components/foundation-icon-fonts/*.{ttf,woff,eot,svg}')
+function fonts() {
+ return gulp.src('./node_modules/foundation-icon-fonts/*.{ttf,woff,eot,svg}')
.pipe(gulp.dest(PATHS.dist + '/assets/fonts'));
}
// Start a server with BrowserSync to preview the site in
function server(done) {
browser.init({
server: PATHS.dist, port: PORT
- });
- done();
+ }, done);
}
// Reload the browser with BrowserSync
function reload(done) {
browser.reload();
done();
}
// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
gulp.watch(PATHS.assets, copy);
- gulp.watch('src/pages/**/*.html').on('change', gulp.series(pages, browser.reload));
- gulp.watch('src/{layouts,partials}/**/*.html').on('change', gulp.series(resetPages, pages, browser.reload));
- gulp.watch('src/assets/scss/**/*.scss', sass);
- gulp.watch('src/assets/js/**/*.js').on('change', gulp.series(javascript, browser.reload));
- gulp.watch('src/assets/img/**/*').on('change', gulp.series(images, browser.reload));
+ gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload));
+ gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));
+ gulp.watch('src/data/**/*.{js,json,yml}').on('all', gulp.series(resetPages, pages, browser.reload));
+ gulp.watch('src/helpers/**/*.js').on('all', gulp.series(resetPages, pages, browser.reload));
+ gulp.watch('src/assets/scss/**/*.scss').on('all', sass);
+ gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload));
+ gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload));
}
diff --git a/package.json b/package.json
index a7f6ef2..129c08c 100644
--- a/package.json
+++ b/package.json
@@ -1,49 +1,64 @@
{
"name": "daeghrefn-www",
"version": "0.1.0",
"description": "Website for Dæghrefn.",
- "main": "gulpfile.js",
+ "main": "gulpfile.babel.js",
"scripts": {
"start": "gulp",
"build": "gulp build --production"
},
"author": "Sébastien Santoro aka Dereckson <dereckson@espace-win.org>",
"homepage": "https://daeghrefn.nasqueron.org/",
"license": "CC-BY-4.0",
- "keywords": ["www"],
+ "keywords": [
+ "www"
+ ],
+ "dependencies": {
+ "foundation-icon-fonts": "^0.1.1",
+ "foundation-sites": "~6.4.1",
+ "jquery": "^3.2.1",
+ "motion-ui": "^2.0.3",
+ "slick-carousel": "^1.8.1",
+ "svg-injector-2": "^2.1.3",
+ "tablesaw": "^3.0.5",
+ "what-input": "^5.1.2"
+ },
"devDependencies": {
- "babel-preset-es2015": "^6.3.13",
- "babel-register": "^6.7.2",
+ "@babel/core": "^7.1.2",
+ "@babel/preset-env": "^7.1.0",
+ "@babel/register": "^7.0.0",
+ "autoprefixer": "^9.1.5",
+ "babel-loader": "^8.0.4",
"browser-sync": "^2.10.0",
- "gulp": "gulpjs/gulp#4.0",
- "gulp-autoprefixer": "^3.1.0",
- "gulp-babel": "^6.1.2",
- "gulp-cli": "^1.2.1",
+ "gulp": "^4.0.0",
+ "gulp-babel": "^8.0.0",
+ "gulp-clean-css": "^3.3.1",
+ "gulp-cli": "^2.0.1",
"gulp-concat": "^2.5.2",
- "gulp-cssnano": "^2.1.0",
"gulp-extname": "^0.2.0",
"gulp-if": "^2.0.0",
- "gulp-imagemin": "^2.2.1",
+ "gulp-imagemin": "^4.1.0",
"gulp-load-plugins": "^1.1.0",
- "gulp-sass": "^2.1.0",
- "gulp-sourcemaps": "^1.6.0",
- "gulp-uglify": "^1.2.0",
- "gulp-uncss": "^1.0.1",
+ "gulp-postcss": "^8.0.0",
+ "gulp-sass": "^4.0.1",
+ "gulp-sourcemaps": "^2.6.4",
+ "gulp-uglify": "^3.0.1",
"js-yaml": "^3.4.6",
"panini": "^1.3.0",
"rimraf": "^2.4.3",
"style-sherpa": "^1.0.0",
- "yargs": "^3.8.0"
+ "uncss": "^0.16.2",
+ "vinyl-named": "^1.1.0",
+ "webpack": "^4.20.2",
+ "webpack-stream": "^5.1.1",
+ "yargs": "^12.0.2"
},
"repository": {
"type": "git",
"url": "https://github.com/nasqueron/daeghrefn-www.git"
},
"bugs": {
"url": "https://devcentral.nasqueron.org/project/view/9/"
},
- "babel": {
- "presets": ["es2015"]
- },
"private": true
}
diff --git a/readme.md b/readme.md
index 9181ef3..13bfee1 100644
--- a/readme.md
+++ b/readme.md
@@ -1,66 +1,65 @@
# Dæghrefn web site
This website hosted at https://daeghrefn.nasqueron.org/
provides an web presence to Dæghrefn, an utility bot on
Freenode.
## Purpose
- An answer to the question 'Who are you?'
- Provide a documentation
## What this repository is not
If you search the source source code of the bot:
- At the core, it's an [eggdrop](http://www.eggheads.org/devel/)
- It uses these [TCL scripts](https://devcentral.nasqueron.org/diffusion/VIPER/)
- It also uses these [Python scripts](https://devcentral.nasqueron.org/diffusion/DWD/) to interact with Wikidata.
## Features
This site use the ZURB Template for use with [Foundation for Sites](http://foundation.zurb.com/sites).
It has a Gulp-powered build system with these features:
- Handlebars HTML templates with Panini
- Sass compilation and prefixing
- JavaScript concatenation
- Built-in BrowserSync server
- For production builds:
- CSS compression
- JavaScript compression
- Image compression
## Installation
These steps come from the Foundation ZURB template repository documentation.
### Manual Setup
To use this repository, your computer needs:
- [NodeJS](https://nodejs.org/en/) (0.12 or greater)
- [Git](https://git-scm.com/)
To manually set up the repository, first download it with Git:
-```bash
-git clone https://github.com/nasqueron/daeghrefn-www daeghrefn-www
+```
+$ git clone https://github.com/nasqueron/daeghrefn-www daeghrefn-www
```
Then open the folder in your command line, and install the needed dependencies:
-```bash
-cd daeghrefn-www
-npm install
-bower install
+```
+$ cd daeghrefn-www
+$ yarn
```
-Finally, run `npm start` to run Gulp. The finished site will be created in a folder called `dist`, viewable at this URL:
+Finally, run `yarn start` to run Gulp. The finished site will be created in a folder called `dist`, viewable at this URL:
```
http://localhost:8000
```
### Create locally a production-ready version
-To create compressed, production-ready assets, run `npm run build`.
+To create compressed, production-ready assets, run `yarn run build`.
diff --git a/src/assets/js/app.js b/src/assets/js/app.js
index 55a6812..2ce98b5 100644
--- a/src/assets/js/app.js
+++ b/src/assets/js/app.js
@@ -1,265 +1,272 @@
/* -------------------------------------------------------------
Dæghrefn web site
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Project: Nasqueron
Author: Sébastien Santoro aka Dereckson
Dependencies: jquery motion-ui
Filename: app.js
Licence: CC-BY 4.0, MIT, BSD-2-Clause (multi-licensing)
------------------------------------------------------------- */
+import $ from 'jquery';
+import whatInput from 'what-input';
+
+window.$ = $;
+
+import Foundation from 'foundation-sites';
+
/* -------------------------------------------------------------
Table of contents
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
:: Animations
:: Easter egg
:: Code to run when document is ready
*/
/* -------------------------------------------------------------
Animations
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
var animations = {
/**
* Animates the elements to make a dramatic entrance.
*/
enter: function () {
Foundation.Motion.animateIn($('header'), 'hinge-in-from-top');
var actions = $('#actions');
actions.find('>.row:odd').each(function () {
Foundation.Motion.animateIn($(this), 'slide-in-right slow');
});
actions.find('>.row:even').each(function () {
Foundation.Motion.animateIn($(this), 'slide-in-left slow');
});
Foundation.Motion.animateIn($('footer'), 'hinge-in-from-bottom');
animations.state = 'in';
},
/**
* Animates the elements to leave the scene dramatically.
*
* Used in easter egg.
*/
leave: function () {
Foundation.Motion.animateOut($('header'), 'hinge-out-from-top slow');
Foundation.Motion.animateOut($('footer'), 'hinge-out-from-bottom slow');
var actions = $('#actions');
actions.find('>.row:odd').each(function () {
Foundation.Motion.animateOut($(this), 'slide-out-left slow');
});
actions.find('>.row:even').each(function () {
Foundation.Motion.animateOut($(this), 'slide-out-right slow');
});
animations.state = 'out';
},
/**
* Switches between in and out animation state.
*
* @throws StateException when state is unexpected
*/
switch: function () {
switch (animations.state) {
case 'unanimated':
console.warn(
"Can't switch animation state: we're still unanimated."
);
return;
case 'in':
animations.leave();
return;
case 'out':
animations.enter();
return;
default:
throw new animations.StateException(
'Unexpected state: unanimated, in or out was expected.'
);
}
},
/**
* Exception to throw when state contains an unexpected value.
*
* @param message
* @constructor
*/
StateException: function (message) {
this.message = message;
this.name = 'StateException';
},
/**
* Allows to know the current state of the elements.
*
* State will be one of these values:
* - unanimated: JS animations not yet played
* - in: enter() has been played, the elements are in the page
* - out: leave() has been played, the elements left the page
*
* @property string
*/
state: 'unanimated'
};
/* -------------------------------------------------------------
Easter egg
Based on https://github.com/snaptortoise/konami-js
Author: George Mandis
License: MIT
Version: 1.4.5 (3/2/2016)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
var EasterEgg = function (callback) {
var easterEgg = {
addEvent: function (obj, type, fn, ref_obj) {
if (obj.addEventListener)
obj.addEventListener(type, fn, false);
else if (obj.attachEvent) {
// IE
obj['e' + type + fn] = fn;
obj[type + fn] = function () {
obj['e' + type + fn](window.event, ref_obj);
};
obj.attachEvent('on' + type, obj[type + fn]);
}
},
input: '',
pattern: '38384040373937396665',
load: function (link) {
this.addEvent(document, 'keydown', function (e, ref_obj) {
if (ref_obj) {
easterEgg = ref_obj; // IE
}
easterEgg.input += e ? e.keyCode : event.keyCode;
if (easterEgg.input.length > easterEgg.pattern.length) {
easterEgg.input = easterEgg.input.substr(
easterEgg.input.length - easterEgg.pattern.length
);
}
if (easterEgg.input == easterEgg.pattern) {
easterEgg.code(link);
easterEgg.input = '';
e.preventDefault();
return false;
}
}, this);
this.touchscreen.load(link);
},
code: function (link) {
window.location = link
},
touchscreen: {
start_x: 0,
start_y: 0,
stop_x: 0,
stop_y: 0,
tap: false,
capture: false,
orig_keys: '',
keys: [
'UP', 'UP',
'DOWN', 'DOWN',
'LEFT', 'RIGHT',
'LEFT', 'RIGHT',
'TAP', 'TAP'
],
code: function (link) {
easterEgg.code(link);
},
load: function (link) {
this.orig_keys = this.keys;
easterEgg.addEvent(document, 'touchmove', function (e) {
if (e.touches.length == 1 && easterEgg.touchscreen.capture == true) {
var touch = e.touches[0];
easterEgg.touchscreen.stop_x = touch.pageX;
easterEgg.touchscreen.stop_y = touch.pageY;
easterEgg.touchscreen.tap = false;
easterEgg.touchscreen.capture = false;
easterEgg.touchscreen.check_direction();
}
});
easterEgg.addEvent(document, 'touchend', function (evt) {
if (easterEgg.touchscreen.tap == true) {
easterEgg.touchscreen.check_direction(link);
}
}, false);
easterEgg.addEvent(document, 'touchstart', function (evt) {
easterEgg.touchscreen.start_x = evt.changedTouches[0].pageX;
easterEgg.touchscreen.start_y = evt.changedTouches[0].pageY;
easterEgg.touchscreen.tap = true;
easterEgg.touchscreen.capture = true;
});
},
check_direction: function (link) {
var x_magnitude = Math.abs(this.start_x - this.stop_x);
var y_magnitude = Math.abs(this.start_y - this.stop_y);
var x = ((this.start_x - this.stop_x) < 0) ? 'RIGHT' : 'LEFT';
var y = ((this.start_y - this.stop_y) < 0) ? 'DOWN' : 'UP';
var result = (x_magnitude > y_magnitude) ? x : y;
result = (this.tap == true) ? 'TAP' : result;
if (result == this.keys[0]) {
this.keys = this.keys.slice(1, this.keys.length);
}
if (this.keys.length == 0) {
this.keys = this.orig_keys;
this.code(link);
}
}
}
};
typeof callback === 'string' && easterEgg.load(callback);
if (typeof callback === 'function') {
easterEgg.code = callback;
easterEgg.load();
}
return easterEgg;
};
/* -------------------------------------------------------------
Code to run when document is ready
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
$( document ).ready(function() {
$(document).foundation();
animations.enter();
new EasterEgg(function() {
animations.switch();
});
});
diff --git a/src/assets/js/lib/foundation-explicit-pieces.js b/src/assets/js/lib/foundation-explicit-pieces.js
new file mode 100644
index 0000000..9b1daa8
--- /dev/null
+++ b/src/assets/js/lib/foundation-explicit-pieces.js
@@ -0,0 +1,103 @@
+import $ from 'jquery';
+import { Foundation } from 'foundation-sites/js/foundation.core';
+import { rtl, GetYoDigits, transitionend } from 'foundation-sites/js/foundation.util.core';
+import { Box } from 'foundation-sites/js/foundation.util.box'
+import { onImagesLoaded } from 'foundation-sites/js/foundation.util.imageLoader';
+import { Keyboard } from 'foundation-sites/js/foundation.util.keyboard';
+import { MediaQuery } from 'foundation-sites/js/foundation.util.mediaQuery';
+import { Motion, Move } from 'foundation-sites/js/foundation.util.motion';
+import { Nest } from 'foundation-sites/js/foundation.util.nest';
+import { Timer } from 'foundation-sites/js/foundation.util.timer';
+import { Touch } from 'foundation-sites/js/foundation.util.touch';
+import { Triggers } from 'foundation-sites/js/foundation.util.triggers';
+import { Abide } from 'foundation-sites/js/foundation.abide';
+import { Accordion } from 'foundation-sites/js/foundation.accordion';
+import { AccordionMenu } from 'foundation-sites/js/foundation.accordionMenu';
+import { Drilldown } from 'foundation-sites/js/foundation.drilldown';
+import { Dropdown } from 'foundation-sites/js/foundation.dropdown';
+import { DropdownMenu } from 'foundation-sites/js/foundation.dropdownMenu';
+import { Equalizer } from 'foundation-sites/js/foundation.equalizer';
+import { Interchange } from 'foundation-sites/js/foundation.interchange';
+import { Magellan } from 'foundation-sites/js/foundation.magellan';
+import { OffCanvas } from 'foundation-sites/js/foundation.offcanvas';
+import { Orbit } from 'foundation-sites/js/foundation.orbit';
+import { ResponsiveMenu } from 'foundation-sites/js/foundation.responsiveMenu';
+import { ResponsiveToggle } from 'foundation-sites/js/foundation.responsiveToggle';
+import { Reveal } from 'foundation-sites/js/foundation.reveal';
+import { Slider } from 'foundation-sites/js/foundation.slider';
+import { SmoothScroll } from 'foundation-sites/js/foundation.smoothScroll';
+import { Sticky } from 'foundation-sites/js/foundation.sticky';
+import { Tabs } from 'foundation-sites/js/foundation.tabs';
+import { Toggler } from 'foundation-sites/js/foundation.toggler';
+import { Tooltip } from 'foundation-sites/js/foundation.tooltip';
+import { ResponsiveAccordionTabs } from 'foundation-sites/js/foundation.responsiveAccordionTabs';
+
+
+Foundation.addToJquery($);
+
+// Add Foundation Utils to Foundation global namespace for backwards
+// compatibility.
+
+Foundation.rtl = rtl;
+Foundation.GetYoDigits = GetYoDigits;
+Foundation.transitionend = transitionend;
+
+Foundation.Box = Box;
+Foundation.onImagesLoaded = onImagesLoaded;
+Foundation.Keyboard = Keyboard;
+Foundation.MediaQuery = MediaQuery;
+Foundation.Motion = Motion;
+Foundation.Move = Move;
+Foundation.Nest = Nest;
+Foundation.Timer = Timer;
+
+// Touch and Triggers previously were almost purely sede effect driven,
+// so no // need to add it to Foundation, just init them.
+
+Touch.init($);
+
+Triggers.init($, Foundation);
+
+Foundation.plugin(Abide, 'Abide');
+
+Foundation.plugin(Accordion, 'Accordion');
+
+Foundation.plugin(AccordionMenu, 'AccordionMenu');
+
+Foundation.plugin(Drilldown, 'Drilldown');
+
+Foundation.plugin(Dropdown, 'Dropdown');
+
+Foundation.plugin(DropdownMenu, 'DropdownMenu');
+
+Foundation.plugin(Equalizer, 'Equalizer');
+
+Foundation.plugin(Interchange, 'Interchange');
+
+Foundation.plugin(Magellan, 'Magellan');
+
+Foundation.plugin(OffCanvas, 'OffCanvas');
+
+Foundation.plugin(Orbit, 'Orbit');
+
+Foundation.plugin(ResponsiveMenu, 'ResponsiveMenu');
+
+Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle');
+
+Foundation.plugin(Reveal, 'Reveal');
+
+Foundation.plugin(Slider, 'Slider');
+
+Foundation.plugin(SmoothScroll, 'SmoothScroll');
+
+Foundation.plugin(Sticky, 'Sticky');
+
+Foundation.plugin(Tabs, 'Tabs');
+
+Foundation.plugin(Toggler, 'Toggler');
+
+Foundation.plugin(Tooltip, 'Tooltip');
+
+Foundation.plugin(ResponsiveAccordionTabs, 'ResponsiveAccordionTabs');
+
+export {Foundation};
diff --git a/src/assets/scss/_settings.scss b/src/assets/scss/_settings.scss
index b885a09..0ad15ae 100644
--- a/src/assets/scss/_settings.scss
+++ b/src/assets/scss/_settings.scss
@@ -1,588 +1,888 @@
@charset "utf-8";
/* -------------------------------------------------------------
Dæghrefn web site
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Project: Nasqueron
Author: Dereckson
Dependencies: foundation motion-ui
Filename: app.css
Licence: CC-BY 4.0, MIT
------------------------------------------------------------- */
@import 'util/util';
/* -------------------------------------------------------------
Table of contents
Foundation for Sites Settings
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
:: 1. Global
:: 2. Breakpoints
:: 3. The Grid
:: 4. Base Typography
:: 5. Typography Helpers
:: 6. Abide
:: 7. Accordion
:: 8. Accordion Menu
:: 9. Badge
:: 10. Breadcrumbs
:: 11. Button
:: 12. Button Group
:: 13. Callout
- :: 14. Close Button
- :: 15. Drilldown
- :: 16. Dropdown
- :: 17. Dropdown Menu
- :: 18. Flex Video
- :: 19. Forms
- :: 20. Label
- :: 21. Media Object
- :: 22. Menu
- :: 23. Meter
- :: 24. Off-canvas
- :: 25. Orbit
- :: 26. Pagination
- :: 27. Progress Bar
- :: 28. Reveal
- :: 29. Slider
- :: 30. Switch
- :: 31. Table
- :: 32. Tabs
- :: 33. Thumbnail
- :: 34. Title Bar
- :: 35. Tooltip
- :: 36. Top Bar
-
- :: 37. Path for fonts
+ :: 14. Card
+ :: 15. Close Button
+ :: 16. Drilldown
+ :: 17. Dropdown
+ :: 18. Dropdown Menu
+ :: 19. Flexbox Utilities
+ :: 20. Forms
+ :: 21. Label
+ :: 22. Media Object
+ :: 23. Menu
+ :: 24. Meter
+ :: 25. Off-canvas
+ :: 26. Orbit
+ :: 27. Pagination
+ :: 28. Progress Bar
+ :: 29. Prototype Arrow
+ :: 30. Prototype Border-Box
+ :: 31. Prototype Border-None
+ :: 32. Prototype Bordered
+ :: 33. Prototype Display
+ :: 34. Prototype Font-Styling
+ :: 35. Prototype List-Style-Type
+ :: 36. Prototype Overflow
+ :: 37. Prototype Position
+ :: 38. Prototype Rounded
+ :: 39. Prototype Separator
+ :: 40. Prototype Shadow
+ :: 41. Prototype Sizing
+ :: 42. Prototype Spacing
+ :: 43. Prototype Text-Decoration
+ :: 44. Prototype Text-Transformation
+ :: 45. Prototype Text-Utilities
+ :: 46. Responsive Embed
+ :: 47. Reveal
+ :: 48. Slider
+ :: 49. Switch
+ :: 50. Table
+ :: 51. Tabs
+ :: 52. Thumbnail
+ :: 53. Title Bar
+ :: 54. Tooltip
+ :: 55. Top Bar
+ :: 56. Xy Grid
+ :: 57. Path for fonts
*/
// 1. Global
// ---------
$global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;
$foundation-palette: (
primary: #ffab14,
secondary: #e0bf2a,
success: #3adb76,
warning: #ffae00,
alert: #ec5840,
);
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;
$body-background: $white;
$body-font-color: $black;
$body-font-family: Arimo, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
$body-antialiased: true;
$global-margin: 1rem;
$global-padding: 1rem;
$global-weight-normal: normal;
$global-weight-bold: bold;
$global-radius: 0;
+$global-menu-padding: 0.7rem 1rem;
+$global-menu-nested-margin: 1rem;
$global-text-direction: ltr;
$global-flexbox: false;
+$global-prototype-breakpoints: false;
+$global-button-cursor: pointer;
+$global-color-pick-contrast-tolerance: 0;
$print-transparent-backgrounds: true;
@include add-foundation-colors;
// 2. Breakpoints
// --------------
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
+$print-breakpoint: large;
$breakpoint-classes: (small medium large);
// 3. The Grid
// -----------
$grid-row-width: $global-width;
$grid-column-count: 12;
$grid-column-gutter: (
- small: 20px,
- medium: 30px,
+ small: 20px,
+ medium: 30px,
);
$grid-column-align-edge: true;
+$grid-column-alias: 'columns';
$block-grid-max: 8;
// 4. Base Typography
// ------------------
$header-font-family: 'Kreon', $body-font-family;
$header-font-weight: $global-weight-normal;
$header-font-style: normal;
$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
-$header-sizes: (
- small: (
- 'h1': 24,
- 'h2': 20,
- 'h3': 19,
- 'h4': 18,
- 'h5': 17,
- 'h6': 16,
- ),
- medium: (
- 'h1': 64,
- 'h2': 48,
- 'h3': 42,
- 'h4': 36,
- 'h5': 24,
- 'h6': 18,
- ),
-);
$header-color: inherit;
$header-lineheight: 1.4;
$header-margin-bottom: 0.5rem;
+$header-styles: (
+ small: (
+ 'h1': ('font-size': 24),
+ 'h2': ('font-size': 20),
+ 'h3': ('font-size': 19),
+ 'h4': ('font-size': 18),
+ 'h5': ('font-size': 17),
+ 'h6': ('font-size': 16),
+ ),
+ medium: (
+ 'h1': ('font-size': 64),
+ 'h2': ('font-size': 48),
+ 'h3': ('font-size': 42),
+ 'h4': ('font-size': 36),
+ 'h5': ('font-size': 24),
+ 'h6': ('font-size': 18),
+ ),
+);
$header-text-rendering: optimizeLegibility;
$small-font-size: 80%;
$header-small-font-color: $medium-gray;
$paragraph-lineheight: 1.6;
$paragraph-margin-bottom: 1rem;
$paragraph-text-rendering: optimizeLegibility;
$code-color: $black;
$code-font-family: $font-family-monospace;
$code-font-weight: $global-weight-normal;
$code-background: $light-gray;
$code-border: 1px solid $medium-gray;
$code-padding: rem-calc(2 5 1);
$anchor-color: $primary-color;
$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
$anchor-text-decoration: none;
$anchor-text-decoration-hover: none;
$hr-width: $global-width;
$hr-border: 1px solid $medium-gray;
$hr-margin: rem-calc(20) auto;
$list-lineheight: $paragraph-lineheight;
$list-margin-bottom: $paragraph-margin-bottom;
$list-style-type: disc;
$list-style-position: outside;
$list-side-margin: 1.25rem;
$list-nested-side-margin: 1.25rem;
$defnlist-margin-bottom: 1rem;
$defnlist-term-weight: $global-weight-bold;
$defnlist-term-margin-bottom: 0.3rem;
$blockquote-color: $dark-gray;
$blockquote-padding: rem-calc(9 20 0 19);
$blockquote-border: 1px solid $medium-gray;
$cite-font-size: rem-calc(13);
$cite-color: $dark-gray;
+$cite-pseudo-content: '\2014 \0020';
$keystroke-font: $font-family-monospace;
$keystroke-color: $black;
$keystroke-background: $light-gray;
$keystroke-padding: rem-calc(2 4 0);
$keystroke-radius: $global-radius;
$abbr-underline: 1px dotted $black;
// 5. Typography Helpers
// ---------------------
$lead-font-size: $global-font-size * 1.25;
$lead-lineheight: 1.6;
$subheader-lineheight: 1.4;
$subheader-color: $dark-gray;
$subheader-font-weight: $global-weight-normal;
$subheader-margin-top: 0.2rem;
$subheader-margin-bottom: 0.5rem;
$stat-font-size: 2.5rem;
// 6. Abide
// --------
$abide-inputs: true;
$abide-labels: true;
-$input-background-invalid: map-get($foundation-palette, alert);
-$form-label-color-invalid: map-get($foundation-palette, alert);
-$input-error-color: map-get($foundation-palette, alert);
+$input-background-invalid: get-color(alert);
+$form-label-color-invalid: get-color(alert);
+$input-error-color: get-color(alert);
$input-error-font-size: rem-calc(12);
$input-error-font-weight: $global-weight-bold;
// 7. Accordion
// ------------
$accordion-background: $white;
$accordion-plusminus: true;
-$accordion-item-color: foreground($accordion-background, $primary-color);
+$accordion-title-font-size: rem-calc(12);
+$accordion-item-color: $primary-color;
$accordion-item-background-hover: $light-gray;
$accordion-item-padding: 1.25rem 1rem;
$accordion-content-background: $white;
$accordion-content-border: 1px solid $light-gray;
-$accordion-content-color: foreground($accordion-background, $primary-color);
+$accordion-content-color: $body-font-color;
$accordion-content-padding: 1rem;
// 8. Accordion Menu
// -----------------
+$accordionmenu-padding: $global-menu-padding;
+$accordionmenu-nested-margin: $global-menu-nested-margin;
+$accordionmenu-submenu-padding: $accordionmenu-padding;
$accordionmenu-arrows: true;
$accordionmenu-arrow-color: $primary-color;
+$accordionmenu-item-background: null;
+$accordionmenu-border: null;
+$accordionmenu-submenu-toggle-background: null;
+$accordion-submenu-toggle-border: $accordionmenu-border;
+$accordionmenu-submenu-toggle-width: 40px;
+$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width;
+$accordionmenu-arrow-size: 6px;
// 9. Badge
// --------
$badge-background: $primary-color;
-$badge-color: foreground($badge-background);
+$badge-color: $white;
+$badge-color-alt: $black;
+$badge-palette: $foundation-palette;
$badge-padding: 0.3em;
$badge-minwidth: 2.1em;
$badge-font-size: 0.6rem;
// 10. Breadcrumbs
// ---------------
$breadcrumbs-margin: 0 0 $global-margin 0;
$breadcrumbs-item-font-size: rem-calc(11);
$breadcrumbs-item-color: $primary-color;
$breadcrumbs-item-color-current: $black;
$breadcrumbs-item-color-disabled: $medium-gray;
$breadcrumbs-item-margin: 0.75rem;
$breadcrumbs-item-uppercase: true;
-$breadcrumbs-item-slash: true;
+$breadcrumbs-item-separator: true;
+$breadcrumbs-item-separator-item: '/';
+$breadcrumbs-item-separator-item-rtl: '\\';
+$breadcrumbs-item-separator-color: $medium-gray;
// 11. Button
// ----------
+$button-font-family: inherit;
$button-padding: 0.85em 1em;
$button-margin: 0 0 $global-margin 0;
$button-fill: solid;
-$button-background: $secondary-color;
+$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
-$button-color: $black;
+$button-color: $white;
$button-color-alt: $black;
$button-radius: $global-radius;
+$button-hollow-border-width: 1px;
$button-sizes: (
- tiny: 0.6rem,
- small: 0.75rem,
- default: 0.9rem,
- large: 1.25rem,
+ tiny: 0.6rem,
+ small: 0.75rem,
+ default: 0.9rem,
+ large: 1.25rem,
);
+$button-palette: $foundation-palette;
$button-opacity-disabled: 0.25;
+$button-background-hover-lightness: -20%;
+$button-hollow-hover-lightness: -50%;
+$button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
// 12. Button Group
// ----------------
$buttongroup-margin: 1rem;
$buttongroup-spacing: 1px;
$buttongroup-child-selector: '.button';
$buttongroup-expand-max: 6;
+$buttongroup-radius-on-each: true;
// 13. Callout
// -----------
$callout-background: $white;
$callout-background-fade: 85%;
$callout-border: 1px solid rgba($black, 0.25);
$callout-margin: 0 0 1rem 0;
$callout-padding: 1rem;
$callout-font-color: $body-font-color;
$callout-font-color-alt: $body-background;
$callout-radius: $global-radius;
$callout-link-tint: 30%;
-// 14. Close Button
+// 14. Card
+// --------
+
+$card-background: $white;
+$card-font-color: $body-font-color;
+$card-divider-background: $light-gray;
+$card-border: 1px solid $light-gray;
+$card-shadow: none;
+$card-border-radius: $global-radius;
+$card-padding: $global-padding;
+$card-margin-bottom: $global-margin;
+
+// 15. Close Button
// ----------------
$closebutton-position: right top;
-$closebutton-offset-horizontal: 1rem;
-$closebutton-offset-vertical: 0.5rem;
-$closebutton-size: 2em;
+$closebutton-offset-horizontal: (
+ small: 0.66rem,
+ medium: 1rem,
+);
+$closebutton-offset-vertical: (
+ small: 0.33em,
+ medium: 0.5rem,
+);
+$closebutton-size: (
+ small: 1.5em,
+ medium: 2em,
+);
$closebutton-lineheight: 1;
$closebutton-color: $dark-gray;
$closebutton-color-hover: $black;
-// 15. Drilldown
+// 16. Drilldown
// -------------
$drilldown-transition: transform 0.15s linear;
$drilldown-arrows: true;
-$drilldown-arrow-color: $primary-color;
+$drilldown-padding: $global-menu-padding;
+$drilldown-nested-margin: 0;
$drilldown-background: $white;
+$drilldown-submenu-padding: $drilldown-padding;
+$drilldown-submenu-background: $white;
+$drilldown-arrow-color: $primary-color;
+$drilldown-arrow-size: 6px;
-// 16. Dropdown
+// 17. Dropdown
// ------------
$dropdown-padding: 1rem;
+$dropdown-background: $body-background;
$dropdown-border: 1px solid $medium-gray;
$dropdown-font-size: 1rem;
$dropdown-width: 300px;
$dropdown-radius: $global-radius;
$dropdown-sizes: (
- tiny: 100px,
- small: 200px,
- large: 400px,
+ tiny: 100px,
+ small: 200px,
+ large: 400px,
);
-// 17. Dropdown Menu
+// 18. Dropdown Menu
// -----------------
$dropdownmenu-arrows: true;
$dropdownmenu-arrow-color: $anchor-color;
+$dropdownmenu-arrow-size: 6px;
+$dropdownmenu-arrow-padding: 1.5rem;
$dropdownmenu-min-width: 200px;
$dropdownmenu-background: $white;
+$dropdownmenu-submenu-background: $dropdownmenu-background;
+$dropdownmenu-padding: $global-menu-padding;
+$dropdownmenu-nested-margin: 0;
+$dropdownmenu-submenu-padding: $dropdownmenu-padding;
$dropdownmenu-border: 1px solid $medium-gray;
+$dropdown-menu-item-color-active: get-color(primary);
+$dropdown-menu-item-background-active: transparent;
-// 18. Flex Video
-// --------------
+// 19. Flexbox Utilities
+// ---------------------
-$flexvideo-margin-bottom: rem-calc(16);
-$flexvideo-ratio: 4 by 3;
-$flexvideo-ratio-widescreen: 16 by 9;
+$flex-source-ordering-count: 6;
+$flexbox-responsive-breakpoints: true;
-// 19. Forms
+// 20. Forms
// ---------
$fieldset-border: 1px solid $medium-gray;
$fieldset-padding: rem-calc(20);
$fieldset-margin: rem-calc(18 0);
$legend-padding: rem-calc(0 3);
$form-spacing: rem-calc(16);
$helptext-color: $black;
$helptext-font-size: rem-calc(13);
$helptext-font-style: italic;
$input-prefix-color: $black;
$input-prefix-background: $light-gray;
$input-prefix-border: 1px solid $medium-gray;
$input-prefix-padding: 1rem;
$form-label-color: $black;
$form-label-font-size: rem-calc(14);
$form-label-font-weight: $global-weight-normal;
$form-label-line-height: 1.8;
$select-background: $white;
$select-triangle-color: $dark-gray;
$select-radius: $global-radius;
$input-color: $black;
$input-placeholder-color: $medium-gray;
$input-font-family: inherit;
$input-font-size: rem-calc(16);
+$input-font-weight: $global-weight-normal;
+$input-line-height: $global-lineheight;
$input-background: $white;
$input-background-focus: $white;
$input-background-disabled: $light-gray;
$input-border: 1px solid $medium-gray;
$input-border-focus: 1px solid $dark-gray;
+$input-padding: $form-spacing / 2;
$input-shadow: inset 0 1px 2px rgba($black, 0.1);
$input-shadow-focus: 0 0 5px $medium-gray;
-$input-cursor-disabled: default;
+$input-cursor-disabled: not-allowed;
$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
$input-number-spinners: true;
$input-radius: $global-radius;
+$form-button-radius: $global-radius;
-// 20. Label
+// 21. Label
// ---------
$label-background: $primary-color;
-$label-color: foreground($label-background);
+$label-color: $white;
+$label-color-alt: $black;
+$label-palette: $foundation-palette;
$label-font-size: 0.8rem;
$label-padding: 0.33333rem 0.5rem;
$label-radius: $global-radius;
-// 21. Media Object
+// 22. Media Object
// ----------------
$mediaobject-margin-bottom: $global-margin;
$mediaobject-section-padding: $global-padding;
$mediaobject-image-width-stacked: 100%;
-// 22. Menu
+// 23. Menu
// --------
$menu-margin: 0;
-$menu-margin-nested: 1rem;
-$menu-item-padding: 0.7rem 1rem;
+$menu-nested-margin: $global-menu-nested-margin;
+$menu-items-padding: $global-menu-padding;
+$menu-simple-margin: 1rem;
$menu-item-color-active: $white;
-$menu-item-background-active: map-get($foundation-palette, primary);
+$menu-item-color-alt-active: $black;
+$menu-item-background-active: get-color(primary);
$menu-icon-spacing: 0.25rem;
+$menu-item-background-hover: $light-gray;
+$menu-state-back-compat: true;
+$menu-centered-back-compat: true;
+$menu-icons-back-compat: true;
-// 23. Meter
+// 24. Meter
// ---------
$meter-height: 1rem;
$meter-radius: $global-radius;
$meter-background: $medium-gray;
$meter-fill-good: $success-color;
$meter-fill-medium: $warning-color;
$meter-fill-bad: $alert-color;
-// 24. Off-canvas
+// 25. Off-canvas
// --------------
-$offcanvas-size: 250px;
+$offcanvas-sizes: (
+ small: 250px,
+);
+$offcanvas-vertical-sizes: (
+ small: 250px,
+);
$offcanvas-background: $light-gray;
-$offcanvas-zindex: -1;
+$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
+$offcanvas-inner-shadow-size: 20px;
+$offcanvas-inner-shadow-color: rgba($black, 0.25);
+$offcanvas-overlay-zindex: 11;
+$offcanvas-push-zindex: 12;
+$offcanvas-overlap-zindex: 13;
+$offcanvas-reveal-zindex: 12;
$offcanvas-transition-length: 0.5s;
$offcanvas-transition-timing: ease;
$offcanvas-fixed-reveal: true;
$offcanvas-exit-background: rgba($white, 0.25);
$maincontent-class: 'off-canvas-content';
-$maincontent-shadow: 0 0 10px rgba($black, 0.5);
-// 25. Orbit
+// 26. Orbit
// ---------
$orbit-bullet-background: $medium-gray;
$orbit-bullet-background-active: $dark-gray;
$orbit-bullet-diameter: 1.2rem;
$orbit-bullet-margin: 0.1rem;
$orbit-bullet-margin-top: 0.8rem;
$orbit-bullet-margin-bottom: 0.8rem;
$orbit-caption-background: rgba($black, 0.5);
$orbit-caption-padding: 1rem;
$orbit-control-background-hover: rgba($black, 0.5);
$orbit-control-padding: 1rem;
$orbit-control-zindex: 10;
-// 26. Pagination
+// 27. Pagination
// --------------
$pagination-font-size: rem-calc(14);
$pagination-margin-bottom: $global-margin;
$pagination-item-color: $black;
$pagination-item-padding: rem-calc(3 10);
$pagination-item-spacing: rem-calc(1);
$pagination-radius: $global-radius;
$pagination-item-background-hover: $light-gray;
$pagination-item-background-current: $primary-color;
-$pagination-item-color-current: foreground($pagination-item-background-current);
+$pagination-item-color-current: $white;
$pagination-item-color-disabled: $medium-gray;
$pagination-ellipsis-color: $black;
$pagination-mobile-items: false;
+$pagination-mobile-current-item: false;
$pagination-arrows: true;
-// 27. Progress Bar
+// 28. Progress Bar
// ----------------
$progress-height: 1rem;
$progress-background: $medium-gray;
$progress-margin-bottom: $global-margin;
$progress-meter-background: $primary-color;
$progress-radius: $global-radius;
-// 28. Reveal
+// 29. Prototype Arrow
+// -------------------
+
+$prototype-arrow-directions: (
+ down,
+ up,
+ right,
+ left
+);
+$prototype-arrow-size: 0.4375rem;
+$prototype-arrow-color: $black;
+
+// 30. Prototype Border-Box
+// ------------------------
+
+$prototype-border-box-breakpoints: $global-prototype-breakpoints;
+
+// 31. Prototype Border-None
+// -------------------------
+
+$prototype-border-none-breakpoints: $global-prototype-breakpoints;
+
+// 32. Prototype Bordered
+// ----------------------
+
+$prototype-bordered-breakpoints: $global-prototype-breakpoints;
+$prototype-border-width: rem-calc(1);
+$prototype-border-type: solid;
+$prototype-border-color: $medium-gray;
+
+// 33. Prototype Display
+// ---------------------
+
+$prototype-display-breakpoints: $global-prototype-breakpoints;
+$prototype-display: (
+ inline,
+ inline-block,
+ block,
+ table,
+ table-cell
+);
+
+// 34. Prototype Font-Styling
+// --------------------------
+
+$prototype-font-breakpoints: $global-prototype-breakpoints;
+$prototype-wide-letter-spacing: rem-calc(4);
+$prototype-font-normal: $global-weight-normal;
+$prototype-font-bold: $global-weight-bold;
+
+// 35. Prototype List-Style-Type
+// -----------------------------
+
+$prototype-list-breakpoints: $global-prototype-breakpoints;
+$prototype-style-type-unordered: (
+ disc,
+ circle,
+ square
+);
+$prototype-style-type-ordered: (
+ decimal,
+ lower-alpha,
+ lower-latin,
+ lower-roman,
+ upper-alpha,
+ upper-latin,
+ upper-roman
+);
+
+// 36. Prototype Overflow
+// ----------------------
+
+$prototype-overflow-breakpoints: $global-prototype-breakpoints;
+$prototype-overflow: (
+ visible,
+ hidden,
+ scroll
+);
+
+// 37. Prototype Position
+// ----------------------
+
+$prototype-position-breakpoints: $global-prototype-breakpoints;
+$prototype-position: (
+ static,
+ relative,
+ absolute,
+ fixed
+);
+$prototype-position-z-index: 975;
+
+// 38. Prototype Rounded
+// ---------------------
+
+$prototype-rounded-breakpoints: $global-prototype-breakpoints;
+$prototype-border-radius: rem-calc(3);
+
+// 39. Prototype Separator
+// -----------------------
+
+$prototype-separator-breakpoints: $global-prototype-breakpoints;
+$prototype-separator-align: center;
+$prototype-separator-height: rem-calc(2);
+$prototype-separator-width: 3rem;
+$prototype-separator-background: $primary-color;
+$prototype-separator-margin-top: $global-margin;
+
+// 40. Prototype Shadow
+// --------------------
+
+$prototype-shadow-breakpoints: $global-prototype-breakpoints;
+$prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),
+0 2px 10px 0 rgba(0,0,0,.12);
+
+// 41. Prototype Sizing
+// --------------------
+
+$prototype-sizing-breakpoints: $global-prototype-breakpoints;
+$prototype-sizing: (
+ width,
+ height
+);
+$prototype-sizes: (
+ 25: 25%,
+ 50: 50%,
+ 75: 75%,
+ 100: 100%
+);
+
+// 42. Prototype Spacing
+// ---------------------
+
+$prototype-spacing-breakpoints: $global-prototype-breakpoints;
+$prototype-spacers-count: 3;
+
+// 43. Prototype Text-Decoration
+// -----------------------------
+
+$prototype-decoration-breakpoints: $global-prototype-breakpoints;
+$prototype-text-decoration: (
+ overline,
+ underline,
+ line-through,
+);
+
+// 44. Prototype Text-Transformation
+// ---------------------------------
+
+$prototype-transformation-breakpoints: $global-prototype-breakpoints;
+$prototype-text-transformation: (
+ lowercase,
+ uppercase,
+ capitalize
+);
+
+// 45. Prototype Text-Utilities
+// ----------------------------
+
+$prototype-utilities-breakpoints: $global-prototype-breakpoints;
+$prototype-text-overflow: ellipsis;
+
+// 46. Responsive Embed
+// --------------------
+
+$responsive-embed-margin-bottom: rem-calc(16);
+$responsive-embed-ratios: (
+ default: 4 by 3,
+ widescreen: 16 by 9,
+);
+
+// 47. Reveal
// ----------
$reveal-background: $white;
$reveal-width: 600px;
$reveal-max-width: $global-width;
$reveal-padding: $global-padding;
$reveal-border: 1px solid $medium-gray;
$reveal-radius: $global-radius;
$reveal-zindex: 1005;
$reveal-overlay-background: rgba($black, 0.45);
-// 29. Slider
+// 48. Slider
// ----------
$slider-width-vertical: 0.5rem;
$slider-transition: all 0.2s ease-in-out;
$slider-height: 0.5rem;
$slider-background: $light-gray;
$slider-fill-background: $medium-gray;
$slider-handle-height: 1.4rem;
$slider-handle-width: 1.4rem;
$slider-handle-background: $primary-color;
$slider-opacity-disabled: 0.25;
$slider-radius: $global-radius;
-// 30. Switch
+// 49. Switch
// ----------
$switch-background: $medium-gray;
$switch-background-active: $primary-color;
$switch-height: 2rem;
$switch-height-tiny: 1.5rem;
$switch-height-small: 1.75rem;
$switch-height-large: 2.5rem;
$switch-radius: $global-radius;
$switch-margin: $global-margin;
$switch-paddle-background: $white;
$switch-paddle-offset: 0.25rem;
$switch-paddle-radius: $global-radius;
$switch-paddle-transition: all 0.25s ease-out;
-// 31. Table
+// 50. Table
// ---------
$table-background: $white;
$table-color-scale: 5%;
$table-border: 1px solid smart-scale($table-background, $table-color-scale);
$table-padding: rem-calc(8 10 10);
$table-hover-scale: 2%;
$table-row-hover: darken($table-background, $table-hover-scale);
$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
+$table-is-striped: true;
$table-striped-background: smart-scale($table-background, $table-color-scale);
$table-stripe: even;
$table-head-background: smart-scale($table-background, $table-color-scale / 2);
+$table-head-row-hover: darken($table-head-background, $table-hover-scale);
$table-foot-background: smart-scale($table-background, $table-color-scale);
+$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
$table-head-font-color: $body-font-color;
+$table-foot-font-color: $body-font-color;
$show-header-for-stacked: false;
+$table-stack-breakpoint: medium;
-// 32. Tabs
+// 51. Tabs
// --------
$tab-margin: 0;
$tab-background: $white;
+$tab-color: $primary-color;
$tab-background-active: $light-gray;
+$tab-active-color: $primary-color;
$tab-item-font-size: rem-calc(12);
$tab-item-background-hover: $white;
$tab-item-padding: 1.25rem 1.5rem;
-$tab-expand-max: 6;
$tab-content-background: $white;
$tab-content-border: $light-gray;
-$tab-content-color: foreground($tab-background, $primary-color);
+$tab-content-color: $body-font-color;
$tab-content-padding: 1rem;
-// 33. Thumbnail
+// 52. Thumbnail
// -------------
$thumbnail-border: solid 4px $white;
$thumbnail-margin-bottom: $global-margin;
$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
$thumbnail-transition: box-shadow 200ms ease-out;
$thumbnail-radius: $global-radius;
-// 34. Title Bar
+// 53. Title Bar
// -------------
$titlebar-background: $black;
$titlebar-color: $white;
$titlebar-padding: 0.5rem;
$titlebar-text-font-weight: bold;
$titlebar-icon-color: $white;
$titlebar-icon-color-hover: $medium-gray;
$titlebar-icon-spacing: 0.25rem;
-// 35. Tooltip
+// 54. Tooltip
// -----------
+$has-tip-cursor: help;
$has-tip-font-weight: $global-weight-bold;
$has-tip-border-bottom: dotted 1px $dark-gray;
$tooltip-background-color: $black;
$tooltip-color: $white;
$tooltip-padding: 0.75rem;
+$tooltip-max-width: 10rem;
$tooltip-font-size: $small-font-size;
$tooltip-pip-width: 0.75rem;
$tooltip-pip-height: $tooltip-pip-width * 0.866;
$tooltip-radius: $global-radius;
-// 36. Top Bar
+// 55. Top Bar
// -----------
$topbar-padding: 0.5rem;
$topbar-background: $light-gray;
$topbar-submenu-background: $topbar-background;
-$topbar-title-spacing: 1rem;
+$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
$topbar-input-width: 200px;
$topbar-unstack-breakpoint: medium;
-// 37. Path for fonts
+// 56. Xy Grid
+// -----------
+
+$xy-grid: true;
+$grid-container: $global-width;
+$grid-columns: 12;
+$grid-margin-gutters: (
+ small: 20px,
+ medium: 30px
+);
+$grid-padding-gutters: $grid-margin-gutters;
+$grid-container-padding: $grid-padding-gutters;
+$grid-container-max: $global-width;
+$xy-block-grid-max: 8;
+
+// 57. Path for fonts
// ------------------
$fi-path: "../fonts";
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index 85e0903..791c13d 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -1,84 +1,84 @@
@charset "utf-8";
/* -------------------------------------------------------------
Dæghrefn web site
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Project: Nasqueron
Author: Dereckson
Dependencies: foundation motion-ui
Filename: app.css
Licence: CC-BY 4.0, MIT
------------------------------------------------------------- */
@import 'settings';
/* -------------------------------------------------------------
Table of contents
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
:: Dependencies
:: Our design
*/
/* -------------------------------------------------------------
Dependencies
Foundation
Motion UI
Foundation Icon Fonts 3
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@import 'foundation';
@import 'motion-ui';
-@import '_foundation-icons';
+@import 'node_modules/foundation-icon-fonts/_foundation-icons';
@include foundation-global-styles;
@include foundation-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-close-button;
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-flex-video;
@include foundation-label;
@include foundation-media-object;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;
@include foundation-visibility-classes;
@include foundation-float-classes;
@include motion-ui-transitions;
@include motion-ui-animations;
/* -------------------------------------------------------------
Our design
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@import 'components/blockgrid';
@import 'components/book';
@import 'components/footer';
@import 'components/layout';
@import 'components/actions';