Refine donation page layout with left info panel and responsive typography

donate.html

@@ -33,9 +33,11 @@
     <link rel="stylesheet" href="site.css" />
     <style>
       .apply-container {
+        width: 100%;
         max-width: 860px;
         margin: 0 auto;
         padding: 40px 20px;
+        container-type: inline-size;
       }
 
       .apply-header {
@@ -115,29 +117,99 @@
         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);
+        gap: clamp(16px, 2.5vw, 28px);
+        align-items: start;
+        margin-top: 8px;
+      }
+
+      .donate-sidebar {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        min-width: 0;
       }
 
       .donate-iframe-wrapper {
-        width: 100vw;
-        position: relative;
-        left: 50%;
-        transform: translateX(-50%);
-        margin-top: 0;
-        margin-bottom: 0;
+        min-width: 0;
+        margin: 0;
       }
 
       .donate-iframe {
         border: none;
         width: 100%;
         height: 1100px;
         display: block;
+        border-radius: 12px;
+      }
+
+      .donation-info-box {
+        min-width: 0;
+        max-width: none;
+        background: var(--card-bg, #f3f3f3);
+        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(1.05rem, 0.95rem + 0.55vw, 1.25rem);
+        line-height: 1.5;
+      }
+
+      .donation-info-box ul {
+        margin: 0;
+        padding-left: 20px;
+        line-height: 1.6;
+        font-size: clamp(0.98rem, 0.9rem + 0.45vw, 1.12rem);
+        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,
+        .donor-graph {
+          width: 100%;
+        }
+
+        .donation-info-box p {
+          font-size: 1.12rem;
+        }
+
+        .donation-info-box ul {
+          font-size: 1.02rem;
+        }
+      }
+
+      @media (max-width: 900px) {
+        .donate-content {
+          grid-template-columns: 1fr;
+        }
+
+        .donate-sidebar,
+        .donate-iframe-wrapper,
+        .donation-info-box,
+        .donor-graph {
+          width: 100%;
+        }
       }
 
       .copy-toast {
@@ -254,19 +326,32 @@ <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-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"
+            title="Donation form for SillyLittleTech"
+            class="donate-iframe"
+            name="donateFrame"
+          ></iframe>
+        </div>
       </div>
-      <img
-        class="donor-graph"
-        src="https://graph.hcb.hackclub.com/sillylittletech"
-        alt="Donor graph for SillyLittleTech"
-      />
     </div>
 
     <output
@@ -296,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 {
@@ -322,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;
         }
 
@@ -338,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;