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

64
src/components/window.svelte

@ -3,7 +3,7 @@
import { draggable } from '@neodrag/svelte';
interface Props {
title?: string | undefined;
title?: string;
iconUri?: string;
id?: string;
sticky?: boolean;
@ -25,31 +25,33 @@
removePadding = false,
center = false,
layered = false,
style = "",
style = '',
tooltip = false,
children
}: Props = $props();
const scaleKeyframes = [
"window-open",
"window-open-vertical",
"window-open-vertical",
"window-open-horizontal",
"window-open-horizontal",
"window-open-move-up",
"window-open-move-down",
"window-open-move-left",
"window-open-move-right",
'window-open',
'window-open-vertical',
'window-open-vertical',
'window-open-horizontal',
'window-open-horizontal',
'window-open-move-up',
'window-open-move-down',
'window-open-move-left',
'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 focusWindow = (node: HTMLElement) => {
$highestZIndex += 1
node.style.zIndex = $highestZIndex.toString()
}
$highestZIndex += 1;
node.style.zIndex = $highestZIndex.toString();
};
</script>
<!-- svelte-ignore a11y_no_static_element_interactions -->
@ -59,13 +61,23 @@
disabled: isOnMobile,
applyUserSelectHack: true,
handle: '.window-titlebar',
onDragStart: (data) => {focusWindow(data.currentNode)},
onDragStart: (data) => {
focusWindow(data.currentNode);
}
}}
onclick={(data) => {
focusWindow(data.currentTarget);
}}
onclick={(data) => {focusWindow(data.currentTarget)}}
class="
relative {layered ? "col-[1] row-[1]" : ""} flex flex-col {sticky ? 'md:sticky md:-top-9' : ''} {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]"}
relative {layered ? 'col-[1] row-[1]' : ''} flex flex-col {sticky
? 'md:sticky md:-top-9'
: ''} {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)]
{style}
"
@ -76,7 +88,7 @@
class="
window-titlebar p-1 border-ralsei-white border-8
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;"
>
@ -100,10 +112,12 @@
</div>
</div>
{/if}
<div class="
{removePadding ? "" : tooltip ? "p-1" : "p-2"} bg-gradient-to-tl
<div
class="
{removePadding ? '' : tooltip ? 'p-1' : 'p-2'} bg-gradient-to-tl
to-ralsei-pink-neon/15 from-ralsei-pink-regular/20
">
"
>
{@render children?.()}
</div>
</div>