doing a clean wipe to touch up the sludge links
I suppose I should do a profile here.
This commit is contained in:
+199
-82
@@ -5,6 +5,13 @@
|
||||
}
|
||||
let { data, children }: Props = $props();
|
||||
// $inspect("l",data);
|
||||
let theme = $state("green");
|
||||
const THEMES = ["blue", "yellow", "orange", "brown", "green"];
|
||||
|
||||
function change_theme() {
|
||||
let index = THEMES.findIndex((color) => theme == color);
|
||||
theme = THEMES[(index + 1) % THEMES.length];
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -12,44 +19,220 @@
|
||||
<meta name="description" content="Sludge's internet facing spot" />
|
||||
</svelte:head>
|
||||
|
||||
<nav>
|
||||
<a href="/">Sludge</a>
|
||||
<a href="/fest">Fest</a>
|
||||
<a href="/pork">Pork</a>
|
||||
<a href="/blag">Blag</a>
|
||||
</nav>
|
||||
<div id="buddy" class={theme}>
|
||||
<nav>
|
||||
<a href="/">Sludge</a>
|
||||
<button onclick={change_theme}>Cycle Color</button>
|
||||
<a href="/fest">Fest</a>
|
||||
<a href="/pork">Pork</a>
|
||||
<!-- <a href="/blag">Blag</a> -->
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
{@render children()}
|
||||
</main>
|
||||
<main>
|
||||
{@render children()}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@use "/src/app.scss" as *;
|
||||
:global(body) {
|
||||
background-color: $green-42;
|
||||
:root {
|
||||
--blue: 324;
|
||||
--yellow: 77;
|
||||
--orange: 188;
|
||||
--brown: 42;
|
||||
--green: 142;
|
||||
--green-42: oklch(0.42 0.042 142);
|
||||
--br: 0.375rem;
|
||||
--primary: var(--green);
|
||||
|
||||
.blue {
|
||||
--primary: var(--blue);
|
||||
--primary-1: oklch(0.91 0.046 var(--primary));
|
||||
--primary-2: oklch(0.843 0.083 var(--primary));
|
||||
--primary-3: oklch(0.777 0.122 var(--primary));
|
||||
--primary-4: oklch(0.71 0.163 var(--primary));
|
||||
--primary-5: oklch(0.643 0.179 var(--primary));
|
||||
--primary-6: oklch(0.577 0.161 var(--primary));
|
||||
--primary-7: oklch(0.51 0.142 var(--primary));
|
||||
--primary-8: oklch(0.443 0.124 var(--primary));
|
||||
--primary-9: oklch(0.377 0.105 var(--primary));
|
||||
--primary-10: oklch(0.31 0.086 var(--primary));
|
||||
--primary-11: oklch(0.243 0.068 var(--primary));
|
||||
--primary-12: oklch(0.177 0.049 var(--primary));
|
||||
--primary-13: oklch(0.11 0.031 var(--primary));
|
||||
}
|
||||
.yellow {
|
||||
--primary: var(--yellow);
|
||||
--primary-1: oklch(0.91 0.046 var(--primary));
|
||||
--primary-2: oklch(0.843 0.083 var(--primary));
|
||||
--primary-3: oklch(0.777 0.122 var(--primary));
|
||||
--primary-4: oklch(0.71 0.163 var(--primary));
|
||||
--primary-5: oklch(0.643 0.179 var(--primary));
|
||||
--primary-6: oklch(0.577 0.161 var(--primary));
|
||||
--primary-7: oklch(0.51 0.142 var(--primary));
|
||||
--primary-8: oklch(0.443 0.124 var(--primary));
|
||||
--primary-9: oklch(0.377 0.105 var(--primary));
|
||||
--primary-10: oklch(0.31 0.086 var(--primary));
|
||||
--primary-11: oklch(0.243 0.068 var(--primary));
|
||||
--primary-12: oklch(0.177 0.049 var(--primary));
|
||||
--primary-13: oklch(0.11 0.031 var(--primary));
|
||||
}
|
||||
.orange {
|
||||
--primary: var(--brown);
|
||||
--primary-1: oklch(0.91 0.046 var(--primary));
|
||||
--primary-2: oklch(0.843 0.083 var(--primary));
|
||||
--primary-3: oklch(0.777 0.122 var(--primary));
|
||||
--primary-4: oklch(0.71 0.163 var(--primary));
|
||||
--primary-5: oklch(0.643 0.179 var(--primary));
|
||||
--primary-6: oklch(0.577 0.161 var(--primary));
|
||||
--primary-7: oklch(0.51 0.142 var(--primary));
|
||||
--primary-8: oklch(0.443 0.124 var(--primary));
|
||||
--primary-9: oklch(0.377 0.105 var(--primary));
|
||||
--primary-10: oklch(0.31 0.086 var(--primary));
|
||||
--primary-11: oklch(0.243 0.068 var(--primary));
|
||||
--primary-12: oklch(0.177 0.049 var(--primary));
|
||||
--primary-13: oklch(0.11 0.031 var(--primary));
|
||||
}
|
||||
.brown {
|
||||
--primary: var(--brown);
|
||||
--primary-1: oklch(0.91 0.046 var(--primary));
|
||||
--primary-2: oklch(0.843 0.083 var(--primary));
|
||||
--primary-3: oklch(0.777 0.122 var(--primary));
|
||||
--primary-4: oklch(0.71 0.163 var(--primary));
|
||||
--primary-5: oklch(0.643 0.179 var(--primary));
|
||||
--primary-6: oklch(0.577 0.161 var(--primary));
|
||||
--primary-7: oklch(0.51 0.142 var(--primary));
|
||||
--primary-8: oklch(0.443 0.124 var(--primary));
|
||||
--primary-9: oklch(0.377 0.105 var(--primary));
|
||||
--primary-10: oklch(0.31 0.086 var(--primary));
|
||||
--primary-11: oklch(0.243 0.068 var(--primary));
|
||||
--primary-12: oklch(0.177 0.049 var(--primary));
|
||||
--primary-13: oklch(0.11 0.031 var(--primary));
|
||||
}
|
||||
.green {
|
||||
--primary: var(--green);
|
||||
--primary-1: oklch(0.91 0.046 var(--primary));
|
||||
--primary-2: oklch(0.843 0.083 var(--primary));
|
||||
--primary-3: oklch(0.777 0.122 var(--primary));
|
||||
--primary-4: oklch(0.71 0.163 var(--primary));
|
||||
--primary-5: oklch(0.643 0.179 var(--primary));
|
||||
--primary-6: oklch(0.577 0.161 var(--primary));
|
||||
--primary-7: oklch(0.51 0.142 var(--primary));
|
||||
--primary-8: oklch(0.443 0.124 var(--primary));
|
||||
--primary-9: oklch(0.377 0.105 var(--primary));
|
||||
--primary-10: oklch(0.31 0.086 var(--primary));
|
||||
--primary-11: oklch(0.243 0.068 var(--primary));
|
||||
--primary-12: oklch(0.177 0.049 var(--primary));
|
||||
--primary-13: oklch(0.11 0.031 var(--primary));
|
||||
}
|
||||
}
|
||||
#buddy {
|
||||
min-height: 100vh;
|
||||
background-color: var(--primary-11);
|
||||
// '3px-tile.png',
|
||||
// 'arabesque.png',
|
||||
// 'beige-paper.png',
|
||||
// 'binding-dark.png',
|
||||
// '45-degree-fabric-light.png'
|
||||
|
||||
background-image: url("/patterns/arabesque.png");
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
:global {
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
object,
|
||||
iframe,
|
||||
figure,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
a,
|
||||
code,
|
||||
em,
|
||||
img,
|
||||
small,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
tt,
|
||||
b,
|
||||
u,
|
||||
i,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td,
|
||||
main,
|
||||
canvas,
|
||||
embed,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section,
|
||||
video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
// font: inherit;
|
||||
color: var(--primary-1);
|
||||
font-family: "Garamond", serif;
|
||||
font-size-adjust: 0.75;
|
||||
vertical-align: baseline;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
padding: 0 20%;
|
||||
padding: 1rem 20%;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: flex-end;
|
||||
text-shadow: 3px 3px 3px $green;
|
||||
text-shadow: 3px 3px 3px var(--primary-9);
|
||||
a {
|
||||
font-weight: 700;
|
||||
line-height: 2rem;
|
||||
font-size: 1.5rem;
|
||||
text-decoration: none;
|
||||
&:first-child {
|
||||
margin-right: auto;
|
||||
}
|
||||
&:hover {
|
||||
color: $orange;
|
||||
color: var(--primary-8);
|
||||
}
|
||||
}
|
||||
button {
|
||||
background: var(--primary-8);
|
||||
border-radius: var(--br);
|
||||
border: none;
|
||||
height: fit-content;
|
||||
padding: 0.375rem 0.5rem;
|
||||
margin: auto 0;
|
||||
font-family: "Baskerville";
|
||||
font-weight: 900;
|
||||
color: var(--primary-1);
|
||||
&:hover {
|
||||
background: var(--primary-10);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -59,72 +242,6 @@
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
:global(
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
object,
|
||||
iframe,
|
||||
figure,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
a,
|
||||
code,
|
||||
em,
|
||||
img,
|
||||
small,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
tt,
|
||||
b,
|
||||
u,
|
||||
i,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td,
|
||||
main,
|
||||
canvas,
|
||||
embed,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section,
|
||||
video
|
||||
) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
// font: inherit;
|
||||
color: $yellow;
|
||||
font-family: "Garamond", serif;
|
||||
font-size-adjust: 0.75;
|
||||
vertical-align: baseline;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Baskerville";
|
||||
font-display: swap;
|
||||
|
||||
+31
-11
@@ -3,7 +3,7 @@
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<h1><b>S</b>ludge and <b>F</b>riends</h1>
|
||||
<h1><b title="Sludge">S</b>&<b title="Friends">F</b></h1>
|
||||
<h3>Here we make friends and mistakes</h3>
|
||||
<div>
|
||||
<div>
|
||||
@@ -21,37 +21,57 @@
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/blag"><h2>Blag</h2></a>
|
||||
<a href="https://plotters.sludge.link"><h2>Plotters</h2></a>
|
||||
<p>
|
||||
There is nothing of value here, I like misspelling things and also for
|
||||
some reason building my own versions of things that other people have
|
||||
perfected
|
||||
This is a game we slapped together to see if we can agree on things. Its
|
||||
definitely not the same as some of those other games
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style lang="scss">
|
||||
@use "/src/app.scss" as *;
|
||||
@use "sass:color";
|
||||
|
||||
section {
|
||||
max-width: 60rem;
|
||||
margin: 1rem auto 0;
|
||||
margin: 1rem auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
a:hover {
|
||||
color: var(--primary-3);
|
||||
}
|
||||
div {
|
||||
background: var(--primary-8);
|
||||
padding: 2rem 1.5rem;
|
||||
border-radius: var(--br);
|
||||
max-width: 40rem;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
line-height: 5rem;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
text-justify: center;
|
||||
b {
|
||||
font-family: Initials;
|
||||
font-weight: 500;
|
||||
font-size: 4.5rem;
|
||||
font-size: 3.5rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
color: color.scale($yellow, $alpha: -35%);
|
||||
// color: oklch(from var(--primary-4) calc(l + 0.2) c h);
|
||||
color: var(--primary-9);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
h2 {
|
||||
// line-height: 2rem;
|
||||
font-size: 1.5rem;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,7 +8,7 @@ import { publish_blog } from "$lib/db"
|
||||
export const actions = {
|
||||
default: async ({ cookies, fetch, getClientAddress, locals, params, platform, request, route, setHeaders, url, isDataRequest }) => {
|
||||
let data = await request.formData();
|
||||
console.log(data);
|
||||
console.log(publish_blog(data.get('title'), data.get('uri'), data.get('body')))
|
||||
console.log("lol maybe dont have sql insert open on the internet will", data);
|
||||
// console.log(publish_blog(data.get('title'), data.get('uri'), data.get('body')))
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,26 +1,4 @@
|
||||
<script lang="typescript">
|
||||
let photos = [
|
||||
"00",
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
];
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -167,20 +145,13 @@
|
||||
</section>
|
||||
|
||||
<style lang="scss">
|
||||
@use "/src/app.scss" as *;
|
||||
@use "sass:color";
|
||||
|
||||
:global(body) {
|
||||
background-color: $brown;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-top: 2rem;
|
||||
text-shadow: 3px 3px 3px $green;
|
||||
text-shadow: 3px 3px 3px var(--primary-9);
|
||||
hr {
|
||||
background: color.complement($brown, oklch);
|
||||
background: var(--primary-4);
|
||||
border: none;
|
||||
height: 0.25rem;
|
||||
margin: 2rem 0;
|
||||
@@ -213,4 +184,3 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,41 +1,47 @@
|
||||
<script lang="ts">
|
||||
import { RAW_COST, PROCESSED_COST } from '$lib/index';
|
||||
import { RAW_COST, PROCESSED_COST } from "$lib/index";
|
||||
import type { MouseEventHandler } from "svelte/elements";
|
||||
let { data } = $props<{ data: { pork: Pork[] } }>();
|
||||
interface Pork {
|
||||
pork: {
|
||||
name: string;
|
||||
min_weight: number;
|
||||
max_weight: number;
|
||||
stock: number;
|
||||
raw_cut: boolean;
|
||||
id: number;
|
||||
preweighed: boolean;
|
||||
name: string;
|
||||
min_weight: number;
|
||||
max_weight: number;
|
||||
stock: number;
|
||||
raw_cut: boolean;
|
||||
id: number;
|
||||
preweighed: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
let selected = $state("Chop")
|
||||
let selected = $state("Chop");
|
||||
const PRICE_PER_LB = 6;
|
||||
|
||||
function change_photo({target:{id}}){
|
||||
console.log(id)
|
||||
selected = id
|
||||
function change_photo({ target: { id } }) {
|
||||
console.log(id);
|
||||
selected = id;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<svelte:head>
|
||||
<title>Sludge Farm Pork</title>
|
||||
<meta name="description" content="Please buy some Pork, it tastes good I swear" />
|
||||
<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 {PRICE_PER_LB}$/#</h5>
|
||||
<div id="tui">
|
||||
<ol>
|
||||
<li><span>Cut</span><span>Weight</span><span class="small">$/#</span><span class="small">Stock</span></li>
|
||||
{#each data.pork as {name, raw_cut, preweighed, min_weight, max_weight, stock}}
|
||||
{@const price_per_lb = raw_cut ? RAW_COST : PROCESSED_COST}
|
||||
<li>
|
||||
<span>Cut</span>
|
||||
<span>Weight</span>
|
||||
</li>
|
||||
{#each data.pork as { name, preweighed, min_weight, max_weight }}
|
||||
<li onmouseenter={change_photo} id={name}>
|
||||
<span>{name}</span>
|
||||
{#if preweighed}
|
||||
@@ -43,24 +49,22 @@
|
||||
{:else}
|
||||
<span>{min_weight} ~ {max_weight} lbs</span>
|
||||
{/if}
|
||||
<span class="small">{price_per_lb}$</span>
|
||||
<span class="small">{stock}</span>
|
||||
</li>
|
||||
{/each}
|
||||
</ol>
|
||||
<img src={`/pork/${selected.replace(' ', '_')}.jpg`} alt={`Image of a ${selected}`} />
|
||||
<img
|
||||
src={`/pork/${selected.replace(" ", "_")}.jpg`}
|
||||
alt={`Image of a ${selected}`}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style lang="scss">
|
||||
@use '/src/app.scss' as *;
|
||||
@use 'sass:color';
|
||||
|
||||
|
||||
b{
|
||||
b {
|
||||
font-family: "Initials";
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -68,63 +72,61 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
h1 {
|
||||
font-family: "Initials";
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 500;
|
||||
text-shadow: 3px 3px 3px $green;
|
||||
font-family: "Initials";
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 500;
|
||||
text-shadow: 3px 3px 3px var(--primary-8);
|
||||
}
|
||||
h5{
|
||||
h5 {
|
||||
font-size: 0.75rem;
|
||||
color: color.adjust($yellow, $alpha: -0.5)
|
||||
color: var(--primary-8);
|
||||
}
|
||||
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#tui{
|
||||
#tui {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
font-size: 1rem;
|
||||
gap: 1rem;
|
||||
|
||||
ol{
|
||||
ol {
|
||||
width: 100%;
|
||||
display: inherit;
|
||||
flex-direction: column;
|
||||
list-style: none;
|
||||
li{
|
||||
li {
|
||||
display: inherit;
|
||||
gap: 1rem;
|
||||
padding-left: 1rem;
|
||||
span{
|
||||
span {
|
||||
flex-basis: 50%;
|
||||
text-align: center;
|
||||
text-shadow: 3px 3px 3px $green;
|
||||
&.small{
|
||||
text-shadow: 3px 3px 3px var(--primary-7);
|
||||
&.small {
|
||||
flex-basis: 25%;
|
||||
}
|
||||
&:first-child{
|
||||
&:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
&:nth-child(2n){
|
||||
background: color.adjust($blue, $alpha: -0.75);
|
||||
&:nth-child(2n) {
|
||||
background: var(--primary-8);
|
||||
}
|
||||
&:not(:first-child):hover{
|
||||
background: color.adjust($green, $alpha: -0.5);
|
||||
// background: $green;
|
||||
&:not(:first-child):hover {
|
||||
background: var(--primary-10);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 640px){
|
||||
img{
|
||||
display: unset!important;
|
||||
@media screen and (min-width: 640px) {
|
||||
img {
|
||||
display: unset !important;
|
||||
width: 50%;
|
||||
height: fit-content;
|
||||
border-radius: 0.375rem;
|
||||
@@ -132,4 +134,5 @@
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user