From 635e99ffd0dc8edddcbbc24cd2ec1cd32f65de8a Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 18 Mar 2026 17:37:19 +0000
Subject: [PATCH 1/9] 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 83b4c9b..6ee0415 100644
--- a/donate.html
+++ b/donate.html
@@ -100,13 +100,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 {
@@ -114,6 +118,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 {
@@ -268,13 +303,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 cf61ec12aa0290cc5d8cb1016edc8b67ae7a63d3 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 18 Mar 2026 17:41:06 +0000
Subject: [PATCH 2/9] 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 6ee0415..0abe66d 100644
--- a/donate.html
+++ b/donate.html
@@ -102,13 +102,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;
       }
@@ -122,23 +122,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) {
@@ -147,6 +149,7 @@
         }
 
         .donation-info-box {
+          max-width: none;
           width: 100%;
         }
       }
@@ -304,14 +307,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:
@@ -323,6 +318,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 a9e3de22cd927c39e5ed04ac921224da365dc4bc 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 3/9] 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 0abe66d..d524750 100644
--- a/donate.html
+++ b/donate.html
@@ -308,9 +308,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 34e99ff8d1d4e8a6d3049c3d5155c87657b4ac5a Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 18 Mar 2026 17:48:29 +0000
Subject: [PATCH 4/9] 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 d524750..9e1a174 100644
--- a/donate.html
+++ b/donate.html
@@ -128,11 +128,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;
       }
 
@@ -140,7 +141,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) {
@@ -152,6 +153,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 95477bdcf6d980eddeb14f18b6d94d311c597f4c Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 18 Mar 2026 17:52:06 +0000
Subject: [PATCH 5/9] 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 9e1a174..c4d0a54 100644
--- a/donate.html
+++ b/donate.html
@@ -144,7 +144,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 d695cc0cba0008c45fa839ba997864d80c20de23 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 18 Mar 2026 17:57:43 +0000
Subject: [PATCH 6/9] 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 c4d0a54..e9c437e 100644
--- a/donate.html
+++ b/donate.html
@@ -102,14 +102,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;
       }
 
@@ -122,7 +123,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);
@@ -142,6 +144,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) {
@@ -149,7 +152,10 @@
           flex-direction: column;
         }
 
+        .donate-iframe-wrapper,
         .donation-info-box {
+          flex-basis: 100%;
+          min-width: 0;
           max-width: none;
           width: 100%;
         }

From 8ff72d6e392bb59f72a515932b6f1417b848a19d Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 18 Mar 2026 18:02:21 +0000
Subject: [PATCH 7/9] 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 e9c437e..f3f3749 100644
--- a/donate.html
+++ b/donate.html
@@ -101,16 +101,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;
       }
 
@@ -123,9 +122,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;
@@ -147,16 +145,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 9e73c60e367bd600b12bcee76b2bd75f441da3c3 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 18 Mar 2026 18:06:47 +0000
Subject: [PATCH 8/9] 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 f3f3749..7ac825f 100644
--- a/donate.html
+++ b/donate.html
@@ -12,6 +12,7 @@
         max-width: 860px;
         margin: 0 auto;
         padding: 40px 20px;
+        container-type: inline-size;
       }
 
       .apply-header {
@@ -145,7 +146,7 @@
         overflow-wrap: anywhere;
       }
 
-      @media (max-width: 980px) {
+      @container (max-width: 760px) {
         .donate-content {
           grid-template-columns: 1fr;
         }
@@ -164,6 +165,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 17693932c983cc5e0598a6b140a51ac5c7486251 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 18 Mar 2026 18:11:12 +0000
Subject: [PATCH 9/9] 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 7ac825f..aa8e10a 100644
--- a/donate.html
+++ b/donate.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="site.css" />
     <style>
       .apply-container {
+        width: 100%;
         max-width: 860px;
         margin: 0 auto;
         padding: 40px 20px;