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>
<div class="flex w-full justify-center"> <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} {#if allItems != undefined}
{#each allItems as item, i} {#each allItems as item, i}
<ShopItemCard bind:shopItem={item} /> <ShopItemCard bind:shopItem={item} />

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

@ -2,10 +2,20 @@
import type { ShopItem } from "@src/ts/api/classes/ShopItem"; import type { ShopItem } from "@src/ts/api/classes/ShopItem";
export let shopItem: ShopItem; export let shopItem: ShopItem;
const selectionScale = 95;
</script> </script>
<div> <div class="">
<div class="group relative w-64 h-64 bg-slate-300"> <div class="relative">
<div class="relative w-48 h-48 corner-border-container"></div>
<div
class="absolute"
style:top={`${-(selectionScale - 100) / 2}%`}
style:left={`${-(selectionScale - 100) / 2}%`}
style:width={`${selectionScale}%`}
style:height={`${selectionScale}%`}
>
<div class="w-full h-full"> <div class="w-full h-full">
<img <img
class="object-cover w-full h-full peer" class="object-cover w-full h-full peer"
@ -13,11 +23,43 @@
alt="" alt=""
/> />
</div> </div>
<div
class="absolute hidden group-hover:flex w-full h-full top-0 bg-black opacity-50"
>
Baller
</div> </div>
</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>