From 60ea4e76f93279f1be2e5bdac9addefb8569d7a2 Mon Sep 17 00:00:00 2001
From: Will Stensvold <will@sludge.link>
Date: Tue, 7 Apr 2026 23:52:05 -0500
Subject: [PATCH] Cleaned up the look of the application and then made it worse
 for fun, learned some gradients and backgrounds including gradient borders.

added primary and secondary color palletes that are calculated, played
with gradients

Added the JSON and CSV for applications, mailed them to Giac and me
---
 src/routes/+layout.svelte             | 144 ++++++++++++++++++++++----
 src/routes/+page.svelte               |   1 -
 src/routes/fest/apply/+page.server.ts |  74 +++++++++++--
 src/routes/fest/apply/+page.svelte    |  76 +++++++++++---
 4 files changed, 251 insertions(+), 44 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 52251da..8a56922 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -14,7 +14,10 @@
     while (Math.abs(random - hue) <= TOLERANCE) {
       random = Math.floor(Math.random() * 360);
     }
-    document.documentElement.style.setProperty("--primary", String(random));
+    document.documentElement.style.setProperty(
+      "--primary",
+      String(random + "deg"),
+    );
   }
 </script>
 
@@ -42,30 +45,131 @@
     --br: 0.375rem;
     --bs: 2px 2px 9px var(--primary-8);
 
-    --primary: 42;
-    --primary-1: oklch(0.91 0.046 var(--primary));
-    --primary-2: oklch(0.843 0.083 var(--primary));
-    --primary-3: oklch(0.777 0.122 var(--primary));
-    --primary-4: oklch(0.71 0.163 var(--primary));
-    --primary-5: oklch(0.643 0.179 var(--primary));
-    --primary-6: oklch(0.577 0.161 var(--primary));
-    --primary-7: oklch(0.51 0.142 var(--primary));
-    --primary-8: oklch(0.443 0.124 var(--primary));
-    --primary-9: oklch(0.377 0.105 var(--primary));
-    --primary-10: oklch(0.31 0.086 var(--primary));
-    --primary-11: oklch(0.243 0.068 var(--primary));
-    --primary-12: oklch(0.177 0.049 var(--primary));
-    --primary-13: oklch(0.11 0.031 var(--primary));
+    --primary: 42deg;
+    --gradient-degree: var(--primary, 42deg);
+    // --gradient-degree: 42deg;
+    --l-base: 0.91;
+    --l-step: 0.067;
+    --c-peak: 0.179;
+
+    --primary-1: oklch(
+      calc(var(--l-base)) calc(var(--c-peak) * 0.26) var(--primary)
+    );
+    --primary-2: oklch(
+      calc(var(--l-base) - var(--l-step)) calc(var(--c-peak) * 0.46)
+        var(--primary)
+    );
+    --primary-3: oklch(
+      calc(var(--l-base) - var(--l-step) * 2) calc(var(--c-peak) * 0.68)
+        var(--primary)
+    );
+    --primary-4: oklch(
+      calc(var(--l-base) - var(--l-step) * 3) calc(var(--c-peak) * 0.91)
+        var(--primary)
+    );
+    --primary-5: oklch(
+      calc(var(--l-base) - var(--l-step) * 4) var(--c-peak) var(--primary)
+    );
+    --primary-6: oklch(
+      calc(var(--l-base) - var(--l-step) * 5) calc(var(--c-peak) * 0.9)
+        var(--primary)
+    );
+    --primary-7: oklch(
+      calc(var(--l-base) - var(--l-step) * 6) calc(var(--c-peak) * 0.79)
+        var(--primary)
+    );
+    --primary-8: oklch(
+      calc(var(--l-base) - var(--l-step) * 7) calc(var(--c-peak) * 0.69)
+        var(--primary)
+    );
+    --primary-9: oklch(
+      calc(var(--l-base) - var(--l-step) * 8) calc(var(--c-peak) * 0.59)
+        var(--primary)
+    );
+    --primary-10: oklch(
+      calc(var(--l-base) - var(--l-step) * 9) calc(var(--c-peak) * 0.48)
+        var(--primary)
+    );
+    --primary-11: oklch(
+      calc(var(--l-base) - var(--l-step) * 10) calc(var(--c-peak) * 0.38)
+        var(--primary)
+    );
+    --primary-12: oklch(
+      calc(var(--l-base) - var(--l-step) * 11) calc(var(--c-peak) * 0.27)
+        var(--primary)
+    );
+    --primary-13: oklch(
+      calc(var(--l-base) - var(--l-step) * 12) calc(var(--c-peak) * 0.17)
+        var(--primary)
+    );
+
+    --secondary: calc(180deg - var(--primary));
+
+    --secondary-1: oklch(
+      calc(var(--l-base)) calc(var(--c-peak) * 0.26) var(--secondary)
+    );
+    --secondary-2: oklch(
+      calc(var(--l-base) - var(--l-step)) calc(var(--c-peak) * 0.46)
+        var(--secondary)
+    );
+    --secondary-3: oklch(
+      calc(var(--l-base) - var(--l-step) * 2) calc(var(--c-peak) * 0.68)
+        var(--secondary)
+    );
+    --secondary-4: oklch(
+      calc(var(--l-base) - var(--l-step) * 3) calc(var(--c-peak) * 0.91)
+        var(--secondary)
+    );
+    --secondary-5: oklch(
+      calc(var(--l-base) - var(--l-step) * 4) var(--c-peak) var(--secondary)
+    );
+    --secondary-6: oklch(
+      calc(var(--l-base) - var(--l-step) * 5) calc(var(--c-peak) * 0.9)
+        var(--secondary)
+    );
+    --secondary-7: oklch(
+      calc(var(--l-base) - var(--l-step) * 6) calc(var(--c-peak) * 0.79)
+        var(--secondary)
+    );
+    --secondary-8: oklch(
+      calc(var(--l-base) - var(--l-step) * 7) calc(var(--c-peak) * 0.69)
+        var(--secondary)
+    );
+    --secondary-9: oklch(
+      calc(var(--l-base) - var(--l-step) * 8) calc(var(--c-peak) * 0.59)
+        var(--secondary)
+    );
+    --secondary-10: oklch(
+      calc(var(--l-base) - var(--l-step) * 9) calc(var(--c-peak) * 0.48)
+        var(--secondary)
+    );
+    --secondary-11: oklch(
+      calc(var(--l-base) - var(--l-step) * 10) calc(var(--c-peak) * 0.38)
+        var(--secondary)
+    );
+    --secondary-12: oklch(
+      calc(var(--l-base) - var(--l-step) * 11) calc(var(--c-peak) * 0.27)
+        var(--secondary)
+    );
+    --secondary-13: oklch(
+      calc(var(--l-base) - var(--l-step) * 12) calc(var(--c-peak) * 0.17)
+        var(--secondary)
+    );
   }
   #buddy {
     min-height: 100vh;
-    background-color: var(--primary-11);
+    // background-color:;
     // '3px-tile.png',
     // 'arabesque.png',
     // 'beige-paper.png',
     // 'binding-dark.png',
     // '45-degree-fabric-light.png'
-    background-image: url("/patterns/arabesque.png");
+    background-image: url("/patterns/arabesque.png"),
+      linear-gradient(
+        var(--gradient-degree),
+        var(--primary-12) 10%,
+        var(--primary-10) 70%
+      );
     background-attachment: fixed;
   }
 
@@ -126,7 +230,7 @@
       border: 0;
       font-size: 100%;
       // font: inherit;
-      color: var(--primary-1);
+      color: var(--primary-2);
       font-family: "Garamond", serif;
       font-size-adjust: 0.75;
       vertical-align: baseline;
@@ -166,9 +270,9 @@
       font-size: 1.5rem;
       line-height: 1.5rem;
       font-weight: 900;
-      color: var(--primary-1);
+      color: var(--primary-100);
       &:hover {
-        background: var(--primary-10);
+        background: var(--primary-1);
       }
     }
   }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 41ef509..8987dca 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -64,7 +64,6 @@
       }
     }
     h3 {
-      // color: oklch(from var(--primary-4) calc(l + 0.2) c h);
       color: var(--primary-9);
       font-size: 0.75rem;
     }
diff --git a/src/routes/fest/apply/+page.server.ts b/src/routes/fest/apply/+page.server.ts
index b7a02b5..0d6f256 100644
--- a/src/routes/fest/apply/+page.server.ts
+++ b/src/routes/fest/apply/+page.server.ts
@@ -6,19 +6,77 @@ export async function load({ }) {
 export const actions = {
   default: async ({ request }) => {
     let data = await request.formData();
-    console.log("apply", data);
+    // console.log("apply", data);
+    let artist = {
+      name: data.get('artist_name'),
+      city: data.get('artist_city'),
+      contact: {
+        name: data.get('artist_contact_name'),
+        number: data.get('artist_contact_number'),
+        email: data.get('artist_contact_email')
+      },
+      type: data.get("act_type") != 'other' ? data.get("act_type") : data.get('other_act'),
+      genre: data.get("act_genre"),
+      amount_performers: data.get("act_performer_amount"),
+      biography: data.get("act_bio"),
+      links: data.get("act_links"),
+      performance_time: data.get('perf_time') != 'other' ? data.get('perf_time') : data.get('other_time'),
+      performance_length: data.get('perf_length') != 'other' ? data.get('perf_length') : data.get('other_length'),
+      tech_needs: data.get("performance_needs"),
+      what_drew_you: data.get('olt_draw'),
+      any_other_questions: data.get("olt_know"),
+      donation_acceptance: data.get('donation_confirmation')
+
+    }
+    console.log("appl", artist)
+
+    const artist_string = [
+      artist.name,
+      artist.city,
+      artist.contact?.name,
+      artist.contact?.number,
+      artist.contact?.email,
+      artist.type,
+      artist.genre,
+      artist.amount_performers,
+      artist.biography,
+      artist.links,
+      artist.performance_time,
+      artist.performance_length,
+      artist.tech_needs,
+      artist.what_drew_you,
+      artist.any_other_questions,
+      artist.donation_acceptance
+    ].map(v => {
+      // Escape for CSV safety
+      const s = String(v ?? '');
+      return s.includes(',') || s.includes('"') ? `"${s.replace(/"/g, '""')}"` : s;
+    }).join(', ');
+
+    // console.log(artist_string)
     transporter.sendMail({
       from: SMTP_USERNAME,
-      to: "fuckyou@sludge.link",
-      subject: "This is a test",
+      to: "fuckyou@sludge.link, black.ga@protonmail.com",
+      subject: "Sludge Fest Application for " + artist.name,
+      attachments: [{
+
+        filename: artist.name + '-application.csv',
+        content: artist_string
+      },
+      {
+        filename: artist.name + '-application.json',
+        content: JSON.stringify(artist)
+      }
+      ],
       html: `
-      <!DOCTYPE html>
-      <html>
+        <!DOCTYPE html>
+        <html>
         <body>
-          <h1>Hello email</h1 >
+        <h1>New App just dropped!! </h1>
+        <pre> ${JSON.stringify(artist, null, 2).replace(/&/g, '&amp').replace(/</g, '&lt').replace(/>/g, '&gt')} </pre>
         </body>
-      </html
-      `
+        </html
+          `
     }, (error, info) => {
       if (error) {
         console.error("Error sending email:", error);
diff --git a/src/routes/fest/apply/+page.svelte b/src/routes/fest/apply/+page.svelte
index a761a24..637d817 100644
--- a/src/routes/fest/apply/+page.svelte
+++ b/src/routes/fest/apply/+page.svelte
@@ -26,23 +26,23 @@
     <fieldset>
       <legend> Who are You? </legend>
       <label>
-        Band/Artist Name
+        <p>Band/Artist Name</p>
         <input type="text" name="artist_name" />
       </label>
       <label>
-        Primary Contact Name
+        <p>Primary Contact Name</p>
         <input type="text" name="artist_contact_name" />
       </label>
       <label>
-        Phone Number
+        <p>Phone Number</p>
         <input type="text" name="artist_contact_number" />
       </label>
       <label>
-        Email
+        <p>Email</p>
         <input type="text" name="artist_contact_email" />
       </label>
       <label>
-        City & State of Origin
+        <p>City & State of Origin</p>
         <input type="text" name="artist_city" />
       </label>
     </fieldset>
@@ -93,19 +93,19 @@
         </ul>
       </label>
       <label>
-        Genre(s)
+        <p>Genre(s)</p>
         <input type="text" name="act_genre" />
       </label>
       <label>
-        Number of Members Performing
+        <p>Number of Members Performing</p>
         <input type="text" name="act_performer_amount" />
       </label>
       <label>
-        Brief Bio
+        <p>Brief Bio</p>
         <input type="text" name="act_bio" />
       </label>
       <label>
-        Links - BandCamp | Spotify | Youtube | Website | Social Media
+        <p>Links - BandCamp | Spotify | Youtube | Website | Social Media</p>
         <input type="text" name="act_links" />
       </label>
     </fieldset>
@@ -197,12 +197,12 @@
     <fieldset>
       <legend>One Last Thing</legend>
       <label>
-        What drew you to Sludge Fest?
+        <p>What drew you to Sludge Fest?</p>
         <input type="text" name="olt_draw" />
       </label>
       <label>
-        Anything else you'd like us to know?
-        <input type="text" name="olt_know" />
+        <p>Anything else you'd like us to know?</p>
+        <textarea name="olt_know"></textarea>
       </label>
       <label>
         Preferred Time
@@ -243,6 +243,16 @@
   section {
     max-width: 50rem;
     margin: 0 auto;
+    div {
+      h1 {
+        font-size: 2rem;
+        font-weight: 900;
+      }
+      p,
+      li {
+        font-size: 1.15rem;
+      }
+    }
     form {
       display: flex;
       flex-direction: column;
@@ -266,13 +276,32 @@
       display: flex;
       flex-direction: column;
       gap: 1rem;
-      border: thick outset var(--primary-5);
+      border: thick solid transparent;
+      background:
+        url("/patterns/45-degree-fabric-light.png") padding-box,
+        linear-gradient(
+            var(--gradient-degree),
+            var(--primary-12) 0%,
+            var(--primary-11) 100%
+          )
+          padding-box,
+        linear-gradient(
+            var(--gradient-degree),
+            var(--secondary-7),
+            var(--secondary-3)
+          )
+          border-box;
       padding: 0 1rem 1rem 1rem;
       border-radius: var(--br);
       legend {
         font-weight: 900;
         font-size: 1.125rem;
         margin-left: 1rem;
+        padding: 0 0.5rem;
+        background: url("/patterns/45-degree-fabric-light.png"),
+          var(--primary-11);
+
+        border-radius: var(--br) var(--br) 0 0;
       }
       label {
         display: flex;
@@ -280,15 +309,32 @@
         &:has(ul) {
           flex-direction: column;
         }
+        p {
+          flex-basis: 50%;
+          text-align: right;
+        }
         input {
-          background: var(--primary-9);
+          height: 2rem;
+          align-self: center;
+        }
+        input,
+        textarea {
+          flex-basis: 50%;
+          background: linear-gradient(
+            var(--gradient-degree),
+            var(--primary-11),
+            var(--primary-10)
+          );
           border: none;
           outline: none;
           border-radius: var(--br);
           color: var(--primary-1);
           font-size: 1rem;
           padding: 0 0.5rem;
-          accent-color: var(--primary-6);
+          accent-color: var(--primary-8);
+        }
+        input[type="radio"] {
+          flex-basis: 1rem;
         }
         ul {
           display: flex;