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

made the cards not look dumb.

Browse Source 
also you can literally just make up html tags. I think I knew this now i
used it
This commit is contained in:
Will Stensvold
2026-03-25 22:46:47 -05:00
parent 892d5541bb
commit b47c7a51b4
15 changed files with 76 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/pork/+page.server.ts
+15
View File
@@ -10,6 +10,7 @@ const PRICE_PER_LB = 6
const pork = [
{
name: "pork links",
src: "/src/lib/assests/pork-links.jpg",
cured: false,
tubed: true,
lb_package: true,
@@ -20,6 +21,7 @@ const pork = [
},
{
name: "bacon",
src: "/src/lib/assests/pork-links.jpg",
cured: true,
tubed: false,
lb_package: true,
@@ -33,6 +35,7 @@ const pork = [
},
{
name: "bratwurst",
src: "/src/lib/assests/pork-links.jpg",
cured: false,
tubed: true,
lb_package: true,
@@ -49,6 +52,7 @@ const pork = [
},
{
name: "rings",
src: "/src/lib/assests/pork-links.jpg",
cured: false,
tubed: true,
lb_package: true,
@@ -59,6 +63,7 @@ const pork = [
},
{
name: "patties",
src: "/src/lib/assests/pork-links.jpg",
cured: false,
tubed: false,
lb_package: true,
@@ -70,6 +75,7 @@ const pork = [
},
{
name: "ham",
src: "/src/lib/assests/pork-links.jpg",
cured: true,
tubed: false,
lb_package: false,
@@ -77,54 +83,63 @@ const pork = [
},
{
name: "raw ham",
src: "/src/lib/assests/pork-links.jpg",
cured: false,
tubed: false,
avg_weight: { min: 7, max: 15 }
},
{
name: "loin roast",
src: "/src/lib/assests/pork-links.jpg",
cured: false,
tubed: false,
avg_weight: { min: 3, max: 4 }
},
{
name: "chop",
src: "/src/lib/assests/pork-links.jpg",
cured: false,
tubed: false,
avg_weight: { min: 0.75, max: 1.5 }
},
{
name: "steak",
src: "/src/lib/assests/pork-links.jpg",
cured: false,
tubed: false,
avg_weight: { min: 1.5, max: 3 }
},
{
name: "belly",
src: "/src/lib/assests/pork-links.jpg",
cured: false,
tubed: false,
avg_weight: { min: 7, max: 10 }
},
{
name: "spare ribs",
src: "/src/lib/assests/pork-links.jpg",
cured: false,
tubed: false,
avg_weight: { min: 2, max: 4 }
},
{
name: "butt",
src: "/src/lib/assests/pork-links.jpg",
cured: false,
tubed: false,
avg_weight: { min: 3, max: 5 }
},
{
name: "smoked hocks",
src: "/src/lib/assests/pork-links.jpg",
cured: true,
tubed: false,
avg_weight: { min: 1, max: 2 }
},
{
name: "roast",
src: "/src/lib/assests/pork-links.jpg",
cured: false,
tubed: false,
avg_weight: { min: 4, max: 7 }
src/routes/pork/+page.svelte
+61 -28
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import type { MouseEventHandler } from "svelte/elements";
import { onMount } from "svelte";
let { data } = $props<{ data: { pork: Pork[]; PRICE_PER_LB: number } }>();
interface Pork {
pork: {
@@ -15,14 +16,13 @@
};
}
let selected = $state("Chop");
const change_photo: MouseEventHandler<HTMLLIElement> = ({
currentTarget: { id },
}) => {
// console.log(id);
// selected = id;
};
onMount(async () => {
const images = import.meta.glob("$lib/assests/*.jpg", {
eager: true,
query: { enhanced: true },
});
console.log(images);
});
</script>
<svelte:head>
@@ -38,22 +38,30 @@
<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, cured, tubed, lb_package, flavors, avg_weight }}
<div onmouseenter={change_photo} id={name}>
{#each data.pork as { name, src, cured, tubed, lb_package, flavors, avg_weight }}
<card id={name}>
<h3>{name}</h3>
{#if lb_package}
<p>1 lb</p>
{:else}
<p>{avg_weight.min}~ {avg_weight.max} lbs</p>
{/if}
{#if cured}
<span>Cured!</span>
{/if}
{#if tubed}
<span>Tubed!</span>
{/if}
<img {src} alt="A photo of {name}" />
<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}
@@ -61,7 +69,7 @@
{/each}
</ul>
{/if}
</div>
</card>
{/each}
<!-- <img -->
<!-- src={`/pork/${selected.replace(" ", "_")}.jpg`} -->
@@ -104,18 +112,42 @@
font-size: 1rem;
gap: 1rem;
width: 100%;
div {
card {
background: var(--primary-9);
border-radius: var(--br);
padding: 1rem;
display: flex;
flex-direction: column;
}
h3 {
text-transform: capitalize;
gap: 1rem;
position: relative;
img {
width: 100%;
border-radius: var(--br);
}
div {
display: flex;
justify-content: space-around;
font-size: 0.75rem;
}
span {
// font-size: 0.75rem;
background: var(--primary-5);
width: fit-content;
border-radius: var(--br);
padding: 0.125rem 0.325rem;
}
h3 {
position: absolute;
background: var(--primary-9);
border-radius: 0 0 var(--br) 0;
padding: 0.125rem 0.325rem;
top: 1rem;
text-transform: capitalize;
}
}
ul {
font-size: 0.85rem;
width: 100%;
display: inherit;
flex-direction: column;
@@ -124,6 +156,7 @@
display: inherit;
gap: 1rem;
padding-left: 1rem;
text-transform: capitalize;
&:nth-child(even) {
background: var(--primary-8);
}
@@ -140,7 +173,7 @@
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
div {
card {
flex-basis: 20rem;
// align-items: center;
justify-content: center;