Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: structural cleanup, link and navigation styles, project page #72

Merged
merged 16 commits into from
Jan 17, 2025
Merged

feat: structural cleanup, link and navigation styles, project page #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
4751486
feat: simplify section styling
greatislander Jan 15, 2025
edef382
feat: navigation styling
greatislander Jan 15, 2025
0cc1e79
fix: adjust classnames for clarity
greatislander Jan 15, 2025
faeb108
chore(deps): bump eleventy-plugin-fluid to v3
greatislander Jan 15, 2025
f13080e
fix: use lowercase project slug
greatislander Jan 17, 2025
2a5f19d
feat: generate project nav
greatislander Jan 17, 2025
9b0103a
chore(i18n): add more translation strings
greatislander Jan 17, 2025
b9889a4
feat: standardize use of .wrapper class
greatislander Jan 17, 2025
1af47b0
feat: simplify footer
greatislander Jan 17, 2025
6b86723
feat: add project image
greatislander Jan 17, 2025
40502a8
Merge branch 'dev' into feat/links-and-navigation
greatislander Jan 17, 2025
b19c2e1
feat: header and footer cleanup, link styles
greatislander Jan 17, 2025
3d11a47
Merge branch 'dev' into feat/links-and-navigation
greatislander Jan 17, 2025
6cee2cd
feat: projects layout
greatislander Jan 17, 2025
9e75e67
fix: some contrast theme issues
chosww Jan 17, 2025
c545dbb
fix: card color issue
chosww Jan 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion eleventy.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { EleventyRenderPlugin } from "@11ty/eleventy";
import { EleventyRenderPlugin, IdAttributePlugin } from "@11ty/eleventy";
import eleventyNavigationPlugin from "@11ty/eleventy-navigation";
import brokenLinksPlugin from "eleventy-plugin-broken-links";
import fluidPlugin from "eleventy-plugin-fluid";
Expand Down Expand Up @@ -64,6 +64,8 @@ export default function eleventy(eleventyConfig) {
excludeInputs: ["**/*/*.css"]
});

eleventyConfig.addPlugin(IdAttributePlugin);

return {
dir: {
input: "src"
Expand Down
589 changes: 369 additions & 220 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,9 @@
"@11ty/eleventy": "^3.0.0",
"@11ty/eleventy-navigation": "^0.3.5",
"eleventy-plugin-broken-links": "^2.2.1",
"eleventy-plugin-fluid": "github:fluid-project/eleventy-plugin-fluid#feat/overhaul-i18n",
"eleventy-plugin-fluid": "^3.0.0",
"eleventy-plugin-footnotes": "^0.11.0",
"infusion": "^4.8.0",
"rimraf": "^6.0",
"rosetta": "^1.1.0"
},
Expand Down
10 changes: 7 additions & 3 deletions src/_data/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,12 @@
"header-intro": "An <a href='https://idrc.ocadu.ca/' rel='external'>Inclusive Design Research Centre</a> Project",
"header-intro-short": "<a href='https://idrc.ocadu.ca/' rel='external'>An IDRC Project</a>",
"projects": "Projects",
"projects-slug": "projects",
"resources": "Resources",
"social-media": "Social Media",
"main-menu": "Main Menu",
"menu": "menu"
"menu": "menu",
"project-menu": "Project menu"
},
"fr": {
"announcements": "Annonces",
Expand All @@ -24,9 +26,11 @@
"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",
"projects-slug": "projets",
"resources": "Ressources",
"social-media": "Les médias sociaux",
"main-menu": "Menu Principal",
"menu": "menu"
"main-menu": "Menu principal",
"menu": "menu",
"project-menu": "Menu du projet"
}
}
19 changes: 10 additions & 9 deletions src/_includes/layouts/about.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,16 @@
{% block content %}
{{ content | safe }}
{% if collections['projects_' + lang] %}
<section class="display flow">
<h2 class="display__title">{% __ 'projects' %}</h2>
<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, color: item.data.projectColor, url: item.data.permalink }) }}
{% endfor %}
</div>
<div class="display__link">
<section>
<div class="wrapper flow">
<h2>{% __ 'projects' %}</h2>
<div class="cards">
{% set cardType = "project" %}
{% for item in collections['projects_' + lang] %}
{{ card({image: item.data.image, title: item.data.title, body: item.data.desc, color: item.data.projectColor, url: item.data.permalink }) }}
{% endfor %}
</div>
</div>
</div>
</section>
{% endif %}
Expand Down
3 changes: 2 additions & 1 deletion src/_includes/layouts/base.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<main {% if page.fileSlug == "about" %}class="sectioned"{% endif %}>
{% if hasBanner %}
<div class="banner bg-{{ bannerBgColor }}">
<div class="banner__text flow">
<div class="wrapper flow">
<h1>{{ bannerTitle | renderContent('md') | safe }}</h1>
{{ bannerBody | renderContent('md') | safe }}
</div>
Expand All @@ -27,5 +27,6 @@
{% block content %}{% endblock %}
</main>
{% include "partials/global/footer.njk" %}
{% uioInit %}
</body>
</html>
72 changes: 36 additions & 36 deletions src/_includes/layouts/home.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,54 +3,54 @@

{% block content %}
{% if collections['projects_' + lang] %}
<section class="display flow">
<h2 class="display__title">{% __ 'projects' %}</h2>
<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, color: item.data.projectColor, url: item.data.permalink }) }}
{% endfor %}
</div>
<div class="display__link">
<section>
<div class="wrapper flow">
<h2>{% __ 'projects' %}</h2>
<div class="cards">
{% set cardType = "project" %}
{% for item in collections['projects_' + lang] %}
{{ card({image: item.data.image, title: item.data.title, body: item.data.desc, color: item.data.projectColor, url: item.data.permalink }) }}
{% endfor %}
</div>
</div>
</section>
{% endif %}
{% if collections.events %}
<section class="display flow">
<h2 class="display__title>{% __ 'events' %}</h2>
<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, url: item.data.permalink }) }}
{% endfor %}
</div>
<div class="display__link">
<section>
<div class="wrapper flow">
<h2>{% __ 'events' %}</h2>
<div class="cards">
{% set cardType = "event" %}
{% for item in collections.events %}
{{ card({image: item.data.image, title: item.data.title, body: item.data.desc, url: item.data.permalink }) }}
{% endfor %}
</div>
</div>
</section>
{% endif %}
{% if collections.resources %}
<section class="display flow">
<h2 class="display__title>{% __ 'resources' %}</h2>
<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, url: item.data.permalink }) }}
{% endfor %}
</div>
<div class="display__link">
<section>
<div class="wrapper flow">
<h2>{% __ 'resources' %}</h2>
<div class="cards">
{% set cardType = "resource" %}
{% for item in collections.resources %}
{{ card({image: item.data.image, title: item.data.title, body: item.data.desc, url: item.data.permalink }) }}
{% endfor %}
</div>
</div>
</section>
{% endif %}
{% if collections.news %}
<section class="display flow">
<h2 class="display__title>{% __ 'announcements' %}</h2>
<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, url: item.data.permalink }) }}
{% endfor %}
</div>
<div class="display__link">
<section>
<div class="wrapper flow">
<h2>{% __ 'announcements' %}</h2>
<div class="cards">
{% set cardType = "news" %}
{% for item in collections.news %}
{{ card({image: item.data.image, title: item.data.title, body: item.data.desc, url: item.data.permalink }) }}
{% endfor %}
</div>
</div>
</section>
{% endif %}
Expand Down
29 changes: 15 additions & 14 deletions src/_includes/layouts/project.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,25 @@
{% 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">
<div class="project" style="--project-color: var(--fl-bgColor, var(--color-{{ projectColor }}))">
<div class="banner">
<div class="flow">
<a href="{% if lang === "en" %}/projects{% else %}/{{lang }}/{% __ 'projects' %}{% endif %}" >{% __ 'projects' %} {% include 'svg/arrowRight.svg' %}</a>
<h1 class="project__banner__title">
{{ title }}
</h1>
<h1>{{ title }}</h1>
</div>
{% if image and imageAlt %}
<div class="image">
<img src="{{ image }}" alt="{{ imageAlt }}" />
</div>
{% if image %}
<div class="project__image">
{{ image }}
</div>
{% endif %}
</div>
<div class="project__content">
<div class="project__nav">
</div>

<div class="content">
<nav aria-labelledby="project-menu" class="flow">
<h2 class="h3" id="project-menu">{% __ 'project-menu' %}</h2>
<ul role="list" class="flow">
</ul>
</nav>
<article class="flow">
{{ content | safe }}
</article>
Expand Down
4 changes: 2 additions & 2 deletions src/_includes/layouts/projects.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
{% from "partials/components/projectPanel.macro.njk" import projectPanel %}

{% block content %}
<div>
{% if collections['projects_' + lang] %}
<section>
{% for item in collections['projects_' + lang] %}
{{ projectPanel({image: item.data.image, title: item.data.title, body: item.data.desc, color: item.data.projectColor, url: item.data.permalink}) }}
{% endfor %}
</section>
{% endif %}
</div>
{% endblock %}
29 changes: 15 additions & 14 deletions src/_includes/partials/components/navigation.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
<nav class="navigation">
<div class="navigation__link">
<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>
</div>
<div class="navigation__menu" id="navigation-menu">
<ul>
{% for item in navItems %}
<li>
<a href="{{ item.url }}">{{ item.key }}</a>
</li>
{% endfor %}
</ul>
<div class="navigation__wrapper">
<div class="navigation__brand">
<a rel="home" href="/{% if lang != 'en' %}{{ lang }}{% endif %}">{{ "<b>Inclusive</b><br>Standards" | safe }}</a>
<button class="navigation__toggle" id="navigation-toggle" aria-expanded="false">{% __ 'menu' %} {% include 'svg/menu.svg' %}</button>
</div>
<div class="navigation__menu" id="navigation-menu">
{% set navItems = collections['pages_' + lang] | eleventyNavigation %}
<ul>
{% for item in navItems %}
<li>
<a class="navigation__link" href="{{ item.url }}"{% if page.url == item.url %} aria-current="page"{% endif %}>{{ item.key }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</nav>
105 changes: 52 additions & 53 deletions src/_includes/partials/global/footer.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,63 @@
<footer role="contentinfo">
<div class="footer__container">
<div class="footer__title">
<div><strong>inclusive</strong></div>
<div>standards</div>
</div>
<div class="footer__content">
{#
<div class="footer__section">
<hr>
<div class="footer__social-media">
<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>
<li><a href="{{ social.linkedin }}" rel="external">{% include "svg/linkedin.svg" %} LinkedIn</a></li>
<li><a href="{{ social.instagram }}" rel="external">{% include "svg/instagram.svg" %} Instagram</a></li>
<li><a href="{{ social.x }}" rel="external">{% include "svg/x.svg" %} X</a></li>
<li><a href="{{ social.youtube }}" rel="external">{% include "svg/youtube.svg" %} YouTube</a></li>
</ul>
</nav>
</div>
</div>
#}
<div class="footer__section">
<hr>
<div class="footer__contact-us flow">
<h2>{% __ 'contact-us' %}</h2>
<div class="footer__contact-us-item">
<div class="footer__contact-us-item-title">
<div class="wrapper flow">
<p class="h5">
<strong>inclusive</strong><br />
standards
</p>
<div class="content">
{# <section class="social-media">
<nav aria-labelledby="social" class="flow">
<h2 class="h4" id="social">{% __ 'social-media' %}</h2>
<ul role="list">
<li><a href="{{ social.facebook }}" rel="external">{% include "svg/facebook.svg" %} Facebook</a></li>
<li><a href="{{ social.linkedin }}" rel="external">{% include "svg/linkedin.svg" %} LinkedIn</a></li>
<li><a href="{{ social.instagram }}" rel="external">{% include "svg/instagram.svg" %} Instagram</a></li>
<li><a href="{{ social.x }}" rel="external">{% include "svg/x.svg" %} X</a></li>
<li><a href="{{ social.youtube }}" rel="external">{% include "svg/youtube.svg" %} YouTube</a></li>
</ul>
</nav>
</section> #}
<section class="contact-us">
<div class="flow">
<h2 class="h4">{% __ 'contact-us' %}</h2>
<p>
<strong>
{% __ 'contact-us-email' %}
</div>
</strong><br />
<a href="mailto:{{ contact.email }}">{{ contact.email }}</a>
</div>
<div class="footer__contact-us-item">
<div class="footer__contact-us-item-title">
</p>
<p>
<strong>
{% __ 'contact-us-phone' %}
</div>
</strong><br />
{{ contact.phone }}
</div>
<div class="footer__contact-us-item">
<div class="footer__contact-us-item-title">
</p>
<p>
<strong>
{% __ 'contact-us-address' %}
</div>
</strong>
<address>
{{ contact.address | renderContent('md') | safe }}
</div>
</div>
</div>
<div class="footer__section">
<hr>
<div class="footer__sponsors">
<a href="https://idrc.ocadu.ca" rel="external">
{% include "svg/IDRC.svg" %}
<span class="visually-hidden" lang="en">Inclusive Design Research Centre</a>
<a>
<a href="https://ocadu.ca" rel="external">
{% include "svg/OCADU.svg" %}
<span class="visually-hidden" lang="en">OCAD University</a>
</a>
</address>
</p>
</div>
</div>
</section>
<section class="sponsors">
<ul role="list">
<li>
<a href="https://idrc.ocadu.ca" rel="external">
{% include "svg/IDRC.svg" %}
<span class="visually-hidden" lang="en">Inclusive Design Research Centre</a>
<a>
</li>
<li>
<a href="https://ocadu.ca" rel="external">
{% include "svg/OCADU.svg" %}
<span class="visually-hidden" lang="en">OCAD University</a>
</a>
</li>
</ul>
</section>
</div>
</div>
</footer>
Loading