DeprivedDevs/deprived-main-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

let me cook bois
Some checks failed
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Failing after 0s
Details

Browse source
This commit is contained in:
BOTAlex 2025-08-14 06:34:51 +02:00
parent a4e20f5ff3
commit ff62e53745
2 changed files with 55 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/pages/shop/_shop_main.svelte
View file

@ -17,7 +17,7 @@
</div>
<div class="flex w-full justify-center">
<div class="grid grid-cols-2 gap-4">
<div class="grid grid-cols-2 gap-8">
{#if allItems != undefined}
{#each allItems as item, i}
<ShopItemCard bind:shopItem={item} />

66
src/pages/shop/comps/ShopItemCard.svelte
View file

@ -2,22 +2,64 @@
import type { ShopItem } from "@src/ts/api/classes/ShopItem";
export let shopItem: ShopItem;
const selectionScale = 95;
</script>
<div>
<div class="group relative w-64 h-64 bg-slate-300">
<div class="w-full h-full">
<img
class="object-cover w-full h-full peer"
src={shopItem.preview_image}
alt=""
/>
</div>
<div class="">
<div class="relative">
<div class="relative w-48 h-48 corner-border-container"></div>
<div
class="absolute hidden group-hover:flex w-full h-full top-0 bg-black opacity-50"
class="absolute"
style:top={`${-(selectionScale - 100) / 2}%`}
style:left={`${-(selectionScale - 100) / 2}%`}
style:width={`${selectionScale}%`}
style:height={`${selectionScale}%`}
>
Baller
<div class="w-full h-full">
<img
class="object-cover w-full h-full peer"
src={shopItem.preview_image}
alt=""
/>
</div>
</div>
</div>
</div>
<style>
.corner-border-container {
--length: 5px;
--width: 1px;
--line-color: #eeeeee;
background-color: #0008;
background-image:
linear-gradient(var(--line-color), var(--line-color)),
linear-gradient(var(--line-color), var(--line-color)),
linear-gradient(var(--line-color), var(--line-color)),
linear-gradient(var(--line-color), var(--line-color)),
linear-gradient(var(--line-color), var(--line-color)),
linear-gradient(var(--line-color), var(--line-color)),
linear-gradient(var(--line-color), var(--line-color)),
linear-gradient(var(--line-color), var(--line-color));
background-size:
var(--length) var(--width),
var(--width) var(--length),
var(--length) var(--width),
var(--width) var(--length),
var(--length) var(--width),
var(--width) var(--length),
var(--length) var(--width),
var(--width) var(--length);
background-position:
top left,
top left,
top right,
top right,
bottom right,
bottom right,
bottom left,
bottom left;
background-repeat: no-repeat;
}
</style>