First attempt at supporting old browsers.

.gitignore

@@ -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

Dockerfile

-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

Makefile

 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

README

@@ -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/*`

assets/css/compile.sh

+#!/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;

assets/css/package.json

+{
+  "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"
+  }
+}

assets/css/postcss.config.js

+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'
+      }),
+    ]
+
+  };
+
+};

assets/fonts/opensans.css

-@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');
-}

assets/fonts/playfair.css

-@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');
-}