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

moving around how the fonts work and css stuff

Browse Source
This commit is contained in:
Will Stensvold
2026-06-13 01:12:39 -05:00
parent 331537415f
commit e7bf1336da
17 changed files with 390 additions and 558 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+layout.svelte
+11 -269
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import "../app.css";
interface Props {
data: {};
children: any;
@@ -28,225 +29,22 @@
<meta name="description" content="Sludge's internet facing spot" />
</svelte:head>
<div id="buddy">
<nav>
<a href="/">Sludge</a>
<button onclick={change_theme}>&#127922&#127752;</button>
<!-- <a href="/fest">Fest</a> -->
<a href="/shirts">Shirts</a>
<a href="/pork">Pork</a>
</nav>
<nav>
<a href="/">Sludge</a>
<button onclick={change_theme}>&#127922&#127752;</button>
<!-- <a href="/fest">Fest</a> -->
<a href="/shirts">Shirts</a>
<a href="/pork">Pork</a>
</nav>
<main>
{@render children()}
</main>
</div>
<main>
{@render children()}
</main>
<style lang="scss">
:root {
--br: 0.375rem;
--bs: 2px 2px 9px var(--primary-8);
--primary: 225deg;
--gradient-degree: var(--primary, 42deg);
// --gradient-degree: 42deg;
--l-base: 0.91;
--l-step: 0.067;
--c-peak: 0.179;
--primary-1: oklch(
calc(var(--l-base)) calc(var(--c-peak) * 0.26) var(--primary)
);
--primary-2: oklch(
calc(var(--l-base) - var(--l-step)) calc(var(--c-peak) * 0.46)
var(--primary)
);
--primary-3: oklch(
calc(var(--l-base) - var(--l-step) * 2) calc(var(--c-peak) * 0.68)
var(--primary)
);
--primary-4: oklch(
calc(var(--l-base) - var(--l-step) * 3) calc(var(--c-peak) * 0.91)
var(--primary)
);
--primary-5: oklch(
calc(var(--l-base) - var(--l-step) * 4) var(--c-peak) var(--primary)
);
--primary-6: oklch(
calc(var(--l-base) - var(--l-step) * 5) calc(var(--c-peak) * 0.9)
var(--primary)
);
--primary-7: oklch(
calc(var(--l-base) - var(--l-step) * 6) calc(var(--c-peak) * 0.79)
var(--primary)
);
--primary-8: oklch(
calc(var(--l-base) - var(--l-step) * 7) calc(var(--c-peak) * 0.69)
var(--primary)
);
--primary-9: oklch(
calc(var(--l-base) - var(--l-step) * 8) calc(var(--c-peak) * 0.59)
var(--primary)
);
--primary-10: oklch(
calc(var(--l-base) - var(--l-step) * 9) calc(var(--c-peak) * 0.48)
var(--primary)
);
--primary-11: oklch(
calc(var(--l-base) - var(--l-step) * 10) calc(var(--c-peak) * 0.38)
var(--primary)
);
--primary-12: oklch(
calc(var(--l-base) - var(--l-step) * 11) calc(var(--c-peak) * 0.27)
var(--primary)
);
--primary-13: oklch(
calc(var(--l-base) - var(--l-step) * 12) calc(var(--c-peak) * 0.17)
var(--primary)
);
--secondary: calc(180deg - var(--primary));
--secondary-1: oklch(
calc(var(--l-base)) calc(var(--c-peak) * 0.26) var(--secondary)
);
--secondary-2: oklch(
calc(var(--l-base) - var(--l-step)) calc(var(--c-peak) * 0.46)
var(--secondary)
);
--secondary-3: oklch(
calc(var(--l-base) - var(--l-step) * 2) calc(var(--c-peak) * 0.68)
var(--secondary)
);
--secondary-4: oklch(
calc(var(--l-base) - var(--l-step) * 3) calc(var(--c-peak) * 0.91)
var(--secondary)
);
--secondary-5: oklch(
calc(var(--l-base) - var(--l-step) * 4) var(--c-peak) var(--secondary)
);
--secondary-6: oklch(
calc(var(--l-base) - var(--l-step) * 5) calc(var(--c-peak) * 0.9)
var(--secondary)
);
--secondary-7: oklch(
calc(var(--l-base) - var(--l-step) * 6) calc(var(--c-peak) * 0.79)
var(--secondary)
);
--secondary-8: oklch(
calc(var(--l-base) - var(--l-step) * 7) calc(var(--c-peak) * 0.69)
var(--secondary)
);
--secondary-9: oklch(
calc(var(--l-base) - var(--l-step) * 8) calc(var(--c-peak) * 0.59)
var(--secondary)
);
--secondary-10: oklch(
calc(var(--l-base) - var(--l-step) * 9) calc(var(--c-peak) * 0.48)
var(--secondary)
);
--secondary-11: oklch(
calc(var(--l-base) - var(--l-step) * 10) calc(var(--c-peak) * 0.38)
var(--secondary)
);
--secondary-12: oklch(
calc(var(--l-base) - var(--l-step) * 11) calc(var(--c-peak) * 0.27)
var(--secondary)
);
--secondary-13: oklch(
calc(var(--l-base) - var(--l-step) * 12) calc(var(--c-peak) * 0.17)
var(--secondary)
);
}
#buddy {
min-height: 100vh;
padding: 0 1rem;
// background-color:;
// '3px-tile.png',
// 'arabesque.png',
// 'beige-paper.png',
// 'binding-dark.png',
// '45-degree-fabric-light.png'
background-image: url("/patterns/arabesque.png"),
linear-gradient(
var(--gradient-degree),
var(--primary-12) 10%,
var(--primary-10) 70%
);
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;
box-sizing: border-box;
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 {
display: flex;
flex-wrap: wrap;
padding: 0.5rem 0;
gap: 1rem;
justify-content: flex-end;
@@ -300,60 +98,4 @@
}
}
}
@font-face {
font-family: "Baskerville";
font-display: swap;
font-style: italic;
font-weight: 500;
src: url(/font/LibreBaskerville-Italic.otf) format("opentype");
}
@font-face {
font-family: "Baskerville";
font-display: swap;
font-style: normal;
font-weight: 900;
src: url(/font/LibreBaskerville-Bold.otf) format("opentype");
}
@font-face {
font-family: "Baskerville";
font-display: swap;
font-style: normal;
font-weight: 500;
src: url(/font/LibreBaskerville-Regular.otf) format("opentype");
}
@font-face {
font-family: "Initials";
font-display: swap;
font-style: normal;
font-weight: 500;
src: url(/font/EBGaramond-Initials.otf) format("opentype");
}
@font-face {
font-family: "Initials";
font-display: swap;
font-style: normal;
font-weight: 100;
src: url(/font/EBGaramond-InitialsF1.otf) format("opentype");
}
@font-face {
font-family: "Initials";
font-display: swap;
font-style: normal;
font-weight: 200;
src: url(/font/EBGaramond-InitialsF2.otf) format("opentype");
}
@font-face {
font-family: "Garamond";
font-display: swap;
font-style: italic;
src: url(/font/EBGaramond-Italic.ttf) format("truetype");
}
@font-face {
font-family: "Garamond";
font-display: swap;
font-style: normal;
src: url(/font/EBGaramond.ttf) format("truetype");
}
</style>
src/routes/shirts/+page.svelte
+14
View File
@@ -39,11 +39,25 @@
let shirts = $state(1);
let estimated_price = $derived(shirts * 18);
import SludgeLogo from "$lib/assests/SF26-embroidery.svg";
</script>
<form method="POST">
<fieldset>
<legend>Shirt Styles</legend>
<img
src={SludgeLogo}
height="100%"
width="100%"
alt="Sludge Farm logo with a traced outline of a maple bud"
/>
<p>
Above is the embroidery I will have above the pocket. If you want to get
specific on embroidery color we can work with that but by default the
thread color will be light(white) for dark colored shirts and dark(black)
for light colored shirts
</p>
<p>
All these shirts are 6.1 ounce, 100% cotton (unless you get the heather or
safety colors). It makes them a little heavier; but they actually survive