feat: adjust structure, add conference intro (#26)

* feat: adjust structure, add header intro * fix: remove test video URL
inclusive-design · Apr 25, 2024 · 0362624 · 0362624
1 parent 6da394a
commit 0362624
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 31 deletions.
diff --git a/src/_data/global.js b/src/_data/global.js
@@ -0,0 +1,5 @@
+"use strict";
+
+module.exports = {
+    context: process.env.CF_PAGES === 1 ? "production" : "development"
+};
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{{ lang if lang else 'en' }}-CA" dir="ltr">
+<html lang="{{ lang if lang else defaultLanguage }}-CA" dir="ltr">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width">
@@ -16,15 +16,21 @@
     <body{% if bodyClass %} class="{{ bodyClass }}"{% endif %}>
         {% include "partials/global/header.njk" %}
         <main>
-            <article class="container">
-                {% block pageHeader %}
-                <h1>{{ title }}</h1>
-                {% endblock %}
+            <article>
+                <header>
+                    <div class="container">
+                    {% block pageHeader %}
+                    <h1>{{ title }}</h1>
+                    {% endblock %}
+                    </div>
+                </header>
+                <div class="container">
                 {% block content %}
                 <div class="content">
                 {{ content | safe }}
                 </div>
                 {% endblock %}
+                </div>
             </article>
         </main>
         {% include "partials/global/footer.njk" %}

diff --git a/src/_includes/layouts/page.njk b/src/_includes/layouts/page.njk
@@ -5,22 +5,24 @@
 <lite-youtube videoid="{{ youtube | youtubeId }}" style="background-image: url('https://i.ytimg.com/vi/{{ youtube | youtubeId }}/maxresdefault.jpg');"></lite-youtube>
 {% endif %}
 {% if transcript %}
-<p class="align-end">
+<p class="normal">
     <a href="{{ transcript }}">{{ 'video-transcript' | i18n }}</a>
 </p>
 {% endif %}
-<h1>{{ title }}</h1>
+    <h1>{{ site[lang].name }}</h1>
+    {% renderString intro, "md" %}
 {% endblock %}
 
 {% block content %}
+<h2>{{ title }}</h2>
 <div class="content">
     {{ content | safe }}
 </div>
 <filter-container oninit filter-mode="all" filter-mode-theme="any" filter-mode-format="any" filter-mode-language="any" filter-mode-search="all" filter-fuzzy-search data-paginate-results="5">
     {% include "partials/components/filters.njk" %}
     <div class="submissions">
         <div class="title">
-            <h2>{{ 'submissions' | i18n }}</h2>
+            <h3>{{ 'submissions' | i18n }}</h3>
             <div aria-live="polite" data-filter-results="{{ 'filter-results.filtered' | i18n }}">
                 {{ 'filter-results.all' | i18n }}
             </div>

diff --git a/src/_includes/partials/components/filters.njk b/src/_includes/partials/components/filters.njk
@@ -1,6 +1,6 @@
 <div class="filters flow">
-    <h2>{{ 'filters' | i18n }}</h2>
-    <button aria-expanded="false"><h2>{{ 'filters' | i18n }}</h2></button>
+    <h3>{{ 'filters' | i18n }}</h3>
+    <button aria-expanded="false"><h3>{{ 'filters' | i18n }}</h3></button>
     <div class="flow">
         <fieldset>
             <legend>{{ 'themes' | i18n }}</legend>

diff --git a/src/_includes/partials/components/submission.njk b/src/_includes/partials/components/submission.njk
@@ -23,7 +23,7 @@
 
     data-filter-search="{% for presenter in submission.data.presenters %}{{ presenter }},{% endfor %}{{ submission.data.title }},{{ submission.templateContent | replace('/n', '') }}"
 >
-    <h3 id="{{ submission.data.uuid }}">{{ submission.data.title }}</h3>
+    <h4 id="{{ submission.data.uuid }}">{{ submission.data.title }}</h4>
     <div class="presenters">
         {{ submission.data.presenters | join(', ') }}
     </div>

diff --git a/src/_includes/partials/global/footer.njk b/src/_includes/partials/global/footer.njk
@@ -1,6 +1,12 @@
         <footer role="contentinfo">
                 <div class="container"></div>
         </footer>
+        {% if lang %}
+        <script>
+            localStorage.setItem("lang", "{{ lang }}-CA");
+        </script>
+        {% endif %}
+        {% if global.context == 'production' %}
         <script>
             if ("serviceWorker" in navigator) {
                 navigator.serviceWorker
@@ -22,3 +28,4 @@
                 });
             }
         </script>
+        {% endif %}
diff --git a/src/admin/config.yml b/src/admin/config.yml
@@ -26,6 +26,7 @@ collections:
       - {label: Excerpt, name: excerpt, widget: string, required: false, i18n: true}
       - {label: YouTube Video, name: youtube, widget: string, type: url, required: false, i18n: true}
       - {label: YouTube Video Transcript Link, name: transcript, widget: string, type: url, required: false, i18n: true}
+      - {label: Introduction, name: intro, widget: markdown, i18n: true, required: false}
       - {label: Body, name: body, widget: markdown, i18n: true}
   - label: Submissions
     label_singular: Submission

diff --git a/src/assets/styles/app.css b/src/assets/styles/app.css
@@ -140,6 +140,8 @@ input {
 
 :root {
     --base-font-family: "Montserrat Alternates", montserrat, sans-serif;
+    --color-green-100: #eef4ef;
+    --color-red-800: #b21a26;
 }
 
 /* Utilities */
@@ -170,8 +172,9 @@ input {
 
 body {
     font-family: var(--base-font-family);
+    font-size: 1.125rem;
     font-weight: 500;
-    line-height: 1.7;
+    line-height: 1.6667;
     min-height: 100vh;
 }
 
@@ -191,7 +194,7 @@ body > * {
 
 .container {
     margin-inline: auto;
-    max-width: 75rem;
+    max-width: 80rem;
 }
 
 filter-container {
@@ -204,28 +207,28 @@ filter-container > * + * {
 
 /* Header */
 
-header {
-    border-block-end: 0.3125rem solid #000;
+[role="banner"] {
+    box-shadow: 0 0 1.25rem rgba(0% 0% 0% / 10%);
 }
 
-header .container {
+[role="banner"] .container {
     display: flex;
     flex-direction: column;
     gap: 1.75rem;
 }
 
-.index header {
+.index [role="banner"] {
     align-self: end;
 }
 
-.index header .container {
+.index [role="banner"] .container {
     display: block;
     text-align: center;
 }
 
 .brand svg {
     height: auto;
-    max-width: 31rem;
+    max-width: 33.5625rem;
     width: 100%;
 }
 
@@ -278,24 +281,30 @@ header .container {
 /* Typography */
 
 h1 {
+    font-size: 3.75rem;
+    line-height: 1.5;
+}
+
+h2 {
+    color: var(--color-red-800);
     font-size: 2.5rem;
     font-weight: 700;
     margin-block: 5rem 2.8125rem;
 }
 
-h2 {
+h3 {
     font-size: 1.875rem;
     font-weight: 800;
     letter-spacing: 0.01em;
     position: relative;
 }
 
-h3 {
+h4 {
     font-size: 2.25rem;
     font-weight: 600;
 }
 
-h2::after,
+h3::after,
 .title::after {
     background-color: black;
     border-radius: calc(0.625rem / 2);
@@ -320,19 +329,50 @@ h2::after,
     font-size: 1.875rem;
 }
 
-.title h2::after {
+.title h3::after {
     background: unset;
     content: ":";
     display: inline;
 }
 
+article header {
+    background-color: var(--color-green-100);
+    box-shadow: 0 0 1.25rem rgba(0% 0% 0% / 10%) inset;
+    margin-block-start: -1.75rem;
+    margin-inline: -3rem;
+    padding-block: 3.125rem 4rem;
+    padding-inline: 3rem;
+    width: 100vw;
+}
+
+article header p {
+    font-size: 1.5rem;
+    line-height: 1.5;
+    max-width: 55.625rem;
+}
+
+article header p.normal {
+    font-family: var(--base-font-family);
+    font-size: 1.125rem;
+    font-weight: 500;
+    line-height: 1.6667;
+}
+
+article header h1 + p {
+    margin-block-start: 2.875rem;
+}
+
+article header p + p {
+    margin-block-start: 0.75rem;
+}
+
 /* Filter and Search */
 
 .filters {
     --flow-space: 2.5rem;
 }
 
-.filters > h2 {
+.filters > h3 {
     display: none;
 }
 
@@ -459,6 +499,7 @@ label[for="search"] {
     display: flex;
     gap: 2rem;
     margin-block-start: 2.3125rem;
+    max-width: 55.625rem;
 }
 
 .index .content {
@@ -634,7 +675,7 @@ lite-youtube.lyt-activated > .lty-playbtn {
 }
 
 @media (width >= 72rem) {
-    h1 {
+    h2 {
         font-size: 3rem;
     }
 
@@ -663,12 +704,20 @@ lite-youtube.lyt-activated > .lty-playbtn {
         grid-row: 2 / 3;
     }
 
-    header .container {
+    [role="banner"] {
+        height: 11.75rem;
+    }
+
+    [role="banner"] .container {
         align-items: center;
         flex-direction: row;
         justify-content: space-between;
     }
 
+    .brand svg {
+        width: 33.5625rem;
+    }
+
     .nav > ul {
         flex-direction: row;
     }
@@ -677,7 +726,7 @@ lite-youtube.lyt-activated > .lty-playbtn {
         margin-inline-start: 3.25rem;
     }
 
-    .filters > h2 {
+    .filters > h3 {
         display: block;
     }
 

diff --git a/src/collections/pages/en/index.md b/src/collections/pages/en/index.md
@@ -1,5 +1,14 @@
 ---
-title: Conference Submissions
+title: Conference presentations
 excerpt: Welcome to Accessible Canada — Accessible World, a conference that aims to advance accessibility and inclusive design in various domains.
 permalink: /en/
+transcript: ""
+youtube: ""
+intro: |-
+  Join us at the [Accessible Canada — Accessible World](https://sites.events.concordia.ca/sites/accessconf/en/accessible-canada-accessible-world/home) conference happening online and in Montreal on May 27 & 28, 2024.
+
+  Embrace our unique flipped conference model by reviewing the diverse array of presentations before the event on this page. This pre-conference exploration allows us to dedicate our time together to tackle 24 critical challenges across four pivotal themes.
+
+  Haven’t registered yet? There’s still time! For a deeper understanding of the challenges we’ll address and to register, please visit our [Conference Challenges](https://sites.events.concordia.ca/sites/accessconf/en/accessible-canada-accessible-world/pages/9) and [Registration](https://sites.events.concordia.ca/sites/accessconf/en/accessible-canada-accessible-world/register) pages. We need your input!
 ---
+Dive into the content at your own pace. Filter by theme, format, and language to tailor your experience. Join online or in Montreal on May 27th and 28th to contribute to the discussions.
diff --git a/src/collections/pages/fr/index.md b/src/collections/pages/fr/index.md
@@ -1,7 +1,15 @@
 ---
-title: Soumissions à la conférence
+title: Présentations à la conférence
 locale: fr
 excerpt: Bienvenue à Un Canada accessible — Un monde accessible, une conférence visant à promouvoir l'accessibilité et la conception inclusive dans divers contextes.
 permalink: /fr/
----
+transcript: ""
+youtube: ""
+intro: |-
+  Rejoignez-nous à la conférence [Accessible Canada - Accessible World](https://sites.events.concordia.ca/sites/accessconf/fr/accessible-canada-accessible-world/home) qui se déroulera en ligne et à Montréal les 27 et 28 mai 2024.
+
+  Adoptez notre modèle unique de conférence inversée en examinant les diverses présentations avant l'événement sur cette page. Cette exploration pré-conférence nous permet de consacrer notre temps à relever 24 défis critiques à travers quatre thèmes centraux.
 
+  Vous n'êtes pas encore inscrit ? Il est encore temps ! Pour mieux comprendre les défis que nous allons relever et pour vous inscrire, veuillez consulter les pages [Défis de la conférence](https://sites.events.concordia.ca/sites/accessconf/fr/accessible-canada-accessible-world/pages/9) et [Inscription](https://sites.events.concordia.ca/sites/accessconf/fr/accessible-canada-accessible-world/register). Nous avons besoin de votre contribution !
+---
+Plongez dans le contenu à votre rythme. Filtrez par thème, format et langue pour adapter votre expérience. Rejoignez-nous en ligne ou à Montréal les 27 et 28 mai pour contribuer aux discussions.
diff --git a/src/index.md b/src/index.md
@@ -1,5 +1,5 @@
 ---
-title: Accessible Canada, Accessible World / Un Canada accessible, Un monde accessible
+title: Accessible Canada — Accessible World / Un Canada accessible — Un monde accessible
 permalink: /index.html
 layout: layouts/index
 bodyClass: index