add: Tech Donor section — circular icons with hover tooltips on donat… by kiyarose · Pull Request #49 · SillyLittleTech/lander

kiyarose · 2026-04-02T05:34:07Z

…e page and homepage strip (#45)

Initial plan
add: tech donor icons, homepage strip, and donate page footer

Agent-Logs-Url: https://github.com/SillyLittleTech/lander/sessions/8db83a4c-68fa-4c6c-ba53-eaa79825e487

Placeholder: plan noted

Agent-Logs-Url: https://github.com/SillyLittleTech/lander/sessions/f2a723b5-4eca-4be3-9bc3-f59fa035bf96

fix: logo cropping and homepage tooltip overflow clipping

Agent-Logs-Url: https://github.com/SillyLittleTech/lander/sessions/f2a723b5-4eca-4be3-9bc3-f59fa035bf96

fix: add JSDoc and initialize top on declaration (DeepSource JS-D1001, JS-0119)

Agent-Logs-Url: https://github.com/SillyLittleTech/lander/sessions/c4790ea8-3c18-4fc1-b602-40a36133d1d6

…e page and homepage strip (#45) * Initial plan * add: tech donor icons, homepage strip, and donate page footer Agent-Logs-Url: https://github.com/SillyLittleTech/lander/sessions/8db83a4c-68fa-4c6c-ba53-eaa79825e487 Co-authored-by: kiyarose <75678535+kiyarose@users.noreply.github.com> * Placeholder: plan noted Agent-Logs-Url: https://github.com/SillyLittleTech/lander/sessions/f2a723b5-4eca-4be3-9bc3-f59fa035bf96 Co-authored-by: kiyarose <75678535+kiyarose@users.noreply.github.com> * fix: logo cropping and homepage tooltip overflow clipping Agent-Logs-Url: https://github.com/SillyLittleTech/lander/sessions/f2a723b5-4eca-4be3-9bc3-f59fa035bf96 Co-authored-by: kiyarose <75678535+kiyarose@users.noreply.github.com> * fix: add JSDoc and initialize top on declaration (DeepSource JS-D1001, JS-0119) Agent-Logs-Url: https://github.com/SillyLittleTech/lander/sessions/c4790ea8-3c18-4fc1-b602-40a36133d1d6 Co-authored-by: kiyarose <75678535+kiyarose@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: kiyarose <75678535+kiyarose@users.noreply.github.com>

deepsource-io · 2026-04-02T05:34:23Z

DeepSource Code Review

We reviewed changes in 75ffcf6...6836055 on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

PR Report Card

Overall Grade	Security Reliability Complexity Hygiene

Code Review Summary

Analyzer	Updated (UTC)	Details
Secrets	Apr 2, 2026 5:34a.m.	Review ↗
Shell	Apr 2, 2026 5:34a.m.	Review ↗
JavaScript	Apr 2, 2026 5:34a.m.	Review ↗

sonarqubecloud · 2026-04-02T05:34:39Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Copilot

Pull request overview

Adds a “Tech Donors / Technology Partners” feature to the static site, rendering circular donor icons with JS-positioned hover tooltips on both the homepage and donation page.

Changes:

Introduces tech-donors.json as the data source for donor name/logo/contribution/link.
Adds donors.js + donors.css to render and style circular donor icons and a floating tooltip.
Integrates a compact “With help from” donor strip on index.html and a “Technology Partners” section on donate.html.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
tech-donors.json	Adds initial donor dataset consumed by the renderer.
donors.js	Implements donor icon rendering + floating tooltip behavior.
donors.css	Provides styles for icons, tooltip, and the homepage strip layout.
index.html	Loads donors assets and renders the homepage “With help from” strip.
donate.html	Loads donors assets and renders the donation-page “Technology Partners” section + adds a footer.

Copilot · 2026-04-02T05:38:14Z

+  const iconRect = wrap.getBoundingClientRect();
+  const ttHeight = tt.offsetHeight;
+  const scrollY = window.scrollY || document.documentElement.scrollTop;
+
+  const centerX = iconRect.left + iconRect.width / 2;
+  const spaceAbove = iconRect.top;
+  const placeBelow = spaceAbove < ttHeight + 16;
+
+  const top = placeBelow
+    ? iconRect.bottom + scrollY + 12
+    : iconRect.top + scrollY - ttHeight - 12;
+
+  if (placeBelow) {
+    tt.classList.add("donor-tooltip--below");
+  } else {
+    tt.classList.remove("donor-tooltip--below");
+  }
+
+  tt.style.position = "absolute";
+  tt.style.top = `${top}px`;
+  tt.style.left = `${centerX}px`;
+  tt.style.transform = "translateX(-50%)";
+  tt.style.visibility = "";


Tooltip positioning uses centerX = iconRect.left + ... and sets tt.style.left without accounting for horizontal page scroll (scrollX) or constraining the tooltip within the viewport. This can place the tooltip off-screen on narrow viewports or if the page is horizontally scrolled. Consider adding scrollX to the computed left and clamping the final left value using tt.offsetWidth and a small margin so the tooltip stays fully visible.

Copilot · 2026-04-02T05:38:15Z

+  const wrap = document.createElement("div");
+  wrap.className = "donor-icon-wrap";
+
+  // ── Icon ────────────────────────────────────────────────────────────────
+  const iconEl = document.createElement("div");
+  iconEl.className = "donor-icon";
+
+  const img = document.createElement("img");
+  img.src = donor.logo || "";
+  img.alt = donor.name || "";
+
+  // Fall back to a text initial when the logo cannot be loaded
+  img.addEventListener("error", () => {
+    if (img.parentNode) img.parentNode.removeChild(img);
+    const letter = document.createElement("span");
+    letter.className = "donor-icon-letter";
+    letter.textContent = (donor.name || "?")[0].toUpperCase();
+    iconEl.appendChild(letter);
+  });
+
+  iconEl.appendChild(img);
+  wrap.appendChild(iconEl);
+
+  // ── Tooltip: JS-driven floating (appended to body, bypasses overflow) ───
+  wrap.addEventListener("mouseenter", () => showTooltip(wrap, donor));
+  wrap.addEventListener("mouseleave", scheduleHide);
+


Donor icons are rendered as non-focusable <div>s and the tooltip is only triggered via mouseenter/mouseleave. This makes the donor details/link inaccessible to keyboard and most touch users. Consider rendering each donor icon as a focusable element (e.g., <a> when donor.url exists or add tabindex="0"/role="button"), show/hide the tooltip on focus/blur (and optionally keydown Escape), and provide an accessible name (e.g., via aria-label).

Copilot · 2026-04-02T05:38:15Z

+.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);
+}


.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 · 2026-04-02T05:38:15Z

+  cursor: default;
+}
+


.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 · 2026-04-02T05:38:16Z

+    <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>


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.

* Reorganize Assets * add: Tech Donor section — circular icons with hover tooltips on donate page and homepage strip (#45) (#49) * Initial plan * add: tech donor icons, homepage strip, and donate page footer Agent-Logs-Url: https://github.com/SillyLittleTech/lander/sessions/8db83a4c-68fa-4c6c-ba53-eaa79825e487 * Placeholder: plan noted Agent-Logs-Url: https://github.com/SillyLittleTech/lander/sessions/f2a723b5-4eca-4be3-9bc3-f59fa035bf96 * fix: logo cropping and homepage tooltip overflow clipping Agent-Logs-Url: https://github.com/SillyLittleTech/lander/sessions/f2a723b5-4eca-4be3-9bc3-f59fa035bf96 * fix: add JSDoc and initialize top on declaration (DeepSource JS-D1001, JS-0119) Agent-Logs-Url: https://github.com/SillyLittleTech/lander/sessions/c4790ea8-3c18-4fc1-b602-40a36133d1d6 --------- Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> * hotfix: Switch donor buttons to locally hosted partner images (#50) * Initial plan * hotfix: switch donor buttons to locally hosted partner images Agent-Logs-Url: https://github.com/SillyLittleTech/lander/sessions/2803f66f-5ce8-4a16-aa80-823059ba8919 Co-authored-by: kiyarose <75678535+kiyarose@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: kiyarose <75678535+kiyarose@users.noreply.github.com> --------- Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>

Copilot AI review requested due to automatic review settings April 2, 2026 05:34

kiyarose merged commit cd2b767 into kr/assetlab Apr 2, 2026
8 of 11 checks passed

Copilot started reviewing on behalf of kiyarose April 2, 2026 05:34 View session

Copilot AI reviewed Apr 2, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

add: Tech Donor section — circular icons with hover tooltips on donat…#49
kiyarose merged 1 commit into
kr/assetlabfrom
main

kiyarose commented Apr 2, 2026

Uh oh!

Uh oh!

deepsource-io Bot commented Apr 2, 2026 •

edited

Loading

Uh oh!

sonarqubecloud Bot commented Apr 2, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 2, 2026

Uh oh!

Copilot AI Apr 2, 2026

Uh oh!

Copilot AI Apr 2, 2026

Uh oh!

Copilot AI Apr 2, 2026

Uh oh!

Copilot AI Apr 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

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

Conversation

kiyarose commented Apr 2, 2026

Uh oh!

Uh oh!

deepsource-io Bot commented Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

DeepSource Code Review

PR Report Card

Code Review Summary

Uh oh!

sonarqubecloud Bot commented Apr 2, 2026

Quality Gate passed

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

deepsource-io Bot commented Apr 2, 2026 •

edited

Loading