SCSS -> PostCSS
This commit is contained in:
marleyrae
parent
4cf00c6845
commit
1abd43a2ac
13 changed files with 106 additions and 78 deletions
25
.eleventy.js
25
.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,
|
||||
})
|
||||
|
|
|
|||
6
.idea/cssdialects.xml
Normal file
6
.idea/cssdialects.xml
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="CssDialectMappings">
|
||||
<file url="PROJECT" dialect="PostCSS" />
|
||||
</component>
|
||||
</project>
|
||||
96
package-lock.json
generated
96
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Marley Rae</title>
|
||||
|
||||
<link rel="stylesheet" href="/scss/style.css">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
</head>
|
||||
<body class="Body">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
@use '../theme';
|
||||
|
||||
.Body {
|
||||
background: theme.$purple;
|
||||
background: linear-gradient(135deg, theme.$purple 0%, theme.$pink 100%);
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.Site {
|
||||
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
@forward 'Body';
|
||||
|
|
@ -1 +0,0 @@
|
|||
@use 'layout';
|
||||
6
src/style/layout/Body.css
Normal file
6
src/style/layout/Body.css
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
@layer layout {
|
||||
.Body {
|
||||
background: var(--c-purple);
|
||||
background: linear-gradient(135deg, var(--c-purple) 0%, var(--c-pink) 100%);
|
||||
}
|
||||
}
|
||||
5
src/style/layout/Site.css
Normal file
5
src/style/layout/Site.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
@layer layout {
|
||||
.Site {
|
||||
|
||||
}
|
||||
}
|
||||
4
src/style/style.css
Normal file
4
src/style/style.css
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@import 'theme.css';
|
||||
|
||||
@import 'layout/Body.css';
|
||||
@import 'layout/Site.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);
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- *\
|
||||
Loading…
Reference in a new issue