Refine donation page layout with left info panel and responsive typography

donate.html

@@ -9,9 +9,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 {
@@ -100,20 +102,79 @@
         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-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;
+      }
+
+      @container (max-width: 760px) {
+        .donate-content {
+          grid-template-columns: 1fr;
+        }
+
+        .donate-iframe-wrapper,
+        .donation-info-box {
+          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-iframe-wrapper,
+        .donation-info-box {
+          width: 100%;
+        }
       }
 
       .copy-toast {
@@ -268,13 +329,24 @@ <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">
+        <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 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"