style: Improve code formatting and readability across multiple components
All checks were successful
SteamWarCI Build successful
All checks were successful
SteamWarCI Build successful
This commit is contained in:
@ -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;
|
||||
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>
|
||||
@ -63,14 +63,14 @@
|
||||
div {
|
||||
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(svg) {
|
||||
@apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl
|
||||
@apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -19,18 +19,18 @@
|
||||
|
||||
<script lang="ts">
|
||||
import "../styles/button.css";
|
||||
import {CaretDownOutline, SearchOutline} from "flowbite-svelte-icons";
|
||||
import {t} from "astro-i18n";
|
||||
import {l} from "../util/util";
|
||||
import {onMount} from "svelte";
|
||||
import {loggedIn} from "@repo/authv2.ts";
|
||||
import { CaretDownOutline, SearchOutline } from "flowbite-svelte-icons";
|
||||
import { t } from "astro-i18n";
|
||||
import { l } from "../util/util";
|
||||
import { onMount } from "svelte";
|
||||
import { loggedIn } from "@repo/authv2.ts";
|
||||
interface Props {
|
||||
logo?: import('svelte').Snippet;
|
||||
logo?: import("svelte").Snippet;
|
||||
}
|
||||
|
||||
let { logo }: Props = $props();
|
||||
|
||||
let navbar = $state<HTMLDivElement>();
|
||||
let navbar = $state<HTMLElement>();
|
||||
let searchOpen = $state(false);
|
||||
|
||||
let accountBtn = $state<HTMLAnchorElement>();
|
||||
@ -41,11 +41,11 @@
|
||||
} else {
|
||||
accountBtn!.href = l("/login");
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
handleScroll();
|
||||
})
|
||||
});
|
||||
|
||||
function handleScroll() {
|
||||
if (window.scrollY > 0) {
|
||||
@ -56,13 +56,17 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onscroll={handleScroll}/>
|
||||
<svelte:window onscroll={handleScroll} />
|
||||
|
||||
<nav data-pagefind-ignore class="fixed top-0 left-0 right-0 sm:px-4 py-1 transition-colors z-10 flex justify-center before:backdrop-blur before:shadow-2xl before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:-z-10 before:scale-y-0 before:transition-transform before:origin-top" bind:this={navbar}>
|
||||
<nav
|
||||
data-pagefind-ignore
|
||||
class="z-20 fixed top-0 left-0 right-0 sm:px-4 py-1 transition-colors flex justify-center before:backdrop-blur before:shadow-2xl before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:-z-10 before:scale-y-0 before:transition-transform before:origin-top"
|
||||
bind:this={navbar}
|
||||
>
|
||||
<div class="flex flex-row items-center justify-evenly md:justify-between match">
|
||||
<a class="flex items-center" href={l("/")}>
|
||||
{@render logo?.()}
|
||||
<span class="text-2xl uppercase font-bold dark:text-white hidden md:inline-block">
|
||||
<span class="text-2xl uppercase font-bold text-white hidden md:inline-block">
|
||||
{t("navbar.title")}
|
||||
<span class="before:scale-y-100" style="display: none" aria-hidden="true"></span>
|
||||
</span>
|
||||
@ -73,7 +77,7 @@
|
||||
<a href={l("/")}>
|
||||
<span class="btn__text">{t("navbar.links.home.title")}</span>
|
||||
</a>
|
||||
<CaretDownOutline class="ml-2 mt-auto"/>
|
||||
<CaretDownOutline class="ml-2 mt-auto" />
|
||||
</button>
|
||||
<div>
|
||||
<a class="btn btn-gray" href={l("/announcements")}>{t("navbar.links.home.announcements")}</a>
|
||||
@ -87,7 +91,7 @@
|
||||
<a rel="prefetch" href={l("/rules")}>
|
||||
<span class="btn__text">{t("navbar.links.rules.title")}</span>
|
||||
</a>
|
||||
<CaretDownOutline class="ml-2 mt-auto"/>
|
||||
<CaretDownOutline class="ml-2 mt-auto" />
|
||||
</button>
|
||||
<div>
|
||||
<a href={l("/rules/wargear")} class="btn btn-gray">{t("navbar.links.rules.wg")}</a>
|
||||
@ -96,10 +100,8 @@
|
||||
<a href={l("/rules/airship")} class="btn btn-gray">{t("navbar.links.rules.as")}</a>
|
||||
<a href={l("/rules/quickgear")} class="btn btn-gray">{t("navbar.links.rules.qg")}</a>
|
||||
<h2 class="px-2 text-gray-300">{t("navbar.links.rules.rotating")}</h2>
|
||||
<a href={l("/rules/megawargear")}
|
||||
class="btn btn-gray">{t("navbar.links.rules.megawg")}</a>
|
||||
<a href={l("/rules/microwargear")}
|
||||
class="btn btn-gray">{t("navbar.links.rules.micro")}</a>
|
||||
<a href={l("/rules/megawargear")} class="btn btn-gray">{t("navbar.links.rules.megawg")}</a>
|
||||
<a href={l("/rules/microwargear")} class="btn btn-gray">{t("navbar.links.rules.micro")}</a>
|
||||
<a href={l("/rules/streetfight")} class="btn btn-gray">{t("navbar.links.rules.sf")}</a>
|
||||
<h2 class="px-2 text-gray-300">{t("navbar.links.rules.ranked")}</h2>
|
||||
<a href={l("/rangliste/missilewars")} class="btn btn-gray">{t("navbar.links.ranked.mw")}</a>
|
||||
|
||||
@ -1,49 +1,59 @@
|
||||
---
|
||||
import type {CollectionEntry} from "astro:content";
|
||||
import {l} from "../util/util";
|
||||
import {astroI18n} from "astro-i18n";
|
||||
import {Image} from "astro:assets";
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
import { l } from "../util/util";
|
||||
import { astroI18n } from "astro-i18n";
|
||||
import { Image } from "astro:assets";
|
||||
import TagComponent from "./TagComponent.astro";
|
||||
import P from "./P.astro";
|
||||
import Card from "@components/Card.svelte";
|
||||
|
||||
interface Props {
|
||||
post: CollectionEntry<"announcements">
|
||||
post: CollectionEntry<"announcements">;
|
||||
}
|
||||
|
||||
const { post, slim }: {
|
||||
post: CollectionEntry<"announcements">,
|
||||
slim: boolean,
|
||||
const {
|
||||
post,
|
||||
slim,
|
||||
}: {
|
||||
post: CollectionEntry<"announcements">;
|
||||
slim: boolean;
|
||||
} = Astro.props as Props;
|
||||
|
||||
const postUrl = l(`/announcements/${post.slug.split("/").slice(1).join("/")}`);
|
||||
---
|
||||
|
||||
<Card extraClasses={`w-full items-start mx-0 ${slim ? "m-0 p-1" : ""}`} hoverEffect={false}>
|
||||
<div class={`flex flex-row ${slim ? "":"p-4"}`}>
|
||||
{post.data.image != null
|
||||
? (
|
||||
<Card extraClasses={`w-full items-start mx-0 ${slim ? "m-0 p-1 backdrop-blur-xl bg-transparent" : ""}`} hoverEffect={false}>
|
||||
<div class={`flex flex-row ${slim ? "" : "p-4"}`}>
|
||||
{
|
||||
post.data.image != null ? (
|
||||
<a href={postUrl}>
|
||||
<div class="flex-shrink-0 pr-2">
|
||||
<Image transition:name={post.data.title + "-image"} src={post.data.image} alt="Post Image" class="rounded-2xl shadow-2xl object-cover h-32 w-32 max-w-none transition-transform hover:scale-105" />
|
||||
<Image
|
||||
transition:name={post.data.title + "-image"}
|
||||
src={post.data.image}
|
||||
alt="Post Image"
|
||||
class="rounded-2xl shadow-2xl object-cover h-32 w-32 max-w-none transition-transform hover:scale-105"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
: null}
|
||||
) : null
|
||||
}
|
||||
<div>
|
||||
<a href={postUrl} class="flex flex-col items-start">
|
||||
<h2 class="text-2xl font-bold" transition:name={post.data.title + "-title"}>{post.data.title}</h2>
|
||||
<P class="text-gray-500">{Intl.DateTimeFormat(astroI18n.locale, {
|
||||
<P class="text-gray-500"
|
||||
>{
|
||||
Intl.DateTimeFormat(astroI18n.locale, {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}).format(post.data.created)}</P>
|
||||
}).format(post.data.created)
|
||||
}</P
|
||||
>
|
||||
<P>{post.data.description}</P>
|
||||
</a>
|
||||
<div class="mt-1" transition:name={post.data.title + "-tags"}>
|
||||
{post.data.tags.map((tag) => (
|
||||
<TagComponent tag={tag} />
|
||||
))}
|
||||
{post.data.tags.map((tag) => <TagComponent tag={tag} />)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,31 +1,33 @@
|
||||
---
|
||||
import {Image} from "astro:assets";
|
||||
import { Image } from "astro:assets";
|
||||
import Basic from "./Basic.astro";
|
||||
import "../styles/button.css";
|
||||
import localLogo from "../images/logo.png";
|
||||
import {YoutubeSolid, DiscordSolid, FileCodeSolid} from "flowbite-svelte-icons";
|
||||
import {t} from "astro-i18n";
|
||||
import {l} from "../util/util";
|
||||
import { YoutubeSolid, DiscordSolid, FileCodeSolid } from "flowbite-svelte-icons";
|
||||
import { t } from "astro-i18n";
|
||||
import { l } from "../util/util";
|
||||
|
||||
import Navbar from "@components/Navbar.svelte";
|
||||
|
||||
import ServerStatus from "../components/ServerStatus.svelte";
|
||||
|
||||
const {title, description} = Astro.props;
|
||||
const { title, description, transparentFooter = true } = Astro.props;
|
||||
---
|
||||
|
||||
<Basic title={title} description={description}>
|
||||
<slot name="head" slot="head"/>
|
||||
<Basic title={title} description={description} autoDarkMode={false}>
|
||||
<slot name="head" slot="head" />
|
||||
<Fragment>
|
||||
<div class="min-h-screen flex flex-col">
|
||||
<Navbar client:idle>
|
||||
<Image src={localLogo} alt={t("navbar.logo.alt")} width="44" height="44" quality="max"
|
||||
class="mr-2 p-1 bg-black rounded-full" slot="logo"/>
|
||||
<Image src={localLogo} alt={t("navbar.logo.alt")} width="44" height="44" quality="max" class="mr-2 p-1 bg-black rounded-full" slot="logo" />
|
||||
</Navbar>
|
||||
<main class="flex-1" data-pagefind-body>
|
||||
<slot/>
|
||||
<slot />
|
||||
</main>
|
||||
<footer class="bg-gray-900 w-full min-h-80 mt-4 pb-2 rounded-t-2xl flex flex-col dark:bg-neutral-900">
|
||||
<footer
|
||||
class={`min-h-80 mt-4 pb-2 rounded-t-2xl flex flex-col ${transparentFooter ? "backdrop-blur-3xl" : "bg-neutral-900"}`}
|
||||
style="width: min(100%, 75em); margin-left: auto; margin-right: auto;"
|
||||
>
|
||||
<div class="flex-1 flex justify-evenly items-center md:items-start mt-4 md:flex-row flex-col gap-y-4">
|
||||
<div class="footer-card">
|
||||
<h1>Serverstatus</h1>
|
||||
@ -45,14 +47,17 @@ const {title, description} = Astro.props;
|
||||
<div class="footer-card">
|
||||
<h1>Social Media</h1>
|
||||
<a class="flex" href="/youtube">
|
||||
<YoutubeSolid class="mr-2"/>
|
||||
YouTube</a>
|
||||
<YoutubeSolid class="mr-2" />
|
||||
YouTube</a
|
||||
>
|
||||
<a class="flex" href="/discord">
|
||||
<DiscordSolid class="mr-2"/>
|
||||
Discord</a>
|
||||
<DiscordSolid class="mr-2" />
|
||||
Discord</a
|
||||
>
|
||||
<a class="flex" href="https://git.steamwar.de">
|
||||
<FileCodeSolid class="mr-2"/>
|
||||
Gitea</a>
|
||||
<FileCodeSolid class="mr-2" />
|
||||
Gitea</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-sm text-white text-center mt-1">© SteamWar.de - Made with ❤️ by Chaoscaot</span>
|
||||
|
||||
@ -2,16 +2,16 @@
|
||||
import NavbarLayout from "./NavbarLayout.astro";
|
||||
import BackgroundImage from "../components/BackgroundImage.astro";
|
||||
|
||||
const {title, description} = Astro.props;
|
||||
const { title, description } = Astro.props;
|
||||
---
|
||||
|
||||
<NavbarLayout title={title} description={description}>
|
||||
<slot name="head" slot="head"/>
|
||||
<slot name="head" slot="head" />
|
||||
<div class="h-screen w-screen fixed -z-10">
|
||||
<BackgroundImage />
|
||||
</div>
|
||||
<div class="mx-auto bg-gray-100 p-8 rounded-b-md shadow-md pt-14 relative
|
||||
dark:text-white dark:bg-neutral-900" style="width: min(100%, 75em);">
|
||||
<slot/>
|
||||
<div class="mx-auto p-8 rounded-b-md border-x-gray-100 shadow-md pt-14 relative
|
||||
text-white backdrop-blur-3xl" style="width: min(100%, 75em);">
|
||||
<slot />
|
||||
</div>
|
||||
</NavbarLayout>
|
||||
@ -1,29 +1,28 @@
|
||||
---
|
||||
import dayjs from "dayjs";
|
||||
import NavbarLayout from "@layouts/NavbarLayout.astro";
|
||||
import {getCollection} from "astro:content";
|
||||
import {astroI18n} from "astro-i18n";
|
||||
import { getCollection } from "astro:content";
|
||||
import { astroI18n } from "astro-i18n";
|
||||
|
||||
import {Image} from "astro:assets";
|
||||
import { Image } from "astro:assets";
|
||||
import Card from "@components/Card.svelte";
|
||||
import {CaretRight, Pause, Rocket, Crosshair1} from "@astropub/icons";
|
||||
import {t} from "astro-i18n";
|
||||
import {l} from "@utils/util";
|
||||
import { CaretRight, Pause, Rocket, Crosshair1 } from "@astropub/icons";
|
||||
import { t } from "astro-i18n";
|
||||
import { l } from "@utils/util";
|
||||
import PlayerCount from "@components/PlayerCount.svelte";
|
||||
import "../../public/fonts/barlow-condensed/barlow-condensed.css";
|
||||
import {type Player} from "../components/types/data";
|
||||
import { type Player } from "../components/types/data";
|
||||
import PostComponent from "../components/PostComponent.astro";
|
||||
import BackgroundImage from "../components/BackgroundImage.astro";
|
||||
|
||||
const teamMember: { [key: string]: Player[]} = await fetch(import.meta.env.PUBLIC_API_SERVER + "/data/team")
|
||||
.then(value => value.json());
|
||||
const teamMember: { [key: string]: Player[] } = await fetch(import.meta.env.PUBLIC_API_SERVER + "/data/team").then((value) => value.json());
|
||||
|
||||
const posts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.locale);
|
||||
const posts = await getCollection("announcements", (entry) => entry.id.split("/")[0] === astroI18n.locale);
|
||||
|
||||
const germanPosts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.fallbackLocale);
|
||||
const germanPosts = await getCollection("announcements", (entry) => entry.id.split("/")[0] === astroI18n.fallbackLocale);
|
||||
|
||||
germanPosts.forEach(value => {
|
||||
if (posts.find(post => post.data.key === value.data.key)) {
|
||||
germanPosts.forEach((value) => {
|
||||
if (posts.find((post) => post.data.key === value.data.key)) {
|
||||
return;
|
||||
} else {
|
||||
posts.push(value);
|
||||
@ -43,27 +42,29 @@ const prefixColorMap: {
|
||||
};
|
||||
---
|
||||
|
||||
<NavbarLayout title={t("home.page")} description="SteamWar.de Homepage">
|
||||
<div class="w-full h-screen relative mb-4">
|
||||
<NavbarLayout title={t("home.page")} description="SteamWar.de Homepage" transparentFooter={false}>
|
||||
<div class="w-full h-screen relative mb-4 z-10">
|
||||
<div style="height: calc(100vh + 1rem)">
|
||||
<BackgroundImage />
|
||||
</div>
|
||||
<drop-in class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
|
||||
<h1 class="text-4xl sm:text-6xl md:text-8xl font-extrabold text-white -translate-y-16 opacity-0 barlow tracking-wider"
|
||||
style="transition: transform .7s ease-out, opacity .7s linear; filter: drop-shadow(2px 2px 5px black);">
|
||||
<span class="bg-gradient-to-tr from-yellow-400 to-yellow-300 bg-clip-text text-transparent">{t("home.title.first")}</span><span
|
||||
class="text-neutral-600">{t("home.title.second")}</span>
|
||||
<h1
|
||||
class="text-4xl sm:text-6xl md:text-8xl font-extrabold text-white -translate-y-16 opacity-0 barlow tracking-wider"
|
||||
style="transition: transform .7s ease-out, opacity .7s linear; filter: drop-shadow(2px 2px 5px black);"
|
||||
>
|
||||
<span class="bg-gradient-to-tr from-yellow-400 to-yellow-300 bg-clip-text text-transparent">{t("home.title.first")}</span><span class="text-neutral-600">{t("home.title.second")}</span>
|
||||
</h1>
|
||||
<text-carousel class="h-20 w-full relative select-none">
|
||||
<h2 class="-translate-y-16">{t("home.subtitle.1")}</h2>
|
||||
<h2>{t("home.subtitle.2")}
|
||||
<h2>
|
||||
{t("home.subtitle.2")}
|
||||
<PlayerCount client:idle />
|
||||
</h2>
|
||||
<h2>{t("home.subtitle.3")}</h2>
|
||||
</text-carousel>
|
||||
<a href={l("join")} class="btn btn-ghost mt-32 px-8 flex"
|
||||
style="animation: normal flyIn forwards 1.2s ease-out">{t("home.join")}
|
||||
<CaretRight width="24" height="24"/>
|
||||
<a href={l("join")} class="btn btn-ghost mt-32 px-8 flex" style="animation: normal flyIn forwards 1.2s ease-out"
|
||||
>{t("home.join")}
|
||||
<CaretRight width="24" height="24" />
|
||||
</a>
|
||||
<style>
|
||||
@keyframes flyIn {
|
||||
@ -141,18 +142,18 @@ const prefixColorMap: {
|
||||
<section class="w-full flex flex-col items-center justify-center shadow-2xl rounded-b-2xl pb-8">
|
||||
<div class="py-10 flex flex-col lg:flex-row">
|
||||
<Card client:idle>
|
||||
<Crosshair1 height="64" width="64"/>
|
||||
<Crosshair1 height="64" width="64" />
|
||||
<h1>{t("home.benefits.fights.title")}</h1>
|
||||
<p class="mt-4">{t("home.benefits.fights.description.1")}</p>
|
||||
<p class="mt-4">{t("home.benefits.fights.description.2")}</p>
|
||||
</Card>
|
||||
<Card client:idle>
|
||||
<Rocket height="64" width="64"/>
|
||||
<Rocket height="64" width="64" />
|
||||
<h1>{t("home.benefits.bau.title")}</h1>
|
||||
<p class="mt-4">{t("home.benefits.bau.description")}</p>
|
||||
</Card>
|
||||
<Card client:idle>
|
||||
<Pause height="64" width="64"/>
|
||||
<Pause height="64" width="64" />
|
||||
<h1>{t("home.benefits.minigames.title")}</h1>
|
||||
<p class="mt-4">{t("home.benefits.minigames.description.1")}</p>
|
||||
<p class="mt-4">{t("home.benefits.minigames.description.2")}</p>
|
||||
@ -160,7 +161,8 @@ const prefixColorMap: {
|
||||
</div>
|
||||
</section>
|
||||
<section class="w-full py-12 flex flex-wrap justify-center">
|
||||
{Object.entries(teamMember).map(([prefix, players]) => (
|
||||
{
|
||||
Object.entries(teamMember).map(([prefix, players]) => (
|
||||
<Fragment>
|
||||
{players.map((v, index) => (
|
||||
<div class="inline-flex flex-col justify-end">
|
||||
@ -168,15 +170,20 @@ const prefixColorMap: {
|
||||
<Card extraClasses={`pt-8 pb-10 px-8 w-fit shadow-md ${prefixColorMap[prefix]}`} client:idle>
|
||||
<figure class="flex flex-col items-center" style="width: 150px">
|
||||
<figcaption class="text-center mb-4 text-2xl">{v.name}</figcaption>
|
||||
<Image src={`${import.meta.env.PUBLIC_API_SERVER}/data/skin/${v.uuid}`}
|
||||
<Image
|
||||
src={`${import.meta.env.PUBLIC_API_SERVER}/data/skin/${v.uuid}`}
|
||||
class="transition duration-300 ease-in-out hover:scale-110 hover:backdrop-blur-lg hover:drop-shadow-2xl"
|
||||
alt={v.name + "s bust"} width="150" height="150"/>
|
||||
alt={v.name + "s bust"}
|
||||
width="150"
|
||||
height="150"
|
||||
/>
|
||||
</figure>
|
||||
</Card>
|
||||
</div>
|
||||
))}
|
||||
</Fragment>
|
||||
))}
|
||||
))
|
||||
}
|
||||
</section>
|
||||
</NavbarLayout>
|
||||
|
||||
@ -184,13 +191,17 @@ const prefixColorMap: {
|
||||
text-carousel {
|
||||
> * {
|
||||
@apply absolute top-0 left-0 w-full text-xl sm:text-4xl italic text-white text-center opacity-0;
|
||||
transition: transform .5s ease-out, opacity .5s linear;
|
||||
transition:
|
||||
transform 0.5s ease-out,
|
||||
opacity 0.5s linear;
|
||||
text-shadow: 2px 2px 5px black;
|
||||
}
|
||||
}
|
||||
|
||||
.barlow {
|
||||
font-family: Barlow Condensed, sans-serif;
|
||||
font-family:
|
||||
Barlow Condensed,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.card {
|
||||
@ -207,7 +218,7 @@ const prefixColorMap: {
|
||||
}
|
||||
|
||||
> svg {
|
||||
@apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl
|
||||
@apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -31,7 +31,7 @@ table {
|
||||
text-align: center;
|
||||
|
||||
tr:nth-child(odd) {
|
||||
@apply bg-neutral-200 dark:bg-neutral-800;
|
||||
@apply backdrop-brightness-125;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user