Skip to content

Add site footer and update charitable information #33

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

Merged
karepker merged 2 commits into from
Aug 31, 2026
Merged

Add site footer and update charitable information #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d35a19c
Add site footer with charity ID, address, and mission statement.
karepker Aug 31, 2026
3632801
Pause online donations during the finance transition.
karepker Aug 31, 2026
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
3 changes: 3 additions & 0 deletions .eleventy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ export default function (eleventyConfig) {

eleventyConfig.addExtension("ntk", { key: "njk" });

// Footer copyright line; the site rebuilds nightly, so this stays current.
eleventyConfig.addGlobalData("currentYear", () => new Date().getFullYear());

let njkEnvironment = new Nunjucks.Environment(
new Nunjucks.FileSystemLoader("_includes")
);
Expand Down
50 changes: 50 additions & 0 deletions _includes/footer.ntk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<footer class="site-footer">
<div class="site-footer__inner">

<div class="site-footer__brand">
<div class="site-footer__lockup">
<img src="/images/ec_header_logo.png" alt="Ensemble Continuo" />
<div class="site-footer__wordmark">Ensemble Continuo</div>
</div>
<p class="site-footer__mission">
Ensemble Continuo is a classical chamber choir based in Palo Alto, California. We cultivate a
vibrant choral community in the Bay Area by fostering artistic excellence, lifelong learning,
and inclusivity &mdash; providing a welcoming home for experienced singers, championing diverse
and rarely-performed works, and keeping our concerts and membership affordable to all.
</p>
</div>

<div class="site-footer__aside">

<div class="site-footer__contact">
<div class="site-footer__address">
<div>555 Waverley St, Palo Alto, CA 94301</div>
<div>Charity ID (EIN): 39-4827981</div>
</div>
<div class="site-footer__legal">Ensemble Continuo is a federally recognized <span
style="white-space: nowrap">501(c)(3)</span> nonprofit; California exemption pending.</div>
</div>

<div class="site-footer__social">
<a href="https://www.instagram.com/ensemblecontinuo/" aria-label="Instagram" target="_blank"
rel="noopener"><i class="fab fa-instagram"></i></a>
<a href="https://www.youtube.com/@ensemblecontinuo468" aria-label="YouTube" target="_blank"
rel="noopener"><i class="fab fa-youtube"></i></a>
<a href="https://www.facebook.com/profile.php?id=61560800301152" aria-label="Facebook" target="_blank"
rel="noopener"><i class="fab fa-facebook"></i></a>
<a href="/pages/contact_us.html" aria-label="Contact us"><i class="far fa-envelope"></i></a>
</div>

<a class="site-footer__cta"
href="https://ensemble-continuo.us22.list-manage.com/subscribe?u=fdf6765d2687403e924ccc48f&amp;id=b637d06d3f"
target="_blank" rel="noopener">
Join our mailing list
</a>

</div>
</div>

<div class="site-footer__colophon">
<div>&copy; {{ currentYear }} Ensemble Continuo. All rights reserved.</div>
</div>
</footer>
6 changes: 6 additions & 0 deletions _includes/main.ntk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@

</script>
<link rel="stylesheet" type="text/css" href="/styles/main.css">
<link rel="stylesheet" type="text/css" href="/styles/footer.css">
<!-- this adds instagram, fb, etc. icons -->
<script src="https://kit.fontawesome.com/1e86972b80.js" crossorigin="anonymous"></script>
<link rel="shortcut icon" type="image/jpg" href="images/ec_header_logo.png">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SLMVDHBTBP"></script>
Expand Down Expand Up @@ -77,6 +80,9 @@
</div>
{% endif %}
{% endblock %}
{% if not noFooter %}
{% include "footer.ntk" %}
{% endif %}
</body>

</html>
49 changes: 22 additions & 27 deletions index.ntk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,7 @@ layout: main.ntk
noWrapper: true # Ensures video takes up remaining space with no padding
---

{% block headTags %}
<!-- this adds instagram, fb, etc. icons-->
<script src="https://kit.fontawesome.com/1e86972b80.js" crossorigin="anonymous"></script>
{% endblock %}

{% block content %}
<!--Mailchimp-->
<script id="mcjs">
!function (c, h, i, m, p) { m = c.createElement(h), p = c.getElementsByTagName(h)[0], m.async = 1, m.src = i, p.parentNode.insertBefore(m, p) }(document, "script", "https://chimpstatic.com/mcjs-connected/js/users/fdf6765d2687403e924ccc48f/538c36d8f6cc0f4bfb0dd8157.js");
</script>
<!-- Video controls -->
<script>
function toggleMute() {
Expand Down Expand Up @@ -64,26 +55,30 @@ noWrapper: true # Ensures video takes up remaining space with no padding
<source src="/videos/and_the_swallow.webm" type="video/webm">
Your browser does not support HTML5 video.
</video>
</div>

{% set upcoming = performances | upcomingPerfs %}
{% if upcoming | length > 0 %}
{% set nextPerf = upcoming | first %}
<div style="z-index:999" class="toast float-left fade show" role="alert" aria-live="assertive" aria-atomic="true"
data-autohide="false" data-animation="true">
<div class="toast-header next-show-header">
Next concert: &nbsp;
<strong class="mr-auto">
<a style="color: #333" href="/pages/performances.html">{{ nextPerf.title }}</a>
</strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="toast-body">
<a href="/pages/performances.html">{{ nextPerf.date | mmm_dd_yyyy }} - {{ nextPerf.location }}</a>
{# Lives inside #videoBackground so it stays pinned over the hero. It used to
sit here visually only because the video was position:fixed and out of
flow; now that the video flows (to make room for the footer), the toast
needs a real anchor or it drops down onto the footer. #}
{% set upcoming = performances | upcomingPerfs %}
{% if upcoming | length > 0 %}
{% set nextPerf = upcoming | first %}
<div style="z-index:999" class="toast float-left fade show" role="alert" aria-live="assertive" aria-atomic="true"
data-autohide="false" data-animation="true">
<div class="toast-header next-show-header">
Next concert: &nbsp;
<strong class="mr-auto">
<a style="color: #333" href="/pages/performances.html">{{ nextPerf.title }}</a>
</strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="toast-body">
<a href="/pages/performances.html">{{ nextPerf.date | mmm_dd_yyyy }} - {{ nextPerf.location }}</a>
</div>
</div>
{% endif %}
</div>
{% endif %}

{% endblock %}
50 changes: 12 additions & 38 deletions pages/donate.ntk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,41 +3,15 @@ title: Donate - Ensemble Continuo
layout: main.ntk
---

{% block headTags %}
<style>
.myButton {
box-shadow: 0px 10px 14px -7px #276873;
background-color: #e8a200;
border-radius: 8px;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 20px;
font-weight: bold;
padding: 13px 32px;
text-decoration: none;
text-shadow: 0px 1px 0px #3d768a;
}

.myButton:hover {
background-color: #408c99;
}

.myButton:active {
position: relative;
top: 1px;
}
</style>
{% endblock %}

<h1>Donate</h1>
<hr>
<p>
Ensemble Continuo is a fiscal subsidiary of Arts Silicon Valley and all donations go directly to the choir. Click
the button below to contribute.
</p>
<p>
Thank you for helping us pay for musicians, performance venues, sheet music, and refreshments!
</p>
<p><a href="https://www.paypal.com/donate/?hosted_button_id=9HR7DQYENUXUG" class="myButton">Donate today!</a></p>
<h1>Donate</h1>
<hr>
<p>
Ensemble Continuo is a federally recognized 501(c)(3) nonprofit, and your donation goes directly to the choir.
</p>
<p>
We are updating how we process donations, so we are not able to accept them online at the moment. If you would like
to make a donation in the meantime, please <a href="contact_us.html">contact us</a> and we will be glad to arrange it.
</p>
<p>
Thank you for helping us pay for musicians, performance venues, sheet music, and refreshments!
</p>
142 changes: 142 additions & 0 deletions styles/footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
/* Site footer — implements the Ensemble Continuo footer design. */

.site-footer {
font-family: 'Palatino Linotype', Palatino, serif;
color: #1a1a1a;
background: #ffffff;
padding: 0 24px 40px;
position: relative;
z-index: 100;
/* Matches .navcontainer in navbar.css. This site is not mobile-responsive —
the navbar forces an 840px floor and the page scrolls horizontally below
that — so the footer holds the same floor rather than collapsing to one
column while the rest of the page stays wide. */
min-width: 840px;
}

.site-footer__inner {
max-width: 1100px;
margin: 0 auto;
padding-top: 40px;
border-top: 1px solid #dcdad6;
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: 56px;
align-items: start;
}

.site-footer__brand {
display: flex;
flex-direction: column;
gap: 16px;
}

.site-footer__lockup {
display: flex;
align-items: center;
gap: 16px;
}

.site-footer__lockup img {
height: 44px;
width: auto;
display: block;
}

.site-footer__wordmark {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}

.site-footer__mission {
margin: 0;
font-size: 17px;
line-height: 1.55;
max-width: 52ch;
text-wrap: pretty;
color: #2b2b2b;
}

.site-footer__aside {
display: flex;
flex-direction: column;
gap: 20px;
}

.site-footer__contact {
display: flex;
flex-direction: column;
gap: 6px;
}

.site-footer__address {
font-size: 15px;
line-height: 1.6;
color: #2b2b2b;
}

.site-footer__legal {
font-size: 15px;
line-height: 1.6;
color: #6b6b6b;
}

.site-footer__social {
display: flex;
align-items: center;
gap: 22px;
font-size: 19px;
}

.site-footer__social a,
.site-footer__social a:visited {
color: #1a1a1a;
}

.site-footer__social a:hover {
color: #6b6b6b;
}

/* main.css sets a global `i { color: black; margin: 10px }` — neutralise it
here so the icon row keeps the design's 22px gap. */
.site-footer__social i {
color: inherit;
margin: 0;
}

.site-footer__cta,
.site-footer__cta:visited {
align-self: start;
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid #1a1a1a;
padding: 11px 20px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #1a1a1a;
background: transparent;
transition: background 160ms ease, color 160ms ease;
}

.site-footer__cta:hover {
background: #1a1a1a;
color: #ffffff;
}

.site-footer__colophon {
max-width: 1100px;
margin: 32px auto 0;
padding-top: 18px;
border-top: 1px solid #ebe9e5;
display: flex;
flex-wrap: wrap;
gap: 8px 28px;
align-items: baseline;
font-size: 13px;
color: #6b6b6b;
}
16 changes: 13 additions & 3 deletions styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,13 +141,23 @@ img.banner {
color: #dda960;
}

/* In normal flow (not fixed) so the page scrolls past the video to the
footer, which carries the charity ID, address, and mission statement. */
#videoBackground {
position: fixed;
position: relative;
left: 0;
width: 100%;
height: 80vh;
height: 80vh;
overflow: hidden;
z-index: -1000;
}

/* Pins the "next concert" toast to the top-left of the hero video. The .toast
margin below supplies the inset, matching where it sat when the video was
fixed. */
#videoBackground .toast {
position: absolute;
top: 0;
left: 0;
}

#bgVideo {
Expand Down
Loading