baobeld/benjaminpalko
1
0
Fork 0
Code Pull requests Packages 2 Activity Actions

MORE

Browse source
This commit is contained in:
Benjamin Palko 2025-04-27 18:05:09 -04:00
parent 3ee1f94206
commit bc12491697
1 changed files with 9 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/lib/components/WIP.svelte
View file

@ -6,9 +6,9 @@
{#snippet Banner(messages: string[], backwards: boolean)} {#snippet Banner(messages: string[], backwards: boolean)}
<div <div
class="bg-hazard flex h-fit w-full flex-col bg-black py-8 text-xl font-semibold text-black italic" class="bg-hazard flex h-fit w-[110%] flex-col bg-black py-6 text-xl font-semibold text-black"
class:skew-2={!backwards} class:rotate-5={!backwards}
class:-skew-2={backwards} class:-rotate-5={backwards}
> >
<div class="scroll-parent w-full overflow-x-hidden bg-amber-400 px-8"> <div class="scroll-parent w-full overflow-x-hidden bg-amber-400 px-8">
<div <div
@ -40,18 +40,21 @@
</div> </div>
{/snippet} {/snippet}
<div class="bg-hazard rounded-box w-full p-6"> <div class="bg-hazard rounded-box w-full border border-amber-400 p-6">
<div class="bg-base-200 rounded-box flex h-full flex-col justify-around"> <div
class="bg-base-200 rounded-box flex h-full flex-col items-center justify-center gap-24 overflow-hidden border border-amber-400"
>
{@render Banner(messages, false)} {@render Banner(messages, false)}
{@render Banner(messages, true)} {@render Banner(messages, true)}
{@render Banner(messages, false)} {@render Banner(messages, false)}
{@render Banner(messages, true)}
</div> </div>
</div> </div>
<style> <style>
.scroll-parent { .scroll-parent {
position: relative; position: relative;
height: 2rem; height: 1.8rem;
} }
.scroll-element { .scroll-element {
@ -114,18 +117,6 @@
} }
} }
.hazard-border {
border: solid 20px;
border-image: repeating-linear-gradient(
-75deg,
var(--color-amber-400),
var(--color-amber-400) 10px,
black 10px,
black 20px
)
20;
}
.bg-hazard { .bg-hazard {
background-image: repeating-linear-gradient( background-image: repeating-linear-gradient(
-55deg, -55deg,
@ -135,13 +126,4 @@
black 20px black 20px
); );
} }
.hazard {
color: black;
background: #ffb101;
border-top: solid 20px;
border-bottom: solid 20px;
border-image: repeating-linear-gradient(-75deg, #ffb101, #ffb101 10px, black 10px, black 20px)
20;
}
</style> </style>