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);
|
||||
}
|
||||
@@ -1,9 +1,24 @@
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
import { dirname, join } from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
const currentDir = dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [sveltekit()],
|
||||
server: {
|
||||
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