gazesys/website
gazesys/website
1
0
Fork 1
Code Actions Releases1 Activity

refactor: smol changes

Browse Source
This commit is contained in:
dusk 2025-04-02 05:24:31 +03:00
parent 0e46dc943e
commit 22507a6ec3
Signed by: dusk
SSH Key Fingerprint: SHA256:Abmvag+juovVufZTxyWY8KcVgrznxvBjQpJesv071Aw
2 changed files with 52 additions and 43 deletions

31
src/components/_window_layout.svelte

@ -1,24 +1,19 @@
<script lang="ts"> <script lang="ts">
import Window from './window.svelte' import Window from './window.svelte';
import '../styles/app.css' import '../styles/app.css';
interface Props { interface Props {
title: any; title: string;
sticky: any; sticky: boolean;
prose?: boolean; prose?: boolean;
children?: import('svelte').Snippet; children?: import('svelte').Snippet;
} }
let { let { title, sticky, prose = true, children }: Props = $props();
title,
sticky,
prose = true,
children
}: Props = $props();
</script> </script>
<Window {title} {sticky}> <Window {title} {sticky}>
<div class="{prose ? "prose prose-ralsei leading-6 prose-ul:leading-5" : ""}"> <div class={prose ? 'prose prose-ralsei leading-6 prose-ul:leading-5' : ''}>
{@render children?.()} {@render children?.()}
</div> </div>
</Window> </Window>

64
src/components/window.svelte

@ -3,7 +3,7 @@
import { draggable } from '@neodrag/svelte'; import { draggable } from '@neodrag/svelte';
interface Props { interface Props {
title?: string | undefined; title?: string;
iconUri?: string; iconUri?: string;
id?: string; id?: string;
sticky?: boolean; sticky?: boolean;
@ -25,31 +25,33 @@
removePadding = false, removePadding = false,
center = false, center = false,
layered = false, layered = false,
style = "", style = '',
tooltip = false, tooltip = false,
children children
}: Props = $props(); }: Props = $props();
const scaleKeyframes = [ const scaleKeyframes = [
"window-open", 'window-open',
"window-open-vertical", 'window-open-vertical',
"window-open-vertical", 'window-open-vertical',
"window-open-horizontal", 'window-open-horizontal',
"window-open-horizontal", 'window-open-horizontal',
"window-open-move-up", 'window-open-move-up',
"window-open-move-down", 'window-open-move-down',
"window-open-move-left", 'window-open-move-left',
"window-open-move-right", 'window-open-move-right'
]; ];
let chosenKeyframe = $derived(scaleKeyframes.at(Math.floor(Math.random() * scaleKeyframes.length))) let chosenKeyframe = $derived(
scaleKeyframes.at(Math.floor(Math.random() * scaleKeyframes.length))
);
const isOnMobile = isMobile() const isOnMobile = isMobile();
const _draggable = isOnMobile ? () => {} : draggable; const _draggable = isOnMobile ? () => {} : draggable;
const focusWindow = (node: HTMLElement) => { const focusWindow = (node: HTMLElement) => {
$highestZIndex += 1 $highestZIndex += 1;
node.style.zIndex = $highestZIndex.toString() node.style.zIndex = $highestZIndex.toString();
} };
</script> </script>
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
@ -59,13 +61,23 @@
disabled: isOnMobile, disabled: isOnMobile,
applyUserSelectHack: true, applyUserSelectHack: true,
handle: '.window-titlebar', handle: '.window-titlebar',
onDragStart: (data) => {focusWindow(data.currentNode)}, onDragStart: (data) => {
focusWindow(data.currentNode);
}
}}
onclick={(data) => {
focusWindow(data.currentTarget);
}} }}
onclick={(data) => {focusWindow(data.currentTarget)}}
class=" class="
relative {layered ? "col-[1] row-[1]" : ""} flex flex-col {sticky ? 'md:sticky md:-top-9' : ''} {center ? "mx-auto" : ""} relative {layered ? 'col-[1] row-[1]' : ''} flex flex-col {sticky
max-w-screen-md xl:max-w-screen-lg 2xl:max-w-screen-xl {tooltip ? "min-w-fit" : "min-w-[30ch] lg:min-w-[40ch]"} w-full md:w-fit [height:fit-content] ? 'md:sticky md:-top-9'
bg-ralsei-black border-ralsei-white border-ridge {tooltip ? "border-[6px] border-t-[9px]" : "border-8 border-t-[12px]"} : ''} {center ? 'mx-auto' : ''}
max-w-screen-md xl:max-w-screen-lg 2xl:max-w-screen-xl {tooltip
? 'min-w-fit'
: 'min-w-[30ch] lg:min-w-[40ch]'} w-full md:w-fit [height:fit-content]
bg-ralsei-black border-ralsei-white border-ridge {tooltip
? 'border-[6px] border-t-[9px]'
: 'border-8 border-t-[12px]'}
animate-{chosenKeyframe} drop-shadow-[24px_24px_24px_rgba(1,1,1,0.8)] animate-{chosenKeyframe} drop-shadow-[24px_24px_24px_rgba(1,1,1,0.8)]
{style} {style}
" "
@ -76,7 +88,7 @@
class=" class="
window-titlebar p-1 border-ralsei-white border-8 window-titlebar p-1 border-ralsei-white border-8
bg-gradient-to-l from-ralsei-pink-neon to-ralsei-black to-75% bg-gradient-to-l from-ralsei-pink-neon to-ralsei-black to-75%
{!isOnMobile ? "cursor-move" : ""} {!isOnMobile ? 'cursor-move' : ''}
" "
style="border-style: hidden hidden ridge hidden;" style="border-style: hidden hidden ridge hidden;"
> >
@ -100,10 +112,12 @@
</div> </div>
</div> </div>
{/if} {/if}
<div class=" <div
{removePadding ? "" : tooltip ? "p-1" : "p-2"} bg-gradient-to-tl class="
{removePadding ? '' : tooltip ? 'p-1' : 'p-2'} bg-gradient-to-tl
to-ralsei-pink-neon/15 from-ralsei-pink-regular/20 to-ralsei-pink-neon/15 from-ralsei-pink-regular/20
"> "
>
{@render children?.()} {@render children?.()}
</div> </div>
</div> </div>