Skip to content

feat: add Benevity donation button to navbar #129

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

Open
MateoLostanlen wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add Benevity donation button to navbar #129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 4 additions & 0 deletions _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,7 @@ t:
moreInfo: "En savoir plus"
contactUs: "Nous contacter"
submit: "Envoyer"
donate: "Don Benevity"
header:
title: "Détection précoce des départs de feux"
subtitle: "Pyronear est un projet open-source au service du bien commun"
Expand Down Expand Up @@ -346,6 +347,7 @@ t:
moreInfo: "More information"
contactUs: "Contact us"
submit: "Submit"
donate: "Benevity donation"
header:
title: "Early detection of wildfires"
subtitle: "Pyronear is an open-source project for the common good"
Expand Down Expand Up @@ -528,6 +530,7 @@ t:
moreInfo: "Més informació"
contactUs: "Contacta amb nosaltres"
submit: "Enviar"
donate: "Donatiu Benevity"
header:
title: "Detecció d'incendis forestals"
subtitle: "Pyronear és un projecte de codi obert per al bé comú"
Expand Down Expand Up @@ -709,6 +712,7 @@ t:
moreInfo: "Más información"
contactUs: "Contacta con nosotros"
submit: "Enviar"
donate: "Donación Benevity"
header:
title: "Detección temprana de incendios forestales"
subtitle: "Pyronear es un proyecto de código abierto para el bien común"
Expand Down
11 changes: 11 additions & 0 deletions _includes/nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,16 @@
/>
</a>

<!-- Right-side actions: donation button + language selector -->
<div class="nav-right">
<!-- Benevity donation button (only donation link on the site) -->
<a
href="https://causes.benevity.org/projects/728262"
class="nav-donate-btn"
target="_blank"
rel="noopener noreferrer"
>{{ site.t.[site.lang].buttons.donate }}</a>

<!-- Language selector - Keep visible, even on mobile to avoid issue with non clickable area -->
<div class="nav-lang-wrapper">
<div class="nav-item nav-lang">
Expand All @@ -30,6 +40,7 @@
</ul>
</div>
</div>
</div>
</div>

<!-- Add base-url meta for JavaScript -->
Expand Down
50 changes: 48 additions & 2 deletions css/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,10 +85,41 @@ h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans

.grid-item { display: flex; justify-content: center; align-items: stretch; }

/* Right-side navbar actions: donation button + language selector */
.nav-right {
margin-left: auto; /* Push the whole group to the right */
display: flex;
align-items: center;
gap: 16px;
height: 50px;
}

/* Benevity donation button */
.nav-donate-btn {
display: inline-flex;
align-items: center;
background: darken($theme-secondary, 25%); /* Darkened to meet WCAG AA contrast with #fff text */
color: #fff;
font-weight: 700;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0.5px;
padding: 8px 16px;
border-radius: 4px;
text-decoration: none;
white-space: nowrap;
transition: background 0.2s ease;
}
.nav-donate-btn:hover,
.nav-donate-btn:focus {
background: darken($theme-secondary, 33%);
color: #fff;
text-decoration: none;
}

/* Language dropdown styles (top-right) */
/* Wrapper to position language selector in navbar header */
.nav-lang-wrapper {
margin-left: auto; /* Push to the right */
display: flex;
align-items: center;
height: 50px;
Expand Down Expand Up @@ -158,10 +189,25 @@ h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans

/* Responsive adjustments for mobile/tablet */
@media (max-width: 767px) {
.lang-toggle .lang-name {
.lang-toggle .lang-name {
display: inline; /* Always show language name on mobile */
font-size: 14px; /* Slightly smaller on mobile */
}
.nav-right { gap: 8px; }
.nav-donate-btn {
font-size: 11px;
padding: 6px 10px;
}
}

/* Very small phones: shrink further so logo + donate + lang selector don't overflow */
@media (max-width: 480px) {
.nav-right { gap: 6px; }
.nav-donate-btn {
font-size: 10px;
padding: 5px 8px;
letter-spacing: 0;
}
}
/* Improve vertical alignment of the language selector in the navbar */
.navbar-nav {
Expand Down