remove unnecessary files and amek global scss work
This commit is contained in:
@@ -1,205 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
$blue: oklch(0.76 0.0358 233.23);
|
|
||||||
$yellow: oklch(0.84 0.123 100);
|
|
||||||
$orange: oklch(0.76 0.239 65);
|
|
||||||
$brown: oklch(0.36 0.042 42);
|
|
||||||
$green: oklch(0.22 0.0211 174);
|
|
||||||
$green-42: oklch(0.42 0.042 142);
|
|
||||||
|
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
@use 'sass:color';
|
||||||
|
@function transparent($color, $opacity: 75%) {
|
||||||
|
@return color-mix(in oklch, $color, transparent $opacity);
|
||||||
|
}
|
||||||
+16
-1
@@ -1,9 +1,24 @@
|
|||||||
import { sveltekit } from '@sveltejs/kit/vite';
|
import { sveltekit } from '@sveltejs/kit/vite';
|
||||||
import { defineConfig } from 'vite';
|
import { defineConfig } from 'vite';
|
||||||
|
import { dirname, join } from 'path';
|
||||||
|
import { fileURLToPath } from 'url';
|
||||||
|
|
||||||
|
const currentDir = dirname(fileURLToPath(import.meta.url))
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [sveltekit()],
|
plugins: [sveltekit()],
|
||||||
server:{
|
server: {
|
||||||
port: 4242
|
port: 4242
|
||||||
|
},
|
||||||
|
css: {
|
||||||
|
preprocessorOptions: {
|
||||||
|
scss: {
|
||||||
|
api: 'modern',
|
||||||
|
additionalData: `
|
||||||
|
@use "${join(currentDir, './src/styles/functions')}" as *;
|
||||||
|
@use "${join(currentDir, './src/styles/variables')}" as *;
|
||||||
|
`
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user