Commit 88593938 authored by Zach van Rijn's avatar Zach van Rijn
Browse files

First attempt at supporting old browsers.

parent 33033ca4
......@@ -2,3 +2,6 @@ html/
html.tgz
assets/images/gen_*
assets/images/icons/gen_*
assets/css/fonts/
assets/css/node_modules
assets/css/theme.css
FROM alpine:3.14
RUN apk update && apk upgrade && apk add \
gcc \
g++ \
libsass-dev \
musl-dev \
make \
git \
libtool \
autoconf \
automake \
m4
RUN git clone https://github.com/sass/sassc.git \
&& cd sassc \
&& autoreconf -i \
&& mkdir x \
&& cd x \
&& ../configure \
&& make -j$(nproc) install
all:
image:
docker build . -t sassypants
sass:
docker run -u$(shell id -u):$(shell id -g) -v$(CURDIR)/assets/css:/tmp -w /tmp --rm -it sassypants sassc -t compressed scss/theme.scss theme.css
site: # sass
site:
$(CURDIR)/publish
......@@ -19,3 +19,28 @@ Imagemagick is required to convert the PSD files into .webm (or other) formats.
$ grep -rl AAAAAA assets/ | while read k; do sed -i ${k} -e 's/AAAAAA/DDDDDD/g'; done
$ grep -rl 7C7C7C assets/ | while read k; do sed -i ${k} -e 's/7C7C7C/333333/g'; done
Manual steps to do CSS processing:
# Adélie SCSS Preprocessor
1. Throw CSS into `src/*`.
2. Ensure that there is a top-level `src/theme.scss` file with imports.
3. Run `npm i` to install dependencies.
4. Run `npm build` to build to `out/`.
5. Profit.
## Running
Targets may be run with `npm run <target>`.
| Target | Description |
| ---------------- | ----------------------- |
| `prebuild` | See `clean` |
| `build` | Compile SCSS to `out/` |
| `list-supported` | List supported browsers |
| `clean` | Clean output directory |
## Notes
- Fonts are downloaded and provided in `out/fonts/*`
#!/bin/sh -e
HERE=$(dirname $(readlink -f ${0}));
cd ${HERE};
rm -fr fonts;
#===============================================================
docker run -u$(id -u):$(id -g) -v${HERE}:/x -w/x --rm -i node:16.6.0-alpine3.14 sh <<'EOF'
#===============================================================
npm install;
npm run build;
#===============================================================
EOF
#===============================================================
mv out/theme.css .;
mv out/fonts .;
rm -fr node_modules;
rm -fr out;
This diff is collapsed.
{
"name": "adelie-scss",
"private": true,
"version": "0.0.0",
"description": "Compiles SCSS for the Adélie Linux homepage",
"scripts": {
"build": "postcss scss/theme.scss --base scss --dir out --ext css",
"clean": "rimraf out/*",
"list-supported": "npx browserslist 'cover 99.5%, dead, Firefox ESR'",
"prebuild": "npm run clean"
},
"author": "Eric Hegnes <eric@hegnes.com>",
"license": "ISC",
"devDependencies": {
"cssnano": "^5.0.7",
"cssnano-preset-advanced": "^5.1.3",
"postcss": "^8.3.6",
"postcss-cli": "^8.3.1",
"postcss-easy-import": "^3.0.0",
"postcss-font-grabber": "^3.0.2",
"postcss-import-url": "^7.0.0",
"postcss-nested": "^5.0.6",
"postcss-preset-env": "^6.7.0",
"postcss-sassy-mixins": "^2.1.0",
"postcss-scss": "^4.0.0",
"postcss-simple-vars": "^6.0.3",
"rimraf": "^3.0.2"
}
}
const { postcssFontGrabber } = require('postcss-font-grabber')
module.exports = conf => {
const scss = conf.file.extname === '.scss';
return {
parser: 'postcss-scss',
plugins: [
require('postcss-easy-import')({
prefix: '_',
extensions: ['.scss'],
}),
require('postcss-import-url')({
recursive: true,
modernBrowser: true,
}),
require('postcss-preset-env')({
browsers: 'last 4 versions',
stage: 3,
}),
// mixins must come before simple-vars and nested
require('postcss-sassy-mixins')(),
require('postcss-simple-vars')(),
require('postcss-nested')(),
postcssFontGrabber({
cssSrc: './scss/',
cssDest: './out',
fontDest: './out/fonts',
}),
require('cssnano')({
preset: 'advanced'
}),
]
};
};
This diff is collapsed.
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UNirkOUuhs.ttf) format('truetype');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOUuhs.ttf) format('truetype');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 800;
src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN8rsOUuhs.ttf) format('truetype');
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/playfairdisplay/v22/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDXbtY.ttf) format('truetype');
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/playfairdisplay/v22/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKeiunDXbtY.ttf) format('truetype');
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 900;
src: url(https://fonts.gstatic.com/s/playfairdisplay/v22/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKfsunDXbtY.ttf) format('truetype');
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment