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.

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

fix(homepage): initiatives - fix broken link #291

Merged
merged 1 commit into from
Dec 11, 2023
Merged
Changes from all commits
Commits
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
180 changes: 92 additions & 88 deletions src/_includes/initiatives.html
Original file line number Diff line number Diff line change
@@ -1,114 +1,118 @@
<svg class="position-absolute d-none d-lg-block">
<clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"><path d="M0,0.048 C0,0.036,0.008,0.025,0.018,0.025 L0.982,0 C0.992,0,1,0.011,1,0.023 L0.979,0.931 C0.979,0.942,0.972,0.952,0.962,0.953 L0.048,1 C0.038,1,0.029,0.991,0.029,0.979 L0,0.048"></path></clipPath>
<clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
<path
d="M0,0.048 C0,0.036,0.008,0.025,0.018,0.025 L0.982,0 C0.992,0,1,0.011,1,0.023 L0.979,0.931 C0.979,0.942,0.972,0.952,0.962,0.953 L0.048,1 C0.038,1,0.029,0.991,0.029,0.979 L0,0.048"
></path>
</clipPath>
</svg>

<div class="row d-flex justify-content-between">
<div class="col-12 col-lg-6">
<h2 class="h1 text-center text-lg-start">Explore our initiatives</h2>
</div>
<div class="col-12 col-lg-6 d-flex justify-content-center justify-content-lg-end align-items-center black-on-white">
<ul
class="nav nav-pills nav-fill mb-md-3 gap-2 flex-shrink-0"
id="pills-tab"
role="tablist">
<ul class="nav nav-pills nav-fill mb-md-3 gap-2 flex-shrink-0" id="pills-tab" role="tablist">
{% for initiative in site.data.initiatives %}
<li class="nav-item" role="presentation">
<button
class="nav-link {{ initiative.active }}"
id="pills-{{ initiative.slug }}-tab"
data-bs-toggle="pill"
data-bs-target="#pills-{{ initiative.slug }}"
type="button"
role="tab"
aria-controls="pills-{{ initiative.slug }}"
aria-selected="true">{{ initiative.tag }}</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link {{ initiative.active }}"
id="pills-{{ initiative.slug }}-tab"
data-bs-toggle="pill"
data-bs-target="#pills-{{ initiative.slug }}"
type="button"
role="tab"
aria-controls="pills-{{ initiative.slug }}"
aria-selected="true"
>
{{ initiative.tag }}
</button>
</li>
{% endfor %}
</ul>
</div>
</div>

<div class="tab-content " id="pills-tabContent">
<div class="tab-content" id="pills-tabContent">
{% for initiative in site.data.initiatives %}
<div
class="tab-pane fade {{ initiative.active }}"
id="pills-{{ initiative.slug }}"
role="tabpanel"
aria-labelledby="pills-{{ initiative.slug }}-tab"
tabindex="0"
>
<div
class="tab-pane fade {{ initiative.active }}"
id="pills-{{ initiative.slug }}"
role="tabpanel"
aria-labelledby="pills-{{ initiative.slug }}-tab"
tabindex="0">
<div
id="{{ initiative.id }}"
class="px-4 px-md-3 py-3 py-md-5 my-4 clipped"
style=" background-color: var({{ initiative.class }})">
<div class="row px-2 px-md-0 pt-3 pt-md-5">
<picture class="col-12 col-md-2 col-lg-2 d-flex justify-content-md-end align-self-md-start justify-content-center">
<img
class="pt-2 pb-4 pb-md-0"
src="{{ initiative.image.src }}"
alt="{{ initiative.image.alt }}"
width="{{ initiative.image.width }}" />
</picture>
<div class="col-12 col-md-8 col-lg-8 mb-28 mb-md-40">
<h3 class="h2 text-white text-center text-md-start pb-2 pb-md-4 pt-2 pt-md-0">{{ initiative.headline }}</h3>
{% for paragraph in initiative.paragraphs %}
<p class="text-white">
{{ paragraph }}
</p>
{% endfor %}
<div class="d-grid d-md-block rounded-0 border-bottom border-white border-2">
<a href="{{ initiative.button.url }}" class="btn btn-outline-light fw-bolder mt-2 mb-28 mb-md-40 {{ initiative.button.class }}">{{ initiative.button.text }}</a>
</div>
id="{{ initiative.id }}"
class="px-4 px-md-3 py-3 py-md-5 my-4 clipped"
style=" background-color: var({{ initiative.class }})"
>
<div class="row px-2 px-md-0 pt-3 pt-md-5">
<picture class="col-12 col-md-2 col-lg-2 d-flex justify-content-md-end align-self-md-start justify-content-center">
<img
class="pt-2 pb-4 pb-md-0"
src="{{ initiative.image.src }}"
alt="{{ initiative.image.alt }}"
width="{{ initiative.image.width }}"
/>
</picture>
<div class="col-12 col-md-8 col-lg-8 mb-28 mb-md-40">
<h3 class="h2 text-white text-center text-md-start pb-2 pb-md-4 pt-2 pt-md-0">{{ initiative.headline }}</h3>
{% for paragraph in initiative.paragraphs %}
<p class="text-white">{{ paragraph }}</p>
{% endfor %}
<div class="d-grid d-md-block rounded-0 border-bottom border-white border-2">
<a
href="{{ initiative.button.url }}"
class="btn btn-outline-light fw-bolder mt-2 mb-28 mb-md-40 {{ initiative.button.class }}"
>{{ initiative.button.text }}</a
>
</div>
</div>
<div class="row px-2 px-md-0">
<div class="col-12 offset-md-2 col-md-8 col-lg-8 mb-28 mb-md-40">
<h4 class="small-caps text-white mb-3">Recent News</h4>
<div class="tab-list pb-2">
{% assign all_press = site.press | reverse %}
{% for press in all_press %}
{% assign url = press.url %}
{% if press.external %}
{% assign url = press.external %}
{% endif %}
{% if press.tags contains initiative.tag %}
<article class="press-item">
<a
class="text-white fw-bold py-2 d-block"
rel="noreferrer"
href="{{ url }}"
{% if press.external %}target="_blank"{% endif %}>{{ press.title }}</a>
</article>
{% endif %}
{% endfor %}
</div>
<a class="text-white fw-bold" href="/press">See all</a>
</div>
<div class="row px-2 px-md-0">
<div class="col-12 offset-md-2 col-md-8 col-lg-8 mb-28 mb-md-40">
<h4 class="small-caps text-white mb-3">Recent News</h4>
<div class="tab-list pb-2">
{% assign all_press = site.press | reverse %} {% for press in all_press %} {% assign url = press.url %} {% if
press.external %} {% assign url = press.external %} {% endif %} {% if press.tags contains initiative.tag %}
<article class="press-item">
<a
class="text-white fw-bold py-2 d-block"
rel="noreferrer"
href="{{ url }}"
{%
if
press.external
%}target="_blank"
{%
endif
%}
>{{ press.title }}</a
>
</article>
{% endif %} {% endfor %}
</div>
<a class="text-white fw-bold" href="/press">See all</a>
</div>
<div class="row px-2 px-md-0">
<div class="col-12 offset-md-2 col-md-8 col-lg-8 mb-28 mb-md-40">
<h4 class="small-caps text-white mb-3">Resources</h4>
<div class="tab-list pb-2">
{% assign all_resources = site.resources | reverse %}
{% for resource in all_resources %}
{% assign url = resource.asset %}
{% unless url contains "https://" %}
{% assign url = "/assets/" | append: url %}
{% endunless %}
{% if resource.tags contains initiative.tag %}
<article class="resource">
<a
class="text-white fw-bold py-2 d-block"
rel="noreferrer"
href="{{ url }}"
target="_blank">{{ resource.title }}</a>
</article>
{% endif %}
{% endfor %}
</div>
<a class="text-white fw-bold" href="/resources">See all</a>
</div>
<div class="row px-2 px-md-0">
<div class="col-12 offset-md-2 col-md-8 col-lg-8 mb-28 mb-md-40">
<h4 class="small-caps text-white mb-3">Resources</h4>
<div class="tab-list pb-2">
{% assign all_resources = site.resources | reverse %} {% for resource in all_resources %} {% if resource.asset %} {%
assign url = resource.asset %} {% unless url contains "https://" %} {% assign url = "/assets/" | append: url %} {%
endunless %} {% else %} {% assign url = resource.url %} {% endif %} {% if resource.tags contains initiative.tag %}
<article class="resource">
<a class="text-white fw-bold py-2 d-block" rel="noreferrer" href="{{ url }}" target="_blank"
>{{ resource.title }}</a
>
</article>
{% endif %} {% endfor %}
</div>
<a class="text-white fw-bold" href="/resources">See all</a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>