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

renamed a bunch of photos

Browse Source 
fucked up the colors a bunch
hopefully did some good mobile stuff
This commit is contained in:
Will Stensvold
2026-04-08 23:08:31 -05:00
parent 60ea4e76f9
commit 2e6df0e19f
15 changed files with 302 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
;
+205
View File
@@ -0,0 +1,205 @@
<script lang="ts">
import { onMount } from "svelte";
let { data } = $props<{ data: { pork: Pork[]; PRICE_PER_LB: number } }>();
interface Pork {
pork: {
name: string;
cured: boolean;
tubed: boolean;
lb_package: boolean;
flavors: String[];
avg_weight: {
min: number;
max: number;
};
};
}
onMount(async () => {
const images = import.meta.glob("$lib/assests/*.jpg", {
eager: true,
query: { enhanced: true },
});
console.log(images);
});
</script>
<svelte:head>
<title>Sludge Farm Pork</title>
<meta
name="description"
content="Please buy some Pork, it tastes good I swear"
/>
</svelte:head>
<section>
<h1><b>F</b>arm Raised Pork</h1>
<h5>this ain't your grocery store's pork</h5>
<h5>All priced at {data.PRICE_PER_LB}$/#</h5>
<div id="pork">
{#each data.pork as { name, src, cured, tubed, lb_package, flavors, avg_weight }}
<card id={name}>
<h3>{name}</h3>
{#if src != undefined}
<img {src} alt="A photo of {name}" />
{:else}
<hr />
{/if}
<div>
{#if cured}
<span>Cured!</span>
{/if}
{#if tubed}
<span>Tubed!</span>
{/if}
<p>
Weight:
{#if lb_package}
1 lb
{:else}
{avg_weight.min}~ {avg_weight.max} lbs
{/if}
</p>
</div>
{#if flavors != undefined}
<ul>
<li>Flavors:</li>
{#each flavors as flavor}
<li>
{flavor}
</li>
{/each}
</ul>
{/if}
</card>
{/each}
<!-- <img -->
<!-- src={`/pork/${selected.replace(" ", "_")}.jpg`} -->
<!-- alt={`Image of a ${selected}`} -->
<!-- /> -->
</div>
</section>
<style lang="scss">
b {
font-family: "Initials";
font-weight: 100;
color: var(--secondary-5);
}
section {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
h1 {
font-family: "Initials";
color: var(--secondary-3);
text-align: center;
font-size: 2.5rem;
font-weight: 500;
text-shadow: 3px 3px 3px var(--primary-8);
}
h5 {
font-size: 0.75rem;
color: var(--primary-8);
}
// img {
// display: none;
// }
}
#pork {
display: flex;
flex-direction: column;
font-size: 1rem;
gap: 1rem;
width: 100%;
card {
background: var(--secondary-9);
border-radius: var(--br);
padding: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
position: relative;
img {
width: 100%;
border-radius: var(--br);
}
hr {
height: 1rem;
color: var(--secondary-9);
width: 1rem;
}
div {
display: flex;
justify-content: space-around;
font-size: 0.75rem;
}
span {
// font-size: 0.75rem;
background: var(--primary-5);
color: var(--primary-10);
font-weight: 900;
width: fit-content;
border-radius: var(--br);
padding: 0.125rem 0.325rem;
}
h3 {
position: absolute;
background: var(--secondary-9);
border-radius: 0 0 var(--br) 0;
padding: 0.25rem 0.5rem;
top: 1rem;
text-transform: capitalize;
color: var(--primary-5);
}
}
ul {
font-size: 0.85rem;
width: 100%;
display: inherit;
flex-direction: column;
list-style: none;
li {
display: inherit;
gap: 1rem;
padding-left: 1rem;
text-transform: capitalize;
&:nth-child(even) {
background: var(--primary-8);
}
&:not(:first-child):hover {
background: var(--primary-10);
}
}
}
}
@media screen and (min-width: 640px) {
#pork {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
card {
flex-basis: 20rem;
// align-items: center;
justify-content: center;
}
}
// img {
// display: unset !important;
// width: 50%;
// height: fit-content;
// border-radius: 0.375rem;
// text-align: center;
// align-self: center;
// }
}
</style>
src/lib/assests/Bacon_(Original).jpg → src/lib/assests/bacon.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 405 KiB

After

Width:  |  Height:  |  Size: 405 KiB

src/lib/assests/Chop.jpg → src/lib/assests/chops.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 519 KiB

After

Width:  |  Height:  |  Size: 519 KiB

src/lib/assests/Ham_(Smoked).jpg → src/lib/assests/hams.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 416 KiB

After

Width:  |  Height:  |  Size: 416 KiB

src/lib/assests/Roast_(Loin).jpg → src/lib/assests/loin-roast.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 365 KiB

After

Width:  |  Height:  |  Size: 365 KiB

src/lib/assests/Roast.jpg → src/lib/assests/roast.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 392 KiB

After

Width:  |  Height:  |  Size: 392 KiB

src/lib/assests/Hocks_(Smoked).jpg → src/lib/assests/smoked-hocks.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 391 KiB

After

Width:  |  Height:  |  Size: 391 KiB

src/lib/assests/Ribs_(Spare).jpg → src/lib/assests/spare-ribs.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 434 KiB

After

Width:  |  Height:  |  Size: 434 KiB

src/lib/assests/Steak.jpg → src/lib/assests/steak.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 515 KiB

After

Width:  |  Height:  |  Size: 515 KiB

src/routes/+layout.svelte
+7 -6
View File
@@ -244,9 +244,10 @@
padding: 1rem; padding: 1rem;
gap: 1rem; gap: 1rem;
justify-content: flex-end; justify-content: flex-end;
text-shadow: 3px 3px 3px var(--primary-9); text-shadow: 3px 3px 3px var(--secondary-7);
a { a {
font-weight: 700; font-weight: 700;
color: var(--secondary-4);
line-height: 2rem; line-height: 2rem;
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1.5rem; line-height: 1.5rem;
@@ -255,11 +256,11 @@
margin-right: auto; margin-right: auto;
} }
&:hover { &:hover {
color: var(--primary-3); color: var(--secondary-2);
} }
} }
button { button {
background: var(--primary-8); background: var(--secondary-4);
border-radius: var(--br); border-radius: var(--br);
border: none; border: none;
width: fit-content; width: fit-content;
@@ -270,9 +271,9 @@
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1.5rem; line-height: 1.5rem;
font-weight: 900; font-weight: 900;
color: var(--primary-100); color: var(--secondary-5);
&:hover { &:hover {
background: var(--primary-1); background: var(--secondary-6);
} }
} }
} }
@@ -283,7 +284,7 @@
padding: 1rem; padding: 1rem;
} }
@media screen and (min-width: 600px) { @media screen and (min-width: 640px) {
nav { nav {
padding: 1rem 20%; padding: 1rem 20%;
flex-direction: row; flex-direction: row;
src/routes/+page.svelte
+5 -3
View File
@@ -42,10 +42,10 @@
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
a:hover { a:hover {
color: var(--primary-3); color: var(--secondary-3);
} }
div { div {
background: var(--primary-8); background: var(--secondary-8);
padding: 2rem 1.5rem; padding: 2rem 1.5rem;
border-radius: var(--br); border-radius: var(--br);
max-width: 40rem; max-width: 40rem;
@@ -56,15 +56,17 @@
font-size: 1.5rem; font-size: 1.5rem;
text-align: center; text-align: center;
text-justify: center; text-justify: center;
color: var(--secondary-4);
b { b {
font-family: Initials; font-family: Initials;
color: var(--secondary-3);
font-weight: 500; font-weight: 500;
font-size: 3.5rem; font-size: 3.5rem;
padding: 0.5rem; padding: 0.5rem;
} }
} }
h3 { h3 {
color: var(--primary-9); color: var(--secondary-4);
font-size: 0.75rem; font-size: 0.75rem;
} }
h2 { h2 {
src/routes/fest/+page.svelte
+12 -2
View File
@@ -18,11 +18,18 @@
text-align: center; text-align: center;
padding-top: 2rem; padding-top: 2rem;
text-shadow: 3px 3px 3px var(--primary-9); text-shadow: 3px 3px 3px var(--primary-9);
a {
color: var(--secondary-4);
&:hover {
color: var(--secondary-2);
}
}
h1 { h1 {
font-size: 2rem; font-size: 2rem;
color: var(--secondary-4);
} }
hr { hr {
background: var(--primary-4); background: var(--secondary-4);
border: none; border: none;
height: 0.25rem; height: 0.25rem;
margin: 2rem 0; margin: 2rem 0;
@@ -30,6 +37,9 @@
} }
} }
@media screen and (min-width: 600px) { @media screen and (min-width: 640px) {
section {
width: 100%;
}
} }
</style> </style>
src/routes/fest/apply/+page.svelte
+40 -9
View File
@@ -242,15 +242,18 @@
<style lang="scss"> <style lang="scss">
section { section {
max-width: 50rem; max-width: 50rem;
margin: 0 auto; width: 100%;
margin: 0.5rem auto;
text-align: center;
div { div {
margin: auto 0.5rem;
h1 { h1 {
color: var(--secondary-3);
font-size: 2rem; font-size: 2rem;
font-weight: 900; font-weight: 900;
} }
p, b {
li { color: var(--secondary-2);
font-size: 1.15rem;
} }
} }
form { form {
@@ -294,6 +297,7 @@
padding: 0 1rem 1rem 1rem; padding: 0 1rem 1rem 1rem;
border-radius: var(--br); border-radius: var(--br);
legend { legend {
color: var(--secondary-3);
font-weight: 900; font-weight: 900;
font-size: 1.125rem; font-size: 1.125rem;
margin-left: 1rem; margin-left: 1rem;
@@ -305,21 +309,24 @@
} }
label { label {
display: flex; display: flex;
gap: 1rem; color: var(--secondary-2);
flex-direction: column;
&:has(ul) { &:has(ul) {
flex-direction: column; label {
flex-direction: row;
}
} }
p { p {
flex-basis: 50%; color: var(--secondary-2);
text-align: right;
} }
input { input {
height: 2rem; height: 2rem;
align-self: center; align-self: center;
width: 100%;
} }
input, input,
textarea { textarea {
flex-basis: 50%;
background: linear-gradient( background: linear-gradient(
var(--gradient-degree), var(--gradient-degree),
var(--primary-11), var(--primary-11),
@@ -343,4 +350,28 @@
} }
} }
} }
@media screen and (min-width: 640px) {
section {
text-align: left;
p,
li {
font-size: 1.15rem;
}
fieldset {
label {
flex-direction: row;
gap: 1rem;
&:has(ul) {
flex-direction: column;
}
p,
input,
textarea {
text-align: right;
flex-basis: 50%;
}
}
}
}
}
</style> </style>
src/routes/pork/+page.server.ts
+14 -14
View File
@@ -21,7 +21,7 @@ const pork = [
}, },
{ {
name: "bacon", name: "bacon",
src: "/src/lib/assests/pork-links.jpg", src: "/src/lib/assests/bacon.jpg",
cured: true, cured: true,
tubed: false, tubed: false,
lb_package: true, lb_package: true,
@@ -35,7 +35,7 @@ const pork = [
}, },
{ {
name: "bratwurst", name: "bratwurst",
src: "/src/lib/assests/pork-links.jpg", // src: "/src/lib/assests/bratwursts.jpg",
cured: false, cured: false,
tubed: true, tubed: true,
lb_package: true, lb_package: true,
@@ -52,7 +52,7 @@ const pork = [
}, },
{ {
name: "rings", name: "rings",
src: "/src/lib/assests/pork-links.jpg", // src: "/src/lib/assests/rings.jpg",
cured: false, cured: false,
tubed: true, tubed: true,
lb_package: true, lb_package: true,
@@ -63,7 +63,7 @@ const pork = [
}, },
{ {
name: "patties", name: "patties",
src: "/src/lib/assests/pork-links.jpg", // src: "/src/lib/assests/patties.jpg",
cured: false, cured: false,
tubed: false, tubed: false,
lb_package: true, lb_package: true,
@@ -75,7 +75,7 @@ const pork = [
}, },
{ {
name: "ham", name: "ham",
src: "/src/lib/assests/pork-links.jpg", src: "/src/lib/assests/hams.jpg",
cured: true, cured: true,
tubed: false, tubed: false,
lb_package: false, lb_package: false,
@@ -83,63 +83,63 @@ const pork = [
}, },
{ {
name: "raw ham", name: "raw ham",
src: "/src/lib/assests/pork-links.jpg", // src: "/src/lib/assests/pork-links.jpg",
cured: false, cured: false,
tubed: false, tubed: false,
avg_weight: { min: 7, max: 15 } avg_weight: { min: 7, max: 15 }
}, },
{ {
name: "loin roast", name: "loin roast",
src: "/src/lib/assests/pork-links.jpg", src: "/src/lib/assests/loin-roast.jpg",
cured: false, cured: false,
tubed: false, tubed: false,
avg_weight: { min: 3, max: 4 } avg_weight: { min: 3, max: 4 }
}, },
{ {
name: "chop", name: "chop",
src: "/src/lib/assests/pork-links.jpg", src: "/src/lib/assests/chops.jpg",
cured: false, cured: false,
tubed: false, tubed: false,
avg_weight: { min: 0.75, max: 1.5 } avg_weight: { min: 0.75, max: 1.5 }
}, },
{ {
name: "steak", name: "steak",
src: "/src/lib/assests/pork-links.jpg", src: "/src/lib/assests/steak.jpg",
cured: false, cured: false,
tubed: false, tubed: false,
avg_weight: { min: 1.5, max: 3 } avg_weight: { min: 1.5, max: 3 }
}, },
{ {
name: "belly", name: "belly",
src: "/src/lib/assests/pork-links.jpg", // src: "/src/lib/assests/pork-links.jpg",
cured: false, cured: false,
tubed: false, tubed: false,
avg_weight: { min: 7, max: 10 } avg_weight: { min: 7, max: 10 }
}, },
{ {
name: "spare ribs", name: "spare ribs",
src: "/src/lib/assests/pork-links.jpg", src: "/src/lib/assests/spare-ribs.jpg",
cured: false, cured: false,
tubed: false, tubed: false,
avg_weight: { min: 2, max: 4 } avg_weight: { min: 2, max: 4 }
}, },
{ {
name: "butt", name: "butt",
src: "/src/lib/assests/pork-links.jpg", // src: "/src/lib/assests/pork-links.jpg",
cured: false, cured: false,
tubed: false, tubed: false,
avg_weight: { min: 3, max: 5 } avg_weight: { min: 3, max: 5 }
}, },
{ {
name: "smoked hocks", name: "smoked hocks",
src: "/src/lib/assests/pork-links.jpg", src: "/src/lib/assests/smoked-hocks.jpg",
cured: true, cured: true,
tubed: false, tubed: false,
avg_weight: { min: 1, max: 2 } avg_weight: { min: 1, max: 2 }
}, },
{ {
name: "roast", name: "roast",
src: "/src/lib/assests/pork-links.jpg", src: "/src/lib/assests/roast.jpg",
cured: false, cured: false,
tubed: false, tubed: false,
avg_weight: { min: 4, max: 7 } avg_weight: { min: 4, max: 7 }
src/routes/pork/+page.svelte
+19 -4
View File
@@ -41,7 +41,11 @@
{#each data.pork as { name, src, cured, tubed, lb_package, flavors, avg_weight }} {#each data.pork as { name, src, cured, tubed, lb_package, flavors, avg_weight }}
<card id={name}> <card id={name}>
<h3>{name}</h3> <h3>{name}</h3>
<img {src} alt="A photo of {name}" /> {#if src != undefined}
<img {src} alt="A photo of {name}" />
{:else}
<hr />
{/if}
<div> <div>
{#if cured} {#if cured}
<span>Cured!</span> <span>Cured!</span>
@@ -82,6 +86,7 @@
b { b {
font-family: "Initials"; font-family: "Initials";
font-weight: 100; font-weight: 100;
color: var(--secondary-5);
} }
section { section {
@@ -92,6 +97,7 @@
justify-content: center; justify-content: center;
h1 { h1 {
font-family: "Initials"; font-family: "Initials";
color: var(--secondary-4);
text-align: center; text-align: center;
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 500; font-weight: 500;
@@ -113,7 +119,7 @@
gap: 1rem; gap: 1rem;
width: 100%; width: 100%;
card { card {
background: var(--primary-9); background: var(--secondary-9);
border-radius: var(--br); border-radius: var(--br);
padding: 1rem; padding: 1rem;
display: flex; display: flex;
@@ -124,6 +130,12 @@
width: 100%; width: 100%;
border-radius: var(--br); border-radius: var(--br);
} }
hr {
height: 1rem;
color: var(--secondary-9);
border: none;
width: 1rem;
}
div { div {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
@@ -132,17 +144,20 @@
span { span {
// font-size: 0.75rem; // font-size: 0.75rem;
background: var(--primary-5); background: var(--primary-5);
color: var(--primary-10);
font-weight: 900;
width: fit-content; width: fit-content;
border-radius: var(--br); border-radius: var(--br);
padding: 0.125rem 0.325rem; padding: 0.125rem 0.325rem;
} }
h3 { h3 {
position: absolute; position: absolute;
background: var(--primary-9); background: var(--secondary-9);
border-radius: 0 0 var(--br) 0; border-radius: 0 0 var(--br) 0;
padding: 0.125rem 0.325rem; padding: 0.25rem 0.5rem;
top: 1rem; top: 1rem;
text-transform: capitalize; text-transform: capitalize;
color: var(--primary-5);
} }
} }