Skip to content

Commit

Permalink
Make Donation Banner Responsive and Sync Logo Colors Dynamically, (#603)
Browse files Browse the repository at this point in the history 
* Fixes #576. Replace outdated about text with perennial (#608)

Co-authored-by: Devin Ulibarri <[email protected]>

* Created a donation-banner for the website

Co-authored-by: Muhammad Haroon <[email protected]>

---------

Co-authored-by: Devin Ulibarri <[email protected]>
Co-authored-by: Devin Ulibarri <[email protected]>
Co-authored-by: Muhammad Haroon <[email protected]>
  • Loading branch information
@saumyashahi @pikurasa @haroon10725
4 people authored Dec 24, 2024
1 parent f80021f commit 2e4aa43
Show file tree
Hide file tree
Showing 9 changed files with 331 additions and 221 deletions.
3 changes: 0 additions & 3 deletions _includes/banner-mobile.html
View file

This file was deleted.

20 changes: 0 additions & 20 deletions _includes/banner.html
View file

This file was deleted.

25 changes: 25 additions & 0 deletions _includes/donation_banner.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<base href="/"> <!--Fix base path issue and ensure compatibility for nested URLs -->
<div id="donation-banner">
<div class="donate-container">
<img aria-hidden="true" class="donate-icon" src="../assets/sparkles.svg" alt="Donation Icon">
<div class="donate-text-container">
<p class="donate-text">
Our goal is $25k this fall, and every contribution counts! Whether you give $3 or more, your
tax-deductible donation will help us continue to provide a unique learning environment where youth can
solve authentic tasks and learn by doing.
<a href="{{ site.baseurl }}/community/2024/12/03/help-SL-continue-to-transform-education"> Read more
</a>
about how we can make a difference together and donate today!
</p>
</div>
<button class="donate-button" id="donate-button"><a
href="https://www.paypal.com/donate?campaign_id=NEAV3YL4H6B5S">DONATE
NOW</a>
</button>
<div class="donate-close-button">
<button class="close-button" id="close-icon">
<img src="../assets/entry-stop.svg" alt="Close Banner" />
</button>
</div>
</div>
</div>
178 changes: 44 additions & 134 deletions _includes/nav.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,92 +2,52 @@
<header class="large" id="firstHeader">
<div class="row">
<div class="container">
<nav class="navbar-expand-lg donation-bar fixed-top">
<div class="container">
{% include banner.html %}
</div>
</nav>
<nav class="navbar navbar-default navbar-expand-lg fixed-top align-items-center d-flex justify-content-between pb-0 pt-0">
<nav
class="navbar navbar-default navbar-expand-lg fixed-top align-items-center d-flex justify-content-between pb-0 pt-0">
<div class="logo1" id="navLogo">
<a href="{{ site.baseurl }}/">{% include logo.svg %}</a>
</div>
<div class="d-flex justify-content-center">
<div class="zeroMarPadBtm ">
<ul class="mr-5 navbar-nav" id="menuBar">
<li class="nav-item dropdown align-self-center">
<a
href="{{ site.baseurl }}/#"
class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>About<span class="caret"></span
></a>
<a href="{{ site.baseurl }}/#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">About<span class="caret"></span></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="{{ site.baseurl }}/about-us"
>About us</a>
<a class="dropdown-item" href="{{ site.baseurl }}/about-us/#mission"
>Our mission</a>
<a class="dropdown-item" href="{{ site.baseurl }}/leadership"
>Leadership and governance</a>
<a class="dropdown-item" href="{{ site.baseurl }}/contact-us"
>Contact us</a>
<a class="dropdown-item" href="{{ site.baseurl }}/FAQ"
>FAQs</a>
<a class="dropdown-item" href="{{ site.baseurl }}/about-us">About us</a>
<a class="dropdown-item" href="{{ site.baseurl }}/about-us/#mission">Our mission</a>
<a class="dropdown-item" href="{{ site.baseurl }}/leadership">Leadership and governance</a>
<a class="dropdown-item" href="{{ site.baseurl }}/contact-us">Contact us</a>
<a class="dropdown-item" href="{{ site.baseurl }}/FAQ">FAQs</a>
</div>
</li>


<li class="nav-item dropdown align-self-center">
<a
href="{{ site.baseurl }}/#"
class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>News<span class="caret"></span
></a>
<a href="{{ site.baseurl }}/#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">News<span class="caret"></span></a>
<div class="dropdown-menu">
<a class="dropdown-item"
href="{{ site.baseurl }}/community-news"
>Community News</a>
<a class="dropdown-item" href="{{ site.baseurl }}/event"
>Events</a>
<a class="dropdown-item" href="{{ site.baseurl }}/press"
>Press Release</a>
<a class="dropdown-item" href="{{ site.baseurl }}/community-news">Community News</a>
<a class="dropdown-item" href="{{ site.baseurl }}/event">Events</a>
<a class="dropdown-item" href="{{ site.baseurl }}/press">Press Release</a>
</div>
</li>

<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/#try">Try now</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/develop"
>Join development</a
>
<a class="nav-link" href="{{ site.baseurl }}/develop">Join development</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/volunteering"
>Volunteer</a
>
<a class="nav-link" href="{{ site.baseurl }}/volunteering">Volunteer</a>
</li>
<li class="nav-item dropdown align-self-center">
<a
href="{{ site.baseurl }}/#"
class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>Donate<span class="caret"></span
></a>
<a href="{{ site.baseurl }}/#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">Donate<span class="caret"></span></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="{{ site.baseurl }}/donate"
>Donate</a>
<a class="dropdown-item" href="https://www.bonfire.com/store/sugar-labs-merch/"
>Store</a>
<a class="dropdown-item" href="{{ site.baseurl }}/donate">Donate</a>
<a class="dropdown-item" href="https://www.bonfire.com/store/sugar-labs-merch/">Store</a>
</div>
</li>
</ul>
Expand All @@ -102,111 +62,61 @@
<div class="sticky-top bg-white container-fluid flex-fill w-100" id="secondHeader">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="logo2">
<a href="{{ site.baseurl }}/">{% include logo.svg %}</a>
<a href="{{ site.baseurl }}/">{% include logo.svg %}</a>
</div>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#mainNav"
aria-controls="mainNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
{% include banner-mobile.html %}
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="{{ site.baseurl }}/#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<a class="nav-link dropdown-toggle" href="{{ site.baseurl }}/#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About us
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ site.baseurl }}/about-us"
>About us</a
>
<a class="dropdown-item" href="{{ site.baseurl }}/about-us/#mission"
>Our mission</a
>
<a class="dropdown-item" href="{{ site.baseurl }}/leadership"
>Leadership and governance</a
>
<a class="dropdown-item" href="{{ site.baseurl }}/contact-us"
>Contact us</a
>
<a class="dropdown-item" href="{{ site.baseurl }}/FAQ"
>FAQs</a
>
<a class="dropdown-item" href="{{ site.baseurl }}/about-us">About us</a>
<a class="dropdown-item" href="{{ site.baseurl }}/about-us/#mission">Our mission</a>
<a class="dropdown-item" href="{{ site.baseurl }}/leadership">Leadership and governance</a>
<a class="dropdown-item" href="{{ site.baseurl }}/contact-us">Contact us</a>
<a class="dropdown-item" href="{{ site.baseurl }}/FAQ">FAQs</a>
</div>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="{{ site.baseurl }}/#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<a class="nav-link dropdown-toggle" href="{{ site.baseurl }}/#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
News
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ site.baseurl }}/community-news"
>Community News</a
>
<a class="dropdown-item" href="{{ site.baseurl }}/event"
>Events</a
>
<a class="dropdown-item" href="{{ site.baseurl }}/press"
>Press Release</a
>
<a class="dropdown-item" href="{{ site.baseurl }}/community-news">Community News</a>
<a class="dropdown-item" href="{{ site.baseurl }}/event">Events</a>
<a class="dropdown-item" href="{{ site.baseurl }}/press">Press Release</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/#try">Try now</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/develop"
>Join development</a
>
<a class="nav-link" href="{{ site.baseurl }}/develop">Join development</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/volunteering"
>Volunteer</a
>
<a class="nav-link" href="{{ site.baseurl }}/volunteering">Volunteer</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="{{ site.baseurl }}/#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<a class="nav-link dropdown-toggle" href="{{ site.baseurl }}/#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Donate
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ site.baseurl }}/donate"
>Donate</a
>
<a class="dropdown-item" href="https://www.bonfire.com/store/sugar-labs-merch/"
>Store</a
>
<a class="dropdown-item" href="{{ site.baseurl }}/donate">Donate</a>
<a class="dropdown-item" href="https://www.bonfire.com/store/sugar-labs-merch/">Store</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div>
{% include donation_banner.html %}
</div>
21 changes: 21 additions & 0 deletions assets/entry-stop.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/sparkles.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 2e4aa43

Please sign in to comment.