Skip to content

add: Tech Donor section — circular icons with hover tooltips on donat… #49

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
kiyarose merged 1 commit into from
Apr 2, 2026
Merged

add: Tech Donor section — circular icons with hover tooltips on donat… #49

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
54 changes: 54 additions & 0 deletions donate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="site.css" />
<link rel="stylesheet" href="donors.css" />
<style>
.apply-container {
max-width: 860px;
Expand Down Expand Up @@ -137,7 +138,9 @@
border: none;
width: 100%;
height: 1100px;
min-height: 400px;
display: block;
transition: height 0.2s ease;
}

.copy-toast {
Expand Down Expand Up @@ -262,13 +265,30 @@ <h1>Make a Donation</h1>
name="donateFrame"
></iframe>
</div>
<div class="tech-donors-section">
<p class="tech-donors-label">Technology Partners</p>
<div class="tech-donors-list" id="techDonorsContainer"></div>
</div>
<img
class="donor-graph"
src="https://graph.hcb.hackclub.com/sillylittletech"
alt="Donor graph for SillyLittleTech"
/>
</div>

<footer class="site-footer">
<div class="footer-inner">
<a href="brand.html">Brand guidelines</a>
<div class="footer-copyright">
&copy; 2026 SillyLittleTech.<br />
Fiscally sponsored by The Hack Foundation (d.b.a. Hack Club), a
501(c)(3) nonprofit (EIN: 81-2908499).<br />
All charitable donations are tax-deductible to the fullest extent of
the law.
</div>
</div>
</footer>
Comment on lines +279 to +290
Copy link

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The footer markup here duplicates the shared footer content in includes/footer.html but diverges (extra donation/tax text). This will be harder to keep consistent if the global footer changes. Consider reusing the shared include (or the same fetching mechanism used on index.html) and appending any donate-specific copy as an additional element so only the delta is maintained in this file.

Copilot uses AI. Check for mistakes.

<output
class="copy-toast"
id="copyToast"
Expand Down Expand Up @@ -419,5 +439,39 @@ <h1>Make a Donation</h1>
});
})();
</script>
<script src="donors.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
if (globalThis.SLT && globalThis.SLT.donors) {
globalThis.SLT.donors.renderTechDonors(
"#techDonorsContainer",
"tech-donors.json",
);
}
});
</script>
<script>
// Auto-resize the HCB donation iframe based on postMessage height events
// so the iframe never shows its own scrollbar (fixes #43).
(function () {
const HCB_ORIGIN = "https://hcb.hackclub.com";
window.addEventListener("message", function (event) {
if (event.origin !== HCB_ORIGIN) return;
const iframe = document.querySelector(".donate-iframe");
if (!iframe) return;
try {
const data =
typeof event.data === "string"
? JSON.parse(event.data)
: event.data;
if (data && typeof data.height === "number" && data.height > 0) {
iframe.style.height = data.height + "px";
}
} catch (e) {
// ignore non-JSON or unrelated messages
}
});
})();
</script>
</body>
</html>
207 changes: 207 additions & 0 deletions donors.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
/* donors.css — styles for tech-donor icons, tooltips, and "With help from" strip */

/* ── Shared icon wrapper ─────────────────────────────────────────────────── */
.donor-icon-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: default;
}

Comment on lines +9 to +11
Copy link

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.donor-icon-wrap sets cursor: default, but the element is interactive (hover-triggered tooltip and potentially a link inside the tooltip). This is a UX/accessibility mismatch and also provides no keyboard focus affordance. Consider using cursor: pointer for interactive icons and adding a visible :focus-visible style if the icons are made focusable (recommended).

Suggested change
cursor: default;
}
cursor: pointer;
}
.donor-icon-wrap:focus-visible .donor-icon {
outline: 2px solid var(--border-color);
outline-offset: 3px;
}

Copilot uses AI. Check for mistakes.
.donor-icon {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
background: #fff;
border: 2px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
transition:
transform 0.18s ease,
box-shadow 0.18s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
Comment on lines +12 to +26
Copy link

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.donor-icon uses a hardcoded background: #fff and hardcoded RGBA shadows. Since the site’s theming is driven by CSS variables in base.css (e.g., --card-bg, --shadow), this will look inconsistent in dark theme and is harder to tune globally. Consider switching the icon background/shadow to theme variables (or introducing a dedicated --donor-icon-bg variable if the intent is to keep icons white in both themes).

Copilot uses AI. Check for mistakes.

.donor-icon-wrap:hover .donor-icon {
transform: scale(1.1);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.donor-icon img {
width: 75%;
height: 75%;
object-fit: contain;
display: block;
}

.donor-icon-letter {
font-size: 16px;
font-weight: 700;
color: var(--text-color);
line-height: 1;
}

/* ── Floating tooltip (appended to body via JS; bypasses overflow clipping) ── */
.donor-tooltip {
position: absolute;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 12px 14px;
min-width: 200px;
max-width: 260px;
box-shadow:
0 8px 28px rgba(0, 0, 0, 0.14),
0 2px 8px rgba(0, 0, 0, 0.08);
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
z-index: 1001;
text-align: left;
/* Downward caret (tooltip above icon) */
--caret-size: 7px;
}

.donor-tooltip--visible {
opacity: 1;
pointer-events: auto;
}

/* caret pointing down (default: tooltip is above the icon) */
.donor-tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: var(--caret-size) solid transparent;
border-top-color: var(--card-bg);
}

.donor-tooltip::before {
content: "";
position: absolute;
top: calc(100% + 1px);
left: 50%;
transform: translateX(-50%);
border: var(--caret-size) solid transparent;
border-top-color: var(--border-color);
}

/* Flip carets when tooltip is placed below the icon */
.donor-tooltip--below::after {
top: auto;
bottom: 100%;
border-top-color: transparent;
border-bottom-color: var(--card-bg);
}

.donor-tooltip--below::before {
top: auto;
bottom: calc(100% + 1px);
border-top-color: transparent;
border-bottom-color: var(--border-color);
}

.donor-tooltip-name {
display: block;
font-size: 14px;
font-weight: 700;
margin-bottom: 5px;
color: var(--text-color);
}

.donor-tooltip-desc {
font-size: 12px;
opacity: 0.85;
margin: 0 0 8px;
line-height: 1.45;
color: var(--text-color);
}

.donor-tooltip-link {
display: inline-block;
font-size: 11px;
font-weight: 600;
color: var(--accent-color);
text-decoration: none;
margin-top: 2px;
}

.donor-tooltip-link:hover {
text-decoration: underline;
}

/* ── donate.html — "Tech Partners" section ───────────────────────────────── */
.tech-donors-section {
margin: 36px auto 0;
max-width: 860px;
text-align: center;
padding: 0 20px;
}

.tech-donors-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
opacity: 0.6;
margin-bottom: 16px;
}

.tech-donors-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}

/* ── index.html — "With help from" footer strip ──────────────────────────── */
.with-help-from {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 20px;
max-width: 1200px;
margin: 16px auto 0;
/* allow the row to scroll horizontally on narrow viewports */
overflow-x: auto;
scrollbar-width: none;
}

.with-help-from::-webkit-scrollbar {
display: none;
}

.help-label {
font-size: 11px;
opacity: 0.55;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.08em;
flex-shrink: 0;
}

.help-logos {
display: flex;
gap: 12px;
align-items: center;
}

/* Smaller icons in the "With help from" strip */
.with-help-from .donor-icon {
width: 30px;
height: 30px;
}

.with-help-from .donor-icon-letter {
font-size: 11px;
}

@media (max-width: 768px) {
.tech-donors-list {
gap: 16px;
}
}
Loading
Loading