moving around how the fonts work and css stuff

This commit is contained in:
2026-06-13 01:12:39 -05:00
parent 331537415f
commit e7bf1336da
17 changed files with 390 additions and 558 deletions
+269
View File
@@ -0,0 +1,269 @@
@font-face {
font-family: 'Charter';
src: url('/fonts/Charter.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Noto Serif';
src: url('/fonts/NotoSerif-Black.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Baskerville";
font-display: swap;
font-style: italic;
font-weight: 500;
src: url("/fonts/LibreBaskerville-Italic.otf") format("opentype");
}
@font-face {
font-family: "Baskerville";
font-display: swap;
font-style: normal;
font-weight: 900;
src: url("/fonts/LibreBaskerville-Bold.otf") format("opentype");
}
@font-face {
font-family: "Baskerville";
font-display: swap;
font-style: normal;
font-weight: 500;
src: url("/fonts/LibreBaskerville-Regular.otf") format("opentype");
}
@font-face {
font-family: "Initials";
font-display: swap;
font-style: normal;
font-weight: 500;
src: url("/fonts/EBGaramond-Initials.otf") format("opentype");
}
@font-face {
font-family: "Initials";
font-display: swap;
font-style: normal;
font-weight: 100;
src: url("/fonts/EBGaramond-InitialsF1.otf") format("opentype");
}
@font-face {
font-family: "Initials";
font-display: swap;
font-style: normal;
font-weight: 200;
src: url("/fonts/EBGaramond-InitialsF2.otf") format("opentype");
}
@font-face {
font-family: "Garamond";
font-display: swap;
font-style: italic;
src: url("/fonts/EBGaramond-Italic.ttf") format("truetype");
}
@font-face {
font-family: "Garamond";
font-display: swap;
font-style: normal;
src: url("/fonts/EBGaramond.ttf") format("truetype");
}
:root {
font-family: "Garamond", serif;
--br: 0.375rem;
--bs: 2px 2px 9px var(--primary-8);
--primary: 225deg;
--gradient-degree: var(--primary, 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)
);
}
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%;
color: var(--primary-1);
font-size-adjust: 0.75;
vertical-align: baseline;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
body {
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;
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

+95
View File
@@ -0,0 +1,95 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="4in"
height="1in"
viewBox="0 0 101.6002 25.40005"
version="1.1"
id="svg1"
xml:space="preserve"
inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
sodipodi:docname="SF26-embroidery.svg"
inkscape:export-filename="SF26-embroidery.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.24705882"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="in"
inkscape:zoom="2.0453984"
inkscape:cx="271.58523"
inkscape:cy="20.044995"
inkscape:window-width="2280"
inkscape:window-height="1360"
inkscape:window-x="26"
inkscape:window-y="23"
inkscape:window-maximized="0"
inkscape:current-layer="layer1" /><defs
id="defs1"><rect
x="166.81557"
y="437.54904"
width="233.52373"
height="218.40071"
id="rect1" /></defs><g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"><g
inkscape:label="Layer 1"
id="layer1-4"
transform="matrix(0.09171297,1.6006962e-4,-1.6006962e-4,0.09171297,50.533542,0.39664716)"
style="stroke-width:11.2876;stroke-dasharray:none"><path
style="display:inline;fill:none;stroke:#000000;stroke-width:11.2876;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 67.708856,241.99975 c -24.781803,-23.9035 -54.07957,-97.83849 -55.686807,-113.0705 -18.6991621,10.48953 2.11406,92.55202 20.124305,129.96719 l 100.147616,-0.41295 c 34.19996,-61.10911 21.20237,-94.51691 14.75986,-127.03281 -56.306535,32.71724 -34.97525,77.3054 -94.925743,126.28552"
id="path1"
sodipodi:nodetypes="cccccc"
inkscape:label="base" /><path
style="display:inline;fill:none;stroke:#000000;stroke-width:11.2876;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="M 23.175841,161.67706 C 26.411075,101.86782 48.599531,84.187573 68.991489,73.181806 114.20802,87.265465 116.76073,126.68515 127.36434,146.09424"
id="path2"
sodipodi:nodetypes="ccc"
inkscape:label="middle" /><path
style="display:inline;fill:none;stroke:#000000;stroke-width:11.2876;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="M 15.863958,142.02296 C 23.715404,88.14624 34.770433,13.417556 60.176642,7.2796304 69.013186,25.012525 66.803066,46.478644 68.095073,72.125361 67.714309,47.478972 65.416728,18.381159 72.435575,6.2426585 99.840579,1.7640546 117.87907,93.294068 138.89664,135.47029"
id="path3"
sodipodi:nodetypes="ccccc"
inkscape:label="top" /><text
xml:space="preserve"
transform="matrix(0.46056331,0,0,0.46056331,-44.629128,-96.745906)"
id="text1"
style="writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect1);shape-padding:0;display:none;fill:#50167d;fill-opacity:1;stroke:#000000;stroke-width:24.5082;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;paint-order:stroke fill markers"
inkscape:label="year"><tspan
x="166.81641"
y="583.12886"
id="tspan6"><tspan
style="font-size:160px;font-family:'Noto Serif';-inkscape-font-specification:'Noto Serif, Normal'"
id="tspan5">26</tspan></tspan></text></g><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16.2593px;font-family:Charter;-inkscape-font-specification:'Charter, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;writing-mode:lr-tb;direction:ltr;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.0960606;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
x="0.36601716"
y="20.596315"
id="text2"><tspan
sodipodi:role="line"
id="tspan1"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16.2593px;font-family:Charter;-inkscape-font-specification:'Charter, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.0960614"
x="0.36601716"
y="20.596315">Sludge</tspan></text><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15.9204px;font-family:Charter;-inkscape-font-specification:'Charter, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;writing-mode:lr-tb;direction:ltr;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.105537;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
x="66.054001"
y="20.401834"
id="text3"><tspan
sodipodi:role="line"
id="tspan2"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15.9204px;font-family:Charter;-inkscape-font-specification:'Charter, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.105537"
x="66.054001"
y="20.401834">Farm</tspan></text></g></svg>

After

Width:  |  Height:  |  Size: 5.9 KiB

+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>
+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