renamed a bunch of photos
fucked up the colors a bunch hopefully did some good mobile stuff
This commit is contained in:
@@ -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>
|
||||
|
Before Width: | Height: | Size: 405 KiB After Width: | Height: | Size: 405 KiB |
|
Before Width: | Height: | Size: 519 KiB After Width: | Height: | Size: 519 KiB |
|
Before Width: | Height: | Size: 416 KiB After Width: | Height: | Size: 416 KiB |
|
Before Width: | Height: | Size: 365 KiB After Width: | Height: | Size: 365 KiB |
|
Before Width: | Height: | Size: 392 KiB After Width: | Height: | Size: 392 KiB |
|
Before Width: | Height: | Size: 391 KiB After Width: | Height: | Size: 391 KiB |
|
Before Width: | Height: | Size: 434 KiB After Width: | Height: | Size: 434 KiB |
|
Before Width: | Height: | Size: 515 KiB After Width: | Height: | Size: 515 KiB |
@@ -244,9 +244,10 @@
|
||||
padding: 1rem;
|
||||
gap: 1rem;
|
||||
justify-content: flex-end;
|
||||
text-shadow: 3px 3px 3px var(--primary-9);
|
||||
text-shadow: 3px 3px 3px var(--secondary-7);
|
||||
a {
|
||||
font-weight: 700;
|
||||
color: var(--secondary-4);
|
||||
line-height: 2rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
@@ -255,11 +256,11 @@
|
||||
margin-right: auto;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--primary-3);
|
||||
color: var(--secondary-2);
|
||||
}
|
||||
}
|
||||
button {
|
||||
background: var(--primary-8);
|
||||
background: var(--secondary-4);
|
||||
border-radius: var(--br);
|
||||
border: none;
|
||||
width: fit-content;
|
||||
@@ -270,9 +271,9 @@
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
font-weight: 900;
|
||||
color: var(--primary-100);
|
||||
color: var(--secondary-5);
|
||||
&:hover {
|
||||
background: var(--primary-1);
|
||||
background: var(--secondary-6);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -283,7 +284,7 @@
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
@media screen and (min-width: 640px) {
|
||||
nav {
|
||||
padding: 1rem 20%;
|
||||
flex-direction: row;
|
||||
|
||||
@@ -42,10 +42,10 @@
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
a:hover {
|
||||
color: var(--primary-3);
|
||||
color: var(--secondary-3);
|
||||
}
|
||||
div {
|
||||
background: var(--primary-8);
|
||||
background: var(--secondary-8);
|
||||
padding: 2rem 1.5rem;
|
||||
border-radius: var(--br);
|
||||
max-width: 40rem;
|
||||
@@ -56,15 +56,17 @@
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
text-justify: center;
|
||||
color: var(--secondary-4);
|
||||
b {
|
||||
font-family: Initials;
|
||||
color: var(--secondary-3);
|
||||
font-weight: 500;
|
||||
font-size: 3.5rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
color: var(--primary-9);
|
||||
color: var(--secondary-4);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
h2 {
|
||||
|
||||
@@ -18,11 +18,18 @@
|
||||
text-align: center;
|
||||
padding-top: 2rem;
|
||||
text-shadow: 3px 3px 3px var(--primary-9);
|
||||
a {
|
||||
color: var(--secondary-4);
|
||||
&:hover {
|
||||
color: var(--secondary-2);
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
color: var(--secondary-4);
|
||||
}
|
||||
hr {
|
||||
background: var(--primary-4);
|
||||
background: var(--secondary-4);
|
||||
border: none;
|
||||
height: 0.25rem;
|
||||
margin: 2rem 0;
|
||||
@@ -30,6 +37,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
@media screen and (min-width: 640px) {
|
||||
section {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -242,15 +242,18 @@
|
||||
<style lang="scss">
|
||||
section {
|
||||
max-width: 50rem;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
margin: 0.5rem auto;
|
||||
text-align: center;
|
||||
div {
|
||||
margin: auto 0.5rem;
|
||||
h1 {
|
||||
color: var(--secondary-3);
|
||||
font-size: 2rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
p,
|
||||
li {
|
||||
font-size: 1.15rem;
|
||||
b {
|
||||
color: var(--secondary-2);
|
||||
}
|
||||
}
|
||||
form {
|
||||
@@ -294,6 +297,7 @@
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
border-radius: var(--br);
|
||||
legend {
|
||||
color: var(--secondary-3);
|
||||
font-weight: 900;
|
||||
font-size: 1.125rem;
|
||||
margin-left: 1rem;
|
||||
@@ -305,21 +309,24 @@
|
||||
}
|
||||
label {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
&:has(ul) {
|
||||
color: var(--secondary-2);
|
||||
flex-direction: column;
|
||||
|
||||
&:has(ul) {
|
||||
label {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
p {
|
||||
flex-basis: 50%;
|
||||
text-align: right;
|
||||
color: var(--secondary-2);
|
||||
}
|
||||
input {
|
||||
height: 2rem;
|
||||
align-self: center;
|
||||
width: 100%;
|
||||
}
|
||||
input,
|
||||
textarea {
|
||||
flex-basis: 50%;
|
||||
background: linear-gradient(
|
||||
var(--gradient-degree),
|
||||
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>
|
||||
|
||||
@@ -21,7 +21,7 @@ const pork = [
|
||||
},
|
||||
{
|
||||
name: "bacon",
|
||||
src: "/src/lib/assests/pork-links.jpg",
|
||||
src: "/src/lib/assests/bacon.jpg",
|
||||
cured: true,
|
||||
tubed: false,
|
||||
lb_package: true,
|
||||
@@ -35,7 +35,7 @@ const pork = [
|
||||
},
|
||||
{
|
||||
name: "bratwurst",
|
||||
src: "/src/lib/assests/pork-links.jpg",
|
||||
// src: "/src/lib/assests/bratwursts.jpg",
|
||||
cured: false,
|
||||
tubed: true,
|
||||
lb_package: true,
|
||||
@@ -52,7 +52,7 @@ const pork = [
|
||||
},
|
||||
{
|
||||
name: "rings",
|
||||
src: "/src/lib/assests/pork-links.jpg",
|
||||
// src: "/src/lib/assests/rings.jpg",
|
||||
cured: false,
|
||||
tubed: true,
|
||||
lb_package: true,
|
||||
@@ -63,7 +63,7 @@ const pork = [
|
||||
},
|
||||
{
|
||||
name: "patties",
|
||||
src: "/src/lib/assests/pork-links.jpg",
|
||||
// src: "/src/lib/assests/patties.jpg",
|
||||
cured: false,
|
||||
tubed: false,
|
||||
lb_package: true,
|
||||
@@ -75,7 +75,7 @@ const pork = [
|
||||
},
|
||||
{
|
||||
name: "ham",
|
||||
src: "/src/lib/assests/pork-links.jpg",
|
||||
src: "/src/lib/assests/hams.jpg",
|
||||
cured: true,
|
||||
tubed: false,
|
||||
lb_package: false,
|
||||
@@ -83,63 +83,63 @@ const pork = [
|
||||
},
|
||||
{
|
||||
name: "raw ham",
|
||||
src: "/src/lib/assests/pork-links.jpg",
|
||||
// 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",
|
||||
src: "/src/lib/assests/loin-roast.jpg",
|
||||
cured: false,
|
||||
tubed: false,
|
||||
avg_weight: { min: 3, max: 4 }
|
||||
},
|
||||
{
|
||||
name: "chop",
|
||||
src: "/src/lib/assests/pork-links.jpg",
|
||||
src: "/src/lib/assests/chops.jpg",
|
||||
cured: false,
|
||||
tubed: false,
|
||||
avg_weight: { min: 0.75, max: 1.5 }
|
||||
},
|
||||
{
|
||||
name: "steak",
|
||||
src: "/src/lib/assests/pork-links.jpg",
|
||||
src: "/src/lib/assests/steak.jpg",
|
||||
cured: false,
|
||||
tubed: false,
|
||||
avg_weight: { min: 1.5, max: 3 }
|
||||
},
|
||||
{
|
||||
name: "belly",
|
||||
src: "/src/lib/assests/pork-links.jpg",
|
||||
// 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",
|
||||
src: "/src/lib/assests/spare-ribs.jpg",
|
||||
cured: false,
|
||||
tubed: false,
|
||||
avg_weight: { min: 2, max: 4 }
|
||||
},
|
||||
{
|
||||
name: "butt",
|
||||
src: "/src/lib/assests/pork-links.jpg",
|
||||
// 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",
|
||||
src: "/src/lib/assests/smoked-hocks.jpg",
|
||||
cured: true,
|
||||
tubed: false,
|
||||
avg_weight: { min: 1, max: 2 }
|
||||
},
|
||||
{
|
||||
name: "roast",
|
||||
src: "/src/lib/assests/pork-links.jpg",
|
||||
src: "/src/lib/assests/roast.jpg",
|
||||
cured: false,
|
||||
tubed: false,
|
||||
avg_weight: { min: 4, max: 7 }
|
||||
|
||||
@@ -41,7 +41,11 @@
|
||||
{#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>
|
||||
@@ -82,6 +86,7 @@
|
||||
b {
|
||||
font-family: "Initials";
|
||||
font-weight: 100;
|
||||
color: var(--secondary-5);
|
||||
}
|
||||
|
||||
section {
|
||||
@@ -92,6 +97,7 @@
|
||||
justify-content: center;
|
||||
h1 {
|
||||
font-family: "Initials";
|
||||
color: var(--secondary-4);
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 500;
|
||||
@@ -113,7 +119,7 @@
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
card {
|
||||
background: var(--primary-9);
|
||||
background: var(--secondary-9);
|
||||
border-radius: var(--br);
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
@@ -124,6 +130,12 @@
|
||||
width: 100%;
|
||||
border-radius: var(--br);
|
||||
}
|
||||
hr {
|
||||
height: 1rem;
|
||||
color: var(--secondary-9);
|
||||
border: none;
|
||||
width: 1rem;
|
||||
}
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
@@ -132,17 +144,20 @@
|
||||
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(--primary-9);
|
||||
background: var(--secondary-9);
|
||||
border-radius: 0 0 var(--br) 0;
|
||||
padding: 0.125rem 0.325rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
top: 1rem;
|
||||
text-transform: capitalize;
|
||||
color: var(--primary-5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user