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

prettier WIP

Browse source
This commit is contained in:
Benjamin Palko 2025-04-27 17:51:33 -04:00
parent ceb0c42812
commit 3ee1f94206
1 changed files with 63 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,58 +1,57 @@
<div class="hazard-border flex w-full flex-col justify-around text-xl font-semibold italic"> <script lang="ts">
<div class="scroll-parent hazard w-full -skew-2 overflow-hidden px-8"> import { TriangleAlertIcon } from 'lucide-svelte';
<div class="scroll-element primary flex justify-around">
<p>Under Construction</p> const messages = ['Under Construction', 'Caution', 'Work In Progress'];
<p>Caution</p> </script>
<p>Work In Progress</p>
<p>Under Construction</p> {#snippet Banner(messages: string[], backwards: boolean)}
<p>Caution</p> <div
</div> class="bg-hazard flex h-fit w-full flex-col bg-black py-8 text-xl font-semibold text-black italic"
<div class="scroll-element secondary flex justify-around"> class:skew-2={!backwards}
<p>Under Construction</p> class:-skew-2={backwards}
<p>Caution</p> >
<p>Work In Progress</p> <div class="scroll-parent w-full overflow-x-hidden bg-amber-400 px-8">
<p>Under Construction</p> <div
<p>Caution</p> class="scroll-element flex justify-around"
class:primary={!backwards}
class:-primary={backwards}
>
{#each messages.sort(() => {
const val = Math.random();
if (val > 0.66) return 1;
else if (val > 0.33) return 0;
else return -1;
}) as message (message)}
<TriangleAlertIcon />
<p>{message}</p>
{/each}
</div>
<div
class="scroll-element flex justify-around"
class:secondary={!backwards}
class:-secondary={backwards}
>
{#each messages as message (message)}
<TriangleAlertIcon />
<p>{message}</p>
{/each}
</div>
</div> </div>
</div> </div>
<div class="scroll-parent hazard w-full skew-2 overflow-hidden px-8"> {/snippet}
<div class="scroll-element -primary flex justify-around">
<p>Caution</p> <div class="bg-hazard rounded-box w-full p-6">
<p>Work In Progress</p> <div class="bg-base-200 rounded-box flex h-full flex-col justify-around">
<p>Under Construction</p> {@render Banner(messages, false)}
<p>Caution</p> {@render Banner(messages, true)}
<p>Work In Progress</p> {@render Banner(messages, false)}
</div>
<div class="scroll-element -secondary flex justify-around">
<p>Caution</p>
<p>Work In Progress</p>
<p>Under Construction</p>
<p>Caution</p>
<p>Work In Progress</p>
</div>
</div>
<div class="scroll-parent hazard w-full -skew-2 overflow-hidden px-8">
<div class="scroll-element primary flex justify-around">
<p>Work In Progress</p>
<p>Under Construction</p>
<p>Caution</p>
<p>Work In Progress</p>
<p>Under Construction</p>
</div>
<div class="scroll-element secondary flex justify-around">
<p>Work In Progress</p>
<p>Under Construction</p>
<p>Caution</p>
<p>Work In Progress</p>
<p>Under Construction</p>
</div>
</div> </div>
</div> </div>
<style> <style>
.scroll-parent { .scroll-parent {
position: relative; position: relative;
height: 4.2rem; height: 2rem;
} }
.scroll-element { .scroll-element {
@ -117,10 +116,26 @@
.hazard-border { .hazard-border {
border: solid 20px; border: solid 20px;
border-image: repeating-linear-gradient(-75deg, #ffb101, #ffb101 10px, black 10px, black 20px) border-image: repeating-linear-gradient(
-75deg,
var(--color-amber-400),
var(--color-amber-400) 10px,
black 10px,
black 20px
)
20; 20;
} }
.bg-hazard {
background-image: repeating-linear-gradient(
-55deg,
var(--color-amber-400),
var(--color-amber-400) 10px,
black 10px,
black 20px
);
}
.hazard { .hazard {
color: black; color: black;
background: #ffb101; background: #ffb101;