Gabriel Kaszewski
edba0ce60c
- Updated footer to include an Itch.io link and improved SVG formatting. - Modified index.html to introduce a Steam preview iframe and refined introductory text. - Enhanced project-item.html for better layout and added glass effect styles. - Updated chip.html to include glass effect styling. - Adjusted tailwind.config.js to extend theme with new colors, gradients, border radius, and box shadow. - Updated package.json to use the latest versions of tailwindcss-motion and @tailwindcss/typography. - Changed bun.lockb permissions for better compatibility.
134 lines
2.8 KiB
CSS
134 lines
2.8 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer components {
|
|
.glossy-effect::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 50%;
|
|
border-radius: var(--radius); /* Inherit parent's border radius */
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.4) 0%,
|
|
rgba(255, 255, 255, 0.1) 100%
|
|
);
|
|
opacity: 0.8;
|
|
pointer-events: none; /* Allow clicks to pass through */
|
|
z-index: 1; /* Ensure it's above the background but below content */
|
|
}
|
|
|
|
.glossy-effect.bottom::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 30%;
|
|
border-radius: var(--radius);
|
|
background: linear-gradient(
|
|
0deg,
|
|
rgba(0, 0, 0, 0.1) 0%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.fa-gloss {
|
|
position: relative;
|
|
}
|
|
|
|
.fa-gloss::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 50%;
|
|
border-radius: var(--radius);
|
|
background: linear-gradient(var(--gradient-fa-gloss));
|
|
opacity: 0.8;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.fa-gloss.bottom::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 30%;
|
|
border-radius: var(--radius);
|
|
background: linear-gradient(
|
|
0deg,
|
|
rgba(0, 0, 0, 0.1) 0%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.shadow-fa-sm {
|
|
box-shadow: var(--shadow-fa-sm), var(--fa-inner);
|
|
}
|
|
.shadow-fa-md {
|
|
box-shadow: var(--shadow-fa-md), var(--fa-inner);
|
|
}
|
|
.shadow-fa-lg {
|
|
box-shadow: var(--shadow-fa-lg), var(--fa-inner);
|
|
}
|
|
.text-shadow-default {
|
|
text-shadow: var(--text-shadow-default);
|
|
}
|
|
.text-shadow-sm {
|
|
text-shadow: var(--text-shadow-sm);
|
|
}
|
|
.text-shadow-md {
|
|
text-shadow: var(--text-shadow-md);
|
|
}
|
|
.text-shadow-lg {
|
|
text-shadow: var(--text-shadow-lg);
|
|
}
|
|
|
|
.glass-effect {
|
|
@apply bg-transparent backdrop-blur-lg border border-white/20 shadow-fa-lg;
|
|
clip-path: inset(0 round 1rem);
|
|
}
|
|
|
|
.gloss-highlight::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 60%;
|
|
border-radius: inherit; /* This is key for matching the parent's border radius */
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.5) 0%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.my-animate {
|
|
opacity: 1 !important;
|
|
transform: translateY(0) !important;
|
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
}
|
|
|
|
.hidden-for-animation {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
}
|
|
}
|