will/sludge-link
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding in all the photos and updating the sludge fest page to have the

Browse Source 
new logo on it. Also added a bunch of alt text for those photos
This commit is contained in:
Will Stensvold
2025-07-04 13:57:34 -05:00
parent 0f05b5fea7
commit 98add416f0
55 changed files with 128 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/db/index.ts
+1 -2
View File
@@ -65,8 +65,7 @@ export function get_all_pork() {
export function publish_blog(title, uri, body) {
const result = db.query('INSERT INTO blags (title, uri, body) VALUES ($title, $uri, $body)').get({ $title: title, $uri: uri, $body: body });
console.log(result)
db.query('INSERT INTO blags (title, uri, body) VALUES ($title, $uri, $body)').get({ $title: title, $uri: uri, $body: body });
return { success: true, uri }
}
src/routes/fest/+page.svelte
+124 -69
View File
@@ -1,149 +1,203 @@
<script lang="typescript">
let photos = ["00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19"]
let photos = [
"00",
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
];
</script>
<svelte:head>
<title>!!Sludge Fest 2025!!</title>
<meta name="description" content="Sludge Fest's internet facing spot" />
<title>!!Sludge Fest 2025!!</title>
<meta name="description" content="Sludge Fest's internet facing spot" />
</svelte:head>
<section>
<h1>August 9 2025</h1>
<h2>This time its brown</h2>
<h2>At Sludge Farm</h2>
<p>Come out and enjoy live music and fun times</p>
<p>If you'd like to perform fill out this <a href="https://forms.gle/CNUuN6guAWnUVqw19"> Artist Application </a></p>
<hr>
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<input type="checkbox" />
<img src="/fest/23/00.jpg" alt="Musicians on stage" />
</label>
<label>
<input type="checkbox">
<img src="/fest/23/09.jpg">
<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">
<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">
<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">
<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">
<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">
@use '/src/app.scss' as *;
@use 'sass:color';
@use "/src/app.scss" as *;
@use "sass:color";
:global(body){
:global(body) {
background-color: $brown;
}
section{
section {
width: 100%;
text-align: center;
padding-top: 2rem;
text-shadow: 3px 3px 3px $green;
h1{
font-size: 3rem;
font-weight: 600;
}
h2{
font-size: 2rem;
}
hr{
hr {
background: color.complement($brown, oklch);
border: none;
height: 0.25rem;
margin: 2rem 0;
}
div{
div {
display: flex;
gap: 1rem;
justify-content: center;
div{
div {
flex-direction: column;
width: 30%;
align-items: center;
justify-content: unset;
// Really cool css image zoom
input[type=checkbox] {
display: none
input[type="checkbox"] {
display: none;
}
img {
max-width: 100%;
@@ -151,11 +205,12 @@
cursor: zoom-in;
border-radius: 5px;
}
input[type=checkbox]:checked~img {
input[type="checkbox"]:checked ~ img {
transform: scale(2);
cursor: zoom-out
cursor: zoom-out;
}
}
}
}
</style>
</style>