finished except for: glidejs width issue, footer, wouter images, recent article alignment issue
This commit is contained in:
Spencer Flagg
parent
0ad0d58c1e
commit
79b35e2b89
35 changed files with 912 additions and 569 deletions
80
.eleventy.js
80
.eleventy.js
|
|
@ -2,21 +2,35 @@ const htmlmin = require('html-minifier');
|
|||
const dateFns = require('date-fns');
|
||||
const lazyImagesPlugin = require('eleventy-plugin-lazyimages');
|
||||
const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
|
||||
const i18n = require('eleventy-plugin-i18n');
|
||||
const translations = require('./src/_data/i18n');
|
||||
|
||||
module.exports = function (eleventyConfig) {
|
||||
|
||||
// PLUGINS **************************************************************
|
||||
|
||||
eleventyConfig.addPlugin(syntaxHighlight);
|
||||
|
||||
eleventyConfig.addPlugin(lazyImagesPlugin, {
|
||||
transformImgPath: (imgPath) => {
|
||||
if (imgPath.startsWith('http://') || imgPath.startsWith('https://')) {
|
||||
// Handle remote file
|
||||
return imgPath;
|
||||
} else {
|
||||
return `./src/${imgPath}`;
|
||||
}
|
||||
},
|
||||
// does not work with background images
|
||||
// eleventyConfig.addPlugin(lazyImagesPlugin, {
|
||||
// transformImgPath: (imgPath) => {
|
||||
// if (imgPath.startsWith('http://') || imgPath.startsWith('https://')) {
|
||||
// // Handle remote file
|
||||
// return imgPath;
|
||||
// } else {
|
||||
// return `./src/${imgPath}`;
|
||||
// }
|
||||
// },
|
||||
// });
|
||||
|
||||
eleventyConfig.addPlugin(i18n, {
|
||||
translations,
|
||||
fallbackLocales: {
|
||||
'es-ES': 'en-US'
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
eleventyConfig.setEjsOptions({
|
||||
rmWhitespace: true,
|
||||
context: {
|
||||
|
|
@ -28,7 +42,27 @@ module.exports = function (eleventyConfig) {
|
|||
files: './_site/assets/styles/main.css',
|
||||
});
|
||||
|
||||
// use this to redirect to en-GB
|
||||
// eleventyConfig.setBrowserSyncConfig({
|
||||
// files: './_site/assets/styles/main.css',
|
||||
// callbacks: {
|
||||
// ready: function (err, bs) {
|
||||
// bs.addMiddleware('*', (req, res) => {
|
||||
// if (req.url === '/') {
|
||||
// res.writeHead(302, {
|
||||
// location: '/en-GB/'
|
||||
// });
|
||||
// res.end();
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
eleventyConfig.addPassthroughCopy("styles/fonts");
|
||||
eleventyConfig.addPassthroughCopy("**/*.png");
|
||||
eleventyConfig.addPassthroughCopy("**/*.svg");
|
||||
eleventyConfig.addPassthroughCopy("node_modules/@glidejs/glide/dist");
|
||||
|
||||
eleventyConfig.addTransform('htmlmin', (content, outputPath) => {
|
||||
if (outputPath.endsWith('.html')) {
|
||||
|
|
@ -52,11 +86,35 @@ module.exports = function (eleventyConfig) {
|
|||
console.log(galleryImages);
|
||||
|
||||
//Create collection of sponsor logos
|
||||
eleventyConfig.addCollection('screenshots', function(collection) {
|
||||
return galleryImages;
|
||||
eleventyConfig.addCollection('screenshots', function (collection) {
|
||||
return galleryImages.map(url => {
|
||||
return url.replace('src/', '');
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
passthroughFileCopy: true,
|
||||
dir: { input: 'src', output: '_site', data: '_data' },
|
||||
};
|
||||
|
||||
// return {
|
||||
// templateFormats: ['md', 'njk', 'html', 'liquid'],
|
||||
|
||||
// // If your site lives in a different subdirectory, change this.
|
||||
// // Leading or trailing slashes are all normalized away, so don’t worry about it.
|
||||
// // If you don’t have a subdirectory, use "" or "/" (they do the same thing)
|
||||
// // This is only used for URLs (it does not affect your file structure)
|
||||
// pathPrefix: '/',
|
||||
|
||||
// markdownTemplateEngine: 'liquid',
|
||||
// htmlTemplateEngine: 'njk',
|
||||
// dataTemplateEngine: 'njk',
|
||||
// passthroughFileCopy: true,
|
||||
// dir: {
|
||||
// input: '.',
|
||||
// includes: '_includes',
|
||||
// data: '_data',
|
||||
// output: 'docs',
|
||||
// },
|
||||
// };
|
||||
};
|
||||
|
|
|
|||
82
package-lock.json
generated
82
package-lock.json
generated
|
|
@ -9,6 +9,8 @@
|
|||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@glidejs/glide": "^3.4.1",
|
||||
"eleventy-plugin-i18n": "^0.1.3",
|
||||
"fast-glob": "^3.2.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -296,6 +298,11 @@
|
|||
"purgecss": "^3.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@glidejs/glide": {
|
||||
"version": "3.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@glidejs/glide/-/glide-3.4.1.tgz",
|
||||
"integrity": "sha512-C34AEcK1HjSyxilRToUL54I6KAoodojUbeRlXoruobZuG0eGm8xfDL+3kgkWj7AJK4EZtunSOYfoqMp70eDtwg=="
|
||||
},
|
||||
"node_modules/@nodelib/fs.scandir": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
|
||||
|
|
@ -886,7 +893,6 @@
|
|||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"color-convert": "^2.0.1"
|
||||
},
|
||||
|
|
@ -2230,9 +2236,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001230",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001230.tgz",
|
||||
"integrity": "sha512-5yBd5nWCBS+jWKTcHOzXwo5xzcj4ePE/yjtkZyUV1BTUmrBaA9MRGC+e7mxnqXSA90CmCA8L3eKLaSUkt099IQ==",
|
||||
"version": "1.0.30001271",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001271.tgz",
|
||||
"integrity": "sha512-BBruZFWmt3HFdVPS8kceTBIguKxu4f99n5JNp06OlPD/luoAMIaIK5ieV5YjnBLH3Nysai9sxj9rpJj4ZisXOA==",
|
||||
"dev": true,
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
|
|
@ -2259,7 +2265,6 @@
|
|||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
|
||||
"integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
|
|
@ -2644,7 +2649,6 @@
|
|||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"color-name": "~1.1.4"
|
||||
},
|
||||
|
|
@ -2655,8 +2659,7 @@
|
|||
"node_modules/color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
|
||||
},
|
||||
"node_modules/color-string": {
|
||||
"version": "1.5.5",
|
||||
|
|
@ -4069,6 +4072,16 @@
|
|||
"integrity": "sha512-+LPJVRsN7hGZ9EIUUiWCpO7l4E3qBYHNadazlucBfsXBbccDFNKUBAgzE68FnkWGJPwD/AfKhSzL+G+Iqb8A4A==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/eleventy-plugin-i18n": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/eleventy-plugin-i18n/-/eleventy-plugin-i18n-0.1.3.tgz",
|
||||
"integrity": "sha512-O4FtB4t7g0T3ujH3ciFGCyJ/r1CHzp33WYrDqgnX6s6KZ4R63CkN/RndRKU36ahWWUmF0BrLjQ+IDwj2ntsicw==",
|
||||
"dependencies": {
|
||||
"chalk": "^4.1.1",
|
||||
"lodash.get": "^4.4.2",
|
||||
"templite": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/eleventy-plugin-lazyimages": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/eleventy-plugin-lazyimages/-/eleventy-plugin-lazyimages-2.1.0.tgz",
|
||||
|
|
@ -5947,7 +5960,6 @@
|
|||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
|
|
@ -8078,6 +8090,11 @@
|
|||
"integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/lodash.get": {
|
||||
"version": "4.4.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
|
||||
"integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
|
||||
},
|
||||
"node_modules/lodash.isfinite": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz",
|
||||
|
|
@ -13211,7 +13228,6 @@
|
|||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"has-flag": "^4.0.0"
|
||||
},
|
||||
|
|
@ -13691,6 +13707,11 @@
|
|||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/templite": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/templite/-/templite-1.1.0.tgz",
|
||||
"integrity": "sha512-DtXicIurbnJS5/eu3nMLLspt4bZ8F/811IpcI7DgSE63UhES6ld3CxoTcLXBuGhliYx2wMVmyNzHf3c7mqwIIA=="
|
||||
},
|
||||
"node_modules/term-size": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",
|
||||
|
|
@ -15352,6 +15373,11 @@
|
|||
"purgecss": "^3.1.3"
|
||||
}
|
||||
},
|
||||
"@glidejs/glide": {
|
||||
"version": "3.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@glidejs/glide/-/glide-3.4.1.tgz",
|
||||
"integrity": "sha512-C34AEcK1HjSyxilRToUL54I6KAoodojUbeRlXoruobZuG0eGm8xfDL+3kgkWj7AJK4EZtunSOYfoqMp70eDtwg=="
|
||||
},
|
||||
"@nodelib/fs.scandir": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
|
||||
|
|
@ -15859,7 +15885,6 @@
|
|||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
|
|
@ -16924,9 +16949,9 @@
|
|||
}
|
||||
},
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30001230",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001230.tgz",
|
||||
"integrity": "sha512-5yBd5nWCBS+jWKTcHOzXwo5xzcj4ePE/yjtkZyUV1BTUmrBaA9MRGC+e7mxnqXSA90CmCA8L3eKLaSUkt099IQ==",
|
||||
"version": "1.0.30001271",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001271.tgz",
|
||||
"integrity": "sha512-BBruZFWmt3HFdVPS8kceTBIguKxu4f99n5JNp06OlPD/luoAMIaIK5ieV5YjnBLH3Nysai9sxj9rpJj4ZisXOA==",
|
||||
"dev": true
|
||||
},
|
||||
"caw": {
|
||||
|
|
@ -16946,7 +16971,6 @@
|
|||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
|
||||
"integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
|
|
@ -17274,7 +17298,6 @@
|
|||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
|
|
@ -17282,8 +17305,7 @@
|
|||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
|
||||
},
|
||||
"color-string": {
|
||||
"version": "1.5.5",
|
||||
|
|
@ -18396,6 +18418,16 @@
|
|||
"integrity": "sha512-+LPJVRsN7hGZ9EIUUiWCpO7l4E3qBYHNadazlucBfsXBbccDFNKUBAgzE68FnkWGJPwD/AfKhSzL+G+Iqb8A4A==",
|
||||
"dev": true
|
||||
},
|
||||
"eleventy-plugin-i18n": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/eleventy-plugin-i18n/-/eleventy-plugin-i18n-0.1.3.tgz",
|
||||
"integrity": "sha512-O4FtB4t7g0T3ujH3ciFGCyJ/r1CHzp33WYrDqgnX6s6KZ4R63CkN/RndRKU36ahWWUmF0BrLjQ+IDwj2ntsicw==",
|
||||
"requires": {
|
||||
"chalk": "^4.1.1",
|
||||
"lodash.get": "^4.4.2",
|
||||
"templite": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"eleventy-plugin-lazyimages": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/eleventy-plugin-lazyimages/-/eleventy-plugin-lazyimages-2.1.0.tgz",
|
||||
|
|
@ -19882,8 +19914,7 @@
|
|||
"has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
|
||||
},
|
||||
"has-symbol-support-x": {
|
||||
"version": "1.4.2",
|
||||
|
|
@ -21487,6 +21518,11 @@
|
|||
"integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.get": {
|
||||
"version": "4.4.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
|
||||
"integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
|
||||
},
|
||||
"lodash.isfinite": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz",
|
||||
|
|
@ -25475,7 +25511,6 @@
|
|||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
|
|
@ -25877,6 +25912,11 @@
|
|||
"uuid": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"templite": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/templite/-/templite-1.1.0.tgz",
|
||||
"integrity": "sha512-DtXicIurbnJS5/eu3nMLLspt4bZ8F/811IpcI7DgSE63UhES6ld3CxoTcLXBuGhliYx2wMVmyNzHf3c7mqwIIA=="
|
||||
},
|
||||
"term-size": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",
|
||||
|
|
|
|||
|
|
@ -65,6 +65,8 @@
|
|||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@glidejs/glide": "^3.4.1",
|
||||
"eleventy-plugin-i18n": "^0.1.3",
|
||||
"fast-glob": "^3.2.7"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
BIN
public/apple-touch-icon.png
Executable file → Normal file
BIN
public/apple-touch-icon.png
Executable file → Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2 KiB After Width: | Height: | Size: 3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 35 KiB |
BIN
public/favicon-16x16.png
Executable file → Normal file
BIN
public/favicon-16x16.png
Executable file → Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 445 B After Width: | Height: | Size: 991 B |
BIN
public/favicon-32x32.png
Executable file → Normal file
BIN
public/favicon-32x32.png
Executable file → Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 1,001 B After Width: | Height: | Size: 3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 116 KiB |
6
src/_data/i18n/index.js
Normal file
6
src/_data/i18n/index.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
hello: {
|
||||
'en-US': 'Hello',
|
||||
'es-NL': 'Hola'
|
||||
}
|
||||
};
|
||||
11
src/_data/sections.js
Normal file
11
src/_data/sections.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
module.exports = {
|
||||
sections: [
|
||||
{ slug: 'home', name: 'Home' },
|
||||
{ slug: 'info', name: 'Info' },
|
||||
{ slug: 'screenshots', name: 'Screenshots' },
|
||||
{ slug: 'systems', name: 'Systems' },
|
||||
{ slug: 'pricing', name: 'Pricing' },
|
||||
{ slug: 'download', name: 'Download' },
|
||||
{ slug: 'reviews', name: 'Reviews' }
|
||||
]
|
||||
}
|
||||
|
|
@ -1,5 +1,139 @@
|
|||
<article class="blurb__wrapper">
|
||||
<p>
|
||||
Learn human anatomy quickly and easily by zooming, panning, hiding layers and interacting in real time.
|
||||
</p>
|
||||
</article>
|
||||
<section>
|
||||
<p>
|
||||
Learn human anatomy quickly and easily by zooming, panning, hiding layers and interacting in real time.
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<div class="before-and-after">
|
||||
<div class='img background-img'></div>
|
||||
<div class='img foreground-img'></div>
|
||||
<input type="range" min="1" max="100" value="50" class="slider" name='slider' id="before-and-after__slider">
|
||||
<div class='slider-button'></div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<script>
|
||||
|
||||
document.querySelector("#before-and-after__slider").addEventListener("input", (e) => {
|
||||
const sliderPos = e.target.value;
|
||||
// Update the width of the foreground image
|
||||
document.querySelector('.foreground-img').style.width = `${sliderPos}%`;
|
||||
// Update the position of the slider button
|
||||
document.querySelector('.slider-button').style.left = `calc(${sliderPos}% - 18px)`;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
article.blurb__wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 3rem;
|
||||
padding: 2rem 4rem;
|
||||
}
|
||||
|
||||
.blurb__wrapper section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.before-and-after {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 300/200;
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
.before-and-after .img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 900px 100%;
|
||||
}
|
||||
|
||||
.before-and-after .background-img {
|
||||
background-image: url("https://picsum.photos/200/300");
|
||||
border-radius: var(--r-1);
|
||||
}
|
||||
|
||||
.before-and-after .foreground-img {
|
||||
background-image: url("https://picsum.photos/200/301");
|
||||
width: 50%;
|
||||
|
||||
border-radius: var(--r-1) 0 0 var(--r-1);
|
||||
}
|
||||
|
||||
.before-and-after .slider {
|
||||
position: absolute;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(242, 242, 242, 0.3);
|
||||
outline: none;
|
||||
margin: 0;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.before-and-after .slider:hover {
|
||||
background: rgba(242, 242, 242, 0.1);
|
||||
}
|
||||
|
||||
.before-and-after .slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 6px;
|
||||
height: 600px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.before-and-after .slider::-moz-range-thumb {
|
||||
width: 6px;
|
||||
height: 600px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.before-and-after .slider-button {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
left: calc(50% - 18px);
|
||||
top: calc(50% - 18px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.before-and-after .slider-button:after {
|
||||
content: "";
|
||||
padding: 3px;
|
||||
display: inline-block;
|
||||
border: solid #5D5D5D;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.before-and-after .slider-button:before {
|
||||
content: "";
|
||||
padding: 3px;
|
||||
display: inline-block;
|
||||
border: solid #5D5D5D;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,46 +1,46 @@
|
|||
<article class="download__wrapper">
|
||||
<article class="download__wrapper max-w-screen-lg">
|
||||
<header>
|
||||
<h1 id="download">
|
||||
download now
|
||||
</h1>
|
||||
</header>
|
||||
<section class="download__content">
|
||||
<div class="platform__wrapper">
|
||||
<a class="platform__wrapper" href="https://apps.apple.com/il/app/visual-anatomy-3d-human/id1148048602">
|
||||
<% include /store-icons/ios.svg %>
|
||||
<h2>
|
||||
iOS
|
||||
</h2>
|
||||
<a class="btn btn--store" href="https://apps.apple.com/il/app/visual-anatomy-3d-human/id1148048602">
|
||||
<div class="btn btn--store">
|
||||
go to store
|
||||
</a>
|
||||
</div>
|
||||
<div class="platform__wrapper">
|
||||
</div>
|
||||
</a>
|
||||
<a class="platform__wrapper" href="https://play.google.com/store/apps/details?id=com.graphicvizion.visualAnatomyHumanFr">
|
||||
<% include /store-icons/android.svg %>
|
||||
<h2>
|
||||
Android
|
||||
</h2>
|
||||
<a class="btn btn--store" href="https://play.google.com/store/apps/details?id=com.graphicvizion.visualAnatomyHumanFr">
|
||||
<div class="btn btn--store">
|
||||
go to store
|
||||
</a>
|
||||
</div>
|
||||
<div class="platform__wrapper">
|
||||
</div>
|
||||
</a>
|
||||
<a class="platform__wrapper" href="https://apps.apple.com/il/app/visual-anatomy-3d-human/id1148048602">
|
||||
<% include /store-icons/macos.svg %>
|
||||
<h2>
|
||||
macOS
|
||||
</h2>
|
||||
<a class="btn btn--store" href="https://apps.apple.com/il/app/visual-anatomy-3d-human/id1148048602">
|
||||
<div class="btn btn--store">
|
||||
go to store
|
||||
</a>
|
||||
</div>
|
||||
<div class="platform__wrapper">
|
||||
</div>
|
||||
</a>
|
||||
<a class="platform__wrapper" href="https://www.microsoft.com/en-us/p/visual-anatomy-human-body/9nblggh4qg21">
|
||||
<% include /store-icons/windows.svg %>
|
||||
<h2>
|
||||
Windows
|
||||
</h2>
|
||||
<a class="btn btn--store" href="https://www.microsoft.com/en-us/p/visual-anatomy-human-body/9nblggh4qg21">
|
||||
<div class="btn btn--store">
|
||||
go to store
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
.btn--store {
|
||||
text-align: center;
|
||||
background: orangered;
|
||||
padding: .25rem 1rem;
|
||||
padding: .5rem 1rem;
|
||||
color: white;
|
||||
display: block;
|
||||
border-radius: 999px;
|
||||
|
|
@ -70,6 +70,16 @@
|
|||
border-radius: var(--r-1);
|
||||
background-color: var(--c-bkg);
|
||||
gap: 1rem;
|
||||
border: 0.3rem solid var(--c-bkg);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.platform__wrapper:hover {
|
||||
border: 0.3rem solid orangered;
|
||||
}
|
||||
|
||||
.platform__wrapper:hover .btn--store {
|
||||
background: var(--c-1);
|
||||
}
|
||||
|
||||
.platform__wrapper svg {
|
||||
|
|
|
|||
|
|
@ -3,11 +3,19 @@
|
|||
<video autoplay loop muted class="hero__video" id="video-bg">
|
||||
<!--this id is only used for the toggle function; can be removed if you don't need an event -->
|
||||
<!-- whatever video you put here will be (effectively) cropped to fit container size; make sure you're okay with it shrinking to the top left corner of the video at your specified minimum dimensions -->
|
||||
<source src="https://zippy.gfycat.com/FearfulSoggyFox.webm" type="video/webm" alt="HTML5 background video">
|
||||
<source src="https://zippy.gfycat.com/FearfulSoggyFox.webm" type="video/webm" alt="HTML5 background video">https://thumbs.gfycat.com/EthicalMagnificentHart-mobile.mp4
|
||||
</video>
|
||||
<button class="btn btn--hero">
|
||||
|
||||
</button>
|
||||
<div class="hero__info">
|
||||
<a class="btn btn--hero">
|
||||
download now
|
||||
</a>
|
||||
<div class="platform-list">
|
||||
<% include /store-icons/ios.svg %>
|
||||
<% include /store-icons/android.svg %>
|
||||
<% include /store-icons/macos.svg %>
|
||||
<% include /store-icons/windows.svg %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero__banner">
|
||||
<svg class="banner-edge-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
|
||||
<path id="rect22" style="fill:#ffffff;fill-rule:evenodd;stroke-width:0.116947"
|
||||
|
|
@ -17,7 +25,7 @@
|
|||
<path id="rect22" style="fill:#ffffff;fill-rule:evenodd;stroke-width:0.116947"
|
||||
d="M 9.9999058,0 A 10,10 0 0 1 0,10.000422 h 9.9999058 z" />
|
||||
</svg>
|
||||
<h1 class="h1--hero">muscles, skeleton, organs and blood vessels in 3D</h1>
|
||||
<h1 class="h1--hero">muscles, bones, organs and blood vessels in 3D</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -25,6 +33,8 @@
|
|||
.hero__wrapper {
|
||||
--offset: 8rem;
|
||||
margin-bottom: var(--offset);
|
||||
padding: 0 2rem;
|
||||
--weird-gap: 0.04rem;
|
||||
}
|
||||
|
||||
.hero__video {
|
||||
|
|
@ -37,7 +47,7 @@
|
|||
padding: var(--p-1);
|
||||
position: absolute;
|
||||
bottom: calc(-1 * var(--offset));
|
||||
left: 4rem;
|
||||
left: 6rem;
|
||||
}
|
||||
|
||||
.hero__banner h1 {
|
||||
|
|
@ -46,18 +56,55 @@
|
|||
|
||||
.banner-edge-left {
|
||||
position: absolute;
|
||||
left: calc(-1 * var(--r-1));
|
||||
left: calc(-1 * var(--r-1) + var(--weird-gap));
|
||||
height: var(--r-1);
|
||||
width: var(--r-1);
|
||||
bottom: var(--offset);
|
||||
bottom: calc(var(--offset) - var(--weird-gap));
|
||||
}
|
||||
|
||||
.banner-edge-right {
|
||||
position: absolute;
|
||||
right: calc(-1 * var(--r-1));
|
||||
right: calc(-1 * var(--r-1) + var(--weird-gap));
|
||||
height: var(--r-1);
|
||||
width: var(--r-1);
|
||||
bottom: var(--offset);
|
||||
bottom: calc(var(--offset) - var(--weird-gap));
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.hero__info {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
right: 15%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero__info .platform-list {
|
||||
display: flex;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.hero__info .platform-list svg {
|
||||
height: 1.8rem;
|
||||
width: 1.8rem;
|
||||
}
|
||||
|
||||
.hero__info .platform-list svg path {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.btn--hero {
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
background: var(--c-1);
|
||||
border-radius: 999px;
|
||||
padding: 1.5rem 2rem;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.btn--hero:hover {
|
||||
background: var(--c-bkg);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<article class="info__wrapper">
|
||||
<section>
|
||||
<article class="info__wrapper max-w-screen-lg">
|
||||
<section id="info">
|
||||
<h1>
|
||||
Designed for anatomy students
|
||||
</h1>
|
||||
|
|
@ -36,9 +36,9 @@
|
|||
|
||||
<style>
|
||||
|
||||
.info__wrapper {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
article.info__wrapper {
|
||||
flex-direction: row;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.info__wrapper section {
|
||||
|
|
@ -57,13 +57,30 @@
|
|||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.info__wrapper ul {
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
|
||||
.info__wrapper ul li{
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
list-style-image: url('starsolid.gif');
|
||||
line-height: 1;
|
||||
margin-bottom: 2rem;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info__wrapper ul li::before {
|
||||
content: '';
|
||||
background: url('./assets/images/check.svg');
|
||||
height: 1.8rem;
|
||||
width: 1.8rem;
|
||||
background-size: contain;
|
||||
display: block;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
left: -2.3rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,26 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<title><%= title %></title>
|
||||
<meta
|
||||
name="description"
|
||||
content="<%= (!!locals.description) ? description : site.description %>"
|
||||
/>
|
||||
<meta name="author" content="<%= site.author %>" />
|
||||
<meta property="og:title" content="<%= title %>" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="<%= (!!locals.description) ? description : site.description %>"
|
||||
/>
|
||||
<meta property="og:locale" content="<%= site.locale %>" />
|
||||
<meta property="og:site_name" content="<%= site.site_name %>" />
|
||||
<% if (locals.tags == "posts") { %>
|
||||
<html lang="{{ locale }}" dir="{{ dir }}">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||
<!-- <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> -->
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
|
||||
<!-- Required Core Stylesheet -->
|
||||
<link rel="stylesheet" href="/node_modules/@glidejs/glide/dist/css/glide.core.css">
|
||||
|
||||
<!-- Optional Theme Stylesheet -->
|
||||
<link rel="stylesheet" href="/node_modules/@glidejs/glide/dist/css/glide.theme.css">
|
||||
|
||||
<title>
|
||||
<%= site.title %>
|
||||
</title>
|
||||
<meta name="description" content="<%= (!!locals.description) ? description : site.description %>" />
|
||||
<meta name="author" content="<%= site.author %>" />
|
||||
<meta property="og:title" content="<%= site.title %>" />
|
||||
<meta property="og:description" content="<%= (!!locals.description) ? description : site.description %>" />
|
||||
<meta property="og:locale" content="<%= site.locale %>" />
|
||||
<meta property="og:site_name" content="<%= site.site_name %>" />
|
||||
<% if (locals.tags=="posts" ) { %>
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="article:published_time" content="<%= date.toISOString() %>" />
|
||||
<script type="application/ld+json">
|
||||
|
|
@ -37,7 +41,7 @@
|
|||
},
|
||||
"name": "<%= site.author %>"
|
||||
},
|
||||
"headline": "<%= title %>",
|
||||
"headline": "<%= site.title %>",
|
||||
"datePublished": "<%= date.toISOString() %>",
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
|
|
@ -46,31 +50,36 @@
|
|||
"@context": "http://schema.org"
|
||||
}
|
||||
</script>
|
||||
<% } %><%- include('webpack.ejs') %> <% if (page.url == "/") { %>
|
||||
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
|
||||
<script>
|
||||
if (window.netlifyIdentity) {
|
||||
window.netlifyIdentity.on('init', (user) => {
|
||||
if (!user) {
|
||||
window.netlifyIdentity.on('login', () => {
|
||||
document.location.href = '/admin/';
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<% } %>
|
||||
</head>
|
||||
<%- include('webpack.ejs') %>
|
||||
<% if (page.url=="/" ) { %>
|
||||
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
|
||||
<script>
|
||||
if (window.netlifyIdentity) {
|
||||
window.netlifyIdentity.on('init', (user) => {
|
||||
if (!user) {
|
||||
window.netlifyIdentity.on('login', () => {
|
||||
document.location.href = '/admin/';
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<% } %>
|
||||
</head>
|
||||
|
||||
<body class="antialiased w-full text-gray-700">
|
||||
<div class="max-w-screen-lg mx-auto">
|
||||
<div class="">
|
||||
<header class="site-header ">
|
||||
<img src="<%= `${site.url}/assets/images/logo.png` %>" alt="">
|
||||
<h1 class="site-title font-semibold text-3xl text-gray-800"><%= site.title %></h1>
|
||||
<!-- <div class="text-xl"><%= site.description %></div> -->
|
||||
</header>
|
||||
<!-- <nav>
|
||||
<body class="">
|
||||
<div id="page" class="max-w-screen-lg mx-auto">
|
||||
<header class="site-header ">
|
||||
<img class="site-logo" src="<%= `./assets/images/logo.png` %>" alt="">
|
||||
<h1 class="site-title font-semibold text-3xl text-gray-800">
|
||||
<%= site.title %>
|
||||
</h1>
|
||||
<!-- <div class="text-xl"><%= site.description %></div> -->
|
||||
</header>
|
||||
<!-- <div class="">
|
||||
header was here
|
||||
<nav>
|
||||
<ul class="flex flex-wrap text-xl">
|
||||
<li class="mr-6">
|
||||
<a class="text-gray-700 border-none hover:no-underline hover:text-gray-800" href="/"
|
||||
|
|
@ -86,35 +95,100 @@
|
|||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav> -->
|
||||
</div>
|
||||
|
||||
<div class="text-xl py-4"><%- content %></div>
|
||||
</nav>
|
||||
</div> -->
|
||||
|
||||
<main class="page-content">
|
||||
<%- content %>
|
||||
</main>
|
||||
|
||||
<footer class="text-center">
|
||||
Made with <span role="img" aria-label="Love">♥</span> by
|
||||
<a href="https://creativedesignsguru.com">CreativeDesignsGuru</a>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
window.onload = setScrollbarVariable;
|
||||
window.onresize = setScrollbarVariable;
|
||||
|
||||
function setScrollbarVariable() {
|
||||
const scrollbarWidth = window.innerWidth - document.body.clientWidth;
|
||||
document.documentElement.style.setProperty("--scrollbarWidth", `${scrollbarWidth}px`);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<!-- <script src="https://unpkg.com/@glidejs/glide@3.3.0/dist/glide.js"></script> -->
|
||||
<script src="/node_modules/@glidejs/glide/dist/glide.min.js"></script>
|
||||
<!-- <script src="/node_modules/@glidejs/glide/dist/glide.modular.esm.js"></script> -->
|
||||
<!-- <script src="/js/eleventy.js" type="module" async></script> -->
|
||||
|
||||
<script>
|
||||
new Glide('.glide').mount({
|
||||
type: 'carousel',
|
||||
startAt: 0,
|
||||
perView: 1,
|
||||
autoplay: 1000,
|
||||
bound: true,
|
||||
rewind: false
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
<div class="border-t border-gray-300 text-center py-8">
|
||||
Made with <span role="img" aria-label="Love">♥</span> by
|
||||
<a href="https://creativedesignsguru.com">CreativeDesignsGuru</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
<style>
|
||||
.site-header{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.site-logo {
|
||||
height: 5rem;
|
||||
transform: rotateZ(4deg) translateY(0.4rem);
|
||||
transition: 0.2s all;
|
||||
border: 3px solid var(--c-1);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-family: Bebas Neue;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 52.72px;
|
||||
line-height: 63px;
|
||||
letter-spacing: 0.24em;
|
||||
text-transform: uppercase;
|
||||
width: auto;
|
||||
}
|
||||
.site-logo:hover {
|
||||
transform: rotateZ(0deg) translateY(0.4rem);
|
||||
}
|
||||
|
||||
.site-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-family: Bebas Neue;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.24em;
|
||||
text-transform: uppercase;
|
||||
width: auto;
|
||||
margin: 3rem 0 0 0;
|
||||
}
|
||||
|
||||
#page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
background: black;
|
||||
width: var(--viewportWidth);
|
||||
margin-top: 2rem;
|
||||
padding: 4rem 2rem 6rem 2rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,7 +4,7 @@ layout: layouts/base.ejs
|
|||
|
||||
<article>
|
||||
<header>
|
||||
<h1 class="text-center font-bold text-3xl text-gray-800"><%= title %></h1>
|
||||
<h1 class="text-center font-bold text-3xl text-gray-800"><%= site.title %></h1>
|
||||
<div class="text-center text-sm mb-8">
|
||||
<%= this.dateFns.format(new Date(date), 'LLLL d, yyyy') %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<ul>
|
||||
<% sections.forEach((link)=> { %>
|
||||
<li class="">
|
||||
<a href="#<%= link.slug %>">
|
||||
<a class="nav-link" href="#<%= link.slug %>">
|
||||
<%= link.name %>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -27,6 +27,8 @@
|
|||
background: var(--c-bkg);
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
--weird-gap: 0.04rem;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
|
|
@ -37,23 +39,51 @@
|
|||
|
||||
nav ul li {
|
||||
white-space: nowrap;
|
||||
font-family: Nunito, sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.nav-edge-left {
|
||||
position: absolute;
|
||||
left: calc(-1 * var(--r-1));
|
||||
left: calc(-1 * var(--r-1) + var(--weird-gap));
|
||||
height: var(--r-1);
|
||||
width: var(--r-1);
|
||||
top: 0;
|
||||
top: calc(-1 * var(--weird-gap));
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
|
||||
.nav-edge-right {
|
||||
position: absolute;
|
||||
right: calc(-1 * var(--r-1));
|
||||
right: calc(-1 * var(--r-1) + var(--weird-gap));
|
||||
height: var(--r-1);
|
||||
width: var(--r-1);
|
||||
top: 0;
|
||||
top: calc(-1 * var(--weird-gap));
|
||||
transform: scaleX(-1) scaleY(-1);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
transition: all 0.15s ease-out;
|
||||
color: black;
|
||||
}
|
||||
.nav-link:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: var(--c-1);
|
||||
visibility: hidden;
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
-webkit-transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s;
|
||||
transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s;
|
||||
}
|
||||
.nav-link:hover:before {
|
||||
visibility: visible;
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,23 +1,23 @@
|
|||
<article class="pricing__wrapper">
|
||||
<article class="pricing__wrapper max-w-screen-lg">
|
||||
<header>
|
||||
<h1 id="pricing">
|
||||
flexible pricing options
|
||||
</h1>
|
||||
</header>
|
||||
<section class="pricing__content">
|
||||
<div class="level__wrapper level-wrapper--trial">
|
||||
<div class="level__wrapper level-wrapper--heading">
|
||||
<header>
|
||||
<h2>
|
||||
|
||||
|
||||
<span>
|
||||
|
||||
</span>
|
||||
</h2>
|
||||
<span>
|
||||
|
||||
</span>
|
||||
</header>
|
||||
<div class="level__content">
|
||||
<div class="level__price-wrapper">
|
||||
<h2 class="level__price">
|
||||
|
||||
|
||||
</h2>
|
||||
<span>
|
||||
|
||||
|
|
@ -26,9 +26,9 @@
|
|||
<ul>
|
||||
<% systems.forEach((system)=> { %>
|
||||
<li class="">
|
||||
<%= system.name %>
|
||||
<%= system.name %>
|
||||
</li>
|
||||
<% }) %>
|
||||
<% }) %>
|
||||
</ul>
|
||||
</div>
|
||||
<div></div>
|
||||
|
|
@ -37,94 +37,116 @@
|
|||
<header>
|
||||
<h2>
|
||||
starter
|
||||
<span>
|
||||
limited
|
||||
</span>
|
||||
</h2>
|
||||
<span>
|
||||
limited
|
||||
</span>
|
||||
</header>
|
||||
<div class="level__content">
|
||||
<div class="level__price-wrapper">
|
||||
<h2 class="level__price">
|
||||
free
|
||||
<span>
|
||||
with paid add-ons
|
||||
</span>
|
||||
</h2>
|
||||
<span>
|
||||
purchase advanced systems separately
|
||||
</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li>2 systems included</li>
|
||||
<li>purchase advanced systems separately</li>
|
||||
<li>✔</li>
|
||||
<li>✔</li>
|
||||
<li>✖<span>(in-app purchase)</span></li>
|
||||
<li>✖<span>(in-app purchase)</span></li>
|
||||
<li>✖<span>(in-app purchase)</span></li>
|
||||
<li>✖<span>(in-app purchase)</span></li>
|
||||
<li>✖<span>(in-app purchase)</span></li>
|
||||
<!-- <li>2 systems included</li>
|
||||
<li>purchase advanced systems separately</li> -->
|
||||
<% systems.forEach((system)=> { %>
|
||||
|
||||
<% if (system.status==='free' ) { %>
|
||||
|
||||
<li>✔</li>
|
||||
|
||||
<% } else if (system.status==='pro' ) { %>
|
||||
|
||||
<li>✖<span>(in-app purchase)</span></li>
|
||||
|
||||
<% } else if (system.status==='soon' ) { %>
|
||||
|
||||
<li><span>(coming soon)</span></li>
|
||||
|
||||
<% } %>
|
||||
|
||||
<% }) %>
|
||||
</ul>
|
||||
</div>
|
||||
<a class="btn btn--level" href="#download">
|
||||
download now
|
||||
download
|
||||
</a>
|
||||
</div>
|
||||
<div class="level__wrapper">
|
||||
<div class="level__wrapper level__wrapper--disabled">
|
||||
<header>
|
||||
<h2>
|
||||
monthly
|
||||
<span>
|
||||
subscription
|
||||
</span>
|
||||
</h2>
|
||||
<span>
|
||||
subscription
|
||||
</span>
|
||||
</header>
|
||||
<div class="level__content">
|
||||
<div class="level__price-wrapper">
|
||||
<h2 class="level__price">
|
||||
$9.95
|
||||
</h2>
|
||||
<span>
|
||||
paid monthly
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
<ul>
|
||||
<li>✔</li>
|
||||
<li>✔</li>
|
||||
<li>✔</li>
|
||||
<li>✔</li>
|
||||
<li>✔</li>
|
||||
<li>✔</li>
|
||||
<li>✔</li>
|
||||
<% systems.forEach((system)=> { %>
|
||||
|
||||
<% if (system.status==='pro' || system.status==='free' ) { %>
|
||||
|
||||
<li>✔</li>
|
||||
|
||||
<% } else if (system.status==='soon' ) { %>
|
||||
|
||||
<li><span>(coming soon)</span></li>
|
||||
|
||||
<% } %>
|
||||
|
||||
<% }) %>
|
||||
</ul>
|
||||
</div>
|
||||
<a class="btn btn--level btn--disabled">
|
||||
coming soon
|
||||
</a>
|
||||
</div>
|
||||
<div class="level__wrapper">
|
||||
<div class="level__wrapper level__wrapper--disabled">
|
||||
<header>
|
||||
<h2>
|
||||
yearly
|
||||
<span>
|
||||
subscription
|
||||
</span>
|
||||
</h2>
|
||||
<span>
|
||||
subscription
|
||||
</span>
|
||||
</header>
|
||||
<div class="level__content">
|
||||
<div class="level__price-wrapper">
|
||||
<h2 class="level__price">
|
||||
$3.95
|
||||
</h2>
|
||||
<span>
|
||||
paid monthly
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
<ul>
|
||||
<li>✔</li>
|
||||
<li>✔</li>
|
||||
<li>✔</li>
|
||||
<li>✔</li>
|
||||
<li>✔</li>
|
||||
<li>✔</li>
|
||||
<li>✔</li>
|
||||
<% systems.forEach((system)=> { %>
|
||||
|
||||
<% if (system.status==='pro' || system.status==='free' ) { %>
|
||||
|
||||
<li>✔</li>
|
||||
|
||||
<% } else if (system.status==='soon' ) { %>
|
||||
|
||||
<li><span class="">(coming soon)</span></li>
|
||||
|
||||
<% } %>
|
||||
|
||||
<% }) %>
|
||||
</ul>
|
||||
</div>
|
||||
<a class="btn btn--level btn--disabled">
|
||||
|
|
@ -135,32 +157,38 @@
|
|||
<header>
|
||||
<h2>
|
||||
lifetime
|
||||
<span>
|
||||
|
||||
</span>
|
||||
</h2>
|
||||
<span>
|
||||
|
||||
</span>
|
||||
</header>
|
||||
<div class="level__content">
|
||||
<div class="level__price-wrapper">
|
||||
<h2 class="level__price">
|
||||
$39.95
|
||||
</h2>
|
||||
<span>
|
||||
one time fee
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
<ul>
|
||||
<li>✔</li>
|
||||
<li>✔</li>
|
||||
<li>✔</li>
|
||||
<li>✔</li>
|
||||
<li>✔</li>
|
||||
<li>✔</li>
|
||||
<li>✔</li>
|
||||
<% systems.forEach((system)=> { %>
|
||||
|
||||
<% if (system.status==='pro' || system.status==='free' ) { %>
|
||||
|
||||
<li>✔</li>
|
||||
|
||||
<% } else if (system.status==='soon' ) { %>
|
||||
|
||||
<li><span>(coming soon)</span></li>
|
||||
|
||||
<% } %>
|
||||
|
||||
<% }) %>
|
||||
</ul>
|
||||
</div>
|
||||
<a class="btn btn--level" href="#download">
|
||||
download now
|
||||
download
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -175,52 +203,122 @@
|
|||
|
||||
.level__wrapper {
|
||||
display: grid;
|
||||
grid-template-rows: 3rem auto auto;
|
||||
grid-template-rows: 3rem auto 2.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.level__wrapper--disabled {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.level__wrapper header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.level__wrapper header span {
|
||||
font-size: 0.75rem;
|
||||
color: white;
|
||||
font-family: Nunito, sans-serif;
|
||||
}
|
||||
|
||||
.level__wrapper header h2 {
|
||||
color: var(--c-bkg);
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.level__content {
|
||||
border-radius: var(--r-1);
|
||||
background: var(--c-bkg);
|
||||
padding: 2rem 1rem;
|
||||
display: grid;
|
||||
grid-template-rows: 3rem auto;
|
||||
}
|
||||
|
||||
.level__price-wrapper h2 {
|
||||
.level__content ul {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(10, 3rem);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.level__content li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
line-height: 1;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.level__content li span {
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
.level__price-wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.level__wrapper span {
|
||||
.level__price-wrapper h2 {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.level__price-wrapper span {
|
||||
font-size: 0.75rem;
|
||||
font-family: Nunito, sans-serif;
|
||||
}
|
||||
|
||||
.level__wrapper .note {
|
||||
color: var(--c-bkg);
|
||||
}
|
||||
|
||||
.level-wrapper--heading .level__content {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.level-wrapper--heading ul {
|
||||
justify-items: start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.level-wrapper--heading ul li {
|
||||
color: black;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.level-wrapper--trial .level__content {
|
||||
background: #DBDBDB;
|
||||
}
|
||||
|
||||
.btn--level {
|
||||
text-align: center;
|
||||
background: orangered;
|
||||
padding: .25rem 1rem;
|
||||
color: white;
|
||||
display: block;
|
||||
border-radius: 999px;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.level__wrapper--trial .note {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.btn--disabled {
|
||||
background: var(--c-bkg);
|
||||
color: var(--c-1);
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.btn--level {
|
||||
text-align: center;
|
||||
background: orangered;
|
||||
color: white;
|
||||
display: block;
|
||||
border-radius: 999px;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.btn--level:hover {
|
||||
background: var(--c-bkg);
|
||||
color: var(--c-1);
|
||||
}
|
||||
|
||||
.btn--disabled {
|
||||
background: var(--c-bkg);
|
||||
color: black;
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
|
||||
.reviews-wrapper blockquote {
|
||||
font-family: 'DM Serif Display', serif;
|
||||
font-size: 59px;
|
||||
font-size: 3.4rem;
|
||||
line-height: .9;
|
||||
margin: 0 2rem;
|
||||
}
|
||||
|
|
@ -64,9 +64,16 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.review__name {
|
||||
align-self: flex-end;
|
||||
}
|
||||
.review__name {
|
||||
align-self: flex-end;
|
||||
margin-right: 6rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.review__name::before {
|
||||
content: '⁓ ';
|
||||
|
||||
}
|
||||
|
||||
.rating {
|
||||
border: none;
|
||||
|
|
@ -74,7 +81,7 @@
|
|||
}
|
||||
|
||||
.rating>label:before {
|
||||
margin: 5px;
|
||||
margin: 0.3rem;
|
||||
font-size: 1.25em;
|
||||
font-family: FontAwesome;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -1,322 +1,33 @@
|
|||
<article class="screenshots__wrapper">
|
||||
<header>
|
||||
<h1 id="screenshots">
|
||||
Hi-res imagery everywhere you need it
|
||||
</h1>
|
||||
<aside>
|
||||
Visual Anatomy 3d runs portrait and landscape, on all your devices.
|
||||
</aside>
|
||||
</header>
|
||||
<!-- <img src="assets/images/posts/error.png" alt="">
|
||||
<img src="assets/images/posts/error2.png" alt="">
|
||||
<img src="assets/images/posts/1.png" alt="">
|
||||
<img src="assets/images/posts/2.png" alt=""> -->
|
||||
<!-- <img src="assets/images/screenshots/Simulator Screen Shot - iPhone 12 Pro Max - 2021-10-14 at 14.37.14.png" alt="">
|
||||
<img src="assets/images/posts/1.png" alt="">
|
||||
<img src="assets/images/screenshots/1.png" alt="">
|
||||
<img src="assets/images/screenshots/mu.png" alt=""> -->
|
||||
<div class="test-images">
|
||||
<!-- <% collections.screenshots.forEach((screenshot, index)=> { %>
|
||||
<%= screenshot.replace('src/','') %>
|
||||
<img style="width:50px;" src="<%= screenshot.replace('src/','') %>" alt="">
|
||||
<% }) %> -->
|
||||
</div>
|
||||
<section class="carousel" aria-label="Gallery">
|
||||
<ol class="carousel__viewport">
|
||||
<% collections.screenshots.forEach((screenshot, index)=> { %>
|
||||
<li id="carousel__slide<%= index %>" tabindex="0" class="carousel__slide" style="background-image: url(<%= screenshot.replace('src/','') %>);">
|
||||
<div class="carousel__snapper">
|
||||
<!-- <label for="">
|
||||
<%= screenshot.replace('src/','') %>
|
||||
</label> -->
|
||||
<a href="#carousel__slide<%= (index == 0) ? collections.screenshots.length - 1 : index - 1 %>" class="carousel__prev">Go to last slide</a>
|
||||
<a href="#carousel__slide<%= index + 1 %>" class="carousel__next">Go to next slide</a>
|
||||
</div>
|
||||
</li>
|
||||
<% }) %>
|
||||
<!--
|
||||
<li id="carousel__slide1" tabindex="0" class="carousel__slide">
|
||||
<div class="carousel__snapper">
|
||||
<a href="#carousel__slide4" class="carousel__prev">Go to last slide</a>
|
||||
<a href="#carousel__slide2" class="carousel__next">Go to next slide</a>
|
||||
</div>
|
||||
</li>
|
||||
<li id="carousel__slide2" tabindex="0" class="carousel__slide">
|
||||
<div class="carousel__snapper"></div>
|
||||
<a href="#carousel__slide1" class="carousel__prev">Go to previous slide</a>
|
||||
<a href="#carousel__slide3" class="carousel__next">Go to next slide</a>
|
||||
</li>
|
||||
<li id="carousel__slide3" tabindex="0" class="carousel__slide">
|
||||
<div class="carousel__snapper"></div>
|
||||
<a href="#carousel__slide2" class="carousel__prev">Go to previous slide</a>
|
||||
<a href="#carousel__slide4" class="carousel__next">Go to next slide</a>
|
||||
</li>
|
||||
<li id="carousel__slide4" tabindex="0" class="carousel__slide">
|
||||
<div class="carousel__snapper"></div>
|
||||
<a href="#carousel__slide3" class="carousel__prev">Go to previous slide</a>
|
||||
<a href="#carousel__slide1" class="carousel__next">Go to first slide</a>
|
||||
</li>
|
||||
-->
|
||||
</ol>
|
||||
<aside class="carousel__navigation">
|
||||
<ol class="carousel__navigation-list">
|
||||
<% collections.screenshots.forEach((screenshot, index)=> { %>
|
||||
<li class="carousel__navigation-item">
|
||||
<a href="#carousel__slide<%= index %>" class="carousel__navigation-button">Go to slide 1</a>
|
||||
</li>
|
||||
<% }) %>
|
||||
</ol>
|
||||
<h1 id="screenshots">
|
||||
Hi-res imagery everywhere you need it
|
||||
</h1>
|
||||
<aside>
|
||||
Visual Anatomy 3d runs portrait and landscape, on all your devices.
|
||||
</aside>
|
||||
</header>
|
||||
<section>
|
||||
<div class="glide">
|
||||
<div data-glide-el="track" class="glide__track">
|
||||
<ul class="glide__slides">
|
||||
<% collections.screenshots.forEach((screenshot, index)=> { %>
|
||||
<li class="glide__slide">
|
||||
<img width="300" src="<%= screenshot %>" alt="">
|
||||
</li>
|
||||
<% }) %>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
@keyframes tonext {
|
||||
75% {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
95% {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
98% {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
99% {
|
||||
left: 0;
|
||||
}
|
||||
.glide__slide {
|
||||
max-width: 10rem;
|
||||
}
|
||||
|
||||
@keyframes tostart {
|
||||
75% {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
95% {
|
||||
left: -300%;
|
||||
}
|
||||
|
||||
98% {
|
||||
left: -300%;
|
||||
}
|
||||
|
||||
99% {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes snap {
|
||||
96% {
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
|
||||
97% {
|
||||
scroll-snap-align: none;
|
||||
}
|
||||
|
||||
99% {
|
||||
scroll-snap-align: none;
|
||||
}
|
||||
|
||||
100% {
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.test-images {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: .5rem;
|
||||
}
|
||||
|
||||
/* body {
|
||||
max-width: 37.5rem;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.25rem;
|
||||
font-family: 'Lato', sans-serif;
|
||||
} */
|
||||
|
||||
.carousel * {
|
||||
box-sizing: border-box;
|
||||
scrollbar-color: transparent transparent;
|
||||
/* thumb and track color */
|
||||
scrollbar-width: 0px;
|
||||
}
|
||||
|
||||
.carousel *::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.carousel *::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.carousel *::-webkit-scrollbar-thumb {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.carousel * {
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.carousel ol,
|
||||
.carousel li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
position: relative;
|
||||
padding-top: 75%;
|
||||
filter: drop-shadow(0 0 10px #0003);
|
||||
perspective: 100px;
|
||||
}
|
||||
|
||||
.carousel__viewport {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
overflow-x: scroll;
|
||||
counter-reset: item;
|
||||
scroll-behavior: smooth;
|
||||
scroll-snap-type: x mandatory;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.carousel__slide {
|
||||
position: relative;
|
||||
flex: 0 0 25%;
|
||||
width: 25%;
|
||||
background-color: #f99;
|
||||
counter-increment: item;
|
||||
border-radius: var(--r-1);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.carousel__slide:nth-child(even) {
|
||||
background-color: #99f;
|
||||
}
|
||||
|
||||
.carousel__slide:before {
|
||||
/* content: counter(item); */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -40%, 70px);
|
||||
color: #fff;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.carousel__snapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.carousel__snapper {
|
||||
animation-name: tonext, snap;
|
||||
animation-timing-function: ease;
|
||||
animation-duration: 4s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.carousel__slide:last-child .carousel__snapper {
|
||||
animation-name: tostart, snap;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.carousel__snapper {
|
||||
animation-name: none;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel:hover .carousel__snapper,
|
||||
.carousel:focus-within .carousel__snapper {
|
||||
animation-name: none;
|
||||
}
|
||||
|
||||
.carousel__navigation {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.carousel__navigation-list,
|
||||
.carousel__navigation-item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.carousel__navigation-button {
|
||||
display: inline-block;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
background-color: #333;
|
||||
background-clip: content-box;
|
||||
border: 0.25rem solid transparent;
|
||||
border-radius: 50%;
|
||||
font-size: 0;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
|
||||
.carousel::before,
|
||||
.carousel::after,
|
||||
.carousel__prev,
|
||||
.carousel__next {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
margin-top: 37.5%;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 50%;
|
||||
font-size: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.carousel::before,
|
||||
.carousel__prev {
|
||||
left: -1rem;
|
||||
}
|
||||
|
||||
.carousel::after,
|
||||
.carousel__next {
|
||||
right: -1rem;
|
||||
}
|
||||
|
||||
.carousel::before,
|
||||
.carousel::after {
|
||||
content: '';
|
||||
z-index: 1;
|
||||
background-color: #333;
|
||||
background-size: 1.5rem 1.5rem;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
color: #fff;
|
||||
font-size: 2.5rem;
|
||||
line-height: 4rem;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.carousel::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.carousel::after {
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
|
||||
.glide__slide img {
|
||||
border-radius: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<article class="system__wrapper">
|
||||
<header>
|
||||
<h1>
|
||||
<h1 id="systems">
|
||||
6 detailed body systems
|
||||
</h1>
|
||||
<aside>
|
||||
|
|
@ -49,6 +49,29 @@
|
|||
|
||||
<style>
|
||||
|
||||
.system__wrapper section {
|
||||
display: grid;
|
||||
grid-template-columns: 40rem auto;
|
||||
}
|
||||
|
||||
.system__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.system__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.system__list li {
|
||||
aspect-ratio: 1;
|
||||
height: 9rem;
|
||||
background: var(--c-1);
|
||||
border-radius: var(--r-1);
|
||||
}
|
||||
|
||||
.system__zoom-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -71,9 +94,4 @@ li.system--soon {
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.system__wrapper section {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
}
|
||||
|
||||
</style>
|
||||
10
src/assets/images/check.svg
Normal file
10
src/assets/images/check.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="28" height="29" viewBox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_51:52)">
|
||||
<path d="M28.0029 14.3048C28.0029 18.0987 26.5278 21.7372 23.902 24.4198C21.2762 27.1025 17.7149 28.6096 14.0014 28.6096C10.288 28.6096 6.72671 27.1025 4.10093 24.4198C1.47515 21.7372 0 18.0987 0 14.3048C0 10.5109 1.47515 6.87245 4.10093 4.18978C6.72671 1.50711 10.288 0 14.0014 0C17.7149 0 21.2762 1.50711 23.902 4.18978C26.5278 6.87245 28.0029 10.5109 28.0029 14.3048V14.3048ZM21.0547 8.88686C20.9297 8.75958 20.7808 8.65937 20.617 8.59221C20.4532 8.52505 20.2779 8.49233 20.1014 8.49601C19.9249 8.49968 19.751 8.53967 19.59 8.61358C19.4291 8.6875 19.2843 8.79383 19.1645 8.9262L13.0861 16.8385L9.42298 13.0943C9.17414 12.8574 8.84503 12.7284 8.50497 12.7345C8.1649 12.7407 7.84045 12.8814 7.59995 13.1271C7.35945 13.3728 7.22169 13.7043 7.21569 14.0518C7.20969 14.3992 7.33592 14.7354 7.56778 14.9897L12.1988 19.7228C12.3235 19.85 12.4721 19.9502 12.6356 20.0175C12.7991 20.0848 12.9742 20.1178 13.1504 20.1145C13.3267 20.1111 13.5004 20.0715 13.6614 19.9981C13.8223 19.9247 13.9672 19.8189 14.0872 19.687L21.0739 10.7644C21.3121 10.5114 21.4437 10.173 21.4404 9.82196C21.4372 9.47093 21.2993 9.1352 21.0564 8.88686H21.0547Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_51:52">
|
||||
<rect width="28" height="29" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/assets/images/favicon.png
Normal file
BIN
src/assets/images/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 550 KiB After Width: | Height: | Size: 550 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 522 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
|
|
@ -119,24 +119,72 @@ a:hover {
|
|||
html {
|
||||
font-size: 2vmin;
|
||||
scroll-behavior: smooth;
|
||||
color: black;
|
||||
font-family: Nunito, sans-serif;
|
||||
}
|
||||
|
||||
/* html, body, #page {
|
||||
width: 100vw;
|
||||
} */
|
||||
|
||||
/* html{
|
||||
outline: 1px solid red;
|
||||
outline-offset: -10px;
|
||||
}
|
||||
body{
|
||||
outline: 1px solid orange;
|
||||
outline-offset: -10px;
|
||||
}
|
||||
#page{
|
||||
outline: 1px solid blue;
|
||||
outline-offset: -10px;
|
||||
} */
|
||||
|
||||
:root{
|
||||
--r-1: 2rem;
|
||||
--p-1: 1.5rem;
|
||||
--c-bkg: white;
|
||||
--c-1: #00C2FF;
|
||||
--c-2: black;
|
||||
--viewportWidth: calc(100vw - var(--scrollbarWidth));
|
||||
}
|
||||
|
||||
.btn {
|
||||
transition: all 0.2s;
|
||||
font-family: Nunito, sans-serif;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a:hover, .btn:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
article {
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
width: min(60rem, var(--viewportWidth));
|
||||
}
|
||||
|
||||
article > header {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
article > header > aside {
|
||||
|
||||
}
|
||||
|
||||
.inset {
|
||||
background: var(--c-1);
|
||||
padding: 4rem 0;
|
||||
position: relative;
|
||||
width: var(--viewportWidth);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.inset::before {
|
||||
|
|
@ -161,13 +209,18 @@ article {
|
|||
background: var(--c-bkg);
|
||||
}
|
||||
|
||||
.inset > article {
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: Bebas Neue;
|
||||
font-size: 3.5rem;
|
||||
color: var(--c-2);
|
||||
line-height: 0.77;
|
||||
width: 17ch;
|
||||
margin-bottom: 1rem;
|
||||
/* for scrolling */
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
h1.h1--hero {
|
||||
|
|
@ -192,22 +245,4 @@ h2 {
|
|||
.blurb__wrapper {
|
||||
border-radius: var(--radius);
|
||||
background: var(--c-bkg);
|
||||
}
|
||||
|
||||
.system__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.system__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.system__list li {
|
||||
aspect-ratio: 1;
|
||||
height: 5rem;
|
||||
background: var(--c-1);
|
||||
border-radius: var(--r-1);
|
||||
}
|
||||
4
src/en-US/en-US.json
Normal file
4
src/en-US/en-US.json
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"dir": "ltr",
|
||||
"locale": "en-US"
|
||||
}
|
||||
5
src/en-US/index.ejs
Normal file
5
src/en-US/index.ejs
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: layouts/base.ejs
|
||||
---
|
||||
|
||||
hello
|
||||
8
src/js/eleventy-js.njk.stop
Normal file
8
src/js/eleventy-js.njk.stop
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
permalink: js/eleventy.js
|
||||
eleventyExcludeFromCollections: true
|
||||
---
|
||||
{% set js %}
|
||||
<!-- {% include "../../node_modules/@glidejs/glide/dist/glide.min.js" %} -->
|
||||
{% endset %}
|
||||
{{ js | jsmin | safe }}
|
||||
4
src/nl-NL/nl-NL.json
Normal file
4
src/nl-NL/nl-NL.json
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"dir": "ltr",
|
||||
"locale": "nl-NL"
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
|
|||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
|
||||
// not sure why this 'entries' is post-specific; tried adding other paths and they failed;
|
||||
const entries = glob.sync(path.resolve(__dirname, 'src/assets/images/posts/*.{png,gif,jpg,jpeg}'));
|
||||
entries.push(path.resolve(__dirname, 'src/assets/styles/main.css'));
|
||||
|
||||
|
|
@ -46,12 +47,24 @@ module.exports = {
|
|||
{
|
||||
test: /\.(gif|png|jpg|jpeg)$/i,
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: 'images/[name].[ext]',
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: 'images/screenshots/[name].[ext]',
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: 'images/systems/[name].[ext]',
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'image-webpack-loader',
|
||||
options: {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<%= htmlWebpackPlugin.files.css.map((css) => `<link
|
||||
href="/assets${css}"
|
||||
href="./assets${css}"
|
||||
rel="stylesheet"
|
||||
/>`).join('') %>
|
||||
<!-- needed to add ./ the href, or else the path was wrong on production -->
|
||||
Loading…
Reference in a new issue