add standard rosepines

This commit is contained in:
Simone Tesini 2025-08-02 06:44:11 +02:00
parent 7170c7b663
commit b8b4ae2480
3 changed files with 60 additions and 21 deletions

View file

@ -13,3 +13,39 @@
.spin-slower { .spin-slower {
animation: spin-slower 15s linear infinite; animation: spin-slower 15s linear infinite;
} }
@theme {
--color-dark-pine-base: hsl(249deg, 22%, 12%);
--color-dark-pine-surface: hsl(247deg, 23%, 15%);
--color-dark-pine-overlay: hsl(248deg, 25%, 18%);
--color-dark-pine-muted: hsl(249deg, 12%, 47%);
--color-dark-pine-subtle: hsl(248deg, 15%, 61%);
--color-dark-pine-text: hsl(245deg, 50%, 91%);
--color-dark-pine-red: hsl(343deg, 76%, 68%);
--color-dark-pine-yellow: hsl(35deg, 88%, 72%);
--color-dark-pine-pink: hsl(2deg, 55%, 83%);
--color-dark-pine-blue: hsl(197deg, 49%, 38%);
--color-dark-pine-green: hsl(189deg, 43%, 73%);
--color-dark-pine-purple: hsl(267deg, 57%, 78%);
--color-dark-pine-highlight-low: hsl(244deg, 18%, 15%);
--color-dark-pine-highlight-med: hsl(249deg, 15%, 28%);
--color-dark-pine-highlight-high: hsl(248deg, 13%, 36%);
}
@theme {
--color-light-pine-base: hsl(32deg, 57%, 95%);
--color-light-pine-surface: hsl(35deg, 100%, 98%);
--color-light-pine-overlay: hsl(33deg, 43%, 91%);
--color-light-pine-muted: hsl(257deg, 9%, 61%);
--color-light-pine-subtle: hsl(248deg, 12%, 52%);
--color-light-pine-text: hsl(248deg, 19%, 40%);
--color-light-pine-red: hsl(343deg, 35%, 55%);
--color-light-pine-yellow: hsl(35deg, 81%, 56%);
--color-light-pine-pink: hsl(3deg, 53%, 67%);
--color-light-pine-blue: hsl(197deg, 53%, 34%);
--color-light-pine-green: hsl(189deg, 30%, 48%);
--color-light-pine-purple: hsl(268deg, 21%, 57%);
--color-light-pine-highlight-low: hsl(25deg, 35%, 93%);
--color-light-pine-highlight-med: hsl(10deg, 9%, 86%);
--color-light-pine-highlight-high: hsl(315deg, 4%, 80%);
}

View file

@ -4,4 +4,7 @@
let { children } = $props() let { children } = $props()
</script> </script>
{@render children()} <div class="min-h-screen w-full bg-light-pine-base px-6 text-light-pine-text sm:px-20 md:px-40 lg:px-80 dark:bg-dark-pine-base dark:text-dark-pine-text">
iweojoijf
{@render children()}
</div>

View file

@ -5,23 +5,23 @@
let room: Room = { id: "asd", coords: [0.123, 0.456], name: "scatolame party", private: true, range: 124 } let room: Room = { id: "asd", coords: [0.123, 0.456], name: "scatolame party", private: true, range: 124 }
</script> </script>
<div class="h-full w-full flex-row justify-center p-4"> <!-- <div class="h-full w-full flex-row justify-center p-4"> -->
<div class="relative min-h-screen justify-center justify-items-center"> <!-- <div class="relative min-h-screen justify-center justify-items-center"> -->
<h1>Scan your nearby rooms</h1> <!-- <h1>Scan your nearby rooms</h1> -->
<img src="/smerdoradar.gif" alt="radar" class="h-64 w-64" /> <!-- <img src="/smerdoradar.gif" alt="radar" class="h-64 w-64" /> -->
<div class="max-h-50 w-full overflow-y-auto"> <!-- <div class="max-h-50 w-full overflow-y-auto"> -->
<RoomComponent {room} /> <!-- <RoomComponent {room} /> -->
<RoomComponent {room} /> <!-- <RoomComponent {room} /> -->
<RoomComponent {room} /> <!-- <RoomComponent {room} /> -->
<RoomComponent {room} /> <!-- <RoomComponent {room} /> -->
<RoomComponent {room} /> <!-- <RoomComponent {room} /> -->
<RoomComponent {room} /> <!-- <RoomComponent {room} /> -->
<RoomComponent {room} /> <!-- <RoomComponent {room} /> -->
<RoomComponent {room} /> <!-- <RoomComponent {room} /> -->
<RoomComponent {room} /> <!-- <RoomComponent {room} /> -->
</div> <!-- </div> -->
<div class="fixed right-0 bottom-0"> <!-- <div class="fixed right-0 bottom-0"> -->
<button class="mt-4 justify-end rounded bg-blue-500 px-6 py-2 text-white transition-colors hover:bg-blue-600 active:bg-blue-700"> + </button> <!-- <button class="mt-4 justify-end rounded bg-blue-500 px-6 py-2 text-white transition-colors hover:bg-blue-600 active:bg-blue-700"> + </button> -->
</div> <!-- </div> -->
</div> <!-- </div> -->
</div> <!-- </div> -->