hyprwm/hyprland-website
1
0
Fork 0
mirror of https://github.com/hyprwm/hyprland-website.git synced 2024-12-23 02:39: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) let background = blurredThumbnail ?? getBlurredPath(thumbnail)
</script> </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="flex flex-col items-center justify-center">
<div class="mb-2 text-lg font-bold">{pretitel}</div> <div class="relative mb-2 rounded-full px-3 py-1 text-lg font-bold">
<h3 class="mb-6 text-4xl font-bold hover:text-slate-200 sm:text-6xl"> {pretitel}
</div>
<h3 class="title_">
<a href={dotfilesLink} target="_blank">{name}</a> <a href={dotfilesLink} target="_blank">{name}</a>
</h3> </h3>
<a class="group flex gap-3" href={dotfilesLink} target="_blank"> <a class="group flex gap-3" href={dotfilesLink} target="_blank">
@ -125,4 +130,23 @@
mask-image: radial-gradient(farthest-side, black 80%, transparent); mask-image: radial-gradient(farthest-side, black 80%, transparent);
background-image: url('/imgs/grain.webp'); 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> </style>