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;
|
||||
|
||||
Reference in New Issue
Block a user