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

update main page and layout with transparency and shirts

Browse Source
This commit is contained in:
Will Stensvold
2026-06-04 00:27:23 -05:00
parent ad8ef867eb
commit 84171c9ff4
2 changed files with 49 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+layout.svelte
+8 -7
View File
@@ -29,8 +29,9 @@
<div id="buddy">
<nav>
<a href="/">Sludge</a>
<button onclick={change_theme}>&#127752;</button>
<a href="/fest">Fest</a>
<button onclick={change_theme}>&#127922&#127752;</button>
<!-- <a href="/fest">Fest</a> -->
<a href="/shirts">Shirts</a>
<a href="/pork">Pork</a>
</nav>
@@ -41,7 +42,6 @@
<style lang="scss">
:root {
--green-42: oklch(0.42 0.042 142);
--br: 0.375rem;
--bs: 2px 2px 9px var(--primary-8);
@@ -230,7 +230,7 @@
border: 0;
font-size: 100%;
// font: inherit;
color: var(--primary-2);
color: var(--primary-1);
font-family: "Garamond", serif;
font-size-adjust: 0.75;
vertical-align: baseline;
@@ -247,7 +247,7 @@
text-shadow: 3px 3px 3px var(--secondary-7);
a {
font-weight: 700;
color: var(--secondary-4);
color: var(--secondary-1);
line-height: 2rem;
font-size: 1.5rem;
line-height: 1.5rem;
@@ -256,11 +256,11 @@
margin-right: auto;
}
&:hover {
color: var(--secondary-2);
color: var(--secondary-3);
}
}
button {
background: var(--secondary-4);
background: transparent(var(--secondary-5));
border-radius: var(--br);
border: none;
width: fit-content;
@@ -282,6 +282,7 @@
display: flex;
flex-direction: row;
padding: 1rem;
justify-content: center;
}
@media screen and (min-width: 640px) {
src/routes/+page.svelte
+37 -25
View File
@@ -1,40 +1,53 @@
<script lang="ts">
// let { data, form } = $props<{ html: string }>();
const cards = [
{
href: "/shirts",
name: "Shirts",
blurb:
"Enough people told me they wanted these that I decided to make an order form",
},
{
href: "/fest",
name: "Sludge Fest",
blurb:
"Sludge Fest is a homegrown music festival of friends, fanfare and fuckery; come, join us for a fun weekend out. Make some mates and memories",
},
{
href: "/pork",
name: "Pork",
blurb:
"I made the mistake of getting hogs that are better at their job than I am so please take some of it off my hands",
},
{
href: "https://plotters.sludge.link",
name: "Plotters",
blurb:
"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",
},
];
</script>
<section>
<h1><b title="Sludge">S</b>&amp;<b title="Friends">F</b></h1>
<h3>Here we make friends and mistakes</h3>
<div>
{#each cards as { href, name, blurb }}
<div>
<a href="/fest"><h2>Sludge Fest</h2></a>
<a {href}><h2>{name}</h2></a>
<p>
Sludge Fest is a homegrown music festival of friends and fuckery; come
join us for a fun weekend out and make some memories
</p>
</div>
<div>
<a href="/pork"><h2>Pork</h2></a>
<p>
I made the mistake of getting hogs that are better at their job than I
am so please take some of it off my hands
</p>
</div>
<div>
<a href="https://plotters.sludge.link"><h2>Plotters</h2></a>
<p>
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
{blurb}
</p>
</div>
{/each}
</div>
</section>
<style lang="scss">
section {
max-width: 60rem;
margin: 1rem auto;
display: flex;
gap: 1rem;
flex-direction: column;
align-items: center;
div {
@@ -45,28 +58,27 @@
color: var(--secondary-3);
}
div {
background: var(--secondary-8);
padding: 2rem 1.5rem;
background: transparent(var(--secondary-9));
gap: 0.5rem;
padding: 0.25rem 1.5rem 2rem 1.5rem;
border-radius: var(--br);
max-width: 40rem;
}
}
h1 {
line-height: 5rem;
font-size: 1.5rem;
text-align: center;
text-justify: center;
color: var(--secondary-4);
color: var(--secondary-3);
b {
font-family: Initials;
color: var(--secondary-3);
color: inherit;
font-weight: 500;
font-size: 3.5rem;
padding: 0.5rem;
}
}
h3 {
color: var(--secondary-4);
color: transparent(var(--secondary-2), 65%);
font-size: 0.75rem;
}
h2 {