feat: add sass support and fonts

eleventy.config.js

@@ -1,21 +1,18 @@
 import { EleventyRenderPlugin } from "@11ty/eleventy";
 import fluidPlugin from "eleventy-plugin-fluid";
-import fluidSassPlugin from "eleventy-plugin-fluid-sass";
 import footnotesPlugin from "eleventy-plugin-footnotes";
 
 export default function eleventy(eleventyConfig) {
     eleventyConfig.addPlugin(EleventyRenderPlugin);
-    eleventyConfig.addPlugin(fluidSassPlugin);
     eleventyConfig.addPlugin(footnotesPlugin);
     eleventyConfig.addPlugin(fluidPlugin);
 
     eleventyConfig.addPassthroughCopy({
         "src/admin/config.yml": "admin/config.yml"
     });
 
-    eleventyConfig.addPassthroughCopy({
-        "src/assets": "assets"
-    });
+    eleventyConfig.addPassthroughCopy({ "src/assets": "assets" });
+    eleventyConfig.addPassthroughCopy({ "src/assets/fonts": "assets/fonts" });
 
     return {
         dir: {

package.json

@@ -30,7 +30,6 @@
   "homepage": "https://github.com/inclusive-design/standards.idrc.ocadu.ca#readme",
   "dependencies": {
     "@11ty/eleventy": "^3.0.0",
-    "eleventy-plugin-fluid-sass": "^1.0.0",
     "eleventy-plugin-fluid": "github:fluid-project/eleventy-plugin-fluid#feat/overhaul-i18n",
     "eleventy-plugin-footnotes": "^0.11.0",
     "rimraf": "^6.0",

src/assets/styles/abstracts/_variables.css

@@ -0,0 +1,20 @@
+:root {
+    /** Typography **/
+    --family-sans-serif: "Source Sans 3", sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+
+    /** Colours **/
+
+    --blue: hsla(194, 60%, 59%, 1);
+    --green: hsla(163, 35%, 49%, 1);
+    --yellow: hsla(42, 92%, 70%, 1);
+    --orange: hsla(25, 76%, 64%, 1);
+    --red: hsla(359, 64%, 63%, 1);
+    --white: hsla(0, 0%, 100%, 1);
+
+    --indigo-100: hsla(244, 100%, 98%, 1);
+    --indigo-200: hsla(244, 93%, 93%, 1);
+}

src/assets/styles/app.css

@@ -0,0 +1,14 @@
+@charset "UTF-8";
+
+/* Abstracts */
+
+@import "./abstracts/_variables.css";
+
+/* Base */
+
+@import "./base/_reset.css";
+@import "./base/_base.css";
+
+h1 {
+    line-height: 1;
+}

src/assets/styles/base/_base.css

@@ -0,0 +1,5 @@
+@import "./_fonts.css";
+
+h1 {
+    font-family: var(--family-sans-serif);
+}