mirror of
https://github.com/kogakure/website-11ty-hamburg.stefanimhoff.de.git
synced 2026-02-03 12:15:28 +00:00
refactor: convert files from spaces to tabs
This commit is contained in:
Stefan Imhoff
146
.eleventy.js
146
.eleventy.js
@@ -7,89 +7,89 @@ const filters = require('./src/utils/filters.js');
|
||||
const shortcodes = require('./src/utils/shortcodes.js');
|
||||
|
||||
module.exports = function (config) {
|
||||
// Plugins
|
||||
config.addPlugin(pluginRssFeed);
|
||||
// Plugins
|
||||
config.addPlugin(pluginRssFeed);
|
||||
|
||||
if (process.env.ELEVENTY_ENV == 'production') {
|
||||
config.addPlugin(pluginLazyImages);
|
||||
}
|
||||
if (process.env.ELEVENTY_ENV == 'production') {
|
||||
config.addPlugin(pluginLazyImages);
|
||||
}
|
||||
|
||||
// Markdown It
|
||||
let markdownIt = require('markdown-it');
|
||||
let markdownItFootnotes = require('markdown-it-footnote');
|
||||
let markdownItSub = require('markdown-it-sub');
|
||||
let markdownItSup = require('markdown-it-sup');
|
||||
let markdownItExternalAnchor = require('markdown-it-external-anchor');
|
||||
let options = {
|
||||
html: true,
|
||||
};
|
||||
// Markdown It
|
||||
let markdownIt = require('markdown-it');
|
||||
let markdownItFootnotes = require('markdown-it-footnote');
|
||||
let markdownItSub = require('markdown-it-sub');
|
||||
let markdownItSup = require('markdown-it-sup');
|
||||
let markdownItExternalAnchor = require('markdown-it-external-anchor');
|
||||
let options = {
|
||||
html: true,
|
||||
};
|
||||
|
||||
let markdownLib = markdownIt(options)
|
||||
.use(markdownItFootnotes)
|
||||
.use(markdownItExternalAnchor, {
|
||||
domain: 'hamburg.stefanimhoff.de',
|
||||
class: 'external',
|
||||
})
|
||||
.use(markdownItSub)
|
||||
.use(markdownItSup);
|
||||
let markdownLib = markdownIt(options)
|
||||
.use(markdownItFootnotes)
|
||||
.use(markdownItExternalAnchor, {
|
||||
domain: 'hamburg.stefanimhoff.de',
|
||||
class: 'external',
|
||||
})
|
||||
.use(markdownItSub)
|
||||
.use(markdownItSup);
|
||||
|
||||
config.setLibrary('md', markdownLib);
|
||||
config.setLibrary('md', markdownLib);
|
||||
|
||||
// Compress and combine JS files
|
||||
config.addFilter('jsmin', require('./src/utils/minify-js.js'));
|
||||
// Compress and combine JS files
|
||||
config.addFilter('jsmin', require('./src/utils/minify-js.js'));
|
||||
|
||||
// Minify the HTML in production
|
||||
if (process.env.ELEVENTY_ENV == 'production') {
|
||||
config.addTransform('htmlmin', require('./src/utils/minify-html.js'));
|
||||
}
|
||||
// Minify the HTML in production
|
||||
if (process.env.ELEVENTY_ENV == 'production') {
|
||||
config.addTransform('htmlmin', require('./src/utils/minify-html.js'));
|
||||
}
|
||||
|
||||
// Shortcodes
|
||||
config.addShortcode('email', shortcodes.email);
|
||||
config.addShortcode('map', shortcodes.map);
|
||||
config.addShortcode('youtube', shortcodes.youtube);
|
||||
// Shortcodes
|
||||
config.addShortcode('email', shortcodes.email);
|
||||
config.addShortcode('map', shortcodes.map);
|
||||
config.addShortcode('youtube', shortcodes.youtube);
|
||||
|
||||
// Filters
|
||||
Object.keys(filters).forEach((filterName) => {
|
||||
config.addFilter(filterName, filters[filterName]);
|
||||
});
|
||||
config.addFilter('nbsp', filterNbsp(2, 15));
|
||||
// Filters
|
||||
Object.keys(filters).forEach((filterName) => {
|
||||
config.addFilter(filterName, filters[filterName]);
|
||||
});
|
||||
config.addFilter('nbsp', filterNbsp(2, 15));
|
||||
|
||||
// Watch for changes and reload
|
||||
config.addWatchTarget('src/assets');
|
||||
// Watch for changes and reload
|
||||
config.addWatchTarget('src/assets');
|
||||
|
||||
// Copy static files to dist
|
||||
config.addPassthroughCopy({
|
||||
'src/static/**/*.{xml,html,ico}': '.',
|
||||
});
|
||||
config.addPassthroughCopy({
|
||||
'src/static/.well-known/*': '.well-known',
|
||||
});
|
||||
config.addPassthroughCopy({
|
||||
'src/downloads': 'downloads',
|
||||
});
|
||||
config.addPassthroughCopy({
|
||||
'src/assets/fonts': 'assets/fonts',
|
||||
});
|
||||
config.addPassthroughCopy({
|
||||
'src/assets/images': 'assets/images',
|
||||
});
|
||||
// Copy static files to dist
|
||||
config.addPassthroughCopy({
|
||||
'src/static/**/*.{xml,html,ico}': '.',
|
||||
});
|
||||
config.addPassthroughCopy({
|
||||
'src/static/.well-known/*': '.well-known',
|
||||
});
|
||||
config.addPassthroughCopy({
|
||||
'src/downloads': 'downloads',
|
||||
});
|
||||
config.addPassthroughCopy({
|
||||
'src/assets/fonts': 'assets/fonts',
|
||||
});
|
||||
config.addPassthroughCopy({
|
||||
'src/assets/images': 'assets/images',
|
||||
});
|
||||
|
||||
// Deep-Merge
|
||||
config.setDataDeepMerge(true);
|
||||
// Deep-Merge
|
||||
config.setDataDeepMerge(true);
|
||||
|
||||
// Set input and output folders
|
||||
return {
|
||||
dir: {
|
||||
input: 'src',
|
||||
data: 'data',
|
||||
includes: 'includes',
|
||||
layouts: 'layouts',
|
||||
output: 'dist',
|
||||
},
|
||||
templateFormats: ['njk', 'md', '11ty.js'],
|
||||
htmlTemplateEngine: 'njk',
|
||||
dataTemplateEngine: 'njk',
|
||||
markdownTemplateEngine: 'njk',
|
||||
passthroughFileCopy: true,
|
||||
};
|
||||
// Set input and output folders
|
||||
return {
|
||||
dir: {
|
||||
input: 'src',
|
||||
data: 'data',
|
||||
includes: 'includes',
|
||||
layouts: 'layouts',
|
||||
output: 'dist',
|
||||
},
|
||||
templateFormats: ['njk', 'md', '11ty.js'],
|
||||
htmlTemplateEngine: 'njk',
|
||||
dataTemplateEngine: 'njk',
|
||||
markdownTemplateEngine: 'njk',
|
||||
passthroughFileCopy: true,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
{
|
||||
"env": {
|
||||
"es6": true,
|
||||
"node": true,
|
||||
"browser": true
|
||||
},
|
||||
"extends": ["eslint:recommended", "plugin:prettier/recommended"],
|
||||
"plugins": ["prettier"],
|
||||
"parserOptions": {
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
"prettier/prettier": "error"
|
||||
}
|
||||
"env": {
|
||||
"es6": true,
|
||||
"node": true,
|
||||
"browser": true
|
||||
},
|
||||
"extends": ["eslint:recommended", "plugin:prettier/recommended"],
|
||||
"plugins": ["prettier"],
|
||||
"parserOptions": {
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
"prettier/prettier": "error"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,35 +1,35 @@
|
||||
{
|
||||
"plugins": [
|
||||
"stylelint-order",
|
||||
"stylelint-config-rational-order/plugin",
|
||||
"stylelint-a11y",
|
||||
"stylelint-high-performance-animation",
|
||||
"stylelint-prettier"
|
||||
],
|
||||
"extends": [
|
||||
"stylelint-config-recommended",
|
||||
"stylelint-a11y/recommended",
|
||||
"stylelint-prettier/recommended"
|
||||
],
|
||||
"syntax": "scss",
|
||||
"rules": {
|
||||
"property-no-unknown": [
|
||||
true,
|
||||
{
|
||||
"ignoreProperties": ["suffix", "symbols", "system"]
|
||||
}
|
||||
],
|
||||
"no-descending-specificity": null,
|
||||
"order/order": ["custom-properties", "declarations"],
|
||||
"order/properties-alphabetical-order": true,
|
||||
"plugin/no-low-performance-animation-properties": true,
|
||||
"at-rule-no-unknown": [
|
||||
true,
|
||||
{
|
||||
"ignoreAtRules": ["define-placeholder", "extend"]
|
||||
}
|
||||
],
|
||||
"string-quotes": "single",
|
||||
"prettier/prettier": true
|
||||
}
|
||||
"plugins": [
|
||||
"stylelint-order",
|
||||
"stylelint-config-rational-order/plugin",
|
||||
"stylelint-a11y",
|
||||
"stylelint-high-performance-animation",
|
||||
"stylelint-prettier"
|
||||
],
|
||||
"extends": [
|
||||
"stylelint-config-recommended",
|
||||
"stylelint-a11y/recommended",
|
||||
"stylelint-prettier/recommended"
|
||||
],
|
||||
"syntax": "scss",
|
||||
"rules": {
|
||||
"property-no-unknown": [
|
||||
true,
|
||||
{
|
||||
"ignoreProperties": ["suffix", "symbols", "system"]
|
||||
}
|
||||
],
|
||||
"no-descending-specificity": null,
|
||||
"order/order": ["custom-properties", "declarations"],
|
||||
"order/properties-alphabetical-order": true,
|
||||
"plugin/no-low-performance-animation-properties": true,
|
||||
"at-rule-no-unknown": [
|
||||
true,
|
||||
{
|
||||
"ignoreAtRules": ["define-placeholder", "extend"]
|
||||
}
|
||||
],
|
||||
"string-quotes": "single",
|
||||
"prettier/prettier": true
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
{
|
||||
"presets": ["@babel/preset-env"]
|
||||
"presets": ["@babel/preset-env"]
|
||||
}
|
||||
|
||||
117
gulpfile.js
117
gulpfile.js
@@ -16,94 +16,91 @@ const svgSprite = require('gulp-svg-sprite');
|
||||
* Package JavaScript with Babel and Browserify
|
||||
*/
|
||||
task('js', () => {
|
||||
return browserify(['./src/assets/scripts/main.js'], {
|
||||
debug: true,
|
||||
})
|
||||
.transform(babel)
|
||||
.bundle()
|
||||
.on('error', function (err) {
|
||||
console.error(err);
|
||||
this.emit('end');
|
||||
})
|
||||
.pipe(source('main.js'))
|
||||
.pipe(buffer())
|
||||
.pipe(sourcemaps.init({ loadMaps: true }))
|
||||
.pipe(sourcemaps.write('.'))
|
||||
.pipe(dest('./dist/assets/scripts'));
|
||||
return browserify(['./src/assets/scripts/main.js'], {
|
||||
debug: true,
|
||||
})
|
||||
.transform(babel)
|
||||
.bundle()
|
||||
.on('error', function (err) {
|
||||
console.error(err);
|
||||
this.emit('end');
|
||||
})
|
||||
.pipe(source('main.js'))
|
||||
.pipe(buffer())
|
||||
.pipe(sourcemaps.init({ loadMaps: true }))
|
||||
.pipe(sourcemaps.write('.'))
|
||||
.pipe(dest('./dist/assets/scripts'));
|
||||
});
|
||||
|
||||
/**
|
||||
* Create CSS and Sourcemaps with PostCSS
|
||||
*/
|
||||
task('css', function () {
|
||||
return src([
|
||||
'./src/assets/styles/*.css',
|
||||
'./src/assets/styles/critical/*.css',
|
||||
])
|
||||
.pipe(plumber())
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(postcss())
|
||||
.pipe(sourcemaps.write('.'))
|
||||
.pipe(dest('./dist/assets/styles'));
|
||||
return src(['./src/assets/styles/*.css', './src/assets/styles/critical/*.css'])
|
||||
.pipe(plumber())
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(postcss())
|
||||
.pipe(sourcemaps.write('.'))
|
||||
.pipe(dest('./dist/assets/styles'));
|
||||
});
|
||||
|
||||
/**
|
||||
* Create CSS with PostCSS for production
|
||||
*/
|
||||
task('css:production', function () {
|
||||
return src(['./src/assets/styles/*.css'])
|
||||
.pipe(plumber())
|
||||
.pipe(postcss())
|
||||
.pipe(dest('./dist/assets/styles'));
|
||||
return src(['./src/assets/styles/*.css'])
|
||||
.pipe(plumber())
|
||||
.pipe(postcss())
|
||||
.pipe(dest('./dist/assets/styles'));
|
||||
});
|
||||
|
||||
/**
|
||||
* Copy critical CSS files to project folder
|
||||
*/
|
||||
task('css:critical', function () {
|
||||
return src(['./src/assets/styles/critical/*.css'])
|
||||
.pipe(plumber())
|
||||
.pipe(postcss())
|
||||
.pipe(dest('./src/includes/critical'));
|
||||
return src(['./src/assets/styles/critical/*.css'])
|
||||
.pipe(plumber())
|
||||
.pipe(postcss())
|
||||
.pipe(dest('./src/includes/critical'));
|
||||
});
|
||||
|
||||
/**
|
||||
* Create SVG sprite map from SVG files
|
||||
*/
|
||||
task('svg', () => {
|
||||
return src('./src/icons/*.svg')
|
||||
.pipe(plumber())
|
||||
.pipe(
|
||||
svgSprite({
|
||||
mode: {
|
||||
symbol: {
|
||||
dest: '.',
|
||||
sprite: 'icons.svg',
|
||||
},
|
||||
svg: {
|
||||
xmlDeclaration: false,
|
||||
doctypeDeclaration: false,
|
||||
},
|
||||
},
|
||||
})
|
||||
)
|
||||
.pipe(dest('src/includes'));
|
||||
return src('./src/icons/*.svg')
|
||||
.pipe(plumber())
|
||||
.pipe(
|
||||
svgSprite({
|
||||
mode: {
|
||||
symbol: {
|
||||
dest: '.',
|
||||
sprite: 'icons.svg',
|
||||
},
|
||||
svg: {
|
||||
xmlDeclaration: false,
|
||||
doctypeDeclaration: false,
|
||||
},
|
||||
},
|
||||
})
|
||||
)
|
||||
.pipe(dest('src/includes'));
|
||||
});
|
||||
|
||||
/**
|
||||
* Optimize and minimize images
|
||||
*/
|
||||
task('optimize:images', () => {
|
||||
return src('src/assets/images/**/*.{jpg,jpeg,png,gif,svg}')
|
||||
.pipe(
|
||||
imagemin({
|
||||
optimizationLevel: 3,
|
||||
progressive: true,
|
||||
interlaced: true,
|
||||
})
|
||||
)
|
||||
.pipe(dest('src/assets/images/'))
|
||||
.pipe(size());
|
||||
return src('src/assets/images/**/*.{jpg,jpeg,png,gif,svg}')
|
||||
.pipe(
|
||||
imagemin({
|
||||
optimizationLevel: 3,
|
||||
progressive: true,
|
||||
interlaced: true,
|
||||
})
|
||||
)
|
||||
.pipe(dest('src/assets/images/'))
|
||||
.pipe(size());
|
||||
});
|
||||
|
||||
/**
|
||||
@@ -115,8 +112,8 @@ task('build', parallel('js', 'css:production', 'css:critical'));
|
||||
* Watch for changes in files
|
||||
*/
|
||||
task('watch', () => {
|
||||
watch('./src/assets/scripts/**/*.js', series('js'));
|
||||
watch('./src/assets/styles/**/*.css', series('css'));
|
||||
watch('./src/assets/scripts/**/*.js', series('js'));
|
||||
watch('./src/assets/styles/**/*.css', series('css'));
|
||||
});
|
||||
|
||||
/**
|
||||
|
||||
76376
package-lock.json
generated
76376
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
178
package.json
178
package.json
@@ -1,91 +1,91 @@
|
||||
{
|
||||
"name": "website-11ty-hamburg.stefanimhoff.de",
|
||||
"version": "1.0.0",
|
||||
"description": "Source code of my travel blog",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "ELEVENTY_ENV=production npm-run-all build:assets build:html build:sw",
|
||||
"build:assets": "gulp build",
|
||||
"build:html": "eleventy",
|
||||
"build:sw": "workbox generateSW workbox.config.js",
|
||||
"clean": "npx del dist",
|
||||
"debug": "DEBUG=* npx eleventy",
|
||||
"deploy": "netlify deploy --prod",
|
||||
"deploy:preview": "netlify deploy",
|
||||
"dev": "ELEVENTY_ENV=development npm run watch",
|
||||
"plop": "plop",
|
||||
"prebuild": "npm run clean",
|
||||
"prestart": "npm run clean",
|
||||
"publish": "npm-run-all build deploy",
|
||||
"start": "netlify dev",
|
||||
"svg": "gulp svg",
|
||||
"watch": "npm-run-all --parallel watch:*",
|
||||
"watch:assets": "gulp",
|
||||
"watch:html": "eleventy --serve"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/kogakure/website-11ty-hamburg.stefanimhoff.de.git"
|
||||
},
|
||||
"keywords": [
|
||||
"11ty"
|
||||
],
|
||||
"author": "Stefan Imhoff",
|
||||
"license": "ISC",
|
||||
"homepage": "https://hamburg.stefanimhoff.de",
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "1.0.1",
|
||||
"@11ty/eleventy-plugin-rss": "^1.1.1",
|
||||
"autoprefixer": "^10.2.5",
|
||||
"babelify": "^10.0.0",
|
||||
"browserify": "^17.0.0",
|
||||
"cssnano": "^5.0.2",
|
||||
"del-cli": "^3.0.1",
|
||||
"eleventy-nbsp-filter": "^0.1.0",
|
||||
"eleventy-plugin-lazyimages": "^2.1.0",
|
||||
"eslint": "^7.25.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-prettier": "^3.4.0",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-imagemin": "^7.1.0",
|
||||
"gulp-plumber": "^1.2.1",
|
||||
"gulp-postcss": "^9.0.0",
|
||||
"gulp-size": "^3.0.0",
|
||||
"gulp-sourcemaps": "^3.0.0",
|
||||
"gulp-svg-sprite": "^1.5.0",
|
||||
"html-minifier": "^4.0.0",
|
||||
"markdown-it-external-anchor": "^1.0.0",
|
||||
"markdown-it-footnote": "^3.0.2",
|
||||
"markdown-it-sub": "^1.0.0",
|
||||
"markdown-it-sup": "^1.0.0",
|
||||
"moment": "^2.29.1",
|
||||
"netlify-cli": "^3.39.4",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"outdent": "^0.8.0",
|
||||
"plop": "^2.7.4",
|
||||
"postcss": "^8.2.13",
|
||||
"postcss-cli": "^8.3.1",
|
||||
"postcss-custom-media": "^8.0.0",
|
||||
"postcss-custom-properties": "^11.0.0",
|
||||
"postcss-extend": "^1.0.5",
|
||||
"postcss-import": "^14.0.1",
|
||||
"postcss-media-minmax": "^5.0.0",
|
||||
"postcss-nested": "^5.0.5",
|
||||
"postcss-sort-media-queries": "^3.8.9",
|
||||
"prettier": "^2.2.1",
|
||||
"sal.js": "^0.8.4",
|
||||
"stylelint": "^13.13.0",
|
||||
"stylelint-a11y": "^1.2.3",
|
||||
"stylelint-config-prettier": "^8.0.2",
|
||||
"stylelint-config-rational-order": "^0.1.2",
|
||||
"stylelint-config-recommended": "^5.0.0",
|
||||
"stylelint-high-performance-animation": "^1.5.2",
|
||||
"stylelint-order": "^4.1.0",
|
||||
"stylelint-prettier": "^1.2.0",
|
||||
"uglify-js": "^3.13.4",
|
||||
"vinyl-buffer": "^1.0.1",
|
||||
"vinyl-source-stream": "^2.0.0",
|
||||
"workbox-cli": "^6.1.5"
|
||||
},
|
||||
"dependencies": {}
|
||||
"name": "website-11ty-hamburg.stefanimhoff.de",
|
||||
"version": "1.0.0",
|
||||
"description": "Source code of my travel blog",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "ELEVENTY_ENV=production npm-run-all build:assets build:html build:sw",
|
||||
"build:assets": "gulp build",
|
||||
"build:html": "eleventy",
|
||||
"build:sw": "workbox generateSW workbox.config.js",
|
||||
"clean": "npx del dist",
|
||||
"debug": "DEBUG=* npx eleventy",
|
||||
"deploy": "netlify deploy --prod",
|
||||
"deploy:preview": "netlify deploy",
|
||||
"dev": "ELEVENTY_ENV=development npm run watch",
|
||||
"plop": "plop",
|
||||
"prebuild": "npm run clean",
|
||||
"prestart": "npm run clean",
|
||||
"publish": "npm-run-all build deploy",
|
||||
"start": "netlify dev",
|
||||
"svg": "gulp svg",
|
||||
"watch": "npm-run-all --parallel watch:*",
|
||||
"watch:assets": "gulp",
|
||||
"watch:html": "eleventy --serve"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/kogakure/website-11ty-hamburg.stefanimhoff.de.git"
|
||||
},
|
||||
"keywords": [
|
||||
"11ty"
|
||||
],
|
||||
"author": "Stefan Imhoff",
|
||||
"license": "ISC",
|
||||
"homepage": "https://hamburg.stefanimhoff.de",
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "1.0.1",
|
||||
"@11ty/eleventy-plugin-rss": "^1.1.1",
|
||||
"autoprefixer": "^10.2.5",
|
||||
"babelify": "^10.0.0",
|
||||
"browserify": "^17.0.0",
|
||||
"cssnano": "^5.0.2",
|
||||
"del-cli": "^3.0.1",
|
||||
"eleventy-nbsp-filter": "^0.1.0",
|
||||
"eleventy-plugin-lazyimages": "^2.1.0",
|
||||
"eslint": "^7.25.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-prettier": "^3.4.0",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-imagemin": "^7.1.0",
|
||||
"gulp-plumber": "^1.2.1",
|
||||
"gulp-postcss": "^9.0.0",
|
||||
"gulp-size": "^3.0.0",
|
||||
"gulp-sourcemaps": "^3.0.0",
|
||||
"gulp-svg-sprite": "^1.5.0",
|
||||
"html-minifier": "^4.0.0",
|
||||
"markdown-it-external-anchor": "^1.0.0",
|
||||
"markdown-it-footnote": "^3.0.2",
|
||||
"markdown-it-sub": "^1.0.0",
|
||||
"markdown-it-sup": "^1.0.0",
|
||||
"moment": "^2.29.1",
|
||||
"netlify-cli": "^3.39.4",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"outdent": "^0.8.0",
|
||||
"plop": "^2.7.4",
|
||||
"postcss": "^8.2.13",
|
||||
"postcss-cli": "^8.3.1",
|
||||
"postcss-custom-media": "^8.0.0",
|
||||
"postcss-custom-properties": "^11.0.0",
|
||||
"postcss-extend": "^1.0.5",
|
||||
"postcss-import": "^14.0.1",
|
||||
"postcss-media-minmax": "^5.0.0",
|
||||
"postcss-nested": "^5.0.5",
|
||||
"postcss-sort-media-queries": "^3.8.9",
|
||||
"prettier": "^2.2.1",
|
||||
"sal.js": "^0.8.4",
|
||||
"stylelint": "^13.13.0",
|
||||
"stylelint-a11y": "^1.2.3",
|
||||
"stylelint-config-prettier": "^8.0.2",
|
||||
"stylelint-config-rational-order": "^0.1.2",
|
||||
"stylelint-config-recommended": "^5.0.0",
|
||||
"stylelint-high-performance-animation": "^1.5.2",
|
||||
"stylelint-order": "^4.1.0",
|
||||
"stylelint-prettier": "^1.2.0",
|
||||
"uglify-js": "^3.13.4",
|
||||
"vinyl-buffer": "^1.0.1",
|
||||
"vinyl-source-stream": "^2.0.0",
|
||||
"workbox-cli": "^6.1.5"
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
|
||||
62
plopfile.js
62
plopfile.js
@@ -8,36 +8,36 @@ const date = moment().format();
|
||||
const year = moment().format('YYYY');
|
||||
|
||||
module.exports = function (plop) {
|
||||
plop.setGenerator('District', {
|
||||
description: 'Create a new district',
|
||||
prompts: [
|
||||
{
|
||||
type: 'input',
|
||||
name: 'title',
|
||||
message: 'Title',
|
||||
validate(value) {
|
||||
if (/.+/.test(value)) {
|
||||
return true;
|
||||
}
|
||||
return 'Title is required';
|
||||
},
|
||||
},
|
||||
],
|
||||
actions() {
|
||||
process.chdir(plop.getPlopfilePath());
|
||||
plop.setGenerator('District', {
|
||||
description: 'Create a new district',
|
||||
prompts: [
|
||||
{
|
||||
type: 'input',
|
||||
name: 'title',
|
||||
message: 'Title',
|
||||
validate(value) {
|
||||
if (/.+/.test(value)) {
|
||||
return true;
|
||||
}
|
||||
return 'Title is required';
|
||||
},
|
||||
},
|
||||
],
|
||||
actions() {
|
||||
process.chdir(plop.getPlopfilePath());
|
||||
|
||||
return [
|
||||
{
|
||||
type: 'addMany',
|
||||
destination: `${currentDir}/src/districts/`,
|
||||
base: `${templatePath}`,
|
||||
templateFiles: '**/*.txt',
|
||||
stripExtensions: ['txt'],
|
||||
data: {
|
||||
date,
|
||||
},
|
||||
},
|
||||
];
|
||||
},
|
||||
});
|
||||
return [
|
||||
{
|
||||
type: 'addMany',
|
||||
destination: `${currentDir}/src/districts/`,
|
||||
base: `${templatePath}`,
|
||||
templateFiles: '**/*.txt',
|
||||
stripExtensions: ['txt'],
|
||||
data: {
|
||||
date,
|
||||
},
|
||||
},
|
||||
];
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
module.exports = {
|
||||
plugins: [
|
||||
require('postcss-import'),
|
||||
require('postcss-custom-properties'),
|
||||
require('postcss-nested'),
|
||||
require('postcss-extend'),
|
||||
require('postcss-media-minmax'),
|
||||
require('postcss-custom-media'),
|
||||
require('postcss-sort-media-queries')(),
|
||||
require('autoprefixer'),
|
||||
...(process.env.ELEVENTY_ENV === 'production' ? [require('cssnano')] : []),
|
||||
],
|
||||
plugins: [
|
||||
require('postcss-import'),
|
||||
require('postcss-custom-properties'),
|
||||
require('postcss-nested'),
|
||||
require('postcss-extend'),
|
||||
require('postcss-media-minmax'),
|
||||
require('postcss-custom-media'),
|
||||
require('postcss-sort-media-queries')(),
|
||||
require('autoprefixer'),
|
||||
...(process.env.ELEVENTY_ENV === 'production' ? [require('cssnano')] : []),
|
||||
],
|
||||
};
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
window.addEventListener('load', () => {
|
||||
navigator.serviceWorker.register('/sw.js').catch((registrationError) => {
|
||||
console.error('SW registration failed: ', registrationError);
|
||||
});
|
||||
navigator.serviceWorker.register('/sw.js').catch((registrationError) => {
|
||||
console.error('SW registration failed: ', registrationError);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,42 +1,42 @@
|
||||
(function () {
|
||||
const root = document.getElementsByTagName('html')[0];
|
||||
const root = document.getElementsByTagName('html')[0];
|
||||
|
||||
function setTheme(newTheme) {
|
||||
window.__theme = newTheme;
|
||||
preferredTheme = newTheme;
|
||||
const currentTheme = newTheme === 'light' ? 'dark' : 'light';
|
||||
root.classList.add(newTheme);
|
||||
root.classList.remove(currentTheme);
|
||||
}
|
||||
function setTheme(newTheme) {
|
||||
window.__theme = newTheme;
|
||||
preferredTheme = newTheme;
|
||||
const currentTheme = newTheme === 'light' ? 'dark' : 'light';
|
||||
root.classList.add(newTheme);
|
||||
root.classList.remove(currentTheme);
|
||||
}
|
||||
|
||||
let preferredTheme;
|
||||
let preferredTheme;
|
||||
|
||||
try {
|
||||
preferredTheme = localStorage.getItem('theme');
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
try {
|
||||
preferredTheme = localStorage.getItem('theme');
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
|
||||
window.__setPreferredTheme = function (newTheme) {
|
||||
setTheme(newTheme);
|
||||
try {
|
||||
localStorage.setItem('theme', newTheme);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
window.__setPreferredTheme = function (newTheme) {
|
||||
setTheme(newTheme);
|
||||
try {
|
||||
localStorage.setItem('theme', newTheme);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
window.__toggleTheme = function () {
|
||||
const currentTheme = window.__theme;
|
||||
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
||||
window.__setPreferredTheme(newTheme);
|
||||
};
|
||||
window.__toggleTheme = function () {
|
||||
const currentTheme = window.__theme;
|
||||
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
||||
window.__setPreferredTheme(newTheme);
|
||||
};
|
||||
|
||||
const darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
const darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
|
||||
darkQuery.addEventListener('change', function (e) {
|
||||
window.__setPreferredTheme(e.matches ? 'dark' : 'light');
|
||||
});
|
||||
darkQuery.addEventListener('change', function (e) {
|
||||
window.__setPreferredTheme(e.matches ? 'dark' : 'light');
|
||||
});
|
||||
|
||||
setTheme(preferredTheme || (darkQuery.matches ? 'dark' : 'light'));
|
||||
setTheme(preferredTheme || (darkQuery.matches ? 'dark' : 'light'));
|
||||
})();
|
||||
|
||||
@@ -3,61 +3,57 @@ import { btnHandler } from './modules/btn-handler';
|
||||
import { scrollHandler } from './modules/scroll-handler';
|
||||
import { sourceCodeInfo } from './modules/source-code-info';
|
||||
|
||||
if (
|
||||
'querySelector' in document &&
|
||||
'localStorage' in window &&
|
||||
'addEventListener' in window
|
||||
) {
|
||||
/* Initialize scroll reveal */
|
||||
sal({
|
||||
threshold: 0.1,
|
||||
});
|
||||
if ('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) {
|
||||
/* Initialize scroll reveal */
|
||||
sal({
|
||||
threshold: 0.1,
|
||||
});
|
||||
|
||||
/* Show link to source code in console */
|
||||
sourceCodeInfo();
|
||||
/* Show link to source code in console */
|
||||
sourceCodeInfo();
|
||||
|
||||
/* Scrolling up or down? */
|
||||
scrollHandler();
|
||||
/* Scrolling up or down? */
|
||||
scrollHandler();
|
||||
|
||||
/* Toggle the theme */
|
||||
btnHandler('#theme-toggle', function () {
|
||||
window.__toggleTheme();
|
||||
});
|
||||
/* Toggle the theme */
|
||||
btnHandler('#theme-toggle', function () {
|
||||
window.__toggleTheme();
|
||||
});
|
||||
|
||||
/* Smooth scrolling to the top */
|
||||
btnHandler('#up-link', function () {
|
||||
window.scroll({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
});
|
||||
/* Smooth scrolling to the top */
|
||||
btnHandler('#up-link', function () {
|
||||
window.scroll({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
});
|
||||
|
||||
btnHandler('.spoiler', function (event) {
|
||||
event.target.classList.toggle('spoiler-visible');
|
||||
});
|
||||
btnHandler('.spoiler', function (event) {
|
||||
event.target.classList.toggle('spoiler-visible');
|
||||
});
|
||||
|
||||
/* Deobfuscate the email */
|
||||
btnHandler(
|
||||
'#email',
|
||||
function (event) {
|
||||
if (event.target.classList.contains('objuscated')) {
|
||||
const link = event.target;
|
||||
const lock = link.parentNode.querySelector('#lock-box');
|
||||
/* Deobfuscate the email */
|
||||
btnHandler(
|
||||
'#email',
|
||||
function (event) {
|
||||
if (event.target.classList.contains('objuscated')) {
|
||||
const link = event.target;
|
||||
const lock = link.parentNode.querySelector('#lock-box');
|
||||
|
||||
event.preventDefault();
|
||||
event.preventDefault();
|
||||
|
||||
link.classList.remove('objuscated');
|
||||
link.text = 'hey@imhoff.name';
|
||||
link.href = 'mailto:hey@imhoff.name';
|
||||
link.classList.remove('objuscated');
|
||||
link.text = 'hey@imhoff.name';
|
||||
link.href = 'mailto:hey@imhoff.name';
|
||||
|
||||
if (lock) {
|
||||
lock.classList.remove('hidden');
|
||||
}
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
false
|
||||
);
|
||||
if (lock) {
|
||||
lock.classList.remove('hidden');
|
||||
}
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
false
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
export function btnHandler(selector, callback, prevent = true) {
|
||||
const btn = document.querySelector(selector);
|
||||
if (!btn) return;
|
||||
const btn = document.querySelector(selector);
|
||||
if (!btn) return;
|
||||
|
||||
btn.addEventListener(
|
||||
'click',
|
||||
function (event) {
|
||||
if (prevent) {
|
||||
event.preventDefault();
|
||||
}
|
||||
callback(event);
|
||||
},
|
||||
false
|
||||
);
|
||||
btn.addEventListener(
|
||||
'click',
|
||||
function (event) {
|
||||
if (prevent) {
|
||||
event.preventDefault();
|
||||
}
|
||||
callback(event);
|
||||
},
|
||||
false
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,27 +1,24 @@
|
||||
export function scrollHandler() {
|
||||
const body = document.body;
|
||||
const scrollUp = 'scroll-up';
|
||||
const scrollDown = 'scroll-down';
|
||||
let lastScroll = 0;
|
||||
const body = document.body;
|
||||
const scrollUp = 'scroll-up';
|
||||
const scrollDown = 'scroll-down';
|
||||
let lastScroll = 0;
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const currentScroll = window.pageYOffset;
|
||||
window.addEventListener('scroll', () => {
|
||||
const currentScroll = window.pageYOffset;
|
||||
|
||||
if (currentScroll <= 0) {
|
||||
body.classList.remove(scrollUp);
|
||||
return;
|
||||
}
|
||||
if (currentScroll <= 0) {
|
||||
body.classList.remove(scrollUp);
|
||||
return;
|
||||
}
|
||||
|
||||
if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
|
||||
body.classList.remove(scrollUp);
|
||||
body.classList.add(scrollDown);
|
||||
} else if (
|
||||
currentScroll < lastScroll &&
|
||||
body.classList.contains(scrollDown)
|
||||
) {
|
||||
body.classList.remove(scrollDown);
|
||||
body.classList.add(scrollUp);
|
||||
}
|
||||
lastScroll = currentScroll;
|
||||
});
|
||||
if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
|
||||
body.classList.remove(scrollUp);
|
||||
body.classList.add(scrollDown);
|
||||
} else if (currentScroll < lastScroll && body.classList.contains(scrollDown)) {
|
||||
body.classList.remove(scrollDown);
|
||||
body.classList.add(scrollUp);
|
||||
}
|
||||
lastScroll = currentScroll;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
export function sourceCodeInfo() {
|
||||
const sourceCodeInfo =
|
||||
'👋 I see you’re interested in the source code of this site? You can find it here: https://github.com/kogakure/website-11ty-hamburg.stefanimhoff.de';
|
||||
const sourceCodeInfo =
|
||||
'👋 I see you’re interested in the source code of this site? You can find it here: https://github.com/kogakure/website-11ty-hamburg.stefanimhoff.de';
|
||||
|
||||
console.info(sourceCodeInfo);
|
||||
console.info(sourceCodeInfo);
|
||||
}
|
||||
|
||||
@@ -1,43 +1,43 @@
|
||||
/* Colors */
|
||||
:root {
|
||||
--color-accent: #2d5da3;
|
||||
--color-bg-code: #282c34;
|
||||
--color-fg-code: #abb2bf;
|
||||
--color-accent: #2d5da3;
|
||||
--color-bg-code: #282c34;
|
||||
--color-fg-code: #abb2bf;
|
||||
}
|
||||
|
||||
:root,
|
||||
.light {
|
||||
--color-bg-full: #ffffff;
|
||||
--color-bg: hsl(40, 7%, 90%);
|
||||
--color-bg-dark: hsl(40, 7%, 80%);
|
||||
--color-border: rgb(185, 184, 182);
|
||||
--color-fg-feather-inverse: rgba(255, 255, 255, 0.05);
|
||||
--color-fg-feather: rgba(0, 0, 0, 0.05);
|
||||
--color-fg-full-inverse: #ffffff;
|
||||
--color-fg-full: #000000;
|
||||
--color-fg-soft-inverse: rgba(255, 255, 255, 0.2);
|
||||
--color-fg-soft: rgba(0, 0, 0, 0.2);
|
||||
--color-fg-strong-inverse: rgba(255, 255, 255, 0.8);
|
||||
--color-fg-strong: rgba(0, 0, 0, 0.8);
|
||||
--color-fg: hsl(40, 7%, 5%);
|
||||
--opacity-dark: 1;
|
||||
--opacity-light: 0;
|
||||
--color-bg-full: #ffffff;
|
||||
--color-bg: hsl(40, 7%, 90%);
|
||||
--color-bg-dark: hsl(40, 7%, 80%);
|
||||
--color-border: rgb(185, 184, 182);
|
||||
--color-fg-feather-inverse: rgba(255, 255, 255, 0.05);
|
||||
--color-fg-feather: rgba(0, 0, 0, 0.05);
|
||||
--color-fg-full-inverse: #ffffff;
|
||||
--color-fg-full: #000000;
|
||||
--color-fg-soft-inverse: rgba(255, 255, 255, 0.2);
|
||||
--color-fg-soft: rgba(0, 0, 0, 0.2);
|
||||
--color-fg-strong-inverse: rgba(255, 255, 255, 0.8);
|
||||
--color-fg-strong: rgba(0, 0, 0, 0.8);
|
||||
--color-fg: hsl(40, 7%, 5%);
|
||||
--opacity-dark: 1;
|
||||
--opacity-light: 0;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--color-bg-full: #000000;
|
||||
--color-bg: hsl(40, 7%, 10%);
|
||||
--color-bg-dark: hsl(40, 7%, 5%);
|
||||
--color-border: rgb(73, 72, 70);
|
||||
--color-fg-feather-inverse: rgba(0, 0, 0, 0.05);
|
||||
--color-fg-feather: rgba(255, 255, 255, 0.05);
|
||||
--color-fg-full-inverse: #000000;
|
||||
--color-fg-full: #ffffff;
|
||||
--color-fg-soft-inverse: rgba(0, 0, 0, 0.2);
|
||||
--color-fg-soft: rgba(255, 255, 255, 0.2);
|
||||
--color-fg-strong-inverse: rgba(0, 0, 0, 0.8);
|
||||
--color-fg-strong: rgba(255, 255, 255, 0.8);
|
||||
--color-fg: hsla(40, 7%, 90%, 0.87);
|
||||
--opacity-dark: 0;
|
||||
--opacity-light: 1;
|
||||
--color-bg-full: #000000;
|
||||
--color-bg: hsl(40, 7%, 10%);
|
||||
--color-bg-dark: hsl(40, 7%, 5%);
|
||||
--color-border: rgb(73, 72, 70);
|
||||
--color-fg-feather-inverse: rgba(0, 0, 0, 0.05);
|
||||
--color-fg-feather: rgba(255, 255, 255, 0.05);
|
||||
--color-fg-full-inverse: #000000;
|
||||
--color-fg-full: #ffffff;
|
||||
--color-fg-soft-inverse: rgba(0, 0, 0, 0.2);
|
||||
--color-fg-soft: rgba(255, 255, 255, 0.2);
|
||||
--color-fg-strong-inverse: rgba(0, 0, 0, 0.8);
|
||||
--color-fg-strong: rgba(255, 255, 255, 0.8);
|
||||
--color-fg: hsla(40, 7%, 90%, 0.87);
|
||||
--opacity-dark: 0;
|
||||
--opacity-light: 1;
|
||||
}
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'SecuelaVariable';
|
||||
font-style: normal;
|
||||
font-weight: 1 999;
|
||||
src: url('/assets/fonts/secuela-regular-vf.woff2') format('woff2'),
|
||||
url('/assets/fonts/secuela-regular-vf.woff') format('woff');
|
||||
font-display: swap;
|
||||
font-family: 'SecuelaVariable';
|
||||
font-style: normal;
|
||||
font-weight: 1 999;
|
||||
src: url('/assets/fonts/secuela-regular-vf.woff2') format('woff2'),
|
||||
url('/assets/fonts/secuela-regular-vf.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'SecuelaVariable';
|
||||
font-style: italic;
|
||||
font-weight: 1 999;
|
||||
src: url('/assets/fonts/secuela-italic-vf.woff2') format('woff2'),
|
||||
url('/assets/fonts/secuela-italic-vf.woff') format('woff');
|
||||
font-display: swap;
|
||||
font-family: 'SecuelaVariable';
|
||||
font-style: italic;
|
||||
font-weight: 1 999;
|
||||
src: url('/assets/fonts/secuela-italic-vf.woff2') format('woff2'),
|
||||
url('/assets/fonts/secuela-italic-vf.woff') format('woff');
|
||||
}
|
||||
|
||||
@@ -1,53 +1,53 @@
|
||||
/** Image */
|
||||
img {
|
||||
background-color: var(--color-fg-feather);
|
||||
border-color: var(--color-fg-feather);
|
||||
border-radius: var(--radius-1);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
box-shadow: 0 2px 3px var(--color-fg-feather);
|
||||
display: block;
|
||||
font-size: 0;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
background-color: var(--color-fg-feather);
|
||||
border-color: var(--color-fg-feather);
|
||||
border-radius: var(--radius-1);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
box-shadow: 0 2px 3px var(--color-fg-feather);
|
||||
display: block;
|
||||
font-size: 0;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dark img {
|
||||
opacity: 0.87;
|
||||
opacity: 0.87;
|
||||
}
|
||||
|
||||
img[src$='.svg'] {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.image-shadow {
|
||||
position: relative;
|
||||
transition-duration: 500ms;
|
||||
transition-property: transform;
|
||||
transition-timing-function: ease-in-out;
|
||||
position: relative;
|
||||
transition-duration: 500ms;
|
||||
transition-property: transform;
|
||||
transition-timing-function: ease-in-out;
|
||||
|
||||
&::after {
|
||||
box-shadow: var(--shadow-subtle-shade);
|
||||
content: '';
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition-duration: 500ms;
|
||||
transition-property: opacity;
|
||||
transition-timing-function: ease-in-out;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
&::after {
|
||||
box-shadow: var(--shadow-subtle-shade);
|
||||
content: '';
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition-duration: 500ms;
|
||||
transition-property: opacity;
|
||||
transition-timing-function: ease-in-out;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
transform: scale(1.03);
|
||||
&:hover,
|
||||
&:focus {
|
||||
transform: scale(1.03);
|
||||
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
118
src/assets/styles/base/normalize.css
vendored
118
src/assets/styles/base/normalize.css
vendored
@@ -9,8 +9,8 @@
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
@@ -21,7 +21,7 @@ html {
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -29,7 +29,7 @@ body {
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -38,8 +38,8 @@ main {
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
@@ -51,9 +51,9 @@ h1 {
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -62,8 +62,8 @@ hr {
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
@@ -74,7 +74,7 @@ pre {
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -83,9 +83,9 @@ a {
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -94,7 +94,7 @@ abbr[title] {
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -105,8 +105,8 @@ strong {
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -114,7 +114,7 @@ samp {
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -124,18 +124,18 @@ small {
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
@@ -146,7 +146,7 @@ sup {
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
@@ -162,10 +162,10 @@ input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -175,8 +175,8 @@ textarea {
|
||||
|
||||
button,
|
||||
input {
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -186,8 +186,8 @@ input {
|
||||
|
||||
button,
|
||||
select {
|
||||
/* 1 */
|
||||
text-transform: none;
|
||||
/* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -198,7 +198,7 @@ button,
|
||||
[type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
-webkit-appearance: button;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -209,8 +209,8 @@ button::-moz-focus-inner,
|
||||
[type='button']::-moz-focus-inner,
|
||||
[type='reset']::-moz-focus-inner,
|
||||
[type='submit']::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -221,7 +221,7 @@ button:-moz-focusring,
|
||||
[type='button']:-moz-focusring,
|
||||
[type='reset']:-moz-focusring,
|
||||
[type='submit']:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -229,7 +229,7 @@ button:-moz-focusring,
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -240,12 +240,12 @@ fieldset {
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -253,7 +253,7 @@ legend {
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -261,7 +261,7 @@ progress {
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -271,8 +271,8 @@ textarea {
|
||||
|
||||
[type='checkbox'],
|
||||
[type='radio'] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -281,7 +281,7 @@ textarea {
|
||||
|
||||
[type='number']::-webkit-inner-spin-button,
|
||||
[type='number']::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -290,8 +290,8 @@ textarea {
|
||||
*/
|
||||
|
||||
[type='search'] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -299,7 +299,7 @@ textarea {
|
||||
*/
|
||||
|
||||
[type='search']::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -308,8 +308,8 @@ textarea {
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
@@ -320,7 +320,7 @@ textarea {
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -328,7 +328,7 @@ details {
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
@@ -339,7 +339,7 @@ summary {
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -347,5 +347,5 @@ template {
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -2,17 +2,17 @@
|
||||
|
||||
/** Reset styles for Sal.js, if no JavaScript is available */
|
||||
.no-js {
|
||||
[data-sal|='fade'] {
|
||||
opacity: 1;
|
||||
}
|
||||
[data-sal|='fade'] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[data-sal|='slide'],
|
||||
[data-sal|='zoom'] {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
[data-sal|='slide'],
|
||||
[data-sal|='zoom'] {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
[data-sal|='flip'] {
|
||||
transform: none;
|
||||
}
|
||||
[data-sal|='flip'] {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,28 +1,28 @@
|
||||
/** Base */
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
font-size: 100%;
|
||||
scroll-behavior: smooth;
|
||||
box-sizing: border-box;
|
||||
font-size: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #a3b387;
|
||||
color: #ffffff;
|
||||
background-color: #a3b387;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-fg);
|
||||
font-family: var(--font-family-base);
|
||||
font-weight: var(--font-weight-normal);
|
||||
height: 100vh;
|
||||
line-height: 1.6;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-fg);
|
||||
font-family: var(--font-family-base);
|
||||
font-weight: var(--font-weight-normal);
|
||||
height: 100vh;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/** Headlines */
|
||||
@@ -35,24 +35,24 @@ h6,
|
||||
.page-title,
|
||||
.headline,
|
||||
.subheadline {
|
||||
font-weight: var(--font-weight-black);
|
||||
letter-spacing: -0.02em;
|
||||
line-height: var(--line-height-1);
|
||||
margin-block-start: 0;
|
||||
position: relative;
|
||||
font-weight: var(--font-weight-black);
|
||||
letter-spacing: -0.02em;
|
||||
line-height: var(--line-height-1);
|
||||
margin-block-start: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1,
|
||||
.page-title {
|
||||
font-size: var(--font-size-7);
|
||||
margin-block-end: var(--space-13);
|
||||
font-size: var(--font-size-7);
|
||||
margin-block-end: var(--space-13);
|
||||
}
|
||||
|
||||
h2,
|
||||
.headline {
|
||||
font-size: var(--font-size-5);
|
||||
margin-block-end: var(--space-10);
|
||||
margin-block-start: var(--space-16);
|
||||
font-size: var(--font-size-5);
|
||||
margin-block-end: var(--space-10);
|
||||
margin-block-start: var(--space-16);
|
||||
}
|
||||
|
||||
h3,
|
||||
@@ -60,9 +60,9 @@ h4,
|
||||
h5,
|
||||
h6,
|
||||
.subheadline {
|
||||
font-size: var(--font-size-4);
|
||||
margin-block-end: var(--space-8);
|
||||
margin-block-start: var(--space-14);
|
||||
font-size: var(--font-size-4);
|
||||
margin-block-end: var(--space-8);
|
||||
margin-block-start: var(--space-14);
|
||||
}
|
||||
|
||||
h2:first-of-type,
|
||||
@@ -70,7 +70,7 @@ h3:first-of-type,
|
||||
h4:first-of-type,
|
||||
h5:first-of-type,
|
||||
h6:first-of-type {
|
||||
margin-block-start: 0;
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
.dark h1,
|
||||
@@ -82,133 +82,133 @@ h6:first-of-type {
|
||||
.dark .title,
|
||||
.dark .headline,
|
||||
.dark .subheadline {
|
||||
font-weight: var(--font-weight-extra-bold);
|
||||
font-weight: var(--font-weight-extra-bold);
|
||||
}
|
||||
|
||||
/** Paragraph */
|
||||
p,
|
||||
.paragraph {
|
||||
font-size: var(--font-size-3);
|
||||
font-weight: var(--font-weight-normal);
|
||||
letter-spacing: normal;
|
||||
line-height: var(--line-height-2);
|
||||
margin-block-end: var(--space-10);
|
||||
margin-block-start: 0;
|
||||
font-size: var(--font-size-3);
|
||||
font-weight: var(--font-weight-normal);
|
||||
letter-spacing: normal;
|
||||
line-height: var(--line-height-2);
|
||||
margin-block-end: var(--space-10);
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
p:last-of-type {
|
||||
margin-block-end: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.dark p,
|
||||
.dark .paragraph {
|
||||
font-weight: var(--font-weight-light);
|
||||
font-weight: var(--font-weight-light);
|
||||
}
|
||||
|
||||
/** Lists */
|
||||
ul {
|
||||
font-size: var(--font-size-3);
|
||||
list-style-type: square;
|
||||
margin-block-end: var(--space-12);
|
||||
margin-block-start: 0;
|
||||
padding-inline-start: 1.2em;
|
||||
font-size: var(--font-size-3);
|
||||
list-style-type: square;
|
||||
margin-block-end: var(--space-12);
|
||||
margin-block-start: 0;
|
||||
padding-inline-start: 1.2em;
|
||||
|
||||
li {
|
||||
margin-block-end: var(--space-5);
|
||||
}
|
||||
li {
|
||||
margin-block-end: var(--space-5);
|
||||
}
|
||||
|
||||
li & {
|
||||
margin-block-end: 0;
|
||||
padding-inline-start: 2rem;
|
||||
}
|
||||
li & {
|
||||
margin-block-end: 0;
|
||||
padding-inline-start: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (--tablet) {
|
||||
ul {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
ul {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
font-size: var(--font-size-3);
|
||||
margin-block-end: var(--space-12);
|
||||
padding-inline-start: 1.2em;
|
||||
font-size: var(--font-size-3);
|
||||
margin-block-end: var(--space-12);
|
||||
padding-inline-start: 1.2em;
|
||||
|
||||
li {
|
||||
margin-block-end: var(--space-2);
|
||||
}
|
||||
li {
|
||||
margin-block-end: var(--space-2);
|
||||
}
|
||||
|
||||
li & {
|
||||
margin-block-end: 0;
|
||||
padding-inline-start: 2rem;
|
||||
}
|
||||
li & {
|
||||
margin-block-end: 0;
|
||||
padding-inline-start: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (--tablet) {
|
||||
ol {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
ol {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/** Critic Markup */
|
||||
del {
|
||||
text-decoration-thickness: 0.15em;
|
||||
text-decoration-thickness: 0.15em;
|
||||
}
|
||||
|
||||
ins {
|
||||
text-decoration-style: solid;
|
||||
text-decoration-thickness: 0.15em;
|
||||
text-decoration-style: solid;
|
||||
text-decoration-thickness: 0.15em;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: rgba(230, 240, 40, 0.7);
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 0.25em;
|
||||
box-shadow: var(--shadow-dark-inset);
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
padding-block-end: 0.4em;
|
||||
padding-block-start: 0.4em;
|
||||
padding-inline-end: 0.3em;
|
||||
padding-inline-start: 0.3em;
|
||||
background-color: rgba(230, 240, 40, 0.7);
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 0.25em;
|
||||
box-shadow: var(--shadow-dark-inset);
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
padding-block-end: 0.4em;
|
||||
padding-block-start: 0.4em;
|
||||
padding-inline-end: 0.3em;
|
||||
padding-inline-start: 0.3em;
|
||||
}
|
||||
|
||||
/** Code, Sample, Abbreviation, Keyboard Shortcuts etc. */
|
||||
pre {
|
||||
white-space: pre;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
abbr {
|
||||
font-variant: small-caps;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
|
||||
:is(abbr, dfn) {
|
||||
cursor: help;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
/** Links */
|
||||
a {
|
||||
color: var(--color-fg);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--color-fg-soft);
|
||||
text-decoration-thickness: 0.2em;
|
||||
text-underline-offset: auto;
|
||||
color: var(--color-fg);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--color-fg-soft);
|
||||
text-decoration-thickness: 0.2em;
|
||||
text-underline-offset: auto;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration-color: var(--color-accent);
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration-color: var(--color-accent);
|
||||
}
|
||||
|
||||
sup.footnote-ref & {
|
||||
text-decoration: none;
|
||||
}
|
||||
sup.footnote-ref & {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
/** Helper */
|
||||
.no-margin {
|
||||
margin: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@@ -1,81 +1,81 @@
|
||||
:root {
|
||||
/** Grids */
|
||||
--grid-fullsize: repeat(18, 1fr);
|
||||
--grid-row: clamp(3rem, var(--space-55), 9rem);
|
||||
/** Grids */
|
||||
--grid-fullsize: repeat(18, 1fr);
|
||||
--grid-row: clamp(3rem, var(--space-55), 9rem);
|
||||
|
||||
/** Border Widths */
|
||||
--border-width-1: 1px;
|
||||
--border-width-10: 0.1em;
|
||||
--border-width-15: 0.15em;
|
||||
/** Border Widths */
|
||||
--border-width-1: 1px;
|
||||
--border-width-10: 0.1em;
|
||||
--border-width-15: 0.15em;
|
||||
|
||||
/** Font Families */
|
||||
--font-family-base: SecuelaVariable, Arial, sans-serif;
|
||||
--font-family-mono: Fira Code, Operator, Hasklig, Monoid, monospace;
|
||||
/** Font Families */
|
||||
--font-family-base: SecuelaVariable, Arial, sans-serif;
|
||||
--font-family-mono: Fira Code, Operator, Hasklig, Monoid, monospace;
|
||||
|
||||
/** Font Sizes */
|
||||
--font-size-1: 0.65em;
|
||||
--font-size-2: clamp(0.65rem, 0.8vw, 0.75rem);
|
||||
--font-size-3: clamp(1rem, 1.1vw, 1.25rem);
|
||||
--font-size-4: clamp(1.25rem, 1.8vw, 2rem);
|
||||
--font-size-5: clamp(1.5rem, 2.9vw, 3.25rem);
|
||||
--font-size-6: clamp(2.25rem, 4.7vw, 5.3rem);
|
||||
--font-size-7: clamp(3.3rem, 7.3vw, 8.5rem);
|
||||
--font-size-8: clamp(4.5rem, 12.2vw, 13.87rem);
|
||||
--font-size-9: clamp(5.5rem, 28.7vw, 22.43rem);
|
||||
/** Font Sizes */
|
||||
--font-size-1: 0.65em;
|
||||
--font-size-2: clamp(0.65rem, 0.8vw, 0.75rem);
|
||||
--font-size-3: clamp(1rem, 1.1vw, 1.25rem);
|
||||
--font-size-4: clamp(1.25rem, 1.8vw, 2rem);
|
||||
--font-size-5: clamp(1.5rem, 2.9vw, 3.25rem);
|
||||
--font-size-6: clamp(2.25rem, 4.7vw, 5.3rem);
|
||||
--font-size-7: clamp(3.3rem, 7.3vw, 8.5rem);
|
||||
--font-size-8: clamp(4.5rem, 12.2vw, 13.87rem);
|
||||
--font-size-9: clamp(5.5rem, 28.7vw, 22.43rem);
|
||||
|
||||
/** Font Weights */
|
||||
--font-weight-thin: 100;
|
||||
--font-weight-extra-light: 200;
|
||||
--font-weight-light: 300;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semi-bold: 600;
|
||||
--font-weight-bold: 700;
|
||||
--font-weight-extra-bold: 800;
|
||||
--font-weight-black: 900;
|
||||
/** Font Weights */
|
||||
--font-weight-thin: 100;
|
||||
--font-weight-extra-light: 200;
|
||||
--font-weight-light: 300;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semi-bold: 600;
|
||||
--font-weight-bold: 700;
|
||||
--font-weight-extra-bold: 800;
|
||||
--font-weight-black: 900;
|
||||
|
||||
/** Line Heights */
|
||||
--line-height-1: 1;
|
||||
--line-height-2: 1.6;
|
||||
/** Line Heights */
|
||||
--line-height-1: 1;
|
||||
--line-height-2: 1.6;
|
||||
|
||||
/** Radii */
|
||||
--radius-1: 2px;
|
||||
--radius-2: 5px;
|
||||
--radius-4: 8px;
|
||||
--radius-25: 25px;
|
||||
--radius-50: 50%;
|
||||
/** Radii */
|
||||
--radius-1: 2px;
|
||||
--radius-2: 5px;
|
||||
--radius-4: 8px;
|
||||
--radius-25: 25px;
|
||||
--radius-50: 50%;
|
||||
|
||||
/** Shadows */
|
||||
--shadow-subtle-shade: 0 0 50px rgba(0, 0, 0, 0.2);
|
||||
--shadow-beveled-keyboard: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 2px #ffffff;
|
||||
--shadow-white-outline: 0 1px 0 #ffffff;
|
||||
--shadow-dark-inset: inset 0 0 5px rgba(0, 0, 0, 0.15);
|
||||
/** Shadows */
|
||||
--shadow-subtle-shade: 0 0 50px rgba(0, 0, 0, 0.2);
|
||||
--shadow-beveled-keyboard: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 2px #ffffff;
|
||||
--shadow-white-outline: 0 1px 0 #ffffff;
|
||||
--shadow-dark-inset: inset 0 0 5px rgba(0, 0, 0, 0.15);
|
||||
|
||||
/** Space */
|
||||
--space-1: 0.335rem;
|
||||
--space-2: clamp(0.335rem, 0.72vw, 0.402rem);
|
||||
--space-3: clamp(0.402rem, 0.86vw, 0.482rem);
|
||||
--space-4: clamp(0.482rem, 1.03vw, 0.579rem);
|
||||
--space-5: clamp(0.579rem, 1.24vw, 0.694rem);
|
||||
--space-6: clamp(0.694rem, 1.49vw, 0.833rem);
|
||||
--space-7: clamp(0.833rem, 1.78vw, 1rem);
|
||||
--space-8: clamp(1rem, 2.14vw, 1.2rem);
|
||||
--space-9: clamp(1.2rem, 2.57vw, 1.44rem);
|
||||
--space-10: clamp(1.44rem, 3.7vw, 1.728rem);
|
||||
--space-11: clamp(1.728rem, 3.7vw, 2.074rem);
|
||||
--space-12: clamp(2.074rem, 4.44vw, 2.488rem);
|
||||
--space-13: clamp(2.488rem, 5.32vw, 2.986rem);
|
||||
--space-14: clamp(2.986rem, 6.39vw, 3.583rem);
|
||||
--space-15: clamp(3.583rem, 7.67vw, 4.3rem);
|
||||
--space-16: clamp(4.3rem, 9.2vw, 5.16rem);
|
||||
--space-17: clamp(5.16rem, 11.04vw, 6.192rem);
|
||||
--space-18: clamp(6.192rem, 13.25vw, 7.43rem);
|
||||
--space-19: clamp(7.43rem, 15.9vw, 8.916rem);
|
||||
--space-20: clamp(8.916rem, 19.08vw, 10.699rem);
|
||||
--space-55: 5.55vw;
|
||||
/** Space */
|
||||
--space-1: 0.335rem;
|
||||
--space-2: clamp(0.335rem, 0.72vw, 0.402rem);
|
||||
--space-3: clamp(0.402rem, 0.86vw, 0.482rem);
|
||||
--space-4: clamp(0.482rem, 1.03vw, 0.579rem);
|
||||
--space-5: clamp(0.579rem, 1.24vw, 0.694rem);
|
||||
--space-6: clamp(0.694rem, 1.49vw, 0.833rem);
|
||||
--space-7: clamp(0.833rem, 1.78vw, 1rem);
|
||||
--space-8: clamp(1rem, 2.14vw, 1.2rem);
|
||||
--space-9: clamp(1.2rem, 2.57vw, 1.44rem);
|
||||
--space-10: clamp(1.44rem, 3.7vw, 1.728rem);
|
||||
--space-11: clamp(1.728rem, 3.7vw, 2.074rem);
|
||||
--space-12: clamp(2.074rem, 4.44vw, 2.488rem);
|
||||
--space-13: clamp(2.488rem, 5.32vw, 2.986rem);
|
||||
--space-14: clamp(2.986rem, 6.39vw, 3.583rem);
|
||||
--space-15: clamp(3.583rem, 7.67vw, 4.3rem);
|
||||
--space-16: clamp(4.3rem, 9.2vw, 5.16rem);
|
||||
--space-17: clamp(5.16rem, 11.04vw, 6.192rem);
|
||||
--space-18: clamp(6.192rem, 13.25vw, 7.43rem);
|
||||
--space-19: clamp(7.43rem, 15.9vw, 8.916rem);
|
||||
--space-20: clamp(8.916rem, 19.08vw, 10.699rem);
|
||||
--space-55: 5.55vw;
|
||||
|
||||
/** Transitions */
|
||||
--transition-duration-1: 100ms;
|
||||
--transition-duration-2: 200ms;
|
||||
--transition-duration-5: 500ms;
|
||||
/** Transitions */
|
||||
--transition-duration-1: 100ms;
|
||||
--transition-duration-2: 200ms;
|
||||
--transition-duration-5: 500ms;
|
||||
}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
/** Video */
|
||||
.video-wrapper {
|
||||
margin-block-end: var(--space-10);
|
||||
padding-block-end: 56.25%;
|
||||
position: relative;
|
||||
margin-block-end: var(--space-10);
|
||||
padding-block-end: 56.25%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video-wrapper iframe {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
/** Divider */
|
||||
hr,
|
||||
.divider {
|
||||
border-block-end-width: var(--border-width-1);
|
||||
border-block-start-width: 0;
|
||||
border-color: var(--color-fg-feather);
|
||||
border-inline-end-width: 0;
|
||||
border-inline-start-width: 0;
|
||||
border-style: solid;
|
||||
margin-block-end: var(--space-14);
|
||||
margin-block-start: var(--space-14);
|
||||
width: 100%;
|
||||
border-block-end-width: var(--border-width-1);
|
||||
border-block-start-width: 0;
|
||||
border-color: var(--color-fg-feather);
|
||||
border-inline-end-width: 0;
|
||||
border-inline-start-width: 0;
|
||||
border-style: solid;
|
||||
margin-block-end: var(--space-14);
|
||||
margin-block-start: var(--space-14);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -3,19 +3,19 @@
|
||||
|
||||
/** Email */
|
||||
.lock-box {
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
height: 20px;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
top: 0.2em;
|
||||
width: 25px;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
height: 20px;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
top: 0.2em;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.lock-icon {
|
||||
fill: var(--color-fg);
|
||||
font-size: 1.2em;
|
||||
fill: var(--color-fg);
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
@@ -1,48 +1,48 @@
|
||||
/** Pagination */
|
||||
.pagination {
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
top: calc(50% - 20px);
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
top: calc(50% - 20px);
|
||||
}
|
||||
|
||||
.pagination-start {
|
||||
left: 1rem;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.pagination-end {
|
||||
right: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
align-items: center;
|
||||
background-color: var(--color-fg-feather);
|
||||
border-radius: 50%;
|
||||
border-width: 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
outline: none;
|
||||
transition-duration: 500ms;
|
||||
transition-property: opacity;
|
||||
transition-timing-function: ease-in-out;
|
||||
width: 40px;
|
||||
align-items: center;
|
||||
background-color: var(--color-fg-feather);
|
||||
border-radius: 50%;
|
||||
border-width: 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
outline: none;
|
||||
transition-duration: 500ms;
|
||||
transition-property: opacity;
|
||||
transition-timing-function: ease-in-out;
|
||||
width: 40px;
|
||||
|
||||
a:hover &,
|
||||
a:focus & {
|
||||
background-color: var(--color-fg-soft);
|
||||
}
|
||||
a:hover &,
|
||||
a:focus & {
|
||||
background-color: var(--color-fg-soft);
|
||||
}
|
||||
|
||||
.scroll-up & {
|
||||
opacity: 1;
|
||||
}
|
||||
.scroll-up & {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.scroll-down & {
|
||||
opacity: 0;
|
||||
}
|
||||
.scroll-down & {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-icon {
|
||||
fill: var(--color-fg);
|
||||
fill: var(--color-fg);
|
||||
}
|
||||
|
||||
@@ -2,63 +2,63 @@
|
||||
|
||||
/** District Hero */
|
||||
.district-hero-container {
|
||||
grid-column: 5 / -1;
|
||||
grid-row: 1 / 3;
|
||||
height: 100vh;
|
||||
object-fit: cover;
|
||||
grid-column: 5 / -1;
|
||||
grid-row: 1 / 3;
|
||||
height: 100vh;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@media (--tablet) {
|
||||
.district-hero-container {
|
||||
grid-column: 6 / -1;
|
||||
}
|
||||
.district-hero-container {
|
||||
grid-column: 6 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.district-hero {
|
||||
border: 0;
|
||||
height: 100vh;
|
||||
object-fit: cover;
|
||||
border: 0;
|
||||
height: 100vh;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/** District Title */
|
||||
.district-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-column: 3 / 5;
|
||||
grid-row: 1 / 3;
|
||||
justify-content: center;
|
||||
padding-inline-start: calc(var(--space-55) / 2);
|
||||
transform: rotate(180deg);
|
||||
writing-mode: vertical-lr;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-column: 3 / 5;
|
||||
grid-row: 1 / 3;
|
||||
justify-content: center;
|
||||
padding-inline-start: calc(var(--space-55) / 2);
|
||||
transform: rotate(180deg);
|
||||
writing-mode: vertical-lr;
|
||||
|
||||
& h2 {
|
||||
font-size: var(--font-size-4);
|
||||
margin-block: 0;
|
||||
}
|
||||
& h2 {
|
||||
font-size: var(--font-size-4);
|
||||
margin-block: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (--tablet) {
|
||||
.district-title {
|
||||
grid-column: 5 / 6;
|
||||
}
|
||||
.district-title {
|
||||
grid-column: 5 / 6;
|
||||
}
|
||||
}
|
||||
|
||||
/** District Content */
|
||||
.district-content {
|
||||
grid-column: 2 / -2;
|
||||
grid-row: 3;
|
||||
grid-column: 2 / -2;
|
||||
grid-row: 3;
|
||||
|
||||
& img {
|
||||
margin-block-end: var(--space-12);
|
||||
}
|
||||
& img {
|
||||
margin-block-end: var(--space-12);
|
||||
}
|
||||
|
||||
& iframe {
|
||||
width: 100%;
|
||||
}
|
||||
& iframe {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (--tablet) {
|
||||
.district-content {
|
||||
grid-column: 6 / -6;
|
||||
}
|
||||
.district-content {
|
||||
grid-column: 6 / -6;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,120 +2,120 @@
|
||||
|
||||
/** Homepage Hero */
|
||||
.homepage-hero-container {
|
||||
grid-column: 4 / -1;
|
||||
grid-row: 1 / 3;
|
||||
height: 100vh;
|
||||
object-fit: cover;
|
||||
grid-column: 4 / -1;
|
||||
grid-row: 1 / 3;
|
||||
height: 100vh;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@media (--tablet) {
|
||||
.homepage-hero-container {
|
||||
grid-column: 6 / -1;
|
||||
}
|
||||
.homepage-hero-container {
|
||||
grid-column: 6 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.homepage-hero {
|
||||
border: 0;
|
||||
height: 100vh;
|
||||
object-fit: cover;
|
||||
border: 0;
|
||||
height: 100vh;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/** Homepage Introduction */
|
||||
.homepage-introduction {
|
||||
grid-column: 4 / -2;
|
||||
grid-row: 3;
|
||||
grid-column: 4 / -2;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
@media (--tablet) {
|
||||
.homepage-introduction {
|
||||
grid-column: 6 / span 6;
|
||||
}
|
||||
.homepage-introduction {
|
||||
grid-column: 6 / span 6;
|
||||
}
|
||||
}
|
||||
|
||||
/** Homepage Statistics */
|
||||
.homepage-statistics {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-column: 2 / -2;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-column: 2 / -2;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (--tablet) {
|
||||
.homepage-statistics {
|
||||
grid-column: 12 / -2;
|
||||
grid-row: 4;
|
||||
}
|
||||
.homepage-statistics {
|
||||
grid-column: 12 / -2;
|
||||
grid-row: 4;
|
||||
}
|
||||
}
|
||||
|
||||
.homepage-statistics-image-container {
|
||||
grid-column: 1 / -1;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
@media (--tablet) {
|
||||
.homepage-statistics-image-container {
|
||||
grid-column: 2 / 11;
|
||||
grid-row: 4;
|
||||
}
|
||||
.homepage-statistics-image-container {
|
||||
grid-column: 2 / 11;
|
||||
grid-row: 4;
|
||||
}
|
||||
}
|
||||
|
||||
.homepage-statistics-image {
|
||||
object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.homepage-statistics-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.homepage-statistics-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.homepage-statistics-key {
|
||||
order: -1;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.homepage-statistics-value {
|
||||
font-size: var(--font-size-5);
|
||||
font-weight: var(--font-weight-black);
|
||||
font-size: var(--font-size-5);
|
||||
font-weight: var(--font-weight-black);
|
||||
}
|
||||
|
||||
/** Homepage Districts */
|
||||
.homepage-districts {
|
||||
grid-column: 2 / -2;
|
||||
grid-row: 6;
|
||||
grid-column: 2 / -2;
|
||||
grid-row: 6;
|
||||
}
|
||||
|
||||
@media (--tablet) {
|
||||
.homepage-districts {
|
||||
grid-row: 5;
|
||||
}
|
||||
.homepage-districts {
|
||||
grid-row: 5;
|
||||
}
|
||||
}
|
||||
|
||||
.homepage-districts-grid {
|
||||
display: grid;
|
||||
grid-gap: calc(var(--space-55) / 4);
|
||||
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-gap: calc(var(--space-55) / 4);
|
||||
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.homepage-districts-item {
|
||||
margin-block-end: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.homepage-districts-item-link {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.homepage-districts-item-headline {
|
||||
font-size: var(--font-size-3);
|
||||
font-weight: var(--font-weight-normal);
|
||||
margin-block-end: 0;
|
||||
font-size: var(--font-size-3);
|
||||
font-weight: var(--font-weight-normal);
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.homepage-districts-item-image {
|
||||
margin-block-end: var(--space-3);
|
||||
margin-block-end: var(--space-3);
|
||||
}
|
||||
|
||||
@@ -1,67 +1,67 @@
|
||||
/** Base */
|
||||
.page-grid {
|
||||
display: grid;
|
||||
grid-template-columns: var(--grid-fullsize);
|
||||
grid-template-rows: var(--grid-row) auto var(--grid-row);
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: var(--grid-fullsize);
|
||||
grid-template-rows: var(--grid-row) auto var(--grid-row);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
display: grid;
|
||||
grid-auto-rows: auto;
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1 / -1;
|
||||
grid-template-columns: var(--grid-fullsize);
|
||||
grid-template-rows: var(--grid-row);
|
||||
margin-block-end: var(--grid-row);
|
||||
row-gap: clamp(1.5rem, var(--space-55), 6rem);
|
||||
display: grid;
|
||||
grid-auto-rows: auto;
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1 / -1;
|
||||
grid-template-columns: var(--grid-fullsize);
|
||||
grid-template-rows: var(--grid-row);
|
||||
margin-block-end: var(--grid-row);
|
||||
row-gap: clamp(1.5rem, var(--space-55), 6rem);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: var(--font-size-4);
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1 / 3;
|
||||
justify-content: flex-end;
|
||||
margin: 0;
|
||||
padding-inline-end: calc(var(--space-55) / 2);
|
||||
transform: rotate(180deg);
|
||||
writing-mode: vertical-lr;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: var(--font-size-4);
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1 / 3;
|
||||
justify-content: flex-end;
|
||||
margin: 0;
|
||||
padding-inline-end: calc(var(--space-55) / 2);
|
||||
transform: rotate(180deg);
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
@media (--tablet) {
|
||||
.page-title {
|
||||
grid-column: 1;
|
||||
}
|
||||
.page-title {
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.page-title-link {
|
||||
font-weight: var(--font-weight-black);
|
||||
text-decoration: none;
|
||||
font-weight: var(--font-weight-black);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.svg-icons {
|
||||
left: -9999px;
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
}
|
||||
|
||||
/** Narrow */
|
||||
.layout-narrow {
|
||||
grid-column: 3 / -3;
|
||||
grid-row: 1 / 3;
|
||||
padding-block-start: calc(var(--space-55) / 2);
|
||||
grid-column: 3 / -3;
|
||||
grid-row: 1 / 3;
|
||||
padding-block-start: calc(var(--space-55) / 2);
|
||||
}
|
||||
|
||||
@media (--tablet) {
|
||||
.layout-narrow {
|
||||
grid-column: 6 / -6;
|
||||
}
|
||||
.layout-narrow {
|
||||
grid-column: 6 / -6;
|
||||
}
|
||||
}
|
||||
|
||||
@media (--desktop) {
|
||||
.layout-narrow {
|
||||
grid-column: 7 / -7;
|
||||
}
|
||||
.layout-narrow {
|
||||
grid-column: 7 / -7;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,43 +1,43 @@
|
||||
/** Footnotes */
|
||||
.footnote-ref a {
|
||||
color: var(--color-accent);
|
||||
font-weight: var(--font-weight-light);
|
||||
color: var(--color-accent);
|
||||
font-weight: var(--font-weight-light);
|
||||
}
|
||||
|
||||
.footnote-bracket {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footnote-backref {
|
||||
color: var(--color-accent);
|
||||
font-weight: var(--font-weight-light);
|
||||
text-decoration: none;
|
||||
color: var(--color-accent);
|
||||
font-weight: var(--font-weight-light);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footnotes {
|
||||
padding-left: 2rem;
|
||||
position: relative;
|
||||
padding-left: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footnotes :target {
|
||||
background-color: var(--color-fg-feather);
|
||||
padding: var(--space-5);
|
||||
background-color: var(--color-fg-feather);
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.footnotes-list {
|
||||
counter-reset: item;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
counter-reset: item;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footnote-item::before {
|
||||
content: counter(item);
|
||||
counter-increment: item;
|
||||
font-size: smaller;
|
||||
font-weight: var(--font-weight-black);
|
||||
left: 0;
|
||||
padding-top: 0.15rem;
|
||||
position: absolute;
|
||||
vertical-align: super;
|
||||
content: counter(item);
|
||||
counter-increment: item;
|
||||
font-size: smaller;
|
||||
font-weight: var(--font-weight-black);
|
||||
left: 0;
|
||||
padding-top: 0.15rem;
|
||||
position: absolute;
|
||||
vertical-align: super;
|
||||
}
|
||||
|
||||
@@ -1,38 +1,38 @@
|
||||
/** Legal Links */
|
||||
.legal {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
grid-column: 1 / -3;
|
||||
padding-inline-start: clamp(15px, 2.4vw, 50px);
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
grid-column: 1 / -3;
|
||||
padding-inline-start: clamp(15px, 2.4vw, 50px);
|
||||
}
|
||||
|
||||
.legal-copyright {
|
||||
font-size: 14px;
|
||||
margin-inline-end: 0.25em;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
font-size: 14px;
|
||||
margin-inline-end: 0.25em;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.legal-author {
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.legal-author-link {
|
||||
color: var(--color-fg);
|
||||
text-decoration: none;
|
||||
color: var(--color-fg);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--color-accent);
|
||||
text-decoration-thickness: 0.15em;
|
||||
text-underline-offset: 0.1em;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--color-accent);
|
||||
text-decoration-thickness: 0.15em;
|
||||
text-underline-offset: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.legal-bullet {
|
||||
margin-inline-end: 0.25em;
|
||||
margin-inline-start: 0.25em;
|
||||
margin-inline-end: 0.25em;
|
||||
margin-inline-start: 0.25em;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
/** Page Footer */
|
||||
.page-footer {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 3;
|
||||
grid-template-columns: var(--grid-fullsize);
|
||||
grid-template-rows: clamp(3rem, var(--space-55), 9rem);
|
||||
margin-block-start: clamp(1.5rem, var(--space-55), 4.5rem);
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 3;
|
||||
grid-template-columns: var(--grid-fullsize);
|
||||
grid-template-rows: clamp(3rem, var(--space-55), 9rem);
|
||||
margin-block-start: clamp(1.5rem, var(--space-55), 4.5rem);
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
/** Page Header */
|
||||
.page-header {
|
||||
/* margin-block-end: clamp(1.5rem, var(--space-55), 4.5rem); */
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1;
|
||||
grid-template-columns: var(--grid-fullsize);
|
||||
grid-template-rows: clamp(3rem, var(--space-55), 9rem);
|
||||
z-index: 1;
|
||||
/* margin-block-end: clamp(1.5rem, var(--space-55), 4.5rem); */
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1;
|
||||
grid-template-columns: var(--grid-fullsize);
|
||||
grid-template-rows: clamp(3rem, var(--space-55), 9rem);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* .minimal-page-header { */
|
||||
|
||||
@@ -1,35 +1,35 @@
|
||||
/** Theme Toggle */
|
||||
.no-js .theme-toggle {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: 0;
|
||||
grid-column: -2;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
justify-self: center;
|
||||
outline: 0;
|
||||
width: 40px;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: 0;
|
||||
grid-column: -2;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
justify-self: center;
|
||||
outline: 0;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.theme-toggle-icon {
|
||||
fill: var(--color-fg);
|
||||
font-size: 12px;
|
||||
height: 12px;
|
||||
transition-duration: var(--transition-duration-5);
|
||||
transition-property: transform;
|
||||
transition-timing-function: ease-in-out;
|
||||
width: 12px;
|
||||
fill: var(--color-fg);
|
||||
font-size: 12px;
|
||||
height: 12px;
|
||||
transition-duration: var(--transition-duration-5);
|
||||
transition-property: transform;
|
||||
transition-timing-function: ease-in-out;
|
||||
width: 12px;
|
||||
|
||||
.theme-toggle:hover &,
|
||||
.theme-toggle:focus & {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
.theme-toggle:hover &,
|
||||
.theme-toggle:focus & {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,33 +1,33 @@
|
||||
/** Up Link */
|
||||
.up-link {
|
||||
align-self: center;
|
||||
grid-column: -2;
|
||||
justify-self: center;
|
||||
transition-duration: var(--transition-duration-5);
|
||||
transition-property: transform;
|
||||
transition-timing-function: ease-in-out;
|
||||
align-self: center;
|
||||
grid-column: -2;
|
||||
justify-self: center;
|
||||
transition-duration: var(--transition-duration-5);
|
||||
transition-property: transform;
|
||||
transition-timing-function: ease-in-out;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
transform: translate3D(0, -0.25rem, 0);
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
transform: translate3D(0, -0.25rem, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.up-link-button {
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: 0;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: 0;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.up-link-icon {
|
||||
fill: var(--color-fg);
|
||||
font-size: 20px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
fill: var(--color-fg);
|
||||
font-size: 20px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
@page {
|
||||
margin: 1cm 0cm;
|
||||
margin: 1cm 0cm;
|
||||
}
|
||||
|
||||
/* Show all content immediatly */
|
||||
[data-sal|='fade'] {
|
||||
opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[data-sal|='slide'],
|
||||
[data-sal|='zoom'] {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
[data-sal|='flip'] {
|
||||
transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* Hide content from printing */
|
||||
@@ -22,36 +22,36 @@
|
||||
.page-footer,
|
||||
.theme-toggle,
|
||||
.pagination {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
img {
|
||||
border: 0;
|
||||
max-width: 1200px;
|
||||
border: 0;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: #000000;
|
||||
word-wrap: break-word;
|
||||
color: #000000;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
a::after {
|
||||
content: ' (https://hamburg.stefanimhoff.de' attr(href) ')';
|
||||
font-size: 80%;
|
||||
content: ' (https://hamburg.stefanimhoff.de' attr(href) ')';
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
a[href^='mailto:']::after {
|
||||
content: ' (' attr(href) ')';
|
||||
content: ' (' attr(href) ')';
|
||||
}
|
||||
|
||||
a[href^='http://']::after,
|
||||
a[href^='https://']::after
|
||||
{
|
||||
content: ' (' attr(href) ')';
|
||||
content: ' (' attr(href) ')';
|
||||
}
|
||||
|
||||
a[href^='#']::after {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -4,14 +4,14 @@ const duration = 800;
|
||||
const easing = 'ease-out-sine';
|
||||
|
||||
module.exports = {
|
||||
isProduction: process.env.ELEVENTY_ENV === 'production',
|
||||
buildTime: new Date(),
|
||||
title: 'Exploring Hamburg',
|
||||
description: 'Street by Street, District by District',
|
||||
url: 'https://hamburg.stefanimhoff.de',
|
||||
author: 'Stefan Imhoff',
|
||||
twitter: '@kogakure',
|
||||
faviconPath: '/assets/images/branding/favicons/',
|
||||
animationDelay: `data-sal=${animation} data-sal-duration=${duration} data-sal-delay=${delay} data-sal-easing=${easing}`,
|
||||
animation: `data-sal=${animation} data-sal-duration=${duration} data-sal-easing=${easing}`,
|
||||
isProduction: process.env.ELEVENTY_ENV === 'production',
|
||||
buildTime: new Date(),
|
||||
title: 'Exploring Hamburg',
|
||||
description: 'Street by Street, District by District',
|
||||
url: 'https://hamburg.stefanimhoff.de',
|
||||
author: 'Stefan Imhoff',
|
||||
twitter: '@kogakure',
|
||||
faviconPath: '/assets/images/branding/favicons/',
|
||||
animationDelay: `data-sal=${animation} data-sal-duration=${duration} data-sal-delay=${delay} data-sal-easing=${easing}`,
|
||||
animation: `data-sal=${animation} data-sal-duration=${duration} data-sal-easing=${easing}`,
|
||||
};
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"layout": "district",
|
||||
"permalink": "/{{ page.fileSlug }}/",
|
||||
"tags": ["districts"],
|
||||
"templateEngineOverride": "njk,md"
|
||||
"layout": "district",
|
||||
"permalink": "/{{ page.fileSlug }}/",
|
||||
"tags": ["districts"],
|
||||
"templateEngineOverride": "njk,md"
|
||||
}
|
||||
|
||||
52
src/feed.njk
52
src/feed.njk
@@ -4,30 +4,32 @@ eleventyExcludeFromCollections: true
|
||||
---
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:webfeeds="http://webfeeds.org/rss/1.0">
|
||||
<title>{{ site.title }}</title>
|
||||
<subtitle>{{ site.description }}</subtitle>
|
||||
<link href="{{ site.url }}/index.xml" rel="self" type="application/atom+xml" />
|
||||
<link href="{{ site.url }}" rel="alternate" type="text/html"/>
|
||||
{% if collections.districts %}
|
||||
<updated>{{ collections.districts | rssLastUpdatedDate }}</updated>
|
||||
{% endif %}
|
||||
<id>{{ site.url }}/</id>
|
||||
<author>
|
||||
<name>{{ site.author }}</name>
|
||||
</author>
|
||||
{% include "feed-webfeeds.njk" %}
|
||||
{%- for item in collections.districts | reverse -%}
|
||||
{% set absolutePostUrl %}{{ item.url | url | absoluteUrl(site.url) }}{% endset %}
|
||||
{%- if not item.data.draft -%}
|
||||
<entry>
|
||||
<title>{{ item.data.title }}</title>
|
||||
<link href="{{ absolutePostUrl }}"/>
|
||||
<updated>{{ item.date | rssDate }}</updated>
|
||||
<id>{{ absolutePostUrl }}</id>
|
||||
<content type="html"><![CDATA[
|
||||
<title>{{ site.title }}</title>
|
||||
<subtitle>{{ site.description }}</subtitle>
|
||||
<link href="{{ site.url }}/index.xml" rel="self" type="application/atom+xml"/>
|
||||
<link href="{{ site.url }}" rel="alternate" type="text/html"/>
|
||||
{% if collections.districts %}
|
||||
<updated>{{ collections.districts | rssLastUpdatedDate }}</updated>
|
||||
{% endif %}
|
||||
<id>{{ site.url }}/</id>
|
||||
<author>
|
||||
<name>{{ site.author }}</name>
|
||||
</author>
|
||||
{% include "feed-webfeeds.njk" %}
|
||||
{%- for item in collections.districts | reverse -%}
|
||||
{% set absolutePostUrl %}{{ item.url | url | absoluteUrl(site.url) }}{% endset %}
|
||||
{%- if not item.data.draft -%}
|
||||
<entry>
|
||||
<title>{{ item.data.title }}</title>
|
||||
<link href="{{ absolutePostUrl }}"/>
|
||||
<updated>{{ item.date | rssDate }}</updated>
|
||||
<id>{{ absolutePostUrl }}</id>
|
||||
<content type="html">
|
||||
<![CDATA[
|
||||
{{ item.templateContent | htmlToAbsoluteUrls(absolutePostUrl) | safe }}
|
||||
]]></content>
|
||||
</entry>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
]]>
|
||||
</content>
|
||||
</entry>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</feed>
|
||||
|
||||
@@ -1,19 +1,20 @@
|
||||
<section class="homepage-districts">
|
||||
<h3 class="homepage-districts-headline">
|
||||
<h3 class="homepage-districts-headline">
|
||||
Districts
|
||||
</h3>
|
||||
<ul class="homepage-districts-grid">
|
||||
{% for item in collections.districts | sortByTitle %}
|
||||
<li class="homepage-districts-item" {{ site.animation }}>
|
||||
<a class="homepage-districts-item-link" href="{{ item.url }}">
|
||||
<div class="image-shadow">
|
||||
<img src="/assets/images/districts/thumbnails/hamburg-{{ item.data.title | slugify }}-450px.jpg" class="homepage-districts-item-image" alt="#">
|
||||
</div>
|
||||
<h3 class="homepage-districts-item-headline">
|
||||
{{ item.data.title }}
|
||||
</h3>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<ul class="homepage-districts-grid">
|
||||
{% for item in collections.districts | sortByTitle %}
|
||||
<li class="homepage-districts-item" {{ site.animation }}>
|
||||
<a class="homepage-districts-item-link" href="{{ item.url }}">
|
||||
<div class="image-shadow">
|
||||
<img src="/assets/images/districts/thumbnails/hamburg-{{ item.data.title | slugify }}-450px.jpg" class="homepage-districts-item-image" alt="#">
|
||||
</div>
|
||||
<h3 class="homepage-districts-item-headline">
|
||||
{{ item.data.title }}
|
||||
</h3>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<div class="image-shadow homepage-hero-container">
|
||||
<img
|
||||
class="homepage-hero"
|
||||
sizes="(max-width: 1200px) 100vw, 1200px"
|
||||
srcset="/assets/images/core/homepage-hero-300.jpg 300w,
|
||||
/assets/images/core/homepage-hero-600.jpg 600w,
|
||||
/assets/images/core/homepage-hero-1200.jpg 1200w,
|
||||
/assets/images/core/homepage-hero.jpg 1800w"
|
||||
src="/assets/images/core/homepage-hero.jpg"
|
||||
alt="Feuerschiff"
|
||||
/>
|
||||
<img
|
||||
class="homepage-hero"
|
||||
sizes="(max-width: 1200px) 100vw, 1200px"
|
||||
srcset="/assets/images/core/homepage-hero-300.jpg 300w,
|
||||
/assets/images/core/homepage-hero-600.jpg 600w,
|
||||
/assets/images/core/homepage-hero-1200.jpg 1200w,
|
||||
/assets/images/core/homepage-hero.jpg 1800w"
|
||||
src="/assets/images/core/homepage-hero.jpg"
|
||||
alt="Feuerschiff"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,19 +1,20 @@
|
||||
<section id="introduction" class="homepage-introduction" {{ site.animation }}>
|
||||
<div class="wrap">
|
||||
<div>
|
||||
<div>
|
||||
<h3 class="homepage-introduction-headline">
|
||||
About
|
||||
</h3>
|
||||
</div>
|
||||
<div class="homepage-introduction-text">
|
||||
<p>
|
||||
After living in Hamburg for more than 10 years, and still only knowing a small part of the city, I decided in 2015 to explore every district completely.
|
||||
</p>
|
||||
<p>
|
||||
I travel with my camera and a map all 109 districts of Hamburg – as complete as possible, mostly by foot.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<div>
|
||||
<div>
|
||||
<h3 class="homepage-introduction-headline">
|
||||
About
|
||||
</h3>
|
||||
</div>
|
||||
<div class="homepage-introduction-text">
|
||||
<p>
|
||||
After living in Hamburg for more than 10 years, and still only knowing a small part of the city, I decided in 2015 to explore every district completely.
|
||||
</p>
|
||||
<p>
|
||||
I travel with my camera and a map all 109 districts of Hamburg – as complete as possible, mostly by foot.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<div class="image-shadow homepage-statistics-image-container">
|
||||
<img
|
||||
class="homepage-statistics-image"
|
||||
sizes="(max-width: 1200px) 100vw, 1200px"
|
||||
srcset="/assets/images/core/map-300.jpg 300w,
|
||||
/assets/images/core/map-600.jpg 600w,
|
||||
/assets/images/core/map-1200.jpg 1200w,
|
||||
/assets/images/core/map.jpg 1800w"
|
||||
src="/assets/images/core/map.jpg"
|
||||
alt="Historical Map of Hamburg"
|
||||
{{ site.animation }}
|
||||
/>
|
||||
<img
|
||||
class="homepage-statistics-image"
|
||||
sizes="(max-width: 1200px) 100vw, 1200px"
|
||||
srcset="/assets/images/core/map-300.jpg 300w,
|
||||
/assets/images/core/map-600.jpg 600w,
|
||||
/assets/images/core/map-1200.jpg 1200w,
|
||||
/assets/images/core/map.jpg 1800w"
|
||||
src="/assets/images/core/map.jpg"
|
||||
alt="Historical Map of Hamburg"
|
||||
{{ site.animation }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{% set distance = 0 %}
|
||||
@@ -17,39 +17,39 @@
|
||||
{% set count = 0 %}
|
||||
|
||||
{% for item in collections.districts %}
|
||||
{% set distance = distance + item.data.distance %}
|
||||
{% set duration = duration + item.data.duration %}
|
||||
{% set count = loop.length %}
|
||||
{% set distance = distance + item.data.distance %}
|
||||
{% set duration = duration + item.data.duration %}
|
||||
{% set count = loop.length %}
|
||||
{% endfor %}
|
||||
|
||||
<section id="statistics" class="homepage-statistics" {{ site.animationDelay }}>
|
||||
<h3 class="homepage-statistics-headline">
|
||||
Statistics
|
||||
</h3>
|
||||
<div class="homepage-statistics-container">
|
||||
<div class="homepage-statistics-item">
|
||||
<span class="homepage-statistics-value">
|
||||
{{ distance }}
|
||||
</span>
|
||||
<span class="homepage-statistics-key">
|
||||
Kilometers
|
||||
</span>
|
||||
</div>
|
||||
<div class="homepage-statistics-item">
|
||||
<span class="homepage-statistics-value">
|
||||
{{ (duration / 60) | round }}
|
||||
</span>
|
||||
<span class="homepage-statistics-key">
|
||||
Hours
|
||||
</span>
|
||||
</div>
|
||||
<div class="homepage-statistics-item">
|
||||
<span class="homepage-statistics-value">
|
||||
{{ count }}
|
||||
</span>
|
||||
<span class="homepage-statistics-key">
|
||||
Districts
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="homepage-statistics-headline">
|
||||
Statistics
|
||||
</h3>
|
||||
<div class="homepage-statistics-container">
|
||||
<div class="homepage-statistics-item">
|
||||
<span class="homepage-statistics-value">
|
||||
{{ distance }}
|
||||
</span>
|
||||
<span class="homepage-statistics-key">
|
||||
Kilometers
|
||||
</span>
|
||||
</div>
|
||||
<div class="homepage-statistics-item">
|
||||
<span class="homepage-statistics-value">
|
||||
{{ (duration / 60) | round }}
|
||||
</span>
|
||||
<span class="homepage-statistics-key">
|
||||
Hours
|
||||
</span>
|
||||
</div>
|
||||
<div class="homepage-statistics-item">
|
||||
<span class="homepage-statistics-value">
|
||||
{{ count }}
|
||||
</span>
|
||||
<span class="homepage-statistics-key">
|
||||
Districts
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<div class="svg-icons">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="0" height="0">
|
||||
{% include "icons.svg" %}
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="0" height="0">
|
||||
{% include "icons.svg" %}
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<div class="legal">
|
||||
<span class="legal-copyright">© </span>
|
||||
<strong class="legal-author">
|
||||
<a class="legal-author-link" href="/imprint/">{{ site.author }}</a>
|
||||
</strong>
|
||||
<span class="legal-bullet"> / </span>
|
||||
<span class="legal-year">
|
||||
<time datetime="{{ site.buildTime | dateToISO }}">
|
||||
2016–{{ site.buildTime | dateToFormat('YYYY') }}
|
||||
</time>
|
||||
</span>
|
||||
<span class="legal-copyright">© </span>
|
||||
<strong class="legal-author">
|
||||
<a class="legal-author-link" href="/imprint/">{{ site.author }}</a>
|
||||
</strong>
|
||||
<span class="legal-bullet"> / </span>
|
||||
<span class="legal-year">
|
||||
<time datetime="{{ site.buildTime | dateToISO }}">
|
||||
2016–{{ site.buildTime | dateToFormat('YYYY') }}
|
||||
</time>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -1,46 +1,46 @@
|
||||
{%- set ogTitle -%}
|
||||
{%- if page.url === "/" -%}
|
||||
{{ site.author }} · {{ site.description }}
|
||||
{%- else -%}
|
||||
{{ title }} · {{ site.author }}
|
||||
{%- endif -%}
|
||||
{%- if page.url === "/" -%}
|
||||
{{ site.author }} · {{ site.description }}
|
||||
{%- else -%}
|
||||
{{ title }} · {{ site.author }}
|
||||
{%- endif -%}
|
||||
{%- endset -%}
|
||||
|
||||
{%- set ogDescription -%}
|
||||
{%- if page.url === "/" -%}
|
||||
{{ site.tagline }}
|
||||
{%- else -%}
|
||||
{{ description or title }}
|
||||
{%- endif -%}
|
||||
{%- if page.url === "/" -%}
|
||||
{{ site.tagline }}
|
||||
{%- else -%}
|
||||
{{ description or title }}
|
||||
{%- endif -%}
|
||||
{%- endset -%}
|
||||
|
||||
{%- set ogImage -%}
|
||||
{%- if og -%}
|
||||
{{ site.url }}/assets/images/branding/og/{{ og }}
|
||||
{%- else -%}
|
||||
{{ site.url }}/assets/images/branding/og/banner.png
|
||||
{%- if og -%}
|
||||
{{ site.url }}/assets/images/branding/og/{{ og }}
|
||||
{%- else -%}
|
||||
{{ site.url }}/assets/images/branding/og/banner.png
|
||||
{%- endif -%}
|
||||
{%- endset -%}
|
||||
|
||||
<!-- Meta -->
|
||||
<meta name="author" content="{{ site.author }}" />
|
||||
<meta name="description" content="{{ ogDescription }}" />
|
||||
<meta name="theme-color" content="#e7e6e4" />
|
||||
<meta name="generator" content="{{ eleventy.generator }}" />
|
||||
<meta name="author" content="{{ site.author }}"/>
|
||||
<meta name="description" content="{{ ogDescription }}"/>
|
||||
<meta name="theme-color" content="#e7e6e4"/>
|
||||
<meta name="generator" content="{{ eleventy.generator }}"/>
|
||||
|
||||
<!-- Open graph -->
|
||||
<meta property="og:title" content="{{ ogTitle }}" />
|
||||
<meta property="og:url" content="{{ site.url }}{{ page.url }}" />
|
||||
<meta property="og:description" content="{{ ogDescription }}" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:title" content="{{ ogTitle }}"/>
|
||||
<meta property="og:url" content="{{ site.url }}{{ page.url }}"/>
|
||||
<meta property="og:description" content="{{ ogDescription }}"/>
|
||||
<meta property="og:type" content="article"/>
|
||||
<meta property="og:image" content="{{ ogImage }}"/>
|
||||
<meta property="og:image:width" content="1200" />
|
||||
<meta property="og:image:height" content="675" />
|
||||
<meta property="og:image:width" content="1200"/>
|
||||
<meta property="og:image:height" content="675"/>
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:title" content="{{ ogTitle }}" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:site" content="{{ site.twitter }}" />
|
||||
<meta name="twitter:description" content="{{ ogDescription }}" />
|
||||
<meta name="twitter:image" content="{{ ogImage }}" />
|
||||
<meta name="twitter:creator" content="{{ site.twitter }}" />
|
||||
<meta name="twitter:title" content="{{ ogTitle }}"/>
|
||||
<meta name="twitter:card" content="summary_large_image"/>
|
||||
<meta name="twitter:site" content="{{ site.twitter }}"/>
|
||||
<meta name="twitter:description" content="{{ ogDescription }}"/>
|
||||
<meta name="twitter:image" content="{{ ogImage }}"/>
|
||||
<meta name="twitter:creator" content="{{ site.twitter }}"/>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<footer class="page-footer">
|
||||
{% include "legal.njk" %}
|
||||
{% include "up-link.njk" %}
|
||||
{% include "legal.njk" %}
|
||||
{% include "up-link.njk" %}
|
||||
</footer>
|
||||
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
<header class="page-header" role="banner">
|
||||
{% include "theme-toggle.njk" %}
|
||||
{% include "theme-toggle.njk" %}
|
||||
</header>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<div class="pagination-container">
|
||||
<svg class="pagination-icon" aria-hidden="true" viewBox="0 0 24 24" width="1em" height="1em">
|
||||
<use xlink:href="#arrow-left-s"></use>
|
||||
</svg>
|
||||
<svg class="pagination-icon" aria-hidden="true" viewBox="0 0 24 24" width="1em" height="1em">
|
||||
<use xlink:href="#arrow-left-s"></use>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<div class="pagination-container">
|
||||
<svg class="pagination-icon" aria-hidden="true" viewBox="0 0 24 24" width="1em" height="1em">
|
||||
<use xlink:href="#arrow-right-s"></use>
|
||||
</svg>
|
||||
<svg class="pagination-icon" aria-hidden="true" viewBox="0 0 24 24" width="1em" height="1em">
|
||||
<use xlink:href="#arrow-right-s"></use>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
{% if previousPost %}
|
||||
<a
|
||||
aria-label="{{ previousPost.data.title }}"
|
||||
class="pagination pagination-start"
|
||||
href="{{ previousPost.url }}"
|
||||
rel="prev"
|
||||
title="{{ previousPost.data.title }}"
|
||||
>
|
||||
{% include "pagination-left-arrow.njk" %}
|
||||
</a>
|
||||
<a
|
||||
aria-label="{{ previousPost.data.title }}"
|
||||
class="pagination pagination-start"
|
||||
href="{{ previousPost.url }}"
|
||||
rel="prev"
|
||||
title="{{ previousPost.data.title }}"
|
||||
>
|
||||
{% include "pagination-left-arrow.njk" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if nextPost %}
|
||||
<a
|
||||
aria-label="{{ nextPost.data.title }}"
|
||||
class="pagination pagination-end"
|
||||
href="{{ nextPost.url }}"
|
||||
rel="next"
|
||||
title="{{ nextPost.data.title }}"
|
||||
>
|
||||
{% include "pagination-right-arrow.njk" %}
|
||||
</a>
|
||||
<a
|
||||
aria-label="{{ nextPost.data.title }}"
|
||||
class="pagination pagination-end"
|
||||
href="{{ nextPost.url }}"
|
||||
rel="next"
|
||||
title="{{ nextPost.data.title }}"
|
||||
>
|
||||
{% include "pagination-right-arrow.njk" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
@@ -1,2 +1,3 @@
|
||||
<link rel="preload" href="{{ '/assets/fonts/secuela-regular-vf.woff2' | url }}" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="preload" href="{{ '/assets/fonts/secuela-italic-vf.woff2' | url }}" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="preload" href="{{ '/assets/fonts/secuela-regular-vf.woff2' | url }}" as="font" type="font/woff2" crossorigin/>
|
||||
<link rel="preload" href="{{ '/assets/fonts/secuela-italic-vf.woff2' | url }}" as="font" type="font/woff2" crossorigin/>
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
{% if robots %}
|
||||
<meta name="robots" content="{{ robots }}" />
|
||||
<meta name="robots" content="{{ robots }}"/>
|
||||
{% else %}
|
||||
<meta name="robots" content="all" />
|
||||
<meta name="robots" content="all"/>
|
||||
{% endif %}
|
||||
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
{% set js %}
|
||||
{% include "../assets/scripts/embedded/theme-switcher.js" %}
|
||||
{% if site.isProduction %}
|
||||
{% include "../assets/scripts/embedded/register-serviceworker.js" %}
|
||||
{% endif %}
|
||||
{% set js %}
|
||||
{% include "../assets/scripts/embedded/theme-switcher.js" %}
|
||||
{% if site.isProduction %}
|
||||
{% include "../assets/scripts/embedded/register-serviceworker.js" %}
|
||||
{% endif %}
|
||||
{% endset %}
|
||||
<script>{{ js | jsmin | safe }}</script>
|
||||
<script>
|
||||
{{ js | jsmin | safe }}
|
||||
</script>
|
||||
|
||||
@@ -1,28 +1,27 @@
|
||||
{% if site.isProduction %}
|
||||
{% set criticalCSS %}
|
||||
{% include "critical/base.css" %}
|
||||
{% if css %}
|
||||
{% include "critical/" + css %}
|
||||
{% endif %}
|
||||
{% endset %}
|
||||
{% set criticalCSS %}
|
||||
{% include "critical/base.css" %}
|
||||
{% if css %}
|
||||
{% include "critical/" + css %}
|
||||
{% endif %}
|
||||
{% endset %}
|
||||
|
||||
<style>
|
||||
{{ criticalCSS | safe }}
|
||||
</style>
|
||||
<style>
|
||||
{{criticalCSS | safe}}
|
||||
</style>
|
||||
|
||||
{% else %}
|
||||
|
||||
<link rel="stylesheet" href="{{ '/assets/styles/base.css' | url }}" />
|
||||
{% if css %}
|
||||
<link rel="stylesheet" href="{{ '/assets/styles/' + css | url }}" />
|
||||
{% endif %}
|
||||
<link rel="stylesheet" href="{{ '/assets/styles/base.css' | url }}"/>
|
||||
{% if css %}
|
||||
<link rel="stylesheet" href="{{ '/assets/styles/' + css | url }}"/>
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
<link rel="stylesheet" href="{{ '/assets/styles/main.css' | url }}" media="print" onload="this.media='all'" />
|
||||
<link rel="stylesheet" href="{{ '/assets/styles/print.css' | url }}" media="print" />
|
||||
|
||||
<link rel="stylesheet" href="{{ '/assets/styles/main.css' | url }}" media="print" onload="this.media='all'"/>
|
||||
<link rel="stylesheet" href="{{ '/assets/styles/print.css' | url }}" media="print"/>
|
||||
|
||||
<noscript>
|
||||
<link rel="stylesheet" href="{{ '/assets/styles/main.css' | url }}" />
|
||||
<link rel="stylesheet" href="{{ '/assets/styles/main.css' | url }}"/>
|
||||
</noscript>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<button id="theme-toggle" class="theme-toggle" aria-label="Switch color theme">
|
||||
<svg class="theme-toggle-icon" aria-hidden="true" viewBox="0 0 24 24" width="1em" height="1em">
|
||||
<use xlink:href="#circle"></use>
|
||||
</svg>
|
||||
<svg class="theme-toggle-icon" aria-hidden="true" viewBox="0 0 24 24" width="1em" height="1em">
|
||||
<use xlink:href="#circle"></use>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<a id="up-link" class="up-link" href="#top" onClick="{scrollToTop}">
|
||||
<button class="up-link-button" aria-label="Back to top">
|
||||
<svg class="up-link-icon" aria-hidden="true" viewBox="0 0 24 24" width="1em" height="1em">
|
||||
<use xlink:href="#arrow-up"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="up-link-button" aria-label="Back to top">
|
||||
<svg class="up-link-icon" aria-hidden="true" viewBox="0 0 24 24" width="1em" height="1em">
|
||||
<use xlink:href="#arrow-up"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
@@ -1,35 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-js">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
|
||||
<title>
|
||||
{%- if page.url === "/" -%}
|
||||
{{ site.title }} · {{ site.description }} | {{ site.author}}
|
||||
{%- else -%}
|
||||
{{ title }} · {{ site.title }} | {{ site.author}}
|
||||
{%- endif -%}
|
||||
</title>
|
||||
<title>
|
||||
{%- if page.url === "/" -%}
|
||||
{{ site.title }} · {{ site.description }} | {{ site.author}}
|
||||
{%- else -%}
|
||||
{{ title }} · {{ site.title }} | {{ site.author}}
|
||||
{%- endif -%}
|
||||
</title>
|
||||
|
||||
<link rel="canonical" href="{{ site.url }}{{ page.url }}" />
|
||||
<link rel="canonical" href="{{ site.url }}{{ page.url }}"/>
|
||||
|
||||
<script type="module">
|
||||
document.documentElement.classList.remove('no-js');
|
||||
document.documentElement.classList.add('js');
|
||||
</script>
|
||||
<script type="module">
|
||||
document
|
||||
.documentElement
|
||||
.classList
|
||||
.remove('no-js');
|
||||
document
|
||||
.documentElement
|
||||
.classList
|
||||
.add('js');
|
||||
</script>
|
||||
|
||||
{% include "scripts.njk" %}
|
||||
{% include "styles.njk" %}
|
||||
{% include "favicons.njk" %}
|
||||
{% include "meta-tags.njk" %}
|
||||
{% include "preload.njk" %}
|
||||
{% include "robots.njk" %}
|
||||
{% include "feeds.njk" %}
|
||||
</head>
|
||||
<body {% if bodyClass %}class="{{ bodyClass }}"{% endif %}>
|
||||
{% include "icon-sprites.njk" %}
|
||||
{{ content | safe }}
|
||||
<script src="/assets/scripts/main.js" async></script>
|
||||
</body>
|
||||
{% include "scripts.njk" %}
|
||||
{% include "styles.njk" %}
|
||||
{% include "favicons.njk" %}
|
||||
{% include "meta-tags.njk" %}
|
||||
{% include "preload.njk" %}
|
||||
{% include "robots.njk" %}
|
||||
{% include "feeds.njk" %}
|
||||
</head>
|
||||
<body {% if bodyClass %}class="{{ bodyClass }}"{% endif %}>
|
||||
{% include "icon-sprites.njk" %}
|
||||
{{ content | safe }}
|
||||
<script src="/assets/scripts/main.js" async></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -3,14 +3,14 @@ layout: base
|
||||
---
|
||||
|
||||
<section class="page-grid">
|
||||
{% include "page-header.njk" %}
|
||||
<main class="page-content">
|
||||
<h1 class="page-title">
|
||||
<a href="/" class="page-title-link">
|
||||
Exploring Hamburg
|
||||
</a>
|
||||
</h1>
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
{% include "page-footer.njk" %}
|
||||
{% include "page-header.njk" %}
|
||||
<main class="page-content">
|
||||
<h1 class="page-title">
|
||||
<a href="/" class="page-title-link">
|
||||
Exploring Hamburg
|
||||
</a>
|
||||
</h1>
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
{% include "page-footer.njk" %}
|
||||
</section>
|
||||
|
||||
@@ -7,16 +7,16 @@ css: district.css
|
||||
{% set nextPost = collections.districts | sortByTitle | getNextCollectionItem(page) %}
|
||||
|
||||
<div class="image-shadow district-hero-container">
|
||||
<img class="district-hero" src="/assets/images/hero/hamburg-{{ title | slugify }}.jpg" alt="{{ title }}"/>
|
||||
<img class="district-hero" src="/assets/images/hero/hamburg-{{ title | slugify }}.jpg" alt="{{ title }}"/>
|
||||
</div>
|
||||
|
||||
<div class="district-title">
|
||||
<h2>{{ title }}</h2>
|
||||
<small>{{ distance }} km / {{ (duration / 60) | round }} hrs.</small>
|
||||
<h2>{{ title }}</h2>
|
||||
<small>{{ distance }} km / {{ (duration / 60) | round }} hrs.</small>
|
||||
</div>
|
||||
|
||||
<div class="district-content">
|
||||
{{ content | safe }}
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
|
||||
{% include "pagination.njk" %}
|
||||
|
||||
@@ -3,5 +3,5 @@ layout: default
|
||||
---
|
||||
|
||||
<div class="layout-narrow">
|
||||
{{ content | safe }}
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
|
||||
@@ -4,12 +4,12 @@ eleventyExcludeFromCollections: true
|
||||
---
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
{%- for item in collections.all -%}
|
||||
{%- if not item.data.excludeFromSitemap and item.url -%}
|
||||
<url>
|
||||
<loc>{{ site.url }}{{ item.url | url | absoluteUrl(meta.url) }}</loc>
|
||||
<lastmod>{{ item.date | dateToFormat('yyyy-MM-DD') }}</lastmod>
|
||||
</url>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
{%- for item in collections.all -%}
|
||||
{%- if not item.data.excludeFromSitemap and item.url -%}
|
||||
<url>
|
||||
<loc>{{ site.url }}{{ item.url | url | absoluteUrl(meta.url) }}</loc>
|
||||
<lastmod>{{ item.date | dateToFormat('yyyy-MM-DD') }}</lastmod>
|
||||
</url>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</urlset>
|
||||
|
||||
@@ -1 +1 @@
|
||||
google-site-verification: googleeac4fc886a6f9f8d.html
|
||||
google-site-verification: googleeac4fc886a6f9f8d.html
|
||||
|
||||
@@ -1,15 +1,13 @@
|
||||
const moment = require('moment');
|
||||
|
||||
module.exports = {
|
||||
dateToFormat: function (date, format = 'MMMM Do, YYYY') {
|
||||
return moment(date).format(format);
|
||||
},
|
||||
dateToISO: function (date) {
|
||||
return moment(date).format();
|
||||
},
|
||||
sortByTitle: function (values) {
|
||||
return values
|
||||
.slice()
|
||||
.sort((a, b) => a.data.title.localeCompare(b.data.title));
|
||||
},
|
||||
dateToFormat: function (date, format = 'MMMM Do, YYYY') {
|
||||
return moment(date).format(format);
|
||||
},
|
||||
dateToISO: function (date) {
|
||||
return moment(date).format();
|
||||
},
|
||||
sortByTitle: function (values) {
|
||||
return values.slice().sort((a, b) => a.data.title.localeCompare(b.data.title));
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
const htmlmin = require('html-minifier');
|
||||
|
||||
module.exports = function (content, outputPath) {
|
||||
if (outputPath.endsWith('.html')) {
|
||||
let minified = htmlmin.minify(content, {
|
||||
useShortDoctype: true,
|
||||
removeComments: true,
|
||||
collapseWhitespace: true,
|
||||
});
|
||||
if (outputPath.endsWith('.html')) {
|
||||
let minified = htmlmin.minify(content, {
|
||||
useShortDoctype: true,
|
||||
removeComments: true,
|
||||
collapseWhitespace: true,
|
||||
});
|
||||
|
||||
return minified;
|
||||
}
|
||||
return minified;
|
||||
}
|
||||
|
||||
return content;
|
||||
return content;
|
||||
};
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
const UglifyJS = require('uglify-js');
|
||||
|
||||
module.exports = function (code) {
|
||||
let minified = UglifyJS.minify(code);
|
||||
let minified = UglifyJS.minify(code);
|
||||
|
||||
if (minified.error) {
|
||||
console.log('UglifyJS error: ', minified.error);
|
||||
return code;
|
||||
}
|
||||
if (minified.error) {
|
||||
console.log('UglifyJS error: ', minified.error);
|
||||
return code;
|
||||
}
|
||||
|
||||
return minified.code;
|
||||
return minified.code;
|
||||
};
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
const outdent = require('outdent')({
|
||||
newline: ' ',
|
||||
newline: ' ',
|
||||
});
|
||||
|
||||
module.exports = {
|
||||
email: function (text, key = false) {
|
||||
const downloadText = 'Download public key (ProtonMail/GPG)';
|
||||
const link = outdent`
|
||||
email: function (text, key = false) {
|
||||
const downloadText = 'Download public key (ProtonMail/GPG)';
|
||||
const link = outdent`
|
||||
<a id="email" class="objuscated" href="mailto:hey (at) imhoff (dot) name">
|
||||
${text}
|
||||
</a>`;
|
||||
const keyDownload = outdent`
|
||||
const keyDownload = outdent`
|
||||
<span id="lock-box" class="lock-box hidden">
|
||||
<a
|
||||
title="${downloadText}"
|
||||
@@ -21,20 +21,20 @@ module.exports = {
|
||||
</svg>
|
||||
</a></span>`;
|
||||
|
||||
return `${link} ${key ? keyDownload : ''}`;
|
||||
},
|
||||
map: function (mid) {
|
||||
return outdent`
|
||||
return `${link} ${key ? keyDownload : ''}`;
|
||||
},
|
||||
map: function (mid) {
|
||||
return outdent`
|
||||
<iframe class="map" src="https://www.google.com/maps/d/u/0/embed?mid=${mid}" width="1000" height="500">
|
||||
</iframe>`;
|
||||
},
|
||||
youtube: function (id) {
|
||||
return outdent`
|
||||
},
|
||||
youtube: function (id) {
|
||||
return outdent`
|
||||
<div class="video-wrapper">
|
||||
<iframe src="https://www.youtube.com/embed/${id}"
|
||||
frameborder="0" allowfullscreen
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">
|
||||
</iframe>
|
||||
</div>`;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -4,22 +4,22 @@ permalink: manifest.webmanifest
|
||||
ignore: true
|
||||
---
|
||||
{
|
||||
"name": "{{ site.title }}",
|
||||
"short_name": "{{ site.title }}",
|
||||
"start_url": "/",
|
||||
"icons": [
|
||||
{
|
||||
"src": "{{ site.faviconPath }}favicon-192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "{{ site.faviconPath }}favicon-512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"theme_color": "#e7e6e4",
|
||||
"background_color": "#e7e6e4",
|
||||
"display": "standalone"
|
||||
"name": "{{ site.title }}",
|
||||
"short_name": "{{ site.title }}",
|
||||
"start_url": "/",
|
||||
"icons": [
|
||||
{
|
||||
"src": "{{ site.faviconPath }}favicon-192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "{{ site.faviconPath }}favicon-512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"theme_color": "#e7e6e4",
|
||||
"background_color": "#e7e6e4",
|
||||
"display": "standalone"
|
||||
}
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
module.exports = {
|
||||
globDirectory: 'dist/',
|
||||
globPatterns: ['**/*.woff2'],
|
||||
swDest: 'dist/sw.js',
|
||||
sourcemap: false,
|
||||
cleanupOutdatedCaches: true,
|
||||
clientsClaim: true,
|
||||
skipWaiting: true,
|
||||
runtimeCaching: [
|
||||
{
|
||||
urlPattern: /\.(?:jpg|png|svg|gif|webp|avif)$/,
|
||||
handler: 'CacheFirst',
|
||||
options: {
|
||||
cacheName: 'images',
|
||||
expiration: {
|
||||
maxEntries: 50,
|
||||
maxAgeSeconds: 60 * 60 * 24 * 365,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
globDirectory: 'dist/',
|
||||
globPatterns: ['**/*.woff2'],
|
||||
swDest: 'dist/sw.js',
|
||||
sourcemap: false,
|
||||
cleanupOutdatedCaches: true,
|
||||
clientsClaim: true,
|
||||
skipWaiting: true,
|
||||
runtimeCaching: [
|
||||
{
|
||||
urlPattern: /\.(?:jpg|png|svg|gif|webp|avif)$/,
|
||||
handler: 'CacheFirst',
|
||||
options: {
|
||||
cacheName: 'images',
|
||||
expiration: {
|
||||
maxEntries: 50,
|
||||
maxAgeSeconds: 60 * 60 * 24 * 365,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user