progress i think? sync at least
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Successful in 22s
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Successful in 22s
This commit is contained in:
parent
a6acc0e647
commit
eaab786155
6 changed files with 1095 additions and 779 deletions
1800
package-lock.json
generated
1800
package-lock.json
generated
File diff suppressed because it is too large
Load diff
14
src/pages/shop/_shop_main.svelte
Normal file
14
src/pages/shop/_shop_main.svelte
Normal file
|
@ -0,0 +1,14 @@
|
|||
<script>
|
||||
import ShopItemCard from "./comps/ShopItemCard.svelte";
|
||||
</script>
|
||||
<div class="p-8 flex w-full justify-center">
|
||||
<div class="text-4xl cozette">Items</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full justify-center">
|
||||
<div class="grid grid-cols-2 gap-4 ">
|
||||
{#each { length: 5 } as _, i}
|
||||
<ShopItemCard/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
15
src/pages/shop/comps/ShopItemCard.svelte
Normal file
15
src/pages/shop/comps/ShopItemCard.svelte
Normal file
|
@ -0,0 +1,15 @@
|
|||
<script>
|
||||
</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="/images/Zhen/Infomatik/PressurePlate.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="absolute hidden group-hover:flex w-full h-full top-0 bg-black opacity-50">
|
||||
Baller
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,5 @@
|
|||
<script>
|
||||
import Shop from "@shop/_shop_main.svelte";
|
||||
</script>
|
||||
|
||||
<Shop/>
|
|
@ -1,17 +1,14 @@
|
|||
import typo from "@tailwindcss/typography"
|
||||
import daisyui from "daisyui"
|
||||
import typo from "@tailwindcss/typography";
|
||||
import daisyui from "daisyui";
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||
content: ["./src/**/*.{html,js,svelte,ts}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [typo, daisyui],
|
||||
daisyui: {
|
||||
themes: [
|
||||
"forest",
|
||||
],
|
||||
|
||||
themes: ["forest"],
|
||||
},
|
||||
}
|
||||
};
|
||||
|
|
27
test.html
Normal file
27
test.html
Normal file
|
@ -0,0 +1,27 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>Tailwind Group Hover Test</title>
|
||||
<!-- ← This is required: load Tailwind’s CDN build -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="flex items-center justify-center h-screen bg-gray-100">
|
||||
<div class="group relative w-64 h-64 bg-slate-300 overflow-hidden">
|
||||
<!-- Hover target (fills the container) -->
|
||||
<img
|
||||
class="object-cover w-full h-full"
|
||||
src="https://via.placeholder.com/256"
|
||||
alt="Pressure plate placeholder"
|
||||
/>
|
||||
|
||||
<!-- Hidden by default, flex on group hover -->
|
||||
<div
|
||||
class="absolute inset-0 hidden group-hover:flex items-center justify-center bg-black bg-opacity-50 text-white text-xl transition-opacity duration-200"
|
||||
>
|
||||
Baller
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
Loading…
Add table
Add a link
Reference in a new issue