hyprwm/hyprland-website
1
0
Fork 0
mirror of https://github.com/hyprwm/hyprland-website.git synced 2024-12-22 18:29:48 +01:00
Code Issues Projects Releases Packages Wiki Activity

famedrice: colored titles

Browse source
This commit is contained in:
VDawg 2023-11-16 17:45:14 +01:00
parent 947e2f49c8
commit c0d9d5b1b5
1 changed files with 27 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/routes/wall_of_fame/FamedRice.svelte
View file

@ -23,10 +23,15 @@
let background = blurredThumbnail ?? getBlurredPath(thumbnail)
</script>
<div class="flex flex-col items-center gap-12 px-4 {$$restProps.class}">
<div
class="flex flex-col items-center gap-12 px-4 {$$restProps.class}"
style:--bg="url('{background}')"
>
<div class="flex flex-col items-center justify-center">
<div class="mb-2 text-lg font-bold">{pretitel}</div>
<h3 class="mb-6 text-4xl font-bold hover:text-slate-200 sm:text-6xl">
<div class="relative mb-2 rounded-full px-3 py-1 text-lg font-bold">
{pretitel}
</div>
<h3 class="title_">
<a href={dotfilesLink} target="_blank">{name}</a>
</h3>
<a class="group flex gap-3" href={dotfilesLink} target="_blank">
@ -125,4 +130,23 @@
mask-image: radial-gradient(farthest-side, black 80%, transparent);
background-image: url('/imgs/grain.webp');
}
.title_ {
filter: saturate(1.5) brightness(1);
@apply relative -mt-1 mb-5 py-1 text-4xl font-bold text-transparent sm:text-6xl;
background-image: linear-gradient(
-195deg,
theme(colors.white / 80%) 50%,
rgba(255, 255, 255, 0.4)
),
var(--bg);
background-size: cover;
background-clip: text;
mask-image: linear-gradient(-195deg, white 65%, transparent);
transition: filter 150ms ease-in-out;
&:hover {
filter: saturate(2.2) brightness(1.5);
}
}
</style>