feat: add IDRC banner (resolves #25) (#28)

inclusive-design · Apr 25, 2024 · a95a849 · a95a849
1 parent 0362624
commit a95a849
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 11 deletions.
diff --git a/src/_data/site.json b/src/_data/site.json
@@ -5,14 +5,16 @@
     "url": "https://acaw-cama.idrc.ocadu.ca",
     "authorWebsite": "https://idrc.ocadu.ca",
     "authorEmail": "[email protected]",
-    "authorName": "Inclusive Design Research Centre"
+    "authorName": "Inclusive Design Research Centre",
+    "idrcBanner": "An [Inclusive Design Research Centre](https://idrc.ocadu.ca) project"
   },
   "fr": {
     "name": "Un Canada accessible — Un monde accessible",
     "description": "Bienvenue à Un Canada accessible — Un monde accessible, une conférence visant à promouvoir l'accessibilité et la conception inclusive dans divers contextes.",
     "url": "https://acaw-cama.idrc.ocadu.ca",
     "authorWebsite": "https://idrc.ocadu.ca",
     "authorEmail": "[email protected]",
-    "authorName": "Inclusive Design Research Centre"
+    "authorName": "Inclusive Design Research Centre",
+    "idrcBanner": "Un projet du [Centre de Recherche pour une Conception Inclusive](https://idrc.ocadu.ca)"
   }
 }
diff --git a/src/_includes/layouts/index.njk b/src/_includes/layouts/index.njk
@@ -1,6 +1,7 @@
 {% extends "layouts/base.njk" %}
 
 {% block pageHeader %}
+<h1 class="visually-hidden">{{ title }}</h1>
 {% endblock %}
 
 {% block content %}

diff --git a/src/_includes/partials/global/header.njk b/src/_includes/partials/global/header.njk
@@ -1,8 +1,17 @@
         <header role="banner">
-            <div class="container">
-                {% include "partials/components/brand.njk" %}
-                {% if not eleventyExcludeFromCollections and lang %}
-                {% include "partials/components/navigation.njk" %}
-                {% endif %}
+            {% if lang %}
+            <div class="idrc">
+                <div class="container">
+                    {% renderString site[lang].idrcBanner, "md" %}
+                </div>
+            </div>
+            {% endif %}
+            <div class="navbar">
+                <div class="container">
+                    {% include "partials/components/brand.njk" %}
+                    {% if not eleventyExcludeFromCollections and lang %}
+                    {% include "partials/components/navigation.njk" %}
+                    {% endif %}
+                </div>
             </div>
         </header>
diff --git a/src/admin/config.yml b/src/admin/config.yml
@@ -124,4 +124,5 @@ collections:
           - {label: Author Name, name: authorName, widget: string, i18n: duplicate}
           - {label: Author Email, name: authorEmail, widget: string, i18n: duplicate}
           - {label: Author Website, name: authorWebsite, widget: string, i18n: duplicate}
+          - {label: IDRC Banner, name: idrcBanner, widget: markdown, i18n: true}
 
diff --git a/src/assets/styles/app.css b/src/assets/styles/app.css
@@ -208,24 +208,53 @@ filter-container > * + * {
 /* Header */
 
 [role="banner"] {
-    box-shadow: 0 0 1.25rem rgba(0% 0% 0% / 10%);
+    padding-block: 0;
+    padding-inline: 0;
+}
+
+[role="banner"] > * {
+    padding-inline: 3rem;
 }
 
 [role="banner"] .container {
     display: flex;
     flex-direction: column;
     gap: 1.75rem;
+    height: 100%;
+}
+
+[role="banner"] .idrc {
+    font-size: 1rem;
+    height: 4.75rem;
+}
+
+[role="banner"] .idrc .container {
+    justify-content: center;
+}
+
+[role="banner"] .navbar {
+    box-shadow: 0 0 1.25rem rgba(0% 0% 0% / 10%);
+    padding-block: 1.75rem;
 }
 
 .index [role="banner"] {
     align-self: end;
+    height: 100%;
 }
 
 .index [role="banner"] .container {
-    display: block;
+    justify-content: flex-end;
     text-align: center;
 }
 
+.index [role="banner"] .idrc {
+    display: none;
+}
+
+.index [role="banner"] .navbar {
+    height: 100%;
+}
+
 .brand svg {
     height: auto;
     max-width: 33.5625rem;
@@ -366,6 +395,16 @@ article header p + p {
     margin-block-start: 0.75rem;
 }
 
+.index article header {
+    background: transparent;
+    box-shadow: none;
+    padding: 0;
+}
+
+.index article {
+    padding-block: 3.125rem 4rem;
+}
+
 /* Filter and Search */
 
 .filters {
@@ -511,12 +550,14 @@ label[for="search"] {
 }
 
 .index .content a {
+    align-items: center;
     border: 0.125rem solid black;
     border-radius: 1.25rem;
-    display: block;
+    display: flex;
     font-size: 1.25rem;
     font-weight: 800;
     height: 2.5rem;
+    justify-content: center;
     margin-inline: auto;
     max-width: 12rem;
     text-decoration: none;
@@ -705,7 +746,7 @@ lite-youtube.lyt-activated > .lty-playbtn {
     }
 
     [role="banner"] {
-        height: 11.75rem;
+        height: 16.5rem;
     }
 
     [role="banner"] .container {
@@ -714,6 +755,18 @@ lite-youtube.lyt-activated > .lty-playbtn {
         justify-content: space-between;
     }
 
+    [role="banner"] .idrc {
+        height: 4.75rem;
+    }
+
+    [role="banner"] .idrc .container {
+        justify-content: flex-start;
+    }
+
+    [role="banner"] .navbar {
+        height: 11.75rem;
+    }
+
     .brand svg {
         width: 33.5625rem;
     }