From 1bb38c9c9a022da0c2cb4f7c2b8b668cc5d9dbbb Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 18 Mar 2026 17:37:19 +0000
Subject: [PATCH 01/12] Adjust donation page to two-column layout

Co-authored-by: Kiya Rose Ren-Miyakari <kiya.rose@sillylittle.tech>
---
 donate.html | 74 +++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 61 insertions(+), 13 deletions(-)

diff --git a/donate.html b/donate.html
index b94fa6d..28a15c5 100644
--- a/donate.html
+++ b/donate.html
@@ -124,13 +124,17 @@
         border-radius: 12px;
       }
 
+      .donate-content {
+        display: flex;
+        gap: 24px;
+        align-items: flex-start;
+        margin-top: 8px;
+      }
+
       .donate-iframe-wrapper {
-        width: 100vw;
-        position: relative;
-        left: 50%;
-        transform: translateX(-50%);
-        margin-top: 0;
-        margin-bottom: 0;
+        flex: 1 1 62%;
+        min-width: 0;
+        margin: 0;
       }
 
       .donate-iframe {
@@ -138,6 +142,37 @@
         width: 100%;
         height: 1100px;
         display: block;
+        border-radius: 12px;
+      }
+
+      .donation-info-box {
+        flex: 1 1 38%;
+        background: var(--card-bg, #f3f3f3);
+        border: 1px solid var(--border-color, #ccc);
+        border-radius: 12px;
+        padding: 20px;
+      }
+
+      .donation-info-box p {
+        margin: 0 0 12px;
+        font-size: 17px;
+        line-height: 1.45;
+      }
+
+      .donation-info-box ul {
+        margin: 0;
+        padding-left: 20px;
+        line-height: 1.6;
+      }
+
+      @media (max-width: 980px) {
+        .donate-content {
+          flex-direction: column;
+        }
+
+        .donation-info-box {
+          width: 100%;
+        }
       }
 
       .copy-toast {
@@ -254,13 +289,26 @@ <h1>Make a Donation</h1>
           >
         </div>
       </div>
-      <div class="donate-iframe-wrapper">
-        <iframe
-          src="https://hcb.hackclub.com/donations/start/sillylittletech"
-          title="Donation form for SillyLittleTech"
-          class="donate-iframe"
-          name="donateFrame"
-        ></iframe>
+      <div class="donate-content">
+        <div class="donate-iframe-wrapper">
+          <iframe
+            src="https://hcb.hackclub.com/donations/start/sillylittletech"
+            title="Donation form for SillyLittleTech"
+            class="donate-iframe"
+            name="donateFrame"
+          ></iframe>
+        </div>
+        <aside class="donation-info-box" aria-label="How donations are used">
+          <p>
+            Donations help fund our projects and server costs, including:
+          </p>
+          <ul>
+            <li>Domain Registration</li>
+            <li>Web hosting</li>
+            <li>Development of new template kits</li>
+            <li>Administrative support (Like SSO for volunteers)</li>
+          </ul>
+        </aside>
       </div>
       <img
         class="donor-graph"

From 9667dd3541b278359b1c3a9820b4814e79abb715 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 18 Mar 2026 17:41:06 +0000
Subject: [PATCH 02/12] Move donation panel left and improve text scaling

Co-authored-by: Kiya Rose Ren-Miyakari <kiya.rose@sillylittle.tech>
---
 donate.html | 33 ++++++++++++++++++---------------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/donate.html b/donate.html
index 28a15c5..65ff193 100644
--- a/donate.html
+++ b/donate.html
@@ -126,13 +126,13 @@
 
       .donate-content {
         display: flex;
-        gap: 24px;
-        align-items: flex-start;
+        gap: clamp(16px, 2.5vw, 28px);
+        align-items: stretch;
         margin-top: 8px;
       }
 
       .donate-iframe-wrapper {
-        flex: 1 1 62%;
+        flex: 1 1 65%;
         min-width: 0;
         margin: 0;
       }
@@ -146,23 +146,25 @@
       }
 
       .donation-info-box {
-        flex: 1 1 38%;
+        flex: 1 1 35%;
+        max-width: 380px;
         background: var(--card-bg, #f3f3f3);
         border: 1px solid var(--border-color, #ccc);
         border-radius: 12px;
-        padding: 20px;
+        padding: clamp(16px, 1.5vw, 24px);
       }
 
       .donation-info-box p {
         margin: 0 0 12px;
-        font-size: 17px;
-        line-height: 1.45;
+        font-size: clamp(0.98rem, 0.86rem + 0.45vw, 1.18rem);
+        line-height: 1.5;
       }
 
       .donation-info-box ul {
         margin: 0;
         padding-left: 20px;
         line-height: 1.6;
+        font-size: clamp(0.92rem, 0.82rem + 0.35vw, 1.05rem);
       }
 
       @media (max-width: 980px) {
@@ -171,6 +173,7 @@
         }
 
         .donation-info-box {
+          max-width: none;
           width: 100%;
         }
       }
@@ -290,14 +293,6 @@ <h1>Make a Donation</h1>
         </div>
       </div>
       <div class="donate-content">
-        <div class="donate-iframe-wrapper">
-          <iframe
-            src="https://hcb.hackclub.com/donations/start/sillylittletech"
-            title="Donation form for SillyLittleTech"
-            class="donate-iframe"
-            name="donateFrame"
-          ></iframe>
-        </div>
         <aside class="donation-info-box" aria-label="How donations are used">
           <p>
             Donations help fund our projects and server costs, including:
@@ -309,6 +304,14 @@ <h1>Make a Donation</h1>
             <li>Administrative support (Like SSO for volunteers)</li>
           </ul>
         </aside>
+        <div class="donate-iframe-wrapper">
+          <iframe
+            src="https://hcb.hackclub.com/donations/start/sillylittletech"
+            title="Donation form for SillyLittleTech"
+            class="donate-iframe"
+            name="donateFrame"
+          ></iframe>
+        </div>
       </div>
       <img
         class="donor-graph"

From 449b7d81753ef5c74f2ae7428050185628e3a341 Mon Sep 17 00:00:00 2001
From: "deepsource-autofix[bot]"
 <62050782+deepsource-autofix[bot]@users.noreply.github.com>
Date: Wed, 18 Mar 2026 17:47:32 +0000
Subject: [PATCH 03/12] style: format code with Prettier and StandardJS

This commit fixes the style issues introduced in cf61ec1 according to the output
from Prettier and StandardJS.

Details: https://github.com/SillyLittleTech/lander/pull/23
---
 donate.html | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/donate.html b/donate.html
index 65ff193..c099b36 100644
--- a/donate.html
+++ b/donate.html
@@ -294,9 +294,7 @@ <h1>Make a Donation</h1>
       </div>
       <div class="donate-content">
         <aside class="donation-info-box" aria-label="How donations are used">
-          <p>
-            Donations help fund our projects and server costs, including:
-          </p>
+          <p>Donations help fund our projects and server costs, including:</p>
           <ul>
             <li>Domain Registration</li>
             <li>Web hosting</li>

From 9f6a061ac9fb62ccfa9086a1504247e30ff1203e Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 18 Mar 2026 17:48:29 +0000
Subject: [PATCH 04/12] Improve donation panel text readability on small
 screens

Co-authored-by: Kiya Rose Ren-Miyakari <kiya.rose@sillylittle.tech>
---
 donate.html | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/donate.html b/donate.html
index c099b36..b02b05b 100644
--- a/donate.html
+++ b/donate.html
@@ -152,11 +152,12 @@
         border: 1px solid var(--border-color, #ccc);
         border-radius: 12px;
         padding: clamp(16px, 1.5vw, 24px);
+        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
       }
 
       .donation-info-box p {
         margin: 0 0 12px;
-        font-size: clamp(0.98rem, 0.86rem + 0.45vw, 1.18rem);
+        font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.25rem);
         line-height: 1.5;
       }
 
@@ -164,7 +165,7 @@
         margin: 0;
         padding-left: 20px;
         line-height: 1.6;
-        font-size: clamp(0.92rem, 0.82rem + 0.35vw, 1.05rem);
+        font-size: clamp(0.98rem, 0.9rem + 0.45vw, 1.12rem);
       }
 
       @media (max-width: 980px) {
@@ -176,6 +177,14 @@
           max-width: none;
           width: 100%;
         }
+
+        .donation-info-box p {
+          font-size: 1.12rem;
+        }
+
+        .donation-info-box ul {
+          font-size: 1.02rem;
+        }
       }
 
       .copy-toast {

From 40d214ae8c1fc77c25078cdf82f6b80be46e147f Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 18 Mar 2026 17:52:06 +0000
Subject: [PATCH 05/12] Stack donation layout earlier to prevent iframe
 clipping

Co-authored-by: Kiya Rose Ren-Miyakari <kiya.rose@sillylittle.tech>
---
 donate.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/donate.html b/donate.html
index b02b05b..bc659bd 100644
--- a/donate.html
+++ b/donate.html
@@ -168,7 +168,7 @@
         font-size: clamp(0.98rem, 0.9rem + 0.45vw, 1.12rem);
       }
 
-      @media (max-width: 980px) {
+      @media (max-width: 1160px) {
         .donate-content {
           flex-direction: column;
         }

From b533b636fde48d3e2c0a522c8903f35bae41f9e2 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 18 Mar 2026 17:57:43 +0000
Subject: [PATCH 06/12] Prevent donation panel text overlap on narrow widths

Co-authored-by: Kiya Rose Ren-Miyakari <kiya.rose@sillylittle.tech>
---
 donate.html | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/donate.html b/donate.html
index bc659bd..189046f 100644
--- a/donate.html
+++ b/donate.html
@@ -126,14 +126,15 @@
 
       .donate-content {
         display: flex;
+        flex-wrap: wrap;
         gap: clamp(16px, 2.5vw, 28px);
         align-items: stretch;
         margin-top: 8px;
       }
 
       .donate-iframe-wrapper {
-        flex: 1 1 65%;
-        min-width: 0;
+        flex: 2 1 520px;
+        min-width: 320px;
         margin: 0;
       }
 
@@ -146,7 +147,8 @@
       }
 
       .donation-info-box {
-        flex: 1 1 35%;
+        flex: 1 1 280px;
+        min-width: 260px;
         max-width: 380px;
         background: var(--card-bg, #f3f3f3);
         border: 1px solid var(--border-color, #ccc);
@@ -166,6 +168,7 @@
         padding-left: 20px;
         line-height: 1.6;
         font-size: clamp(0.98rem, 0.9rem + 0.45vw, 1.12rem);
+        overflow-wrap: anywhere;
       }
 
       @media (max-width: 1160px) {
@@ -173,7 +176,10 @@
           flex-direction: column;
         }
 
+        .donate-iframe-wrapper,
         .donation-info-box {
+          flex-basis: 100%;
+          min-width: 0;
           max-width: none;
           width: 100%;
         }

From 519c4db6c9fa00a2c3ebd450019dc96202d6efc4 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 18 Mar 2026 18:02:21 +0000
Subject: [PATCH 07/12] Use CSS grid for stable donation page responsiveness

Co-authored-by: Kiya Rose Ren-Miyakari <kiya.rose@sillylittle.tech>
---
 donate.html | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/donate.html b/donate.html
index 189046f..13815c7 100644
--- a/donate.html
+++ b/donate.html
@@ -125,16 +125,15 @@
       }
 
       .donate-content {
-        display: flex;
-        flex-wrap: wrap;
+        display: grid;
+        grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr);
         gap: clamp(16px, 2.5vw, 28px);
-        align-items: stretch;
+        align-items: start;
         margin-top: 8px;
       }
 
       .donate-iframe-wrapper {
-        flex: 2 1 520px;
-        min-width: 320px;
+        min-width: 0;
         margin: 0;
       }
 
@@ -147,9 +146,8 @@
       }
 
       .donation-info-box {
-        flex: 1 1 280px;
-        min-width: 260px;
-        max-width: 380px;
+        min-width: 0;
+        max-width: none;
         background: var(--card-bg, #f3f3f3);
         border: 1px solid var(--border-color, #ccc);
         border-radius: 12px;
@@ -171,16 +169,13 @@
         overflow-wrap: anywhere;
       }
 
-      @media (max-width: 1160px) {
+      @media (max-width: 980px) {
         .donate-content {
-          flex-direction: column;
+          grid-template-columns: 1fr;
         }
 
         .donate-iframe-wrapper,
         .donation-info-box {
-          flex-basis: 100%;
-          min-width: 0;
-          max-width: none;
           width: 100%;
         }
 

From 8222f06f11051c47c7de099a8ca288a4f0f044d4 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 18 Mar 2026 18:06:47 +0000
Subject: [PATCH 08/12] Use container query to stack donation layout sooner

Co-authored-by: Kiya Rose Ren-Miyakari <kiya.rose@sillylittle.tech>
---
 donate.html | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/donate.html b/donate.html
index 13815c7..b18c5f3 100644
--- a/donate.html
+++ b/donate.html
@@ -36,6 +36,7 @@
         max-width: 860px;
         margin: 0 auto;
         padding: 40px 20px;
+        container-type: inline-size;
       }
 
       .apply-header {
@@ -169,7 +170,7 @@
         overflow-wrap: anywhere;
       }
 
-      @media (max-width: 980px) {
+      @container (max-width: 760px) {
         .donate-content {
           grid-template-columns: 1fr;
         }
@@ -188,6 +189,17 @@
         }
       }
 
+      @media (max-width: 900px) {
+        .donate-content {
+          grid-template-columns: 1fr;
+        }
+
+        .donate-iframe-wrapper,
+        .donation-info-box {
+          width: 100%;
+        }
+      }
+
       .copy-toast {
         position: fixed;
         bottom: 24px;

From 967db964ed9f728694775c9a0f284c6c81d12691 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 18 Mar 2026 18:11:12 +0000
Subject: [PATCH 09/12] Fix container width regression on donation page

Co-authored-by: Kiya Rose Ren-Miyakari <kiya.rose@sillylittle.tech>
---
 donate.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/donate.html b/donate.html
index b18c5f3..037ca51 100644
--- a/donate.html
+++ b/donate.html
@@ -33,6 +33,7 @@
     <link rel="stylesheet" href="site.css" />
     <style>
       .apply-container {
+        width: 100%;
         max-width: 860px;
         margin: 0 auto;
         padding: 40px 20px;

From 2dc21658c18f4b2de914566697a7dd4070618345 Mon Sep 17 00:00:00 2001
From: Kiya Rose Ren-Miyakari <kiya.rose@sillylittle.tech>
Date: Sun, 29 Mar 2026 01:28:38 -0400
Subject: [PATCH 10/12] Move donor graph to the sidebar

Moves donor graph to the sidebar to match updated layout configuration for donation page.
---
 donate.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/donate.html b/donate.html
index 037ca51..35316f2 100644
--- a/donate.html
+++ b/donate.html
@@ -324,6 +324,11 @@ <h1>Make a Donation</h1>
             <li>Development of new template kits</li>
             <li>Administrative support (Like SSO for volunteers)</li>
           </ul>
+              <img
+        class="donor-graph"
+        src="https://graph.hcb.hackclub.com/sillylittletech"
+        alt="Donor graph for SillyLittleTech"
+      />
         </aside>
         <div class="donate-iframe-wrapper">
           <iframe
@@ -334,11 +339,6 @@ <h1>Make a Donation</h1>
           ></iframe>
         </div>
       </div>
-      <img
-        class="donor-graph"
-        src="https://graph.hcb.hackclub.com/sillylittletech"
-        alt="Donor graph for SillyLittleTech"
-      />
     </div>
 
     <output

From 940fcf570504b70282c4cb10d1c61532fba2a345 Mon Sep 17 00:00:00 2001
From: Kiya Rose Ren-Miyakari <kiya.rose@sillylittle.tech>
Date: Sun, 29 Mar 2026 01:30:52 -0400
Subject: [PATCH 11/12] Move donor graph out of side div

Moves sonar graph out of side div to attempt to remedy scaling issues.
---
 donate.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/donate.html b/donate.html
index 35316f2..0e05f91 100644
--- a/donate.html
+++ b/donate.html
@@ -324,12 +324,12 @@ <h1>Make a Donation</h1>
             <li>Development of new template kits</li>
             <li>Administrative support (Like SSO for volunteers)</li>
           </ul>
+        </aside>
               <img
         class="donor-graph"
         src="https://graph.hcb.hackclub.com/sillylittletech"
         alt="Donor graph for SillyLittleTech"
       />
-        </aside>
         <div class="donate-iframe-wrapper">
           <iframe
             src="https://hcb.hackclub.com/donations/start/sillylittletech"

From d0c2dfe6713684601f0fe94bdd718282eee0b550 Mon Sep 17 00:00:00 2001
From: Kiya Rose Ren-Miyakari <kiya.rose@sillylittle.tech>
Date: Sun, 29 Mar 2026 01:41:19 -0400
Subject: [PATCH 12/12] Adjust donation page sidebar and graph layout (#40)

---
 donate.html | 75 +++++++++++++++++++++++++++++++++--------------------
 1 file changed, 47 insertions(+), 28 deletions(-)

diff --git a/donate.html b/donate.html
index 0e05f91..ab8d4bd 100644
--- a/donate.html
+++ b/donate.html
@@ -117,15 +117,6 @@
         box-shadow: 0 6px 18px rgba(102, 126, 234, 0.28);
       }
 
-      .donor-graph {
-        display: block;
-        max-width: 380px;
-        width: 100%;
-        height: auto;
-        margin: 40px auto 0;
-        border-radius: 12px;
-      }
-
       .donate-content {
         display: grid;
         grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr);
@@ -134,6 +125,13 @@
         margin-top: 8px;
       }
 
+      .donate-sidebar {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        min-width: 0;
+      }
+
       .donate-iframe-wrapper {
         min-width: 0;
         margin: 0;
@@ -171,13 +169,24 @@
         overflow-wrap: anywhere;
       }
 
+      .donor-graph {
+        display: block;
+        width: 100%;
+        max-width: min(380px, 100%);
+        height: auto;
+        margin: 0;
+        border-radius: 12px;
+      }
+
       @container (max-width: 760px) {
         .donate-content {
           grid-template-columns: 1fr;
         }
 
+        .donate-sidebar,
         .donate-iframe-wrapper,
-        .donation-info-box {
+        .donation-info-box,
+        .donor-graph {
           width: 100%;
         }
 
@@ -195,8 +204,10 @@
           grid-template-columns: 1fr;
         }
 
+        .donate-sidebar,
         .donate-iframe-wrapper,
-        .donation-info-box {
+        .donation-info-box,
+        .donor-graph {
           width: 100%;
         }
       }
@@ -316,20 +327,22 @@ <h1>Make a Donation</h1>
         </div>
       </div>
       <div class="donate-content">
-        <aside class="donation-info-box" aria-label="How donations are used">
-          <p>Donations help fund our projects and server costs, including:</p>
-          <ul>
-            <li>Domain Registration</li>
-            <li>Web hosting</li>
-            <li>Development of new template kits</li>
-            <li>Administrative support (Like SSO for volunteers)</li>
-          </ul>
-        </aside>
-              <img
-        class="donor-graph"
-        src="https://graph.hcb.hackclub.com/sillylittletech"
-        alt="Donor graph for SillyLittleTech"
-      />
+        <div class="donate-sidebar">
+          <aside class="donation-info-box" aria-label="How donations are used">
+            <p>Donations help fund our projects and server costs, including:</p>
+            <ul>
+              <li>Domain Registration</li>
+              <li>Web hosting</li>
+              <li>Development of new template kits</li>
+              <li>Administrative support (Like SSO for volunteers)</li>
+            </ul>
+          </aside>
+          <img
+            class="donor-graph"
+            src="https://graph.hcb.hackclub.com/sillylittletech"
+            alt="Donor graph for SillyLittleTech"
+          />
+        </div>
         <div class="donate-iframe-wrapper">
           <iframe
             src="https://hcb.hackclub.com/donations/start/sillylittletech"
@@ -368,7 +381,9 @@ <h1>Make a Donation</h1>
             ) {
               return globalThis.SLT.theme.detectSystem();
             }
-          } catch (e) { console.warn(e); }
+          } catch (e) {
+            console.warn(e);
+          }
 
           // Fallback: detect via prefers-color-scheme.
           try {
@@ -394,7 +409,9 @@ <h1>Make a Donation</h1>
               globalThis.SLT.theme.applyTheme(theme);
               return;
             }
-          } catch (e) { console.warn(e); }
+          } catch (e) {
+            console.warn(e);
+          }
           document.documentElement.dataset.theme = theme;
         }
 
@@ -410,7 +427,9 @@ <h1>Make a Donation</h1>
             } else if (mq.addListener) {
               mq.addListener(applySystemTheme);
             }
-          } catch (e) { console.warn(e); }
+          } catch (e) {
+            console.warn(e);
+          }
 
           var toggle = document.getElementById("themeToggle");
           if (!toggle) return;