diff --git a/.eleventy.js b/.eleventy.js index 0c9b376..a5e004d 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,50 +1,50 @@ -const fs = require('fs') -const postcss = require('postcss') -const postcssImportExtGlob = require('postcss-import-ext-glob') -const postcssImport = require('postcss-import') -const postcssPresetEnv = require('postcss-preset-env') -const cssnano = require('cssnano') -// const esbuild = require('esbuild') -const automaticNoopener = require('eleventy-plugin-automatic-noopener') +const fs = require("fs"); +const postcss = require("postcss"); +const postcssImportExtGlob = require("postcss-import-ext-glob"); +const postcssImport = require("postcss-import"); +const postcssPresetEnv = require("postcss-preset-env"); +const cssnano = require("cssnano"); +const esbuild = require("esbuild"); +const automaticNoopener = require("eleventy-plugin-automatic-noopener"); -module.exports = function (eleventyConfig) { - eleventyConfig.on('eleventy.before', async () => { - const cssSrc = './src/style/style.css' - const cssDest = './dist/style.css' +module.exports = function(eleventyConfig) { + eleventyConfig.on("eleventy.before", async () => { + const cssSrc = "./src/style/style.css"; + const cssDest = "./dist/style.css"; - fs.readFile(cssSrc, (err, css) => { - // noinspection JSCheckFunctionSignatures - postcss([ - postcssImportExtGlob, - postcssImport, - postcssPresetEnv, - cssnano - ]) - .process(css, {from: cssSrc, to: cssDest}) - .then(res => { - fs.writeFile(cssDest, res.css, () => true) - }) - }) + fs.readFile(cssSrc, (err, css) => { + // noinspection JSCheckFunctionSignatures + postcss([ + postcssImportExtGlob, + postcssImport, + postcssPresetEnv, + cssnano + ]) + .process(css, { from: cssSrc, to: cssDest }) + .then(res => { + fs.writeFile(cssDest, res.css, () => true); + }); + }); - // await esbuild.build({ - // entryPoints: ['src/js/main.js'], - // bundle: true, - // minify: true, - // target: 'es2020', - // outfile: 'dist/main.js', - // }) - // .then(() => console.log('🧳 esbuild done')) - // .catch(() => process.exit(1)) + await esbuild.build({ + entryPoints: ["src/js/main.js"], + bundle: true, + minify: true, + target: "es2020", + outfile: "dist/main.js" }) + .then(() => console.log("🧳 esbuild done")) + .catch(() => process.exit(1)); + }); - eleventyConfig.addWatchTarget('./src/style/') - eleventyConfig.addWatchTarget('./src/js/') + eleventyConfig.addWatchTarget("./src/style/"); + eleventyConfig.addWatchTarget("./src/js/"); - eleventyConfig.addPlugin(automaticNoopener, { - noreferrer: true, - }) + eleventyConfig.addPlugin(automaticNoopener, { + noreferrer: true + }); - eleventyConfig.addPassthroughCopy('./src/img/') + eleventyConfig.addPassthroughCopy("./src/img/"); - return {dir: {input: 'src', output: 'dist'}} -} \ No newline at end of file + return { dir: { input: "src", output: "dist" } }; +}; \ No newline at end of file diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json index 6814621..b957013 100644 --- a/node_modules/.package-lock.json +++ b/node_modules/.package-lock.json @@ -1392,6 +1392,19 @@ "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==", "dev": true }, + "node_modules/@vue/reactivity": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz", + "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==", + "dependencies": { + "@vue/shared": "3.1.5" + } + }, + "node_modules/@vue/shared": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz", + "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==" + }, "node_modules/a-sync-waterfall": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz", @@ -1426,6 +1439,14 @@ "url": "https://github.com/sponsors/epoberezkin" } }, + "node_modules/alpinejs": { + "version": "3.13.3", + "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.13.3.tgz", + "integrity": "sha512-WZ6WQjkAOl+WdW/jukzNHq9zHFDNKmkk/x6WF7WdyNDD6woinrfXCVsZXm0galjbco+pEpYmJLtwlZwcOfIVdg==", + "dependencies": { + "@vue/reactivity": "~3.1.1" + } + }, "node_modules/ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", diff --git a/package-lock.json b/package-lock.json index 426158f..51f212d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "version": "1.0.0", "license": "ISC", "dependencies": { - "@punkfairie/modern-css-reset": "^1.0.1" + "@punkfairie/modern-css-reset": "^1.0.1", + "alpinejs": "^3.13.3" }, "devDependencies": { "@11ty/eleventy": "^2.0.1", @@ -1749,6 +1750,19 @@ "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==", "dev": true }, + "node_modules/@vue/reactivity": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz", + "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==", + "dependencies": { + "@vue/shared": "3.1.5" + } + }, + "node_modules/@vue/shared": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz", + "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==" + }, "node_modules/a-sync-waterfall": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz", @@ -1783,6 +1797,14 @@ "url": "https://github.com/sponsors/epoberezkin" } }, + "node_modules/alpinejs": { + "version": "3.13.3", + "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.13.3.tgz", + "integrity": "sha512-WZ6WQjkAOl+WdW/jukzNHq9zHFDNKmkk/x6WF7WdyNDD6woinrfXCVsZXm0galjbco+pEpYmJLtwlZwcOfIVdg==", + "dependencies": { + "@vue/reactivity": "~3.1.1" + } + }, "node_modules/ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", diff --git a/package.json b/package.json index 5c66bf0..f8b6364 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "stylelint": "^15.11.0" }, "dependencies": { - "@punkfairie/modern-css-reset": "^1.0.1" + "@punkfairie/modern-css-reset": "^1.0.1", + "alpinejs": "^3.13.3" } } diff --git a/src/_includes/layout.liquid b/src/_includes/layout.liquid index 79524fb..b3273bd 100644 --- a/src/_includes/layout.liquid +++ b/src/_includes/layout.liquid @@ -8,16 +8,18 @@ ... Epiphany ... baby, it's cold outsite ... + + -
+

Epiphany

@@ -25,7 +27,17 @@ {{ content }} - + + + + +
\ No newline at end of file diff --git a/src/img/petz/siren-2.png b/src/img/petz/siren-2.png new file mode 100644 index 0000000..a1ed46c Binary files /dev/null and b/src/img/petz/siren-2.png differ diff --git a/src/js/main.js b/src/js/main.js new file mode 100644 index 0000000..48e85f9 --- /dev/null +++ b/src/js/main.js @@ -0,0 +1,5 @@ +import Alpine from "alpinejs"; + +window.Alpine = Alpine; + +Alpine.start(); \ No newline at end of file diff --git a/src/style/layout.css b/src/style/layout.css index 1118162..f06e7f7 100644 --- a/src/style/layout.css +++ b/src/style/layout.css @@ -11,6 +11,8 @@ '. .' 1.5fr 'header header' 0.5fr 's-nav main' 2.5fr / 1fr 5fr; + grid-column-gap: var(--space-s); + width: 1024px; height: 768px; padding: var(--space-xs); @@ -31,15 +33,15 @@ column-gap: var(--space-m); } - h1 { - - } - .main-nav { display: flex; column-gap: var(--space-xs); } + main, .secondary-nav { + background-color: rgba(255, 255, 255, 0.49); + } + main { --flow-space: var(--space-xs); @@ -47,7 +49,6 @@ padding: var(--space-s); overflow: auto; text-align: center; - background-color: rgba(255, 255, 255, 0.49); } .secondary-nav {