initial commit of the sludge fest application using protonmail to do the
emailing with nodemailer
This commit is contained in:
+3
-1
@@ -23,6 +23,8 @@
|
||||
"vite": "^6.3.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"@sveltejs/kit": "^2.27.3"
|
||||
"@sveltejs/kit": "^2.27.3",
|
||||
"@types/nodemailer": "^7.0.11",
|
||||
"nodemailer": "^8.0.4"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
--br: 0.375rem;
|
||||
--bs: 2px 2px 9px var(--primary-8);
|
||||
|
||||
--primary: 0;
|
||||
--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));
|
||||
|
||||
@@ -2,146 +2,14 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>!!Sludge Fest 2025!!</title>
|
||||
<title>!!Sludge Fest 2026!!</title>
|
||||
<meta name="description" content="Sludge Fest's internet facing spot" />
|
||||
</svelte:head>
|
||||
|
||||
<section>
|
||||
<img
|
||||
alt="Sludge Fest poster; This time its Brown! August 9th 2025; 2488 County Road G, Grand Marsh, WI 53936 Campground opens 11am CT Shows start 4pm. Gleeplebleepo"
|
||||
src="/fest/sludge-25.jpg"
|
||||
/>
|
||||
<h1>Sludge Fest 26: This time its Brother</h1>
|
||||
<hr />
|
||||
<div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img src="/fest/23/08.jpg" alt="SLUDGE lettering on pig fence" />
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img src="/fest/23/01.jpg" alt="THIS IS A GOOD SIGN; sign on long" />
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/02.jpg"
|
||||
alt="MOST PEOPLE DON'T LITTER AT SLUDGE; sign on a tree"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img src="/fest/23/04.jpg" alt="Merch Tent selling Sludge merch" />
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/05.jpg"
|
||||
alt="Musicians playing on a stage under some trees"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img src="/fest/23/07.jpg" alt="Sound Engineer studying a monitor" />
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/06.jpg"
|
||||
alt="Allie and Pagel painting a canvas by a mulberry tree"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/17.jpg"
|
||||
alt="SLUDGE lettering on a fence light by bonfire light"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/16.jpg"
|
||||
alt="Two men laying on the ground enjoying a bonfire"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/14.jpg"
|
||||
alt="Band playing on stage at night with lights"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/15.jpg"
|
||||
alt="Singer dancing on stage at night with lights"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/18.jpg"
|
||||
alt="DJ playing on the stage with lasers shining on him"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/19.jpg"
|
||||
alt="Audience watching a band play at night with lights"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/13.jpg"
|
||||
alt="Light techs putting lights up on a stage"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img src="/fest/23/00.jpg" alt="Musicians on stage" />
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img src="/fest/23/09.jpg" alt="Lights and fog in pine alley" />
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/10.jpg"
|
||||
alt="Lasers and fog with dancers in the pines"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/11.jpg"
|
||||
alt="Lasers and fog with dancers in the pines 2"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/12.jpg"
|
||||
alt="Lasers and fog with dancers in the pines 3"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/03.jpg"
|
||||
alt="Shot from behind the DJ booth with dancers and lights playing against the canopy"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<h2><a href="/fest/apply">Apply Here</a></h2>
|
||||
</section>
|
||||
|
||||
<style lang="scss">
|
||||
@@ -150,48 +18,18 @@
|
||||
text-align: center;
|
||||
padding-top: 2rem;
|
||||
text-shadow: 3px 3px 3px var(--primary-9);
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
hr {
|
||||
background: var(--primary-4);
|
||||
border: none;
|
||||
height: 0.25rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
div {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
div {
|
||||
flex-direction: column;
|
||||
width: 30%;
|
||||
align-items: center;
|
||||
justify-content: unset;
|
||||
|
||||
// Really cool css image zoom
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
transition: transform 0.25s ease;
|
||||
cursor: zoom-in;
|
||||
border-radius: 5px;
|
||||
}
|
||||
input[type="checkbox"]:checked ~ img {
|
||||
transform: scale(2);
|
||||
cursor: zoom-out;
|
||||
}
|
||||
}
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
section {
|
||||
img {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,197 @@
|
||||
<script lang="typescript">
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>!!Sludge Fest 2025!!</title>
|
||||
<meta name="description" content="Sludge Fest's internet facing spot" />
|
||||
</svelte:head>
|
||||
|
||||
<section>
|
||||
<img
|
||||
alt="Sludge Fest poster; This time its Brown! August 9th 2025; 2488 County Road G, Grand Marsh, WI 53936 Campground opens 11am CT Shows start 4pm. Gleeplebleepo"
|
||||
src="/fest/sludge-25.jpg"
|
||||
/>
|
||||
<hr />
|
||||
<div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img src="/fest/23/08.jpg" alt="SLUDGE lettering on pig fence" />
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img src="/fest/23/01.jpg" alt="THIS IS A GOOD SIGN; sign on long" />
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/02.jpg"
|
||||
alt="MOST PEOPLE DON'T LITTER AT SLUDGE; sign on a tree"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img src="/fest/23/04.jpg" alt="Merch Tent selling Sludge merch" />
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/05.jpg"
|
||||
alt="Musicians playing on a stage under some trees"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img src="/fest/23/07.jpg" alt="Sound Engineer studying a monitor" />
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/06.jpg"
|
||||
alt="Allie and Pagel painting a canvas by a mulberry tree"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/17.jpg"
|
||||
alt="SLUDGE lettering on a fence light by bonfire light"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/16.jpg"
|
||||
alt="Two men laying on the ground enjoying a bonfire"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/14.jpg"
|
||||
alt="Band playing on stage at night with lights"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/15.jpg"
|
||||
alt="Singer dancing on stage at night with lights"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/18.jpg"
|
||||
alt="DJ playing on the stage with lasers shining on him"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/19.jpg"
|
||||
alt="Audience watching a band play at night with lights"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/13.jpg"
|
||||
alt="Light techs putting lights up on a stage"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img src="/fest/23/00.jpg" alt="Musicians on stage" />
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img src="/fest/23/09.jpg" alt="Lights and fog in pine alley" />
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/10.jpg"
|
||||
alt="Lasers and fog with dancers in the pines"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/11.jpg"
|
||||
alt="Lasers and fog with dancers in the pines 2"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/12.jpg"
|
||||
alt="Lasers and fog with dancers in the pines 3"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<img
|
||||
src="/fest/23/03.jpg"
|
||||
alt="Shot from behind the DJ booth with dancers and lights playing against the canopy"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style lang="scss">
|
||||
section {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-top: 2rem;
|
||||
text-shadow: 3px 3px 3px var(--primary-9);
|
||||
hr {
|
||||
background: var(--primary-4);
|
||||
border: none;
|
||||
height: 0.25rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
div {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
div {
|
||||
flex-direction: column;
|
||||
width: 30%;
|
||||
align-items: center;
|
||||
justify-content: unset;
|
||||
|
||||
// Really cool css image zoom
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
transition: transform 0.25s ease;
|
||||
cursor: zoom-in;
|
||||
border-radius: 5px;
|
||||
}
|
||||
input[type="checkbox"]:checked ~ img {
|
||||
transform: scale(2);
|
||||
cursor: zoom-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
section {
|
||||
img {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,41 @@
|
||||
export async function load({ }) {
|
||||
console.log("sludge fest application")
|
||||
}
|
||||
|
||||
|
||||
export const actions = {
|
||||
default: async ({ request }) => {
|
||||
let data = await request.formData();
|
||||
console.log("apply", data);
|
||||
transporter.sendMail({
|
||||
from: SMTP_USERNAME,
|
||||
to: "fuckyou@sludge.link",
|
||||
subject: "This is a test",
|
||||
html: `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<h1>Hello email</h1 >
|
||||
</body>
|
||||
</html
|
||||
`
|
||||
}, (error, info) => {
|
||||
if (error) {
|
||||
console.error("Error sending email:", error);
|
||||
} else {
|
||||
console.log("Email sent successfully:", info.response);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
import { SMTP_TOKEN, SMTP_USERNAME } from '$env/static/private'
|
||||
import nodemailer from "nodemailer"
|
||||
const transporter = nodemailer.createTransport({
|
||||
service: "Proton",
|
||||
auth: {
|
||||
user: SMTP_USERNAME,
|
||||
pass: SMTP_TOKEN
|
||||
},
|
||||
authMethod: "PLAIN"
|
||||
} as nodemailer.TransportOptions)
|
||||
@@ -0,0 +1,300 @@
|
||||
<script lang="typescript">
|
||||
let act_type, perf_length, perf_time, donation_confirmation;
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<div>
|
||||
<h1>Sludge Fest Application - 2026</h1>
|
||||
<p>
|
||||
Thanks for your interest in performing at <b>Sludge Fest!</b> If you're a
|
||||
musician, comedian, poet, or any kind of performer, we'd love to hear from
|
||||
you! Whether you've performed for years or are just getting started, we
|
||||
want to make you a part of the <b>SLUDGE</b>.
|
||||
</p>
|
||||
<ul>
|
||||
<li><b>Date:</b> August 28/29 2026</li>
|
||||
<li><b>Location:</b> Sludge Farm - Grand Marsh, WI</li>
|
||||
</ul>
|
||||
<p>
|
||||
This is a DIY event, and while we can't guarantee payment, any donations
|
||||
collected will be split among performers after covering event costs
|
||||
(Bathrooms, Tech Rentals, First Aid). We appreciate your understanding and
|
||||
your art.
|
||||
</p>
|
||||
</div>
|
||||
<form method="POST">
|
||||
<fieldset>
|
||||
<legend> Who are You? </legend>
|
||||
<label>
|
||||
Band/Artist Name
|
||||
<input type="text" name="artist_name" />
|
||||
</label>
|
||||
<label>
|
||||
Primary Contact Name
|
||||
<input type="text" name="artist_contact_name" />
|
||||
</label>
|
||||
<label>
|
||||
Phone Number
|
||||
<input type="text" name="artist_contact_number" />
|
||||
</label>
|
||||
<label>
|
||||
Email
|
||||
<input type="text" name="artist_contact_email" />
|
||||
</label>
|
||||
<label>
|
||||
City & State of Origin
|
||||
<input type="text" name="artist_city" />
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>About Your Act</legend>
|
||||
|
||||
<label>
|
||||
Type of Act
|
||||
<ul>
|
||||
<label>
|
||||
<input type="radio" bind:group={act_type} value="live band" />
|
||||
Live Band
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" bind:group={act_type} value="dj/electronic" />
|
||||
DJ / Electronic
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
bind:group={act_type}
|
||||
value="visual art/installation"
|
||||
/>
|
||||
Visual Art / Installation
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" bind:group={act_type} value="performance art" />
|
||||
Performance Art
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
bind:group={act_type}
|
||||
value="spoken word/comedy"
|
||||
/>
|
||||
Spoken Word / Comedy
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" bind:group={act_type} value="other" />
|
||||
Other:
|
||||
<input
|
||||
onfocus={() => (act_type = "other")}
|
||||
type="text"
|
||||
name="other_act"
|
||||
/>
|
||||
</label>
|
||||
<input hidden name="act_type" bind:value={act_type} />
|
||||
</ul>
|
||||
</label>
|
||||
<label>
|
||||
Genre(s)
|
||||
<input type="text" name="act_genre" />
|
||||
</label>
|
||||
<label>
|
||||
Number of Members Performing
|
||||
<input type="text" name="act_performer_amount" />
|
||||
</label>
|
||||
<label>
|
||||
Brief Bio
|
||||
<input type="text" name="act_bio" />
|
||||
</label>
|
||||
<label>
|
||||
Links - BandCamp | Spotify | Youtube | Website | Social Media
|
||||
<input type="text" name="act_links" />
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>The Performance</legend>
|
||||
<label>
|
||||
Set Length
|
||||
<ul>
|
||||
<label>
|
||||
<input type="radio" bind:group={perf_length} value="15-25" />
|
||||
15 - 25 min
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" bind:group={perf_length} value="30-45" />
|
||||
30 - 45 min
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" bind:group={perf_length} value="45-60" />
|
||||
45 - 60 min
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" bind:group={perf_length} value="60+" />
|
||||
60+ min
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" bind:group={perf_length} value="all day" />
|
||||
All Day / Ongoing
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" bind:group={perf_length} value="flexible" />
|
||||
Flexible / Whatever Works
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" bind:group={perf_length} value="other" />
|
||||
Other:
|
||||
<input
|
||||
onfocus={() => (perf_length = "other")}
|
||||
type="text"
|
||||
name="other_length"
|
||||
/>
|
||||
</label>
|
||||
<input hidden name="perf_length" bind:value={perf_length} />
|
||||
</ul>
|
||||
</label>
|
||||
<label>
|
||||
Preferred Time
|
||||
<ul>
|
||||
<label>
|
||||
<input type="radio" bind:group={perf_time} value="no preference" />
|
||||
No Preference
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
bind:group={perf_time}
|
||||
value="morning/early afternoon"
|
||||
/>
|
||||
Morning / Early Afternoon
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" bind:group={perf_time} value="afternoon" />
|
||||
Afternoon
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" bind:group={perf_time} value="evening" />
|
||||
Evening
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" bind:group={perf_time} value="late night" />
|
||||
Late Night
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" bind:group={perf_time} value="other" />
|
||||
Other:
|
||||
<input
|
||||
onfocus={() => (perf_time = "other")}
|
||||
type="text"
|
||||
name="other_time"
|
||||
/>
|
||||
</label>
|
||||
<input hidden name="perf_time" bind:value={perf_time} />
|
||||
</ul>
|
||||
</label>
|
||||
<label>
|
||||
Tech / Space / Setup Needs
|
||||
<input type="text" name="performance_needs" />
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>One Last Thing</legend>
|
||||
<label>
|
||||
What drew you to Sludge Fest?
|
||||
<input type="text" name="olt_draw" />
|
||||
</label>
|
||||
<label>
|
||||
Anything else you'd like us to know?
|
||||
<input type="text" name="olt_know" />
|
||||
</label>
|
||||
<label>
|
||||
Preferred Time
|
||||
<ul>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
bind:group={donation_confirmation}
|
||||
value="yes"
|
||||
/>
|
||||
Yes
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" bind:group={donation_confirmation} value="no" />
|
||||
No
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
bind:group={donation_confirmation}
|
||||
value="discuss"
|
||||
/>
|
||||
I'd like to discuss this more
|
||||
</label>
|
||||
<input
|
||||
hidden
|
||||
name="donation_confirmation"
|
||||
bind:value={donation_confirmation}
|
||||
/>
|
||||
</ul>
|
||||
</label>
|
||||
</fieldset>
|
||||
<button>Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<style lang="scss">
|
||||
section {
|
||||
max-width: 50rem;
|
||||
margin: 0 auto;
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
button {
|
||||
background: var(--primary-6);
|
||||
color: var(--primary-11);
|
||||
border: none;
|
||||
font-weight: 700;
|
||||
border-radius: var(--br);
|
||||
font-size: 1.5rem;
|
||||
width: fit-content;
|
||||
padding: 0.75rem 1rem;
|
||||
margin: 0 auto;
|
||||
&:hover {
|
||||
background: var(--primary-8);
|
||||
}
|
||||
}
|
||||
}
|
||||
fieldset {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
border: thick outset var(--primary-5);
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
border-radius: var(--br);
|
||||
legend {
|
||||
font-weight: 900;
|
||||
font-size: 1.125rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
label {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
&:has(ul) {
|
||||
flex-direction: column;
|
||||
}
|
||||
input {
|
||||
background: var(--primary-9);
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: var(--br);
|
||||
color: var(--primary-1);
|
||||
font-size: 1rem;
|
||||
padding: 0 0.5rem;
|
||||
accent-color: var(--primary-6);
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user