diff --git a/.eleventy.js b/.eleventy.js index ab4faca..8b9e171 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,11 +1,26 @@ +const fs = require('fs') + module.exports = function (eleventyConfig) { - eleventyConfig.addPlugin(require('eleventy-sass'), { - postcss: require('postcss')([ - require('postcss-preset-env'), - require('cssnano'), - ]), + eleventyConfig.on('eleventy.before', async () => { + const cssSrc = './src/style/style.css' + const cssDest = './dist/style.css' + + fs.readFile(cssSrc, (err, css) => { + require('postcss')([ + require('postcss-import-ext-glob'), + require('postcss-import'), + require('postcss-preset-env'), + require('cssnano'), + ]) + .process(css, {from: cssSrc, to: cssDest}) + .then(res => { + fs.writeFile(cssDest, res.css, () => true) + }) + }) }) + eleventyConfig.addWatchTarget('./src/style/**/*.css') + eleventyConfig.addPlugin(require('eleventy-plugin-automatic-noopener'), { noreferrer: true, }) diff --git a/.idea/cssdialects.xml b/.idea/cssdialects.xml new file mode 100644 index 0000000..67d0d0e --- /dev/null +++ b/.idea/cssdialects.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 441cbe6..6fe59e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,8 +15,9 @@ "@11ty/eleventy": "^2.0.1", "cssnano": "^6.0.1", "eleventy-plugin-automatic-noopener": "^2.0.2", - "eleventy-sass": "^2.2.3", "postcss": "^8.4.24", + "postcss-import": "^15.1.0", + "postcss-import-ext-glob": "^2.1.1", "postcss-preset-env": "^8.5.1" } }, @@ -1862,30 +1863,6 @@ } } }, - "node_modules/eleventy-sass": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/eleventy-sass/-/eleventy-sass-2.2.3.tgz", - "integrity": "sha512-XmrG//wTJVxV1gwdl923cxBHBv3LrzF0vvUd0AMx8D6Rydfw25Zkwp7P1lMeTZ9BnCNrKDSzK/NH8bUN2eevJw==", - "dev": true, - "dependencies": { - "debug": "^4.3.3", - "kleur": "^4.1.4", - "sass": "^1.49.7" - }, - "peerDependencies": { - "@11ty/eleventy": "^1.0.0 || ^2.0.0-canary.12 || ^2.0.0-beta.1", - "eleventy-plugin-clean": "^1.1.0", - "eleventy-plugin-rev": "^1.1.1" - }, - "peerDependenciesMeta": { - "eleventy-plugin-clean": { - "optional": true - }, - "eleventy-plugin-rev": { - "optional": true - } - } - }, "node_modules/encodeurl": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", @@ -1987,6 +1964,12 @@ "node": ">=8.6.0" } }, + "node_modules/fast-sort": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/fast-sort/-/fast-sort-3.4.0.tgz", + "integrity": "sha512-c/cMBGA5mH3OYjaXedtLIM3hQjv+KuZuiD2QEH5GofNOZeQVDIYIN7Okc2AW1KPhk44g5PTZnXp8t2lOMl8qhQ==", + "dev": true + }, "node_modules/fastq": { "version": "1.15.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz", @@ -2293,12 +2276,6 @@ "node": ">= 0.10" } }, - "node_modules/immutable": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz", - "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==", - "dev": true - }, "node_modules/inflight": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", @@ -3460,6 +3437,37 @@ "postcss": "^8.4" } }, + "node_modules/postcss-import": { + "version": "15.1.0", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", + "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", + "dev": true, + "dependencies": { + "postcss-value-parser": "^4.0.0", + "read-cache": "^1.0.0", + "resolve": "^1.1.7" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "postcss": "^8.0.0" + } + }, + "node_modules/postcss-import-ext-glob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/postcss-import-ext-glob/-/postcss-import-ext-glob-2.1.1.tgz", + "integrity": "sha512-qd4ELOx2G0hyjgtmLnf/fSVJXXPhkcxcxhLT1y1mAnk53JYbMLoGg+AFtnJowOSvnv4CvjPAzpLpAcfWeofP5g==", + "dev": true, + "dependencies": { + "fast-glob": "^3.2.12", + "fast-sort": "^3.2.0", + "postcss-value-parser": "^4.2.0" + }, + "peerDependencies": { + "postcss": "^8.2.0" + } + }, "node_modules/postcss-initial": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz", @@ -4292,6 +4300,15 @@ } ] }, + "node_modules/read-cache": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", + "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", + "dev": true, + "dependencies": { + "pify": "^2.3.0" + } + }, "node_modules/readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", @@ -4383,23 +4400,6 @@ "queue-microtask": "^1.2.2" } }, - "node_modules/sass": { - "version": "1.63.6", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.63.6.tgz", - "integrity": "sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==", - "dev": true, - "dependencies": { - "chokidar": ">=3.0.0 <4.0.0", - "immutable": "^4.0.0", - "source-map-js": ">=0.6.2 <2.0.0" - }, - "bin": { - "sass": "sass.js" - }, - "engines": { - "node": ">=14.0.0" - } - }, "node_modules/section-matter": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz", diff --git a/package.json b/package.json index 2414886..6b8bb7d 100644 --- a/package.json +++ b/package.json @@ -4,8 +4,8 @@ "description": "", "main": "index.html", "scripts": { - "dev": "npx @11ty/eleventy --serve", - "build": "npx @11ty/eleventy" + "dev": "rm -rf dist && npx @11ty/eleventy --serve", + "build": "rm -rf dist && npx @11ty/eleventy" }, "keywords": [], "author": "", @@ -14,8 +14,9 @@ "@11ty/eleventy": "^2.0.1", "cssnano": "^6.0.1", "eleventy-plugin-automatic-noopener": "^2.0.2", - "eleventy-sass": "^2.2.3", "postcss": "^8.4.24", + "postcss-import": "^15.1.0", + "postcss-import-ext-glob": "^2.1.1", "postcss-preset-env": "^8.5.1" }, "dependencies": { diff --git a/src/index.liquid b/src/index.liquid index 2106dc1..fee5c79 100644 --- a/src/index.liquid +++ b/src/index.liquid @@ -7,7 +7,7 @@ Marley Rae - + diff --git a/src/scss/layout/_Body.scss b/src/scss/layout/_Body.scss deleted file mode 100644 index 095993a..0000000 --- a/src/scss/layout/_Body.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '../theme'; - -.Body { - background: theme.$purple; - background: linear-gradient(135deg, theme.$purple 0%, theme.$pink 100%); -} diff --git a/src/scss/layout/_Site.scss b/src/scss/layout/_Site.scss deleted file mode 100644 index 592b80b..0000000 --- a/src/scss/layout/_Site.scss +++ /dev/null @@ -1,3 +0,0 @@ -.Site { - -} diff --git a/src/scss/layout/_index.scss b/src/scss/layout/_index.scss deleted file mode 100644 index abe09b7..0000000 --- a/src/scss/layout/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@forward 'Body'; diff --git a/src/scss/style.scss b/src/scss/style.scss deleted file mode 100644 index 8cb40dd..0000000 --- a/src/scss/style.scss +++ /dev/null @@ -1 +0,0 @@ -@use 'layout'; diff --git a/src/style/layout/Body.css b/src/style/layout/Body.css new file mode 100644 index 0000000..5971cf6 --- /dev/null +++ b/src/style/layout/Body.css @@ -0,0 +1,6 @@ +@layer layout { + .Body { + background: var(--c-purple); + background: linear-gradient(135deg, var(--c-purple) 0%, var(--c-pink) 100%); + } +} diff --git a/src/style/layout/Site.css b/src/style/layout/Site.css new file mode 100644 index 0000000..1058968 --- /dev/null +++ b/src/style/layout/Site.css @@ -0,0 +1,5 @@ +@layer layout { + .Site { + + } +} diff --git a/src/style/style.css b/src/style/style.css new file mode 100644 index 0000000..65eb774 --- /dev/null +++ b/src/style/style.css @@ -0,0 +1,4 @@ +@import 'theme.css'; + +@import 'layout/Body.css'; +@import 'layout/Site.css'; diff --git a/src/scss/_theme.scss b/src/style/theme.css similarity index 77% rename from src/scss/_theme.scss rename to src/style/theme.css index 6b8bb6f..33ef40f 100644 --- a/src/scss/_theme.scss +++ b/src/style/theme.css @@ -8,8 +8,10 @@ &colors \* -------------------------------------------------------------------------- */ -$pink: rgba(244, 114, 182, 1); -$purple: rgba(192, 132, 252, 1); +:root { + --c-pink: rgba(244, 114, 182, 1); + --c-purple: rgba(192, 132, 252, 1); +} /* -------------------------------------------------------------------------- *\ &type sizing @@ -18,14 +20,14 @@ $purple: rgba(192, 132, 252, 1); /* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ :root { - --step--2: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem); - --step--1: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem); - --step-0: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem); - --step-1: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem); - --step-2: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem); - --step-3: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem); - --step-4: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem); - --step-5: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem); + --t-step--2: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem); + --t-step--1: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem); + --t-step-0: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem); + --t-step-1: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem); + --t-step-2: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem); + --t-step-3: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem); + --t-step-4: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem); + --t-step-5: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem); } /* -------------------------------------------------------------------------- *\