MrDiderot/mischlabs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Place cat peek behind cards
All checks were successful
Build & Push Docker Image to Gitea Registry / build-and-push (push) Successful in 9s
Details

Browse Source
This commit is contained in:
Kroonk
2026-05-20 18:15:39 +02:00
parent 271612af32
commit 6bb915299f
2 changed files with 24 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MischLabs - Services</title> <title>MischLabs - Services</title>
<link rel="stylesheet" href="style.css?v=4"> <link rel="stylesheet" href="style.css?v=5">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

38
style.css
View File

@@ -185,41 +185,49 @@ main {
.card > * { .card > * {
position: relative; position: relative;
z-index: 2; z-index: 3;
} }
.card::before { .card::before {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
background: radial-gradient( background:
600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), radial-gradient(
rgba(255, 255, 255, 0.03), 600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
transparent 40% rgba(255, 255, 255, 0.03),
); transparent 40%
opacity: 0; ),
transition: opacity 0.3s; var(--surface);
opacity: 1;
transition: background 0.3s;
z-index: 1; z-index: 1;
border-radius: inherit; border-radius: inherit;
pointer-events: none; pointer-events: none;
} }
.card:hover::before { .card:hover::before {
opacity: 1; background:
radial-gradient(
600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
rgba(255, 255, 255, 0.03),
transparent 40%
),
var(--surface-hover);
} }
.card::after { .card::after {
content: ''; content: '';
position: absolute; position: absolute;
top: -30px; top: -36px;
right: 1.35rem; right: 1.15rem;
width: 72px; width: 78px;
height: 58px; height: 62px;
background-image: url("data:image/svg+xml,%3Csvg width='96' height='76' viewBox='0 0 96 76' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 31 17 7l22 13 18-1L79 7l-5 24c7 6 11 14 11 23 0 17-16 22-37 22S11 71 11 54c0-9 4-17 11-23Z' fill='%23f7c98f'/%3E%3Cpath d='M24 30 20 13l16 10M72 30l4-17-16 10' fill='%23f09f7f'/%3E%3Cellipse cx='35' cy='46' rx='5' ry='6' fill='%2325221f'/%3E%3Cellipse cx='61' cy='46' rx='5' ry='6' fill='%2325221f'/%3E%3Cpath d='M48 52c-2 0-4 1-4 3s2 3 4 3 4-1 4-3-2-3-4-3Z' fill='%23b65f53'/%3E%3Cpath d='M48 58c-3 5-9 5-12 1M48 58c3 5 9 5 12 1' fill='none' stroke='%2325221f' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M24 51H4M26 58H7M72 51h20M70 58h19' stroke='%2325221f' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M19 31c8-7 18-10 29-10s21 3 29 10' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg width='96' height='76' viewBox='0 0 96 76' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 31 17 7l22 13 18-1L79 7l-5 24c7 6 11 14 11 23 0 17-16 22-37 22S11 71 11 54c0-9 4-17 11-23Z' fill='%23f7c98f'/%3E%3Cpath d='M24 30 20 13l16 10M72 30l4-17-16 10' fill='%23f09f7f'/%3E%3Cellipse cx='35' cy='46' rx='5' ry='6' fill='%2325221f'/%3E%3Cellipse cx='61' cy='46' rx='5' ry='6' fill='%2325221f'/%3E%3Cpath d='M48 52c-2 0-4 1-4 3s2 3 4 3 4-1 4-3-2-3-4-3Z' fill='%23b65f53'/%3E%3Cpath d='M48 58c-3 5-9 5-12 1M48 58c3 5 9 5 12 1' fill='none' stroke='%2325221f' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M24 51H4M26 58H7M72 51h20M70 58h19' stroke='%2325221f' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M19 31c8-7 18-10 29-10s21 3 29 10' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
opacity: 0; opacity: 0;
transform: translateY(22px) rotate(-7deg); transform: translateY(34px) rotate(-7deg);
transition: transition:
opacity 0.22s ease, opacity 0.22s ease,
transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
@@ -238,7 +246,7 @@ main {
.card:hover::after { .card:hover::after {
opacity: 1; opacity: 1;
transform: translateY(0) rotate(-7deg); transform: translateY(4px) rotate(-7deg);
} }
/* ===== Card Icon ===== */ /* ===== Card Icon ===== */