phil/plcom
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

hero: apply brightness for bright images

Browse source
This commit is contained in:
Philippe Loctaux 2023-05-17 23:32:30 +02:00
parent 27161f554f
commit d8db1f76e7
2 changed files with 5 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/hero.astro
View file

@ -7,7 +7,7 @@ import Wallpaper from "./wallpaper.astro";
class="container mx-auto px-8 py-16 w-full h-full justify-center items-center flex flex-col" class="container mx-auto px-8 py-16 w-full h-full justify-center items-center flex flex-col"
> >
<div <div
class="inline-block backdrop-blur-lg rounded-3xl shadow-2xl px-4 py-6 sm:px-8 sm:py-12 space-y-4" class="inline-block backdrop-blur-lg backdrop-brightness-75 rounded-3xl shadow-2xl px-4 py-6 sm:px-8 sm:py-12 space-y-4"
> >
<h1 class="text-3xl sm:text-4xl font-bold">Philippe Loctaux</h1> <h1 class="text-3xl sm:text-4xl font-bold">Philippe Loctaux</h1>
<h2 class="sm:text-xl font-semibold"> <h2 class="sm:text-xl font-semibold">

5
src/components/wallpaper.astro
View file

@ -11,10 +11,13 @@ const wallpaper = wallpapers[Math.floor(Math.random() * wallpapers.length)];
class="relative text-white w-full h-almostscreen bg-center bg-fixed bg-cover" class="relative text-white w-full h-almostscreen bg-center bg-fixed bg-cover"
style=`background-image: url(${wallpaper.file});` style=`background-image: url(${wallpaper.file});`
> >
<!-- Content inside -->
<slot /> <slot />
<!-- Exif info -->
<div <div
class="absolute bottom-3 sm:bottom-5 left-2 sm:left-5 inline-block backdrop-blur-lg rounded-lg shadow-2xl p-2 space-y-0.5 sm:space-y-2" class="absolute bottom-3 sm:bottom-5 left-2 sm:left-5 inline-block backdrop-blur-lg backdrop-brightness-75 rounded-xl shadow-2xl p-2 space-y-0.5 sm:space-y-2"
> >
<!-- Location --> <!-- Location -->