feat: add typography rules

Signed-off-by: Ned Zimmerman <ned@bight.dev>

src/_includes/components/flow/README.md

@@ -0,0 +1,3 @@
+# Flow
+
+TODO.

src/_includes/components/flow/flow.config.js

@@ -0,0 +1,28 @@
+module.exports = {
+    title: "Flow",
+    context: {
+        blocks: [
+            {
+                tag: "h1",
+                text: "About"
+            },
+            {
+                tag: "p",
+                class: "subhead",
+                text: "About our work"
+            },
+            {
+                tag: "h2",
+                text: "We Count Team"
+            },
+            {
+                tag: "h3",
+                text: "Research Team"
+            },
+            {
+                tag: "p",
+                text: "Jutta Treviranus, Principal Investigator"
+            }
+        ]
+    }
+};

src/_includes/components/flow/flow.njk

@@ -0,0 +1,5 @@
+<div class="flow">
+{% for block in params.blocks %}
+    <{{ block.tag }}{% if block.class %} class="{{ block.class }}"{% endif %}>{{ block.text }}</{{ block.tag }}>
+{% endfor %}
+</div>

src/_includes/components/typography/typography.config.js

@@ -9,43 +9,36 @@ module.exports = {
             title: "Header Level 1",
             context: {
                 level: "h1",
-                text: "We Count"
+                text: "IDRC’s Inclusive Artificial Intelligence (AI) Initiatives"
             }
         },
         {
             title: "Header Level 2",
             context: {
                 level: "h2",
-                text: "Challenges"
+                text: "IDRC’s Inclusive Artificial Intelligence (AI) Initiatives"
             }
         },
         {
             title: "Header Level 3",
             context: {
                 level: "h3",
-                text: "Research Team"
-            }
-        },
-        {
-            title: "Header Level 4",
-            context: {
-                level: "h4",
-                text: "Participation"
+                text: "IDRC’s Inclusive Artificial Intelligence (AI) Initiatives"
             }
         },
         {
             title: "Subhead",
             context: {
                 level: "p",
                 levelClass: "subhead",
-                text: "Explore We Count project activities"
+                text: "IDRC’s Inclusive Artificial Intelligence (AI) Initiatives"
             }
         },
         {
             title: "Paragraph",
             context: {
                 level: "p",
-                text: "We Count is a community-driven project to address the inherent bias against small minorities and outliers in artificial intelligence and data analytics. Disability often places you at the margins of a data set. More and more critical decisions are made and automated using data. Current artificial intelligence can automate and amplify existing discrimination."
+                text: "We Count is a community-driven project to address the inherent bias against small minorities and outliers in artificial intelligence (AI) and data analytics. Disability often places you at the margins of a data set. More and more critical decisions are made and automated using data. Current artificial intelligence can automate and amplify existing discrimination."
             }
         }
     ]

src/_includes/design-system/previews/preview-default.njk

@@ -1,3 +1,3 @@
-<div class="p-m">
+<article>
   {{ comp | safe }}
-</div>
+</article>

src/static/css/_layout.css

@@ -0,0 +1,12 @@
+article {
+    padding-block: 0 1.6875rem;
+    padding-inline: 1.6875rem;
+}
+
+.flow > * + * {
+    margin-block-start: var(--flow-space, 1em);
+}
+
+.p-m {
+    padding: 1.6875rem;
+}

src/static/css/_typography.css

@@ -0,0 +1,179 @@
+@font-face {
+    font-display: swap;
+    font-family: Montserrat;
+    font-style: normal;
+    font-weight: 400;
+    src: url("../fonts/Montserrat-Regular.woff2") format("woff2");
+}
+
+@font-face {
+    font-display: swap;
+    font-family: Montserrat;
+    font-style: italic;
+    font-weight: 400;
+    src: url("../fonts/Montserrat-Italic.woff2") format("woff2");
+}
+
+@font-face {
+    font-display: swap;
+    font-family: Montserrat;
+    font-style: normal;
+    font-weight: 500;
+    src: url("../fonts/Montserrat-Medium.woff2") format("woff2");
+}
+
+@font-face {
+    font-display: swap;
+    font-family: Montserrat;
+    font-style: italic;
+    font-weight: 500;
+    src: url("../fonts/Montserrat-MediumItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-display: swap;
+    font-family: Montserrat;
+    font-style: normal;
+    font-weight: 600;
+    src: url("../fonts/Montserrat-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+    font-display: swap;
+    font-family: Montserrat;
+    font-style: italic;
+    font-weight: 600;
+    src: url("../fonts/Montserrat-SemiBoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-display: swap;
+    font-family: Montserrat;
+    font-style: normal;
+    font-weight: 700;
+    src: url("../fonts/Montserrat-Bold.woff2") format("woff2");
+}
+
+@font-face {
+    font-display: swap;
+    font-family: Montserrat;
+    font-style: italic;
+    font-weight: 700;
+    src: url("../fonts/Montserrat-BoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-display: swap;
+    font-family: "Montserrat Alternates";
+    font-style: normal;
+    font-weight: 400;
+    src: url("../fonts/MontserratAlternates-Regular.woff2") format("woff2");
+    unicode-range: U+0049, U+006C;
+}
+
+@font-face {
+    font-display: swap;
+    font-family: "Montserrat Alternates";
+    font-style: italic;
+    font-weight: 400;
+    src: url("../fonts/MontserratAlternates-Italic.woff2") format("woff2");
+    unicode-range: U+0049, U+006C;
+}
+
+@font-face {
+    font-display: swap;
+    font-family: "Montserrat Alternates";
+    font-style: normal;
+    font-weight: 500;
+    src: url("../fonts/MontserratAlternates-Medium.woff2") format("woff2");
+    unicode-range: U+0049, U+006C;
+}
+
+@font-face {
+    font-display: swap;
+    font-family: "Montserrat Alternates";
+    font-style: italic;
+    font-weight: 500;
+    src: url("../fonts/MontserratAlternates-MediumItalic.woff2") format("woff2");
+    unicode-range: U+0049, U+006C;
+}
+
+@font-face {
+    font-display: swap;
+    font-family: "Montserrat Alternates";
+    font-style: normal;
+    font-weight: 600;
+    src: url("../fonts/MontserratAlternates-SemiBold.woff2") format("woff2");
+    unicode-range: U+0049, U+006C;
+}
+
+@font-face {
+    font-display: swap;
+    font-family: "Montserrat Alternates";
+    font-style: italic;
+    font-weight: 600;
+    src: url("../fonts/MontserratAlternates-SemiBoldItalic.woff2") format("woff2");
+    unicode-range: U+0049, U+006C;
+}
+
+@font-face {
+    font-display: swap;
+    font-family: "Montserrat Alternates";
+    font-style: normal;
+    font-weight: 700;
+    src: url("../fonts/MontserratAlternates-Bold.woff2") format("woff2");
+    unicode-range: U+0049, U+006C;
+}
+
+@font-face {
+    font-display: swap;
+    font-family: "Montserrat Alternates";
+    font-style: italic;
+    font-weight: 700;
+    src: url("../fonts/MontserratAlternates-BoldItalic.woff2") format("woff2");
+    unicode-range: U+0049, U+006C;
+}
+
+body {
+    font-family: "Montserrat Alternates", Montserrat, sans-serif;
+}
+
+h1 {
+    color: var(--fl-fgColor, #000);
+    font-size: clamp(1.5rem, 0.6304rem + 4.3478vw, 4rem);
+    font-weight: 700;
+    line-height: normal;
+}
+
+h2 {
+    border-block-end: 0.3125rem solid #fdcc70;
+    color: var(--fl-fgColor, #000);
+    font-size: clamp(1.25rem, 0.9891rem + 1.3043vw, 2rem);
+    font-weight: 700;
+    line-height: 1.5;
+}
+
+h3 {
+    color: var(--fl-fgColor, #000);
+    font-size: clamp(0.875rem, 0.6576rem + 1.087vw, 1.5rem);
+    font-weight: 600;
+    line-height: 1.5;
+}
+
+p,
+li,
+.subhead {
+    color: var(--fl-fgColor, #000);
+    font-size: clamp(0.875rem, 0.6576rem + 1.087vw, 1.5rem);
+    font-style: normal;
+    line-height: 1.5;
+}
+
+.subhead {
+    font-weight: 500;
+}
+
+p,
+li {
+    font-weight: 400;
+}

src/static/css/main.css

@@ -1 +1,3 @@
 @import "../design-system/css/reset.css";
+@import "_typography.css";
+@import "_layout.css";