From fb3a7853db9e7eb410b2fbb1624a7f4bb4c5e9d1 Mon Sep 17 00:00:00 2001
From: Daniel Cho <chosww@gmail.com>
Date: Wed, 8 Jan 2025 11:57:16 -0500
Subject: [PATCH 01/10] feat: add project panel component

---
 eleventy.config.js                            |  4 +
 src/_includes/layouts/about.njk               |  4 +-
 src/_includes/layouts/home.njk                | 16 +---
 src/_includes/layouts/projects.njk            | 20 ++---
 .../components/projectPanel.macro.njk         | 19 +++++
 src/_transforms/parse.js                      |  2 +-
 src/assets/styles/app.css                     |  1 +
 src/assets/styles/components/projectPanel.css | 83 +++++++++++++++++++
 src/collections/projects/en/project.md        |  5 ++
 src/collections/projects/fr/project.md        |  5 ++
 10 files changed, 129 insertions(+), 30 deletions(-)
 create mode 100644 src/_includes/partials/components/projectPanel.macro.njk
 create mode 100644 src/assets/styles/components/projectPanel.css
 create mode 100644 src/collections/projects/en/project.md
 create mode 100644 src/collections/projects/fr/project.md

diff --git a/eleventy.config.js b/eleventy.config.js
index 3b8386f..c549462 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -28,6 +28,10 @@ export default function eleventy(eleventyConfig) {
         eleventyConfig.addCollection(`pages_${lang}`, (collection) => {
             return collection.getFilteredByGlob(`src/collections/pages/${lang}/*.md`);
         });
+
+        eleventyConfig.addCollection(`projects_${lang}`, (collection) => {
+            return collection.getFilteredByGlob(`src/collections/projects/${lang}/*.md`);
+        });
     });
 
     eleventyConfig.addTransform("parse", parse);
diff --git a/src/_includes/layouts/about.njk b/src/_includes/layouts/about.njk
index 1f621a3..1f577e6 100644
--- a/src/_includes/layouts/about.njk
+++ b/src/_includes/layouts/about.njk
@@ -5,9 +5,7 @@
 {{ content | safe }}
 {% if collections['projects_' + lang] %}
     <section class="display">
-      <div class="display__title">
-        <h2>Projects</h2>
-      </div>
+      <h2 class="display__title">Projects</h2>
       <div class="display__items">
         {% set cardType = "project" %}
         {% for item in collections['projects_' + lang] %}
diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk
index 241a8b6..bd721f3 100644
--- a/src/_includes/layouts/home.njk
+++ b/src/_includes/layouts/home.njk
@@ -4,9 +4,7 @@
 {% block content %}
 {% if collections['projects_' + lang] %}
     <section class="display">
-      <div class="display__title">
-        <h2>Projects</h2>
-      </div>
+      <h2 class="display__title">Projects</h2>
       <div class="display__items">
         {% set cardType = "project" %}
         {% for item in collections['projects_' + lang] %}
@@ -19,9 +17,7 @@
     {% endif %}
     {% if collections.events %}
     <section class="display">
-      <div class="display__title">
-        <h2>Events</h2>
-      </div>
+      <h2 class="display__title>Events</h2>
       <div class="display__items">
         {% set cardType = "event" %}
         {% for item in collections.events %}
@@ -34,9 +30,7 @@
     {% endif %}
     {% if collections.resources %}
     <section class="display">
-      <div class="display__title">
-        <h2>Resources</h2>
-      </div>
+      <h2 class="display__title>Resources</h2>
       <div class="display__items">
         {% set cardType = "resource" %}
         {% for item in collections.resources %}
@@ -49,9 +43,7 @@
     {% endif %}
     {% if collections.news %}
     <section class="display">
-      <div class="display__title">
-        <h2>Announcements</h2>
-      </div>
+      <h2 class="display__title>Announcements</h2>
       <div class="display__items">
         {% set cardType = "news" %}
         {% for item in collections.news %}
diff --git a/src/_includes/layouts/projects.njk b/src/_includes/layouts/projects.njk
index 741b1e5..18aee68 100644
--- a/src/_includes/layouts/projects.njk
+++ b/src/_includes/layouts/projects.njk
@@ -1,20 +1,12 @@
 {% extends "layouts/base.njk" %}
+{% from "partials/components/projectPanel.macro.njk" import projectPanel %}
 
 {% block content %}
 <div>
-    <div class="card">
-        <h2 class="card__heading">All Standards With Us</h2>
-        <p>
-            Lorem ipsum dolor sit amet. Ea galisum quisquam aut galisum aperiam eum dolores consequuntur et fugit rerum ut necessitatibus eligendi aut corrupti nisi quo voluptatum impedit. Nam dolor delectus non sapiente vero sit sint esse cum libero provident est Quis voluptatem non ipsa ullam vel iure autem.
-    Quo facilis reprehenderit in atque deleniti qui facilis vitae sit officia galisum. Quo laboriosam consequatur sed fugit voluptas id quibusdam galisum sit explicabo modi sit mollitia placeat hic laboriosam omnis.
-        </p>
-    </div>
-    <div class="card">
-        <h2 class="card__heading">Review of the Review</h2>
-        <p>
-            Lorem ipsum dolor sit amet. Ea galisum quisquam aut galisum aperiam eum dolores consequuntur et fugit rerum ut necessitatibus eligendi aut corrupti nisi quo voluptatum impedit. Nam dolor delectus non sapiente vero sit sint esse cum libero provident est Quis voluptatem non ipsa ullam vel iure autem.
-            Quo facilis reprehenderit in atque deleniti qui facilis vitae sit officia galisum. Quo laboriosam consequatur sed fugit voluptas id quibusdam galisum sit explicabo modi sit mollitia placeat hic laboriosam omnis.
-        </p>
-    </div>
+    {% if collections['projects_' + lang] %}
+        {% for item in collections['projects_' + lang] %}
+            {{ projectPanel({image: item.data.image, title: item.data.title, body: item.data.body }) }}
+        {% endfor %}
+    {% endif %}
 </div>
 {% endblock %}
\ No newline at end of file
diff --git a/src/_includes/partials/components/projectPanel.macro.njk b/src/_includes/partials/components/projectPanel.macro.njk
new file mode 100644
index 0000000..30e5d3a
--- /dev/null
+++ b/src/_includes/partials/components/projectPanel.macro.njk
@@ -0,0 +1,19 @@
+{%- macro projectPanel(params) -%}
+<div class="projectPanel">
+    <div class="projectPanel__color">
+    </div>
+    {% if params.image %}
+        <div class="projectPanel__image">
+            {{ params.image }}
+        </div>
+    {% endif %}
+    <div class="projectPanel__content">
+        <a class="projectPanel__title" href="#">
+            {{ params.title | safe }}
+        </a>
+        <div class="projectPanel__body">
+            <p>{{ params.body | renderContent("md") }}</p>
+        </div>
+    </div>
+</div>
+{% endmacro %}
\ No newline at end of file
diff --git a/src/_transforms/parse.js b/src/_transforms/parse.js
index 8b2533c..7af493d 100644
--- a/src/_transforms/parse.js
+++ b/src/_transforms/parse.js
@@ -9,7 +9,7 @@ export default (value, outputPath) => {
             for (const heading of sectionHeadings) {
                 const getContent = (elem) => {
                     let elems = [];
-                    while (elem.nextElementSibling && elem.nextElementSibling.tagName !== "H2") {
+                    while (elem.nextElementSibling && elem.nextElementSibling.tagName !== "H2" && elem.nextElementSibling.tagName !== "SECTION") {
                         elems.push(elem.nextElementSibling);
                         elem = elem.nextElementSibling;
                     }
diff --git a/src/assets/styles/app.css b/src/assets/styles/app.css
index ba03c31..5953a01 100644
--- a/src/assets/styles/app.css
+++ b/src/assets/styles/app.css
@@ -15,3 +15,4 @@
 /* Components */
 @import "./components/card.css";
 @import "./components/navigation.css";
+@import "./components/projectPanel.css";
diff --git a/src/assets/styles/components/projectPanel.css b/src/assets/styles/components/projectPanel.css
new file mode 100644
index 0000000..f5fbef6
--- /dev/null
+++ b/src/assets/styles/components/projectPanel.css
@@ -0,0 +1,83 @@
+div:has(.projectPanel) {
+    background-color: var(--color-indigo-100);
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    padding-block: var(--common-block-padding);
+    padding-inline: var(--common-inline-padding);
+}
+
+.projectPanel {
+    background-color: var(--fl-fgColor, var(--color-yellow));
+    box-shadow: 0 0.625rem 1.25rem 0 #0B046C26;
+    border: 0.1875rem solid var(--fl-bgColor, var(--color-indigo-100));
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.projectPanel:has(a:focus) {
+    border: 0.1875rem solid transparent;
+    outline: 0.1875rem solid var(--fl-fgColor, transparent);
+    outline-offset: 0.1875rem;
+}
+
+.projectPanel:hover {
+    box-shadow: 0px 10px 20px 0px #0B046C73;
+}
+
+.projectPanel__color {
+    min-height: 2.5rem;
+    border-right: 0.125rem solid var(--fl-fgColor, var(--color-yellow));
+}
+
+.projectPanel__image {
+    min-width: 16.25rem;
+    min-height: 12.1875rem;
+    max-width: 31.0625rem;
+    max-height: 23.125rem;
+}
+
+.projectPanel__title {
+    font-weight: var(--font-weight-semibold);
+    font-family: var(--family-sans-serif);
+    font-size: var(--step-4);
+    text-decoration: none;
+    color: black;
+}
+
+.projectPanel__title:focus {
+    background: none;
+    box-shadow: none;
+    color: var(--fl-linkColor, var(--black));
+    outline: none;
+}
+
+.projectPanel__title::after {
+    bottom: 0;
+    content: "";
+    display: block;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.projectPanel__content {
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    padding: 1.875rem;
+    width: 100%;
+}
+
+@media (width >= 70.875rem) {
+    .projectPanel {
+        flex-direction: row;
+    }
+
+    .projectPanel__color {
+        min-width: 4.625rem;
+        min-height: 23.125rem;
+    }
+}
\ No newline at end of file
diff --git a/src/collections/projects/en/project.md b/src/collections/projects/en/project.md
new file mode 100644
index 0000000..66b0c88
--- /dev/null
+++ b/src/collections/projects/en/project.md
@@ -0,0 +1,5 @@
+---
+title: Project
+image: image
+body: body
+---
\ No newline at end of file
diff --git a/src/collections/projects/fr/project.md b/src/collections/projects/fr/project.md
new file mode 100644
index 0000000..8ac77d0
--- /dev/null
+++ b/src/collections/projects/fr/project.md
@@ -0,0 +1,5 @@
+---
+title: Project 
+image: image
+body: body
+---
\ No newline at end of file

From 9d1be41941ab4718714306bea310277b3deccc63 Mon Sep 17 00:00:00 2001
From: Daniel Cho <chosww@gmail.com>
Date: Wed, 8 Jan 2025 13:52:57 -0500
Subject: [PATCH 02/10] fix: adjust card style in different states

---
 src/_includes/layouts/about.njk                          | 2 +-
 src/_includes/layouts/home.njk                           | 8 ++++----
 src/_includes/layouts/projects.njk                       | 2 +-
 src/_includes/partials/components/projectPanel.macro.njk | 2 +-
 src/assets/styles/base/_base.css                         | 3 ++-
 src/assets/styles/components/projectPanel.css            | 6 ++++--
 src/collections/projects/en/project.md                   | 3 +--
 src/collections/projects/fr/project.md                   | 5 ++---
 8 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/_includes/layouts/about.njk b/src/_includes/layouts/about.njk
index 1f577e6..f4cc7a2 100644
--- a/src/_includes/layouts/about.njk
+++ b/src/_includes/layouts/about.njk
@@ -9,7 +9,7 @@
       <div class="display__items">
         {% set cardType = "project" %}
         {% for item in collections['projects_' + lang] %}
-          {{ card({image: item.data.image, title: item.data.title, body: item.data.body }) }}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc }) }}
         {% endfor %}
       </div>
       <div class="display__link">
diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk
index bd721f3..de44afe 100644
--- a/src/_includes/layouts/home.njk
+++ b/src/_includes/layouts/home.njk
@@ -8,7 +8,7 @@
       <div class="display__items">
         {% set cardType = "project" %}
         {% for item in collections['projects_' + lang] %}
-          {{ card({image: item.data.image, title: item.data.title, body: item.data.body }) }}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc }) }}
         {% endfor %}
       </div>
       <div class="display__link">
@@ -21,7 +21,7 @@
       <div class="display__items">
         {% set cardType = "event" %}
         {% for item in collections.events %}
-          {{ card({image: item.data.image, title: item.data.title, body: item.data.body }) }}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc }) }}
         {% endfor %}
       </div>
       <div class="display__link">
@@ -34,7 +34,7 @@
       <div class="display__items">
         {% set cardType = "resource" %}
         {% for item in collections.resources %}
-          {{ card({image: item.data.image, title: item.data.title, body: item.data.body }) }}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc }) }}
         {% endfor %}
       </div>
       <div class="display__link">
@@ -47,7 +47,7 @@
       <div class="display__items">
         {% set cardType = "news" %}
         {% for item in collections.news %}
-          {{ card({image: item.data.image, title: item.data.title, body: item.data.body }) }}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc }) }}
         {% endfor %}
       </div>
       <div class="display__link">
diff --git a/src/_includes/layouts/projects.njk b/src/_includes/layouts/projects.njk
index 18aee68..54f319f 100644
--- a/src/_includes/layouts/projects.njk
+++ b/src/_includes/layouts/projects.njk
@@ -5,7 +5,7 @@
 <div>
     {% if collections['projects_' + lang] %}
         {% for item in collections['projects_' + lang] %}
-            {{ projectPanel({image: item.data.image, title: item.data.title, body: item.data.body }) }}
+            {{ projectPanel({image: item.data.image, title: item.data.title, body: item.data.desc }) }}
         {% endfor %}
     {% endif %}
 </div>
diff --git a/src/_includes/partials/components/projectPanel.macro.njk b/src/_includes/partials/components/projectPanel.macro.njk
index 30e5d3a..3f0ada3 100644
--- a/src/_includes/partials/components/projectPanel.macro.njk
+++ b/src/_includes/partials/components/projectPanel.macro.njk
@@ -12,7 +12,7 @@
             {{ params.title | safe }}
         </a>
         <div class="projectPanel__body">
-            <p>{{ params.body | renderContent("md") }}</p>
+            <p>{{ params.body | safe }}</p>
         </div>
     </div>
 </div>
diff --git a/src/assets/styles/base/_base.css b/src/assets/styles/base/_base.css
index 19b965b..a4cfd40 100644
--- a/src/assets/styles/base/_base.css
+++ b/src/assets/styles/base/_base.css
@@ -33,7 +33,8 @@ section {
 }
 
 .banner__text > * + *,
-section > * + * {
+section > * + *,
+.projectPanel__content > * + * {
     margin-block-start: 1em;
 }
 
diff --git a/src/assets/styles/components/projectPanel.css b/src/assets/styles/components/projectPanel.css
index f5fbef6..107687b 100644
--- a/src/assets/styles/components/projectPanel.css
+++ b/src/assets/styles/components/projectPanel.css
@@ -23,12 +23,12 @@ div:has(.projectPanel) {
 }
 
 .projectPanel:hover {
-    box-shadow: 0px 10px 20px 0px #0B046C73;
+    box-shadow: 0 0.625rem 1.25rem 0 var(--fl-fgColor, #0B046C73);
 }
 
 .projectPanel__color {
     min-height: 2.5rem;
-    border-right: 0.125rem solid var(--fl-fgColor, var(--color-yellow));
+    border-bottom: 0.125rem solid var(--fl-fgColor, var(--color-yellow));
 }
 
 .projectPanel__image {
@@ -67,6 +67,7 @@ div:has(.projectPanel) {
     background-color: white;
     display: flex;
     flex-direction: column;
+    margin: auto;
     padding: 1.875rem;
     width: 100%;
 }
@@ -77,6 +78,7 @@ div:has(.projectPanel) {
     }
 
     .projectPanel__color {
+        border-right: 0.125rem solid var(--fl-fgColor, var(--color-yellow));
         min-width: 4.625rem;
         min-height: 23.125rem;
     }
diff --git a/src/collections/projects/en/project.md b/src/collections/projects/en/project.md
index 66b0c88..b7433ab 100644
--- a/src/collections/projects/en/project.md
+++ b/src/collections/projects/en/project.md
@@ -1,5 +1,4 @@
 ---
 title: Project
-image: image
-body: body
+desc: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 ---
\ No newline at end of file
diff --git a/src/collections/projects/fr/project.md b/src/collections/projects/fr/project.md
index 8ac77d0..ab4aaef 100644
--- a/src/collections/projects/fr/project.md
+++ b/src/collections/projects/fr/project.md
@@ -1,5 +1,4 @@
 ---
-title: Project 
-image: image
-body: body
+title: Project
+desc: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 ---
\ No newline at end of file

From 3a0ac6a75539fcb63b514b1f9eaabd7f51736b90 Mon Sep 17 00:00:00 2001
From: Daniel Cho <chosww@gmail.com>
Date: Wed, 8 Jan 2025 15:15:19 -0500
Subject: [PATCH 03/10] fix: based on PR feedback and a style issue

---
 src/_data/translations.json                   |  8 ++++++
 src/_includes/layouts/about.njk               |  2 +-
 src/_includes/layouts/home.njk                |  8 +++---
 .../components/projectPanel.macro.njk         | 12 ++++-----
 src/_transforms/parse.js                      |  2 +-
 src/assets/styles/app.css                     |  2 +-
 src/assets/styles/base/_base.css              |  2 +-
 .../{projectPanel.css => project-panel.css}   | 26 +++++++++----------
 8 files changed, 35 insertions(+), 27 deletions(-)
 rename src/assets/styles/components/{projectPanel.css => project-panel.css} (82%)

diff --git a/src/_data/translations.json b/src/_data/translations.json
index bfe285f..4d639db 100644
--- a/src/_data/translations.json
+++ b/src/_data/translations.json
@@ -1,22 +1,30 @@
 {
     "en": {
+        "announcements": "Announcements",
         "contact-us": "Contact Us",
         "contact-us-address": "Address",
         "contact-us-email": "Email",
         "contact-us-phone": "Phone",
+        "events": "Events",
         "header-intro": "An <a href='https://idrc.ocadu.ca/'>Inclusive Design Research Centre</a> Project",
         "header-intro-short": "<a href='https://idrc.ocadu.ca/'>An IDRC Project</a>",
+        "projects": "Projects",
+        "resources": "Resources",
         "social-media": "Social Media",
         "main-menu": "Main Menu",
         "menu": "menu"
     },
     "fr": {
+        "announcements": "Announcements",
         "contact-us": "Contactez-nous",
         "contact-us-address": "Adresse",
         "contact-us-email": "Courriel",
         "contact-us-phone": "Téléphone",
+        "events": "Events",
         "header-intro": "An <a href='https://idrc.ocadu.ca/'>Inclusive Design Research Centre</a> Project",
         "header-intro-short": "<a href='https://idrc.ocadu.ca/'>An IDRC Project</a>",
+        "projects": "Projets",
+        "resources": "Resources",
         "social-media": "Les médias sociaux",
         "main-menu": "Menu Principal",
         "menu": "menu"
diff --git a/src/_includes/layouts/about.njk b/src/_includes/layouts/about.njk
index f4cc7a2..82a2dd4 100644
--- a/src/_includes/layouts/about.njk
+++ b/src/_includes/layouts/about.njk
@@ -5,7 +5,7 @@
 {{ content | safe }}
 {% if collections['projects_' + lang] %}
     <section class="display">
-      <h2 class="display__title">Projects</h2>
+      <h2 class="display__title">{% __ 'projects' %}</h2>
       <div class="display__items">
         {% set cardType = "project" %}
         {% for item in collections['projects_' + lang] %}
diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk
index de44afe..3edb5ad 100644
--- a/src/_includes/layouts/home.njk
+++ b/src/_includes/layouts/home.njk
@@ -4,7 +4,7 @@
 {% block content %}
 {% if collections['projects_' + lang] %}
     <section class="display">
-      <h2 class="display__title">Projects</h2>
+      <h2 class="display__title">{% __ 'projects' %}</h2>
       <div class="display__items">
         {% set cardType = "project" %}
         {% for item in collections['projects_' + lang] %}
@@ -17,7 +17,7 @@
     {% endif %}
     {% if collections.events %}
     <section class="display">
-      <h2 class="display__title>Events</h2>
+      <h2 class="display__title>{% __ 'events' %}</h2>
       <div class="display__items">
         {% set cardType = "event" %}
         {% for item in collections.events %}
@@ -30,7 +30,7 @@
     {% endif %}
     {% if collections.resources %}
     <section class="display">
-      <h2 class="display__title>Resources</h2>
+      <h2 class="display__title>{% __ 'resources' %}</h2>
       <div class="display__items">
         {% set cardType = "resource" %}
         {% for item in collections.resources %}
@@ -43,7 +43,7 @@
     {% endif %}
     {% if collections.news %}
     <section class="display">
-      <h2 class="display__title>Announcements</h2>
+      <h2 class="display__title>{% __ 'announcements' %}</h2>
       <div class="display__items">
         {% set cardType = "news" %}
         {% for item in collections.news %}
diff --git a/src/_includes/partials/components/projectPanel.macro.njk b/src/_includes/partials/components/projectPanel.macro.njk
index 3f0ada3..d8fab4c 100644
--- a/src/_includes/partials/components/projectPanel.macro.njk
+++ b/src/_includes/partials/components/projectPanel.macro.njk
@@ -1,17 +1,17 @@
 {%- macro projectPanel(params) -%}
-<div class="projectPanel">
-    <div class="projectPanel__color">
+<div class="project-panel">
+    <div class="project-panel__color">
     </div>
     {% if params.image %}
-        <div class="projectPanel__image">
+        <div class="project-panel__image">
             {{ params.image }}
         </div>
     {% endif %}
-    <div class="projectPanel__content">
-        <a class="projectPanel__title" href="#">
+    <div class="project-panel__content">
+        <a class="project-panel__title" href="#">
             {{ params.title | safe }}
         </a>
-        <div class="projectPanel__body">
+        <div class="project-panel__body">
             <p>{{ params.body | safe }}</p>
         </div>
     </div>
diff --git a/src/_transforms/parse.js b/src/_transforms/parse.js
index 7af493d..bfbe777 100644
--- a/src/_transforms/parse.js
+++ b/src/_transforms/parse.js
@@ -1,7 +1,7 @@
 import { parseHTML } from "linkedom";
 
 export default (value, outputPath) => {
-    if (outputPath && outputPath.includes(".html")) {
+    if (outputPath && outputPath.includes(".html") && outputPath.includes("about")) {
         const { document } = parseHTML(value);
 
         const sectionHeadings = document.querySelectorAll("main h2:not([class])");
diff --git a/src/assets/styles/app.css b/src/assets/styles/app.css
index 5953a01..5744e60 100644
--- a/src/assets/styles/app.css
+++ b/src/assets/styles/app.css
@@ -15,4 +15,4 @@
 /* Components */
 @import "./components/card.css";
 @import "./components/navigation.css";
-@import "./components/projectPanel.css";
+@import "./components/project-panel.css";
diff --git a/src/assets/styles/base/_base.css b/src/assets/styles/base/_base.css
index fe3e828..972f85e 100644
--- a/src/assets/styles/base/_base.css
+++ b/src/assets/styles/base/_base.css
@@ -33,7 +33,7 @@ section {
 }
 
 .banner__text > * + *,
-.projectPanel__content > * + *,
+.project-panel__content > * + *,
 section > * + *,
 footer nav > * + *,
 footer .footer__contact-us > * + * {
diff --git a/src/assets/styles/components/projectPanel.css b/src/assets/styles/components/project-panel.css
similarity index 82%
rename from src/assets/styles/components/projectPanel.css
rename to src/assets/styles/components/project-panel.css
index 107687b..8d52dcd 100644
--- a/src/assets/styles/components/projectPanel.css
+++ b/src/assets/styles/components/project-panel.css
@@ -1,4 +1,4 @@
-div:has(.projectPanel) {
+div:has(.project-panel) {
     background-color: var(--color-indigo-100);
     display: flex;
     flex-direction: column;
@@ -7,7 +7,7 @@ div:has(.projectPanel) {
     padding-inline: var(--common-inline-padding);
 }
 
-.projectPanel {
+.project-panel {
     background-color: var(--fl-fgColor, var(--color-yellow));
     box-shadow: 0 0.625rem 1.25rem 0 #0B046C26;
     border: 0.1875rem solid var(--fl-bgColor, var(--color-indigo-100));
@@ -16,29 +16,29 @@ div:has(.projectPanel) {
     position: relative;
 }
 
-.projectPanel:has(a:focus) {
+.project-panel:has(a:focus) {
     border: 0.1875rem solid transparent;
     outline: 0.1875rem solid var(--fl-fgColor, transparent);
     outline-offset: 0.1875rem;
 }
 
-.projectPanel:hover {
+.project-panel:hover {
     box-shadow: 0 0.625rem 1.25rem 0 var(--fl-fgColor, #0B046C73);
 }
 
-.projectPanel__color {
+.project-panel__color {
     min-height: 2.5rem;
     border-bottom: 0.125rem solid var(--fl-fgColor, var(--color-yellow));
 }
 
-.projectPanel__image {
+.project-panel__image {
     min-width: 16.25rem;
     min-height: 12.1875rem;
     max-width: 31.0625rem;
     max-height: 23.125rem;
 }
 
-.projectPanel__title {
+.project-panel__title {
     font-weight: var(--font-weight-semibold);
     font-family: var(--family-sans-serif);
     font-size: var(--step-4);
@@ -46,14 +46,14 @@ div:has(.projectPanel) {
     color: black;
 }
 
-.projectPanel__title:focus {
+.project-panel__title:focus {
     background: none;
     box-shadow: none;
     color: var(--fl-linkColor, var(--black));
     outline: none;
 }
 
-.projectPanel__title::after {
+.project-panel__title::after {
     bottom: 0;
     content: "";
     display: block;
@@ -63,21 +63,21 @@ div:has(.projectPanel) {
     top: 0;
 }
 
-.projectPanel__content {
+.project-panel__content {
     background-color: white;
     display: flex;
     flex-direction: column;
-    margin: auto;
+    justify-content: center;
     padding: 1.875rem;
     width: 100%;
 }
 
 @media (width >= 70.875rem) {
-    .projectPanel {
+    .project-panel {
         flex-direction: row;
     }
 
-    .projectPanel__color {
+    .project-panel__color {
         border-right: 0.125rem solid var(--fl-fgColor, var(--color-yellow));
         min-width: 4.625rem;
         min-height: 23.125rem;

From 0a7691ff79433b7f65b42713e05b50ffe85aa12d Mon Sep 17 00:00:00 2001
From: Daniel Cho <chosww@gmail.com>
Date: Thu, 9 Jan 2025 15:19:58 -0500
Subject: [PATCH 04/10] feat: add single project page and update card's
 interactive styles

---
 src/_data/translations.json                   |  4 +-
 src/_includes/layouts/about.njk               |  2 +-
 src/_includes/layouts/base.njk                |  2 +-
 src/_includes/layouts/home.njk                |  8 +-
 src/_includes/layouts/project.njk             | 23 ++++++
 src/_includes/layouts/projects.njk            |  2 +-
 .../partials/components/card.macro.njk        | 12 +--
 .../components/projectPanel.macro.njk         |  6 +-
 src/_includes/svg/arrowRight.svg              |  3 +
 src/_transforms/parse.js                      |  4 +-
 src/assets/styles/base/_base.css              | 74 +++++++++++++++++++
 src/assets/styles/components/card.css         | 54 +++++++++++++-
 .../styles/components/project-panel.css       | 26 ++++++-
 .../projects/en/all-standards-with-us.md      | 72 ++++++++++++++++++
 src/collections/projects/en/project.md        |  4 -
 .../projects/fr/all-standards-with-us-fr.md   | 72 ++++++++++++++++++
 src/collections/projects/fr/project.md        |  4 -
 src/collections/projects/projects.11tydata.js | 14 ++++
 18 files changed, 351 insertions(+), 35 deletions(-)
 create mode 100644 src/_includes/layouts/project.njk
 create mode 100644 src/_includes/svg/arrowRight.svg
 create mode 100644 src/collections/projects/en/all-standards-with-us.md
 delete mode 100644 src/collections/projects/en/project.md
 create mode 100644 src/collections/projects/fr/all-standards-with-us-fr.md
 delete mode 100644 src/collections/projects/fr/project.md
 create mode 100644 src/collections/projects/projects.11tydata.js

diff --git a/src/_data/translations.json b/src/_data/translations.json
index 4d639db..16cd421 100644
--- a/src/_data/translations.json
+++ b/src/_data/translations.json
@@ -15,7 +15,7 @@
         "menu": "menu"
     },
     "fr": {
-        "announcements": "Announcements",
+        "announcements": "Announces",
         "contact-us": "Contactez-nous",
         "contact-us-address": "Adresse",
         "contact-us-email": "Courriel",
@@ -24,7 +24,7 @@
         "header-intro": "An <a href='https://idrc.ocadu.ca/'>Inclusive Design Research Centre</a> Project",
         "header-intro-short": "<a href='https://idrc.ocadu.ca/'>An IDRC Project</a>",
         "projects": "Projets",
-        "resources": "Resources",
+        "resources": "Ressources",
         "social-media": "Les médias sociaux",
         "main-menu": "Menu Principal",
         "menu": "menu"
diff --git a/src/_includes/layouts/about.njk b/src/_includes/layouts/about.njk
index 82a2dd4..8f35e30 100644
--- a/src/_includes/layouts/about.njk
+++ b/src/_includes/layouts/about.njk
@@ -9,7 +9,7 @@
       <div class="display__items">
         {% set cardType = "project" %}
         {% for item in collections['projects_' + lang] %}
-          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc }) }}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc, color: item.data.projectColor, url: item.data.permalink }) }}
         {% endfor %}
       </div>
       <div class="display__link">
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
index 99996c3..0fcf1fe 100644
--- a/src/_includes/layouts/base.njk
+++ b/src/_includes/layouts/base.njk
@@ -10,7 +10,7 @@
 <body>
   {% include "partials/global/header.njk" %}
   {% include "partials/components/navigation.njk" %}
-  <main>
+  <main {% if page.fileSlug == "about" %}class="sectioned"{% endif %}>
     {% if hasBanner %}
     <div class="banner bg-{{ bannerBgColor }}">
       <div class="banner__text">
diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk
index 3edb5ad..4fb48c0 100644
--- a/src/_includes/layouts/home.njk
+++ b/src/_includes/layouts/home.njk
@@ -8,7 +8,7 @@
       <div class="display__items">
         {% set cardType = "project" %}
         {% for item in collections['projects_' + lang] %}
-          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc }) }}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc, color: item.data.projectColor, url: item.data.permalink }) }}
         {% endfor %}
       </div>
       <div class="display__link">
@@ -21,7 +21,7 @@
       <div class="display__items">
         {% set cardType = "event" %}
         {% for item in collections.events %}
-          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc }) }}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc, url: item.data.permalink }) }}
         {% endfor %}
       </div>
       <div class="display__link">
@@ -34,7 +34,7 @@
       <div class="display__items">
         {% set cardType = "resource" %}
         {% for item in collections.resources %}
-          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc }) }}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc, url: item.data.permalink }) }}
         {% endfor %}
       </div>
       <div class="display__link">
@@ -47,7 +47,7 @@
       <div class="display__items">
         {% set cardType = "news" %}
         {% for item in collections.news %}
-          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc }) }}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc, url: item.data.permalink }) }}
         {% endfor %}
       </div>
       <div class="display__link">
diff --git a/src/_includes/layouts/project.njk b/src/_includes/layouts/project.njk
new file mode 100644
index 0000000..350b5e3
--- /dev/null
+++ b/src/_includes/layouts/project.njk
@@ -0,0 +1,23 @@
+{% extends "layouts/base.njk" %}
+
+{% block content %}
+<div class="project__container">
+    <div class="project__banner">
+        <div class="project__banner__color bg-{{ projectColor }}"></div>
+        <div class="project__banner__header">
+            <a href="/{% __ 'projects' %}" >{% __ 'projects' %} {% include 'svg/arrowRight.svg' %}</a>
+            <h1 class="project__banner__title">
+                {{ title }}
+            </h1>
+        </div>
+        {% if image %}
+            <div class="project__image">
+                {{ image }}
+            </div>
+        {% endif %}
+    </div>
+    <article>
+    {{ content | safe }}
+    </article>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/src/_includes/layouts/projects.njk b/src/_includes/layouts/projects.njk
index 54f319f..9ac5b39 100644
--- a/src/_includes/layouts/projects.njk
+++ b/src/_includes/layouts/projects.njk
@@ -5,7 +5,7 @@
 <div>
     {% if collections['projects_' + lang] %}
         {% for item in collections['projects_' + lang] %}
-            {{ projectPanel({image: item.data.image, title: item.data.title, body: item.data.desc }) }}
+            {{ projectPanel({image: item.data.image, title: item.data.title, body: item.data.desc, color: item.data.projectColor, url: item.data.permalink}) }}
         {% endfor %}
     {% endif %}
 </div>
diff --git a/src/_includes/partials/components/card.macro.njk b/src/_includes/partials/components/card.macro.njk
index 9467183..80a81e0 100644
--- a/src/_includes/partials/components/card.macro.njk
+++ b/src/_includes/partials/components/card.macro.njk
@@ -1,14 +1,16 @@
 {%- macro card(params) -%}
-<div class="card">
+<div class="card {% if params.color %}bg-{{ params.color }}{% endif %}">
+    {% if params.color %}
+        <div class="card__color">
+        </div>
+    {% endif %}
     {% if params.image %}
         <div class="card__image">
             {{ params.image }}
         </div>
     {% endif %}
     <div class="card__content">
-        <div class="card__title">
-            <h4>{{ params.title | safe }}</h4>
-        </div>
+        <a class="card__title" href="{{ params.url }}">{{ params.title | safe }}</a>
         {% if cardType === "event" %}
             <div class="card__event-status">
                 {% include 'svg/eventTag.svg' %}
@@ -26,7 +28,7 @@
             </div>
         {% endif %}
         <div class="card__body">
-            <p>{{ params.body | renderContent("md") }}</p>
+            <p>{{ params.body | safe }}</p>
         </div>
         {% if cardType === "resource" %}
             <div class="card__resource-type">
diff --git a/src/_includes/partials/components/projectPanel.macro.njk b/src/_includes/partials/components/projectPanel.macro.njk
index d8fab4c..536be19 100644
--- a/src/_includes/partials/components/projectPanel.macro.njk
+++ b/src/_includes/partials/components/projectPanel.macro.njk
@@ -1,6 +1,6 @@
 {%- macro projectPanel(params) -%}
-<div class="project-panel">
-    <div class="project-panel__color">
+<div class="project-panel bg-{{ params.color }}">
+    <div class="project-panel__color bg-{{ params.color }}">
     </div>
     {% if params.image %}
         <div class="project-panel__image">
@@ -8,7 +8,7 @@
         </div>
     {% endif %}
     <div class="project-panel__content">
-        <a class="project-panel__title" href="#">
+        <a class="project-panel__title" href="{{ params.url }}">
             {{ params.title | safe }}
         </a>
         <div class="project-panel__body">
diff --git a/src/_includes/svg/arrowRight.svg b/src/_includes/svg/arrowRight.svg
new file mode 100644
index 0000000..e3510b4
--- /dev/null
+++ b/src/_includes/svg/arrowRight.svg
@@ -0,0 +1,3 @@
+<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1L6 6L1 11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/_transforms/parse.js b/src/_transforms/parse.js
index bfbe777..f8e4e9d 100644
--- a/src/_transforms/parse.js
+++ b/src/_transforms/parse.js
@@ -1,10 +1,10 @@
 import { parseHTML } from "linkedom";
 
 export default (value, outputPath) => {
-    if (outputPath && outputPath.includes(".html") && outputPath.includes("about")) {
+    if (outputPath && outputPath.includes(".html")) {
         const { document } = parseHTML(value);
 
-        const sectionHeadings = document.querySelectorAll("main h2:not([class])");
+        const sectionHeadings = document.querySelectorAll("main.sectioned h2:not([class])");
         if (sectionHeadings.length > 0) {
             for (const heading of sectionHeadings) {
                 const getContent = (elem) => {
diff --git a/src/assets/styles/base/_base.css b/src/assets/styles/base/_base.css
index 972f85e..7994a95 100644
--- a/src/assets/styles/base/_base.css
+++ b/src/assets/styles/base/_base.css
@@ -26,6 +26,20 @@ h4 {
     font-size: var(--step-2);
 }
 
+article {
+    padding-block: var(--common-block-padding);
+    padding-inline: var(--common-inline-padding);
+}
+
+article > * + * {
+    margin-block-start: 2rem;
+}
+
+article ul,
+article ol {
+    padding-inline: 2rem;
+}
+
 section {
     padding-block: var(--common-block-padding);
     padding-inline: var(--common-inline-padding);
@@ -34,6 +48,7 @@ section {
 
 .banner__text > * + *,
 .project-panel__content > * + *,
+article > * + p,
 section > * + *,
 footer nav > * + *,
 footer .footer__contact-us > * + * {
@@ -73,6 +88,33 @@ section:last-of-type:not(:first-of-type) {
     border-bottom: 0.2rem solid transparent;
 }
 
+.project__banner {
+    display: flex;
+    gap: 2rem;
+    min-height: 16.25rem;
+    flex-direction: column;
+    border-bottom: 0.2rem solid transparent;
+}
+
+.project__banner__header {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.project__banner a,
+.project__banner__title {
+    padding-inline: var(--common-inline-padding);
+}
+
+.project__banner a svg {
+    stroke: var(--fl-linkColor, black);
+}
+
+.project__banner__color {
+    min-height: 1.875rem;
+}
+
 .bg-indigo-100 {
     background-color: var(--fl-bgColor, var(--color-indigo-100));
 }
@@ -91,6 +133,10 @@ section:last-of-type:not(:first-of-type) {
     color: var(--fl-fgColor, white);
 }
 
+.bg-yellow {
+    background-color: var(--fl-bgColor, var(--color-yellow));
+}
+
 .bg-dark-grey {
     background-color: var(--fl-bgColor, var(--color-dark-grey));
     color: var(--fl-fgColor, white);
@@ -126,4 +172,32 @@ section:last-of-type:not(:first-of-type) {
     .display__items {
         grid-template-columns: repeat(3, 1fr);
     }
+
+    .project__banner {
+        flex-direction: row;
+    }
+
+    .project__banner__color {
+        min-width: 3.5rem;
+        min-height: 39.8125rem;
+        border-right: 0.125rem solid var(--fl-fgColor, transparent);
+    }
+
+    .project__banner__header {
+        justify-content: start;
+    }
+
+    .project__banner a,
+    .project__banner__title {
+        padding-inline: unset;
+    }
+
+    .project__banner a {
+        padding-block-start: 5rem;
+    }
+
+    .project__banner__title {
+        position: relative;
+        top: 25%;
+    }
 }
diff --git a/src/assets/styles/components/card.css b/src/assets/styles/components/card.css
index 8df79c2..b489194 100644
--- a/src/assets/styles/components/card.css
+++ b/src/assets/styles/components/card.css
@@ -1,9 +1,35 @@
 .card {
-    background-color: white;
     color: black;
     min-width: 20.5rem;
     margin-bottom: 1rem;
-    box-shadow: 0px 0.625rem 1.25rem 0px hsla(244, 93%, 22%, 0.15);
+    box-shadow: 0 0.625rem 1.25rem 0 #0B046C26;
+    position: relative;
+}
+
+.card:hover {
+    box-shadow: 0 0.625rem 1.25rem 0 var(--fl-fgColor, #0B046C73);
+}
+
+.card:has(a:focus) {
+    border: 0.1875rem solid transparent;
+    outline: 0.1875rem solid var(--fl-fgColor, transparent);
+    outline-offset: 0.1875rem;
+}
+
+.card:has(a:focus) > .card__content {
+    border: unset;
+}
+
+.card:has(a:focus) > .card__color {
+    border: unset;
+    border-bottom: 0.1875rem solid transparent;
+}
+
+.card__color {
+    border-top: 0.1875rem solid var(--fl-bgColor, transparent);
+    border-left: 0.1875rem solid var(--fl-bgColor, transparent);
+    border-right: 0.1875rem solid var(--fl-bgColor, transparent);
+    min-height: 2.5rem;
 }
 
 .card__image {
@@ -13,19 +39,39 @@
 }
 
 .card__content {
+    border: 0.1875rem solid var(--fl-bgColor, transparent);
+    background-color: var(--fl-bgColor, white);
     display: flex;
     flex-direction: column;
     gap: 0.93rem;
     padding: 1.875rem;
 }
 
-.card__title h4{
+.card__title {
+    color: var(--fl-linkColor, black);
     font-family: var(--family-sans-serif);
     font-weight: var(--font-weight-semibold);
-    font-size: var(--step-1);
+    font-size: var(--step-2);
+    text-decoration: none;
     margin: 0;
 }
 
+.card__title:focus {
+    background: none;
+    box-shadow: none;
+    outline: none;
+}
+
+.card__title::after {
+    bottom: 0;
+    content: "";
+    display: block;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
 .card__body,
 .card__date,
 .card__event-status {
diff --git a/src/assets/styles/components/project-panel.css b/src/assets/styles/components/project-panel.css
index 8d52dcd..ec9716a 100644
--- a/src/assets/styles/components/project-panel.css
+++ b/src/assets/styles/components/project-panel.css
@@ -8,9 +8,7 @@ div:has(.project-panel) {
 }
 
 .project-panel {
-    background-color: var(--fl-fgColor, var(--color-yellow));
     box-shadow: 0 0.625rem 1.25rem 0 #0B046C26;
-    border: 0.1875rem solid var(--fl-bgColor, var(--color-indigo-100));
     display: flex;
     flex-direction: column;
     position: relative;
@@ -22,13 +20,24 @@ div:has(.project-panel) {
     outline-offset: 0.1875rem;
 }
 
+.project-panel:has(a:focus) > .project-panel__color {
+    border: unset;
+    border-bottom: 0.1875rem solid transparent;
+}
+
+.project-panel:has(a:focus) > .project-panel__content {
+    border: unset;
+}
+
 .project-panel:hover {
     box-shadow: 0 0.625rem 1.25rem 0 var(--fl-fgColor, #0B046C73);
 }
 
 .project-panel__color {
     min-height: 2.5rem;
-    border-bottom: 0.125rem solid var(--fl-fgColor, var(--color-yellow));
+    border-top: 0.1875rem solid var(--fl-bgColor, transparent);
+    border-left: 0.1875rem solid var(--fl-bgColor, transparent);
+    border-right: 0.1875rem solid var(--fl-bgColor, transparent);
 }
 
 .project-panel__image {
@@ -65,6 +74,7 @@ div:has(.project-panel) {
 
 .project-panel__content {
     background-color: white;
+    border: 0.1875rem solid var(--fl-fgColor, transparent);
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -77,9 +87,17 @@ div:has(.project-panel) {
         flex-direction: row;
     }
 
+    .project-panel:has(a:focus) > .project-panel__color {
+        border: unset;
+        border-right: 0.1875rem solid transparent;
+    }
+
     .project-panel__color {
-        border-right: 0.125rem solid var(--fl-fgColor, var(--color-yellow));
         min-width: 4.625rem;
         min-height: 23.125rem;
+        border-top: 0.1875rem solid var(--fl-bgColor, transparent);
+        border-left: 0.1875rem solid var(--fl-bgColor, transparent);
+        border-right: unset;
+        border-bottom: 0.1875rem solid var(--fl-bgColor, transparent);
     }
 }
\ No newline at end of file
diff --git a/src/collections/projects/en/all-standards-with-us.md b/src/collections/projects/en/all-standards-with-us.md
new file mode 100644
index 0000000..a278817
--- /dev/null
+++ b/src/collections/projects/en/all-standards-with-us.md
@@ -0,0 +1,72 @@
+---
+title: All Standards With Us
+desc: This project makes standards development accessible to people with disabilities and Deaf individuals, ensuring goods and services are inclusive. We focus on removing barriers in Standards Development Organizations (SDOs) to support full participation.
+projectColor: yellow
+layout: layouts/project
+---
+
+## About this project
+
+The goal of this project is to make the process of creating standards more accessible to people with disabilities 
+and Deaf people. The idea is that if more people with disabilities and Deaf people get involved in this process, 
+the goods and services we use in our daily lives will be more accessible. We’re focusing on how this is done 
+within Standards Development Organizations (SDOs). Our vision is to remove accessibility barriers and have 
+standards development processes that support a wide range of needs, so that people with disabilities are 
+able to participate in mainstream standards development.
+
+## What are standards?
+
+Standards affect the goods and services we use in our daily lives. They make sure goods and services are of good 
+quality, consistent, reliable, efficient, and safe. For example, TV manufacturers are required by standards to 
+include features such as inputs and resolution that are of a certain quality.
+In short, standards allow goods and services to work smoothly, and allow people to trust that things are made well.
+Learn more about 
+[what standards are](https://www.youtube.com/watch?si=VY_Y8Yv4Z4kmKDcG&v=S47SCjCYJHo&feature=youtu.be).
+
+## How are standards made?
+
+<em>Who does it involve?</em>
+
+A Standard Development Organization (SDO) brings together experts to create standards. These experts are from various 
+backgrounds such as industry, academia, and government.
+
+<em>What do they do?</em>
+
+Experts work together to share their experiences and come to an agreement on what a standard should be. 
+These standards are written down and published by SDOs so that they can be used by the public, governments, 
+and industry. Standards are also regularly checked and improved, to make sure they are up to date as the world changes.
+
+<em>Working globally</em>
+
+Sometimes, SDOs can work internationally with other groups to make sure standards are similar across the world.
+Read more about it on the 
+[Standards Council of Canada website](https://scc-ccn.ca/standards/how-standards-are-developed/how-national-standards-are-developed).
+
+## Why is it important for the standards process to be inclusive?
+
+Standards define how everyday things are made. By considering accessibility when developing these standards, we can 
+make everyday things easier for everyone to use. It’s especially important to involve people with disabilities and 
+Deaf people in creating these standards. Their experiences and expertise can help us consider a broader range of needs 
+and make sure that the standards support accessibility for everyone.
+
+## Project goals
+
+Our project goals are to:
+
+- Identify barriers for people with disabilities and disability organizations to take part in the standards 
+processes through co-design and secondary research (literature review, jurisdictional scan)
+- Create guidance on how to make the standards development process more inclusive to people with disabilities 
+and Deaf people, and pilot them with mainstream SDOs.
+- Create capacity building resources to equip disability organizations and people with disabilities to take 
+part in the standards development process.
+
+## Project partners
+
+This list will be updated as the project progresses.
+
+## References
+
+International Organization for Standardization (2024). Standards. Retrieved from https://www.iso.org/standards.html.
+
+University of Massachusetts (2024). Standards. Retrieved from 
+https://guides.library.umass.edu/c.php?g=719645&p=5126968.
diff --git a/src/collections/projects/en/project.md b/src/collections/projects/en/project.md
deleted file mode 100644
index b7433ab..0000000
--- a/src/collections/projects/en/project.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Project
-desc: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
----
\ No newline at end of file
diff --git a/src/collections/projects/fr/all-standards-with-us-fr.md b/src/collections/projects/fr/all-standards-with-us-fr.md
new file mode 100644
index 0000000..70422b1
--- /dev/null
+++ b/src/collections/projects/fr/all-standards-with-us-fr.md
@@ -0,0 +1,72 @@
+---
+title: All Standards With Us FR
+desc: This project makes standards development accessible to people with disabilities and Deaf individuals, ensuring goods and services are inclusive. We focus on removing barriers in Standards Development Organizations (SDOs) to support full participation.
+projectColor: yellow
+layout: layouts/project
+---
+
+## About this project
+
+The goal of this project is to make the process of creating standards more accessible to people with disabilities 
+and Deaf people. The idea is that if more people with disabilities and Deaf people get involved in this process, 
+the goods and services we use in our daily lives will be more accessible. We’re focusing on how this is done 
+within Standards Development Organizations (SDOs). Our vision is to remove accessibility barriers and have 
+standards development processes that support a wide range of needs, so that people with disabilities are 
+able to participate in mainstream standards development.
+
+## What are standards?
+
+Standards affect the goods and services we use in our daily lives. They make sure goods and services are of good 
+quality, consistent, reliable, efficient, and safe. For example, TV manufacturers are required by standards to 
+include features such as inputs and resolution that are of a certain quality.
+In short, standards allow goods and services to work smoothly, and allow people to trust that things are made well.
+Learn more about 
+[what standards are](https://www.youtube.com/watch?si=VY_Y8Yv4Z4kmKDcG&v=S47SCjCYJHo&feature=youtu.be).
+
+## How are standards made?
+
+<em>Who does it involve?</em>
+
+A Standard Development Organization (SDO) brings together experts to create standards. These experts are from various 
+backgrounds such as industry, academia, and government.
+
+<em>What do they do?</em>
+
+Experts work together to share their experiences and come to an agreement on what a standard should be. 
+These standards are written down and published by SDOs so that they can be used by the public, governments, 
+and industry. Standards are also regularly checked and improved, to make sure they are up to date as the world changes.
+
+<em>Working globally</em>
+
+Sometimes, SDOs can work internationally with other groups to make sure standards are similar across the world.
+Read more about it on the 
+[Standards Council of Canada website](https://scc-ccn.ca/standards/how-standards-are-developed/how-national-standards-are-developed).
+
+## Why is it important for the standards process to be inclusive?
+
+Standards define how everyday things are made. By considering accessibility when developing these standards, we can 
+make everyday things easier for everyone to use. It’s especially important to involve people with disabilities and 
+Deaf people in creating these standards. Their experiences and expertise can help us consider a broader range of needs 
+and make sure that the standards support accessibility for everyone.
+
+## Project goals
+
+Our project goals are to:
+
+- Identify barriers for people with disabilities and disability organizations to take part in the standards 
+processes through co-design and secondary research (literature review, jurisdictional scan)
+- Create guidance on how to make the standards development process more inclusive to people with disabilities 
+and Deaf people, and pilot them with mainstream SDOs.
+- Create capacity building resources to equip disability organizations and people with disabilities to take 
+part in the standards development process.
+
+## Project partners
+
+This list will be updated as the project progresses.
+
+## References
+
+International Organization for Standardization (2024). Standards. Retrieved from https://www.iso.org/standards.html.
+
+University of Massachusetts (2024). Standards. Retrieved from 
+https://guides.library.umass.edu/c.php?g=719645&p=5126968.
diff --git a/src/collections/projects/fr/project.md b/src/collections/projects/fr/project.md
deleted file mode 100644
index ab4aaef..0000000
--- a/src/collections/projects/fr/project.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Project
-desc: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
----
\ No newline at end of file
diff --git a/src/collections/projects/projects.11tydata.js b/src/collections/projects/projects.11tydata.js
new file mode 100644
index 0000000..031627c
--- /dev/null
+++ b/src/collections/projects/projects.11tydata.js
@@ -0,0 +1,14 @@
+import { generatePermalink } from "eleventy-plugin-fluid";
+
+export default {
+    eleventyComputed: {
+        permalink: (data) => {
+            if (data.link) {
+                return null;
+            }
+
+            const locale = data.locale;
+            return generatePermalink(data, "projects", locale === "fr-CA" ? "projets" : "projects");
+        }
+    }
+};

From de6e0fc8f2e6000a277193e6e1a12b3fb9a1de1f Mon Sep 17 00:00:00 2001
From: Daniel Cho <chosww@gmail.com>
Date: Fri, 10 Jan 2025 14:17:29 -0500
Subject: [PATCH 05/10] fix: localization issues

---
 src/_includes/layouts/project.njk                | 2 +-
 src/_includes/partials/components/navigation.njk | 2 +-
 src/assets/styles/base/_base.css                 | 6 +++++-
 src/collections/projects/en/en.json              | 4 ++++
 src/collections/projects/fr/fr.json              | 4 ++++
 5 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 src/collections/projects/en/en.json
 create mode 100644 src/collections/projects/fr/fr.json

diff --git a/src/_includes/layouts/project.njk b/src/_includes/layouts/project.njk
index 350b5e3..4716ebe 100644
--- a/src/_includes/layouts/project.njk
+++ b/src/_includes/layouts/project.njk
@@ -5,7 +5,7 @@
     <div class="project__banner">
         <div class="project__banner__color bg-{{ projectColor }}"></div>
         <div class="project__banner__header">
-            <a href="/{% __ 'projects' %}" >{% __ 'projects' %} {% include 'svg/arrowRight.svg' %}</a>
+            <a href="{% if lang === "en" %}/projects{% else %}/{{lang }}/{% __ 'projects' %}{% endif %}" >{% __ 'projects' %} {% include 'svg/arrowRight.svg' %}</a>
             <h1 class="project__banner__title">
                 {{ title }}
             </h1>
diff --git a/src/_includes/partials/components/navigation.njk b/src/_includes/partials/components/navigation.njk
index c100a9c..a8e560b 100644
--- a/src/_includes/partials/components/navigation.njk
+++ b/src/_includes/partials/components/navigation.njk
@@ -1,6 +1,6 @@
 <nav class="navigation">
     <div class="navigation__link">
-        <a class="navigation__home" href="/">{{ "<b>Inclusive</b><br>Standards" | safe }}</a>
+        <a class="navigation__home" href="/{% if lang != 'en' %}{{ lang }}{% endif %}">{{ "<b>Inclusive</b><br>Standards" | safe }}</a>
         {% set navItems = collections['pages_' + lang] | eleventyNavigation %}
 
         <button class="navigation__toggle" id="navigation-toggle" aria-expanded="false">{% __ 'menu' %} {% include 'svg/menu.svg' %}</button>
diff --git a/src/assets/styles/base/_base.css b/src/assets/styles/base/_base.css
index 7994a95..eaaef60 100644
--- a/src/assets/styles/base/_base.css
+++ b/src/assets/styles/base/_base.css
@@ -107,6 +107,10 @@ section:last-of-type:not(:first-of-type) {
     padding-inline: var(--common-inline-padding);
 }
 
+.project__banner a {
+    width: fit-content;
+}
+
 .project__banner a svg {
     stroke: var(--fl-linkColor, black);
 }
@@ -193,7 +197,7 @@ section:last-of-type:not(:first-of-type) {
     }
 
     .project__banner a {
-        padding-block-start: 5rem;
+        margin-block-start: 5rem;
     }
 
     .project__banner__title {
diff --git a/src/collections/projects/en/en.json b/src/collections/projects/en/en.json
new file mode 100644
index 0000000..495497b
--- /dev/null
+++ b/src/collections/projects/en/en.json
@@ -0,0 +1,4 @@
+{
+    "lang": "en",
+    "locale": "en-CA"
+}
diff --git a/src/collections/projects/fr/fr.json b/src/collections/projects/fr/fr.json
new file mode 100644
index 0000000..6df23b4
--- /dev/null
+++ b/src/collections/projects/fr/fr.json
@@ -0,0 +1,4 @@
+{
+    "lang": "fr",
+    "locale": "fr-CA"
+}

From b2bec57bf34d4ba835c84314ca8ebf95c330a373 Mon Sep 17 00:00:00 2001
From: Daniel Cho <chosww@gmail.com>
Date: Mon, 13 Jan 2025 11:59:45 -0500
Subject: [PATCH 06/10] fix: update based on PR feedback

---
 src/_data/translations.json                    |  4 ++--
 src/_includes/layouts/project.njk              | 10 +++++++---
 src/assets/styles/base/_base.css               | 18 ++++++++++++------
 src/assets/styles/components/project-panel.css |  5 +++--
 src/collections/projects/en/en.json            |  3 +--
 src/collections/projects/fr/fr.json            |  3 +--
 src/collections/projects/projects.11tydata.js  |  5 ++---
 7 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/src/_data/translations.json b/src/_data/translations.json
index c740299..dd2d219 100644
--- a/src/_data/translations.json
+++ b/src/_data/translations.json
@@ -15,12 +15,12 @@
         "menu": "menu"
     },
     "fr": {
-        "announcements": "Announces",
+        "announcements": "Annonces",
         "contact-us": "Contactez-nous",
         "contact-us-address": "Adresse",
         "contact-us-email": "Courriel",
         "contact-us-phone": "Téléphone",
-        "events": "Events",
+        "events": "Événements",
         "header-intro": "Un projet <a href='https://idrc.ocadu.ca/' rel='external'>Inclusive Design Research Centre</a>",
         "header-intro-short": "<a href='https://idrc.ocadu.ca/' rel='external'>Un project IDRC</a>",
         "projects": "Projets",
diff --git a/src/_includes/layouts/project.njk b/src/_includes/layouts/project.njk
index 4716ebe..56b18cf 100644
--- a/src/_includes/layouts/project.njk
+++ b/src/_includes/layouts/project.njk
@@ -16,8 +16,12 @@
             </div>
         {% endif %}
     </div>
-    <article>
-    {{ content | safe }}
-    </article>
+    <div class="project__content">
+        <div class="project__nav">
+        </div>
+        <article>
+        {{ content | safe }}
+        </article>
+    </div>
 </div>
 {% endblock %}
\ No newline at end of file
diff --git a/src/assets/styles/base/_base.css b/src/assets/styles/base/_base.css
index eaaef60..3c08f95 100644
--- a/src/assets/styles/base/_base.css
+++ b/src/assets/styles/base/_base.css
@@ -26,11 +26,6 @@ h4 {
     font-size: var(--step-2);
 }
 
-article {
-    padding-block: var(--common-block-padding);
-    padding-inline: var(--common-inline-padding);
-}
-
 article > * + * {
     margin-block-start: 2rem;
 }
@@ -108,17 +103,28 @@ section:last-of-type:not(:first-of-type) {
 }
 
 .project__banner a {
+    align-items: center;
+    color: var(--fl-linkColor, var(--color-indigo-700));
+    display: flex;
+    gap: 0.4rem;
     width: fit-content;
 }
 
 .project__banner a svg {
-    stroke: var(--fl-linkColor, black);
+    stroke: var(--fl-linkColor, var(--color-indigo-700));
 }
 
 .project__banner__color {
     min-height: 1.875rem;
 }
 
+.project__content {
+    display: grid;
+    grid-template-columns: 0 65%;
+    padding-block: var(--common-block-padding);
+    padding-inline: var(--common-inline-padding);
+}
+
 .bg-indigo-100 {
     background-color: var(--fl-bgColor, var(--color-indigo-100));
 }
diff --git a/src/assets/styles/components/project-panel.css b/src/assets/styles/components/project-panel.css
index ec9716a..8d19832 100644
--- a/src/assets/styles/components/project-panel.css
+++ b/src/assets/styles/components/project-panel.css
@@ -38,6 +38,7 @@ div:has(.project-panel) {
     border-top: 0.1875rem solid var(--fl-bgColor, transparent);
     border-left: 0.1875rem solid var(--fl-bgColor, transparent);
     border-right: 0.1875rem solid var(--fl-bgColor, transparent);
+    box-sizing: content-box;
 }
 
 .project-panel__image {
@@ -73,8 +74,8 @@ div:has(.project-panel) {
 }
 
 .project-panel__content {
-    background-color: white;
-    border: 0.1875rem solid var(--fl-fgColor, transparent);
+    background-color: var(--fl-bgColor, white);
+    border: 0.1875rem solid var(--fl-bgColor, transparent);
     display: flex;
     flex-direction: column;
     justify-content: center;
diff --git a/src/collections/projects/en/en.json b/src/collections/projects/en/en.json
index 495497b..5b081b7 100644
--- a/src/collections/projects/en/en.json
+++ b/src/collections/projects/en/en.json
@@ -1,4 +1,3 @@
 {
-    "lang": "en",
-    "locale": "en-CA"
+    "lang": "en"
 }
diff --git a/src/collections/projects/fr/fr.json b/src/collections/projects/fr/fr.json
index 6df23b4..c7a37af 100644
--- a/src/collections/projects/fr/fr.json
+++ b/src/collections/projects/fr/fr.json
@@ -1,4 +1,3 @@
 {
-    "lang": "fr",
-    "locale": "fr-CA"
+    "lang": "fr"
 }
diff --git a/src/collections/projects/projects.11tydata.js b/src/collections/projects/projects.11tydata.js
index 031627c..6ad5677 100644
--- a/src/collections/projects/projects.11tydata.js
+++ b/src/collections/projects/projects.11tydata.js
@@ -1,4 +1,4 @@
-import { generatePermalink } from "eleventy-plugin-fluid";
+import { __, generatePermalink } from "eleventy-plugin-fluid";
 
 export default {
     eleventyComputed: {
@@ -7,8 +7,7 @@ export default {
                 return null;
             }
 
-            const locale = data.locale;
-            return generatePermalink(data, "projects", locale === "fr-CA" ? "projets" : "projects");
+            return generatePermalink(data, "projects", __("projects", {}, data));
         }
     }
 };

From 4a3dcf2eb0d6d97ce22c68d398e5837e3f895934 Mon Sep 17 00:00:00 2001
From: Ned Zimmerman <ned@bight.dev>
Date: Mon, 13 Jan 2025 16:28:30 -0400
Subject: [PATCH 07/10] feat: add CMS configuration for projects

---
 src/admin/config.yml                          | 27 +++++++++++++++++++
 .../projects/en/all-standards-with-us.md      | 16 ++++-------
 ...with-us-fr.md => all-standards-with-us.md} | 16 ++++-------
 3 files changed, 37 insertions(+), 22 deletions(-)
 rename src/collections/projects/fr/{all-standards-with-us-fr.md => all-standards-with-us.md} (83%)

diff --git a/src/admin/config.yml b/src/admin/config.yml
index 4aa8eaf..1a6e7c1 100644
--- a/src/admin/config.yml
+++ b/src/admin/config.yml
@@ -51,6 +51,33 @@ collections:
           required: false,
         }
       - { label: Body, name: body, widget: markdown, i18n: true }
+  - label: Projects
+    label_singular: Project
+    name: projects
+    icon: inventory
+    i18n:
+      structure: multiple_folders
+    folder: src/collections/projects/
+    extension: md
+    create: true
+    fields:
+      - { label: Title, name: title, widget: string, i18n: true }
+      - label: "Project Colour"
+        name: projectColor
+        widget: select
+        options:
+          - label: Yellow
+            value: yellow
+        i18n: copy
+        required: false
+      - {
+          label: "Description",
+          name: desc,
+          widget: string,
+          i18n: true,
+          required: true,
+        }
+      - { label: Body, name: body, widget: markdown, i18n: true }
   - label: Metadata
     name: metadata
     files:
diff --git a/src/collections/projects/en/all-standards-with-us.md b/src/collections/projects/en/all-standards-with-us.md
index a278817..7fea049 100644
--- a/src/collections/projects/en/all-standards-with-us.md
+++ b/src/collections/projects/en/all-standards-with-us.md
@@ -1,18 +1,12 @@
 ---
 title: All Standards With Us
-desc: This project makes standards development accessible to people with disabilities and Deaf individuals, ensuring goods and services are inclusive. We focus on removing barriers in Standards Development Organizations (SDOs) to support full participation.
 projectColor: yellow
+desc: This project makes standards development accessible to people with disabilities and Deaf individuals, ensuring goods and services are inclusive. We focus on removing barriers in Standards Development Organizations (SDOs) to support full participation.
 layout: layouts/project
 ---
-
 ## About this project
 
-The goal of this project is to make the process of creating standards more accessible to people with disabilities 
-and Deaf people. The idea is that if more people with disabilities and Deaf people get involved in this process, 
-the goods and services we use in our daily lives will be more accessible. We’re focusing on how this is done 
-within Standards Development Organizations (SDOs). Our vision is to remove accessibility barriers and have 
-standards development processes that support a wide range of needs, so that people with disabilities are 
-able to participate in mainstream standards development.
+The goal of this project is to make the process of creating standards more accessible to people with disabilities and Deaf people. The idea is that if more people with disabilities and Deaf people get involved in this process, the goods and services we use in our daily lives will be more accessible. We’re focusing on how this is done within Standards Development Organizations (SDOs). Our vision is to remove accessibility barriers and have standards development processes that support a wide range of needs, so that people with disabilities are able to participate in mainstream standards development.
 
 ## What are standards?
 
@@ -25,18 +19,18 @@ Learn more about
 
 ## How are standards made?
 
-<em>Who does it involve?</em>
+_Who does it involve?_
 
 A Standard Development Organization (SDO) brings together experts to create standards. These experts are from various 
 backgrounds such as industry, academia, and government.
 
-<em>What do they do?</em>
+_What do they do?_
 
 Experts work together to share their experiences and come to an agreement on what a standard should be. 
 These standards are written down and published by SDOs so that they can be used by the public, governments, 
 and industry. Standards are also regularly checked and improved, to make sure they are up to date as the world changes.
 
-<em>Working globally</em>
+_Working globally_
 
 Sometimes, SDOs can work internationally with other groups to make sure standards are similar across the world.
 Read more about it on the 
diff --git a/src/collections/projects/fr/all-standards-with-us-fr.md b/src/collections/projects/fr/all-standards-with-us.md
similarity index 83%
rename from src/collections/projects/fr/all-standards-with-us-fr.md
rename to src/collections/projects/fr/all-standards-with-us.md
index 70422b1..1eb9662 100644
--- a/src/collections/projects/fr/all-standards-with-us-fr.md
+++ b/src/collections/projects/fr/all-standards-with-us.md
@@ -1,18 +1,12 @@
 ---
 title: All Standards With Us FR
-desc: This project makes standards development accessible to people with disabilities and Deaf individuals, ensuring goods and services are inclusive. We focus on removing barriers in Standards Development Organizations (SDOs) to support full participation.
 projectColor: yellow
+desc: This project makes standards development accessible to people with disabilities and Deaf individuals, ensuring goods and services are inclusive. We focus on removing barriers in Standards Development Organizations (SDOs) to support full participation.
 layout: layouts/project
 ---
-
 ## About this project
 
-The goal of this project is to make the process of creating standards more accessible to people with disabilities 
-and Deaf people. The idea is that if more people with disabilities and Deaf people get involved in this process, 
-the goods and services we use in our daily lives will be more accessible. We’re focusing on how this is done 
-within Standards Development Organizations (SDOs). Our vision is to remove accessibility barriers and have 
-standards development processes that support a wide range of needs, so that people with disabilities are 
-able to participate in mainstream standards development.
+The goal of this project is to make the process of creating standards more accessible to people with disabilities and Deaf people. The idea is that if more people with disabilities and Deaf people get involved in this process, the goods and services we use in our daily lives will be more accessible. We’re focusing on how this is done within Standards Development Organizations (SDOs). Our vision is to remove accessibility barriers and have standards development processes that support a wide range of needs, so that people with disabilities are able to participate in mainstream standards development.
 
 ## What are standards?
 
@@ -25,18 +19,18 @@ Learn more about
 
 ## How are standards made?
 
-<em>Who does it involve?</em>
+_Who does it involve?_
 
 A Standard Development Organization (SDO) brings together experts to create standards. These experts are from various 
 backgrounds such as industry, academia, and government.
 
-<em>What do they do?</em>
+_What do they do?_
 
 Experts work together to share their experiences and come to an agreement on what a standard should be. 
 These standards are written down and published by SDOs so that they can be used by the public, governments, 
 and industry. Standards are also regularly checked and improved, to make sure they are up to date as the world changes.
 
-<em>Working globally</em>
+_Working globally_
 
 Sometimes, SDOs can work internationally with other groups to make sure standards are similar across the world.
 Read more about it on the 

From 0d9c422f4c54743b87a9ac37c6e9d8d3cf39b5b2 Mon Sep 17 00:00:00 2001
From: Daniel Cho <chosww@gmail.com>
Date: Mon, 13 Jan 2025 15:37:49 -0500
Subject: [PATCH 08/10] fix: remove empty div for card color

---
 .../partials/components/card.macro.njk        |  4 --
 .../components/projectPanel.macro.njk         |  2 -
 src/assets/styles/components/card.css         | 26 ++++++------
 .../styles/components/project-panel.css       | 40 ++++++++-----------
 4 files changed, 29 insertions(+), 43 deletions(-)

diff --git a/src/_includes/partials/components/card.macro.njk b/src/_includes/partials/components/card.macro.njk
index 80a81e0..652a48d 100644
--- a/src/_includes/partials/components/card.macro.njk
+++ b/src/_includes/partials/components/card.macro.njk
@@ -1,9 +1,5 @@
 {%- macro card(params) -%}
 <div class="card {% if params.color %}bg-{{ params.color }}{% endif %}">
-    {% if params.color %}
-        <div class="card__color">
-        </div>
-    {% endif %}
     {% if params.image %}
         <div class="card__image">
             {{ params.image }}
diff --git a/src/_includes/partials/components/projectPanel.macro.njk b/src/_includes/partials/components/projectPanel.macro.njk
index 536be19..bd1c07e 100644
--- a/src/_includes/partials/components/projectPanel.macro.njk
+++ b/src/_includes/partials/components/projectPanel.macro.njk
@@ -1,7 +1,5 @@
 {%- macro projectPanel(params) -%}
 <div class="project-panel bg-{{ params.color }}">
-    <div class="project-panel__color bg-{{ params.color }}">
-    </div>
     {% if params.image %}
         <div class="project-panel__image">
             {{ params.image }}
diff --git a/src/assets/styles/components/card.css b/src/assets/styles/components/card.css
index b489194..6ddf9cf 100644
--- a/src/assets/styles/components/card.css
+++ b/src/assets/styles/components/card.css
@@ -2,34 +2,34 @@
     color: black;
     min-width: 20.5rem;
     margin-bottom: 1rem;
-    box-shadow: 0 0.625rem 1.25rem 0 #0B046C26;
+    box-shadow:
+        0 0.625rem 1.25rem 0 #0B046C26,
+        inset 0 0 0 0.1875rem var(--fl-fgColor, transparent);
+    padding-top: 2.5rem;
     position: relative;
 }
 
-.card:hover {
-    box-shadow: 0 0.625rem 1.25rem 0 var(--fl-fgColor, #0B046C73);
-}
-
 .card:has(a:focus) {
     border: 0.1875rem solid transparent;
+    box-shadow: 0 0.625rem 1.25rem 0 #0B046C26;
     outline: 0.1875rem solid var(--fl-fgColor, transparent);
     outline-offset: 0.1875rem;
 }
 
 .card:has(a:focus) > .card__content {
     border: unset;
+    box-shadow: 0 -0.1875rem 0 var(--fl-fgColor, transparent);
 }
 
-.card:has(a:focus) > .card__color {
-    border: unset;
-    border-bottom: 0.1875rem solid transparent;
+.card:hover {
+    box-shadow:
+        inset 0 0 0 0.1875rem var(--fl-fgColor, transparent),    
+        0 0.625rem 1.25rem 0 var(--fl-fgColor, #0B046C73);
 }
 
-.card__color {
-    border-top: 0.1875rem solid var(--fl-bgColor, transparent);
-    border-left: 0.1875rem solid var(--fl-bgColor, transparent);
-    border-right: 0.1875rem solid var(--fl-bgColor, transparent);
-    min-height: 2.5rem;
+.card:hover.card:has(a:focus) {
+    box-shadow:
+        0 0.625rem 1.25rem 0 var(--fl-fgColor, #0B046C73);
 }
 
 .card__image {
diff --git a/src/assets/styles/components/project-panel.css b/src/assets/styles/components/project-panel.css
index 8d19832..405eafc 100644
--- a/src/assets/styles/components/project-panel.css
+++ b/src/assets/styles/components/project-panel.css
@@ -8,37 +8,36 @@ div:has(.project-panel) {
 }
 
 .project-panel {
-    box-shadow: 0 0.625rem 1.25rem 0 #0B046C26;
+    box-shadow:
+        0 0.625rem 1.25rem 0 #0B046C26,
+        inset 0 0 0 0.1875rem var(--fl-fgColor, transparent);
     display: flex;
     flex-direction: column;
+    padding-top: 2.5rem;
     position: relative;
 }
 
 .project-panel:has(a:focus) {
     border: 0.1875rem solid transparent;
+    box-shadow: 0 0.625rem 1.25rem 0 #0B046C26;
     outline: 0.1875rem solid var(--fl-fgColor, transparent);
     outline-offset: 0.1875rem;
 }
 
-.project-panel:has(a:focus) > .project-panel__color {
-    border: unset;
-    border-bottom: 0.1875rem solid transparent;
-}
-
 .project-panel:has(a:focus) > .project-panel__content {
     border: unset;
+    box-shadow: 0 -0.1875rem 0 var(--fl-fgColor, transparent);
 }
 
 .project-panel:hover {
-    box-shadow: 0 0.625rem 1.25rem 0 var(--fl-fgColor, #0B046C73);
+    box-shadow:
+        inset 0 0 0 0.1875rem var(--fl-fgColor, transparent),
+        0 0.625rem 1.25rem 0 var(--fl-fgColor, #0B046C73);
 }
 
-.project-panel__color {
-    min-height: 2.5rem;
-    border-top: 0.1875rem solid var(--fl-bgColor, transparent);
-    border-left: 0.1875rem solid var(--fl-bgColor, transparent);
-    border-right: 0.1875rem solid var(--fl-bgColor, transparent);
-    box-sizing: content-box;
+.project-panel:hover.project-panel:has(a:focus) {
+    box-shadow:
+        0 0.625rem 1.25rem 0 var(--fl-fgColor, #0B046C73);
 }
 
 .project-panel__image {
@@ -86,19 +85,12 @@ div:has(.project-panel) {
 @media (width >= 70.875rem) {
     .project-panel {
         flex-direction: row;
+        padding-left: 4.625rem;
+        padding-top: unset;
     }
 
-    .project-panel:has(a:focus) > .project-panel__color {
+    .project-panel:has(a:focus) > .project-panel__content {
         border: unset;
-        border-right: 0.1875rem solid transparent;
-    }
-
-    .project-panel__color {
-        min-width: 4.625rem;
-        min-height: 23.125rem;
-        border-top: 0.1875rem solid var(--fl-bgColor, transparent);
-        border-left: 0.1875rem solid var(--fl-bgColor, transparent);
-        border-right: unset;
-        border-bottom: 0.1875rem solid var(--fl-bgColor, transparent);
+        box-shadow: -0.1875rem 0 0 var(--fl-fgColor, transparent);
     }
 }
\ No newline at end of file

From 006ab9fdcb8919383a9776040c2fc21f9ba83283 Mon Sep 17 00:00:00 2001
From: Ned Zimmerman <ned@bight.dev>
Date: Tue, 14 Jan 2025 08:16:41 -0400
Subject: [PATCH 09/10] feat: use variables for shadows

Signed-off-by: Ned Zimmerman <ned@bight.dev>
---
 src/assets/styles/abstracts/_variables.css     | 3 +++
 src/assets/styles/components/card.css          | 8 ++++----
 src/assets/styles/components/project-panel.css | 8 ++++----
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/assets/styles/abstracts/_variables.css b/src/assets/styles/abstracts/_variables.css
index a1d6621..105caac 100644
--- a/src/assets/styles/abstracts/_variables.css
+++ b/src/assets/styles/abstracts/_variables.css
@@ -23,6 +23,9 @@
     --color-orange: hsla(25, 76%, 64%, 1);
     --color-red: hsla(359, 64%, 63%, 1);
     --color-dark-grey: hsl(0, 0%, 12%, 1);
+    
+    --shadow-light: hsla(244, 93%, 22%, 0.15);
+    --shadow-dark: hsla(244, 93%, 22%, 0.45);
 
     --color-indigo-100: hsla(244, 100%, 98%, 1);
     --color-indigo-200: hsla(244, 93%, 93%, 1);
diff --git a/src/assets/styles/components/card.css b/src/assets/styles/components/card.css
index 6ddf9cf..d773b13 100644
--- a/src/assets/styles/components/card.css
+++ b/src/assets/styles/components/card.css
@@ -3,7 +3,7 @@
     min-width: 20.5rem;
     margin-bottom: 1rem;
     box-shadow:
-        0 0.625rem 1.25rem 0 #0B046C26,
+        0 0.625rem 1.25rem 0 var(--shadow-light),
         inset 0 0 0 0.1875rem var(--fl-fgColor, transparent);
     padding-top: 2.5rem;
     position: relative;
@@ -11,7 +11,7 @@
 
 .card:has(a:focus) {
     border: 0.1875rem solid transparent;
-    box-shadow: 0 0.625rem 1.25rem 0 #0B046C26;
+    box-shadow: 0 0.625rem 1.25rem 0 var(--shadow-light);
     outline: 0.1875rem solid var(--fl-fgColor, transparent);
     outline-offset: 0.1875rem;
 }
@@ -24,12 +24,12 @@
 .card:hover {
     box-shadow:
         inset 0 0 0 0.1875rem var(--fl-fgColor, transparent),    
-        0 0.625rem 1.25rem 0 var(--fl-fgColor, #0B046C73);
+        0 0.625rem 1.25rem 0 var(--fl-fgColor, var(--shadow-dark));
 }
 
 .card:hover.card:has(a:focus) {
     box-shadow:
-        0 0.625rem 1.25rem 0 var(--fl-fgColor, #0B046C73);
+        0 0.625rem 1.25rem 0 var(--fl-fgColor, var(--shadow-dark));
 }
 
 .card__image {
diff --git a/src/assets/styles/components/project-panel.css b/src/assets/styles/components/project-panel.css
index 405eafc..4f99612 100644
--- a/src/assets/styles/components/project-panel.css
+++ b/src/assets/styles/components/project-panel.css
@@ -9,7 +9,7 @@ div:has(.project-panel) {
 
 .project-panel {
     box-shadow:
-        0 0.625rem 1.25rem 0 #0B046C26,
+        0 0.625rem 1.25rem 0 var(--shadow-light),
         inset 0 0 0 0.1875rem var(--fl-fgColor, transparent);
     display: flex;
     flex-direction: column;
@@ -19,7 +19,7 @@ div:has(.project-panel) {
 
 .project-panel:has(a:focus) {
     border: 0.1875rem solid transparent;
-    box-shadow: 0 0.625rem 1.25rem 0 #0B046C26;
+    box-shadow: 0 0.625rem 1.25rem 0 var(--shadow-light);
     outline: 0.1875rem solid var(--fl-fgColor, transparent);
     outline-offset: 0.1875rem;
 }
@@ -32,12 +32,12 @@ div:has(.project-panel) {
 .project-panel:hover {
     box-shadow:
         inset 0 0 0 0.1875rem var(--fl-fgColor, transparent),
-        0 0.625rem 1.25rem 0 var(--fl-fgColor, #0B046C73);
+        0 0.625rem 1.25rem 0 var(--fl-fgColor, var(--shadow-dark));
 }
 
 .project-panel:hover.project-panel:has(a:focus) {
     box-shadow:
-        0 0.625rem 1.25rem 0 var(--fl-fgColor, #0B046C73);
+        0 0.625rem 1.25rem 0 var(--fl-fgColor, var(--shadow-dark));
 }
 
 .project-panel__image {

From 67f993ae6fa581eaeac01a02c965f5e2c82c563f Mon Sep 17 00:00:00 2001
From: Ned Zimmerman <ned@bight.dev>
Date: Tue, 14 Jan 2025 08:20:59 -0400
Subject: [PATCH 10/10] feat: use abstract flow class for vertical rhythm

---
 src/_includes/layouts/about.njk                          | 2 +-
 src/_includes/layouts/base.njk                           | 2 +-
 src/_includes/layouts/home.njk                           | 8 ++++----
 src/_includes/layouts/project.njk                        | 2 +-
 src/_includes/partials/components/projectPanel.macro.njk | 2 +-
 src/_includes/partials/global/footer.njk                 | 4 ++--
 src/_transforms/parse.js                                 | 1 +
 src/assets/styles/base/_base.css                         | 9 ++-------
 8 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/_includes/layouts/about.njk b/src/_includes/layouts/about.njk
index 8f35e30..a0a34bb 100644
--- a/src/_includes/layouts/about.njk
+++ b/src/_includes/layouts/about.njk
@@ -4,7 +4,7 @@
 {% block content %}
 {{ content | safe }}
 {% if collections['projects_' + lang] %}
-    <section class="display">
+    <section class="display flow">
       <h2 class="display__title">{% __ 'projects' %}</h2>
       <div class="display__items">
         {% set cardType = "project" %}
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
index 0fcf1fe..196a4a2 100644
--- a/src/_includes/layouts/base.njk
+++ b/src/_includes/layouts/base.njk
@@ -13,7 +13,7 @@
   <main {% if page.fileSlug == "about" %}class="sectioned"{% endif %}>
     {% if hasBanner %}
     <div class="banner bg-{{ bannerBgColor }}">
-      <div class="banner__text">
+      <div class="banner__text flow">
         <h1>{{ bannerTitle | renderContent('md') | safe }}</h1>
         {{ bannerBody | renderContent('md') | safe }}
       </div>
diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk
index 4fb48c0..d90cfc9 100644
--- a/src/_includes/layouts/home.njk
+++ b/src/_includes/layouts/home.njk
@@ -3,7 +3,7 @@
 
 {% block content %}
 {% if collections['projects_' + lang] %}
-    <section class="display">
+    <section class="display flow">
       <h2 class="display__title">{% __ 'projects' %}</h2>
       <div class="display__items">
         {% set cardType = "project" %}
@@ -16,7 +16,7 @@
     </section>
     {% endif %}
     {% if collections.events %}
-    <section class="display">
+    <section class="display flow">
       <h2 class="display__title>{% __ 'events' %}</h2>
       <div class="display__items">
         {% set cardType = "event" %}
@@ -29,7 +29,7 @@
     </section>
     {% endif %}
     {% if collections.resources %}
-    <section class="display">
+    <section class="display flow">
       <h2 class="display__title>{% __ 'resources' %}</h2>
       <div class="display__items">
         {% set cardType = "resource" %}
@@ -42,7 +42,7 @@
     </section>
     {% endif %}
     {% if collections.news %}
-    <section class="display">
+    <section class="display flow">
       <h2 class="display__title>{% __ 'announcements' %}</h2>
       <div class="display__items">
         {% set cardType = "news" %}
diff --git a/src/_includes/layouts/project.njk b/src/_includes/layouts/project.njk
index 56b18cf..80517be 100644
--- a/src/_includes/layouts/project.njk
+++ b/src/_includes/layouts/project.njk
@@ -19,7 +19,7 @@
     <div class="project__content">
         <div class="project__nav">
         </div>
-        <article>
+        <article class="flow">
         {{ content | safe }}
         </article>
     </div>
diff --git a/src/_includes/partials/components/projectPanel.macro.njk b/src/_includes/partials/components/projectPanel.macro.njk
index bd1c07e..22612ca 100644
--- a/src/_includes/partials/components/projectPanel.macro.njk
+++ b/src/_includes/partials/components/projectPanel.macro.njk
@@ -5,7 +5,7 @@
             {{ params.image }}
         </div>
     {% endif %}
-    <div class="project-panel__content">
+    <div class="project-panel__content flow">
         <a class="project-panel__title" href="{{ params.url }}">
             {{ params.title | safe }}
         </a>
diff --git a/src/_includes/partials/global/footer.njk b/src/_includes/partials/global/footer.njk
index 0f8d83d..03da936 100644
--- a/src/_includes/partials/global/footer.njk
+++ b/src/_includes/partials/global/footer.njk
@@ -8,7 +8,7 @@
             <div class="footer__section">
                 <hr>
                 <div class="footer__social-media">
-                    <nav aria-labelledby="social">
+                    <nav aria-labelledby="social" class="flow">
                         <h2 id="social">{% __ 'social-media' %}</h2>
                         <ul role="list">
                             <li><a href="{{ social.facebook }}" rel="external">{% include "svg/facebook.svg" %} Facebook</a></li>
@@ -22,7 +22,7 @@
             </div>
             <div class="footer__section">
                 <hr>
-                <div class="footer__contact-us">
+                <div class="footer__contact-us flow">
                     <h2>{% __ 'contact-us' %}</h2>
                     <div class="footer__contact-us-item">
                         <div class="footer__contact-us-item-title">
diff --git a/src/_transforms/parse.js b/src/_transforms/parse.js
index f8e4e9d..739da81 100644
--- a/src/_transforms/parse.js
+++ b/src/_transforms/parse.js
@@ -22,6 +22,7 @@ export default (value, outputPath) => {
                 };
                 let contents = getContent(heading);
                 let section = document.createElement("section");
+                section.className = "flow";
                 contents.forEach((node) => {
                     section.appendChild(node);
                 });
diff --git a/src/assets/styles/base/_base.css b/src/assets/styles/base/_base.css
index 3c08f95..302abfd 100644
--- a/src/assets/styles/base/_base.css
+++ b/src/assets/styles/base/_base.css
@@ -41,12 +41,7 @@ section {
     border-bottom: 0.1875rem solid transparent;
 }
 
-.banner__text > * + *,
-.project-panel__content > * + *,
-article > * + p,
-section > * + *,
-footer nav > * + *,
-footer .footer__contact-us > * + * {
+.flow > * + * {
     margin-block-start: 1em;
 }
 
@@ -166,7 +161,7 @@ section:last-of-type:not(:first-of-type) {
 
 @media (width >= 24.25rem) {
     .display__items {
-        margin: auto;
+        margin-inline: auto;
     }
 }