Etheryo/etheryo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Cover Images now as a slight border radius, respecting Etheryo design philosophy.

Browse source
This commit is contained in:
Yohan Boujon 2025-03-31 22:53:37 +02:00
parent 14b874a0fd
commit c9df8196f0
2 changed files with 7 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/components/footer.svelte
View file

@ -51,7 +51,7 @@
</div> </div>
</div> </div>
<div class="footer-slider align-center"> <div class="footer-slider align-center">
<span>{new Date().getFullYear()}{mainjson.footer.copyright}</span> <span>2023-{new Date().getFullYear()}{mainjson.footer.copyright}</span>
<div class="flex-end"> <div class="flex-end">
<ButtonSlider <ButtonSlider
keys={[mainjson.footer.about.name, mainjson.footer.vision.name, mainjson.footer.contact.name]} keys={[mainjson.footer.about.name, mainjson.footer.vision.name, mainjson.footer.contact.name]}

16
src/lib/css/cover-img.css
View file

@ -4,10 +4,10 @@
"cover-img-gradient" "cover-img-gradient"
"cover-img-title" "cover-img-title"
"cover-img-subtitle" "cover-img-subtitle"
"cover-img-block-shadow"
"cover-img-darken" "cover-img-darken"
"cover-img-image"; "cover-img-image";
width: 100%; width: 100%;
margin-bottom: 2rem;
} }
.cover-img-gradient { .cover-img-gradient {
@ -18,15 +18,6 @@
z-index: 0; z-index: 0;
} }
.cover-img-shadow {
grid-area: overlay;
width: 100%;
height: calc(var(--navbar-height)*2);
background-color: rgba(0, 0, 0, 0);
align-self: end;
box-shadow: rgba(0, 0, 0, 0.2) 0px -120px 60px -20px inset, rgba(0, 0, 0, 0.4) 0px -100px 60px -18px inset;
}
.cover-img-text { .cover-img-text {
grid-area: overlay; grid-area: overlay;
padding: 4rem; padding: 4rem;
@ -54,10 +45,15 @@
grid-area: overlay; grid-area: overlay;
background-color: rgb(0, 0, 0, 0.35); background-color: rgb(0, 0, 0, 0.35);
z-index: 0; z-index: 0;
border-bottom-left-radius: 2rem;
border-bottom-right-radius: 2rem;
} }
.cover-img-image img { .cover-img-image img {
width: 100dvw; width: 100dvw;
height: 100dvh; height: 100dvh;
object-fit: cover; object-fit: cover;
border-bottom-left-radius: 2rem;
border-bottom-right-radius: 2rem;
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
} }