Skip to content

Commit

Permalink
feat: add css styles for the main page and mock example cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@chosww
chosww committed Nov 14, 2024
1 parent 5696f35 commit 4cb6a45
Show file tree
Hide file tree
Showing 19 changed files with 400 additions and 78 deletions.
2 changes: 2 additions & 0 deletions src/_data/translations.json
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
{
"en": {
"contact-us": "Contact Us",
"contact-us-address": "Address",
"contact-us-email": "Email",
"contact-us-phone": "Phone",
"social-media": "Social Media"
},
"fr": {
"contact-us": "Contactez-nous",
"contact-us-address": "Adresse",
"contact-us-email": "Courriel",
"contact-us-phone": "Téléphone",
Expand Down
41 changes: 30 additions & 11 deletions src/_includes/layouts/base.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,18 @@
{% include "partials/global/stylesheets.njk" %}
</head>
<body>
{# example datas TODO: populate datas from different collections #}
{% set displayItems = ['1', '2', '3'] %}
{% set cardTitle = "Card Title" %}
{% set cardBody = "Lorem ipsum dolor sit amet, consectetur adipiscing elit" %}
{% if hasBanner %}
<div class="banner">
<div class="banner bg-{{ bannerBGColor }}">
<div class="banner__text">
{{ bannerTitle | safe }}
<div class="banner__title">
{{ bannerTitle | safe }}
</div>
{{ bannerBody }}
<div>
</div>
{% if bannerImage %}
<div class="banner__image">
{{ bannerImage }}
Expand All @@ -22,48 +28,61 @@
{% endif %}
{{ content | safe }}
{% if displayProjects %}
<div class="display">
{% set cardImage = "yes" %}
<div class="display bg-indigo-200">
<div class="display__title">
<h2>Projects</h2>
</div>
<div class="display__items">
{% set cardType = "project" %}
{% include "partials/components/card.njk" %}
{% for item in displayItems %}
{% include "partials/components/card.njk" %}
{% endfor %}
</div>
<div class="display__link">
</div>
</div>
{% endif %}
{% if displayEvents %}
<div class="display">
<div class="display bg-indigo-100">
<div class="display__title">
<h2>Events</h2>
</div>
<div class="display__items">
{% set cardType = "event" %}
{% include "partials/components/card.njk" %}
{% for item in displayItems %}
{% include "partials/components/card.njk" %}
{% endfor %}
</div>
<div class="display__link">
</div>
</div>
{% endif %}
{% if displayResources %}
<div class="display">
<div class="display bg-indigo-200">
<div class="display__title">
<h2>Resources</h2>
</div>
<div class="display__items">
{% set cardType = "resource" %}
{% include "partials/components/card.njk" %}
{% for item in displayItems %}
{% include "partials/components/card.njk" %}
{% endfor %}
</div>
<div class="display__link">
</div>
</div>
{% endif %}
{% if displayNews %}
<div class="display">
<div class="display bg-indigo-700">
<div class="display__title">
<h2>Announcements</h2>
</div>
<div class="display__items">
{% set cardType = "news" %}
{% include "partials/components/card.njk" %}
{% for item in displayItems %}
{% include "partials/components/card.njk" %}
{% endfor %}
</div>
<div class="display__link">
</div>
Expand Down
48 changes: 27 additions & 21 deletions src/_includes/partials/components/card.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,34 @@
<div class="card__image">
</div>
{% endif %}
<div class="card__title">
</div>
{% if cardType === "event" %}
<div class="card__event-status">
<div class="card__content">
<div class="card__title">
<h4>{{ cardTitle }}</h4>
</div>
{% endif %}
{% if cardType === "event" or cardType === "news" %}
<div class="card__date">
{% if cardType === "event" %}
<div class="card__event-status">
<p>Upcoming</p>
</div>
{% endif %}
{% if cardType === "event" or cardType === "news" %}
<div class="card__date">
<p>March 15, 2024</p>
</div>
{% endif %}
{% if cardType === "resource" %}
<div class="card__publisher">
</div>
{% endif %}
<div class="card__body">
<p>{{ cardBody }}</p>
</div>
{% endif %}
{% if cardType === "resource" %}
<div class="card__publisher">
</div>
{% endif %}
<div class="card__body">
{% if cardType === "resource" %}
<div class="card__resource-type">
</div>
{% endif %}
{% if cardType === "resource" or cardType === "news" %}
<div class="card__tag">
</div>
{% endif %}
</div>
{% if cardType === "resource" %}
<div class="card__resource-type">
</div>
{% endif %}
{% if cardType === "resource" or cardType === "news" %}
<div class="card__tag">
</div>
{% endif %}
</div>
68 changes: 46 additions & 22 deletions src/_includes/partials/global/footer.njk
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,53 @@
<footer role="contentinfo">
<div class="container">
<div class="social-media">
<nav aria-label="{% __ 'social-media' %}">
{% __ 'social-media' %}
<ul role="list">
<li><a href="https://www.facebook.com/" rel="external">{% include "svg/facebook.svg" %} Facebook</a></li>
<li><a href="https://www.linkedin.com/" rel="external">{% include "svg/linkedin.svg" %} LinkedIn</a></li>
<li><a href="https://twitter.com/" rel="external">{% include "svg/x.svg" %} X</a></li>
<li><a href="https://www.youtube.com/" rel="external">{% include "svg/youtube.svg" %} YouTube</a></li>
</ul>
</nav>
<div class="footer__container">
<div class="footer__title">
<div><b>inclusive</b></div>
<div>standards</div>
</div>
<div class="contact-us">
{% __ 'contact-us' %}
<div class="contact-us-item">
{% __ 'contact-us-email' %}
<div class="footer__content">
<div class="footer__section">
<hr>
<div class="footer__social-media">
<nav aria-label="{% __ 'social-media' %}">
<h4>{% __ 'social-media' %}</h4>
<ul role="list">
<li><a href="https://www.facebook.com/" rel="external">{% include "svg/facebook.svg" %} Facebook</a></li>
<li><a href="https://www.linkedin.com/" rel="external">{% include "svg/linkedin.svg" %} LinkedIn</a></li>
<li><a href="https://www.instagram.com/" rel="external">{% include "svg/instagram.svg" %} Instagram</a></li>
<li><a href="https://twitter.com/" rel="external">{% include "svg/x.svg" %} X</a></li>
<li><a href="https://www.youtube.com/" rel="external">{% include "svg/youtube.svg" %} YouTube</a></li>
</ul>
</nav>
</div>
</div>
<div class="contact-us-item">
{% __ 'contact-us-phone' %}
<div class="footer__section">
<hr>
<div class="footer__contact-us">
<h4>{% __ 'contact-us' %}</h4>
<div class="footer__contact-us-item">
<div class="footer__contact-us-item-title">
{% __ 'contact-us-email' %}
</div>
</div>
<div class="footer__contact-us-item">
<div class="footer__contact-us-item-title">
{% __ 'contact-us-phone' %}
</div>
</div>
<div class="footer__contact-us-item">
<div class="footer__contact-us-item-title">
{% __ 'contact-us-address' %}
</div>
</div>
</div>
</div>
<div class="footer__section">
<hr>
<div class="footer__sponsors">
{% include "svg/IDRC.svg" %}
{% include "svg/OCADU.svg" %}
</div>
</div>
<div class="contact-us-item">
{% __ 'contact-us-address' %}
</div>
</div>
<div class="sponsors">
</div>
</div>
</footer>
Expand Down
Loading

0 comments on commit 4cb6a45

Please sign in to comment.