SteamWar/Website
8
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

style: Improve code formatting and readability across multiple components
All checks were successful
SteamWarCI Build successful
Details

Browse Source
This commit is contained in:
Chaoscaot
2025-05-07 14:33:48 +02:00
parent b3598e1ee1
commit 6377799e1b
7 changed files with 169 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/Card.svelte
View File

@ -18,13 +18,13 @@
-->
<script lang="ts">
import {twMerge} from "tailwind-merge";
import {onMount} from "svelte";
import { twMerge } from "tailwind-merge";
import { onMount } from "svelte";
let cardElement: HTMLDivElement = $state();
function rotateElement(event: MouseEvent) {
if(!hoverEffect) return;
if (!hoverEffect) return;
const x = event.clientX;
const y = event.clientY;
@ -36,23 +36,23 @@
const rotateX = (centerY - y) / 20;
const rotateY = -(centerX - x) / 20;
cardElement.style.setProperty('--rotate-x', `${rotateX}deg`);
cardElement.style.setProperty('--rotate-y', `${rotateY}deg`);
cardElement.style.setProperty("--rotate-x", `${rotateX}deg`);
cardElement.style.setProperty("--rotate-y", `${rotateY}deg`);
}
function resetElement() {
cardElement.style.setProperty('--rotate-x', "0");
cardElement.style.setProperty('--rotate-y', "0");
cardElement.style.setProperty("--rotate-x", "0");
cardElement.style.setProperty("--rotate-y", "0");
}
interface Props {
hoverEffect?: boolean;
extraClasses?: string;
children?: import('svelte').Snippet;
}
interface Props {
hoverEffect?: boolean;
extraClasses?: string;
children?: import("svelte").Snippet;
}
let { hoverEffect = true, extraClasses = '', children }: Props = $props();
let classes = $derived(twMerge("w-72 border-2 bg-zinc-50 border-gray-100 flex flex-col items-center p-8 m-4 rounded-xl shadow-lg dark:bg-zinc-900 dark:border-gray-800 dark:text-gray-100", extraClasses))
let { hoverEffect = true, extraClasses = "", children }: Props = $props();
let classes = $derived(twMerge("w-72 border-2 border-gray-100 flex flex-col items-center p-8 m-4 rounded-xl shadow-lg bg-zinc-900 dark:border-gray-800 dark:text-gray-100", extraClasses));
</script>
<div class={classes} bind:this={cardElement} onmousemove={rotateElement} onmouseleave={resetElement} class:hoverEffect>
@ -61,20 +61,20 @@
<style lang="scss">
div {
transform: perspective(1000px) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0)) !important;
transform: perspective(1000px) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0)) !important;
transition: scale 300ms cubic-bezier(.2, 3, .67, .6);
transition: scale 300ms cubic-bezier(0.2, 3, 0.67, 0.6);
:global(h1) {
@apply text-xl font-bold mt-4;
}
:global(h1) {
@apply text-xl font-bold mt-4;
}
:global(svg) {
@apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl
}
:global(svg) {
@apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl;
}
}
.hoverEffect:hover {
scale: 105%;
scale: 105%;
}
</style>
</style>