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

Added CoverImg component.

Browse source
This commit is contained in:
Yohan Boujon 2025-03-30 20:51:35 +02:00
parent e425fec7ce
commit 10bdc7a555
3 changed files with 106 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/lib/components/cover-img.svelte Normal file
View file

@ -0,0 +1,32 @@
<script lang="ts">
import "$lib/css/base.css";
import "$lib/css/cover-img.css";
export let cover =
"https://share.etheryo.fr/rando/2023.11.01/Groupe%20Ombre%20Lac%20Montagne%20Vert%20Bleu.jpg";
export let gradient = false;
export let darken = false;
export let title = "Title";
export let subtitle = "This is an exemple subtext";
</script>
<div class="cover-img">
{#if gradient}
<div class="cover-img-gradient"></div>
{/if}
{#if darken}
<div class="cover-img-darken"></div>
{/if}
<div class="cover-img-image">
<img alt="banner" src={cover} />
</div>
<div class="cover-img-text flex-col justify-center">
<div class="title">
<h1>{title}</h1>
</div>
<div class="text-justify">
<h2>{subtitle}</h2>
</div>
</div>
<div class="cover-img-shadow"></div>
</div>

63
src/lib/css/cover-img.css Normal file
View file

@ -0,0 +1,63 @@
.cover-img {
display: grid;
grid-template-areas:
"cover-img-gradient"
"cover-img-title"
"cover-img-subtitle"
"cover-img-block-shadow"
"cover-img-darken"
"cover-img-image";
width: 100%;
}
.cover-img-gradient {
grid-area: overlay;
background: linear-gradient(0deg, #00000000, #261C2C40 50%, #261c2c80 100%);
height: calc(var(--navbar-height)*2);
width: 100%;
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 {
grid-area: overlay;
padding: 4rem;
z-index: 1;
max-width: 50rem;
}
.cover-img-text h1 {
font-size: 3rem;
}
.cover-img-text h2 {
font-size: 1.1rem;
font-family: 'JetBrains Mono';
color: var(--color-background);
}
.cover-img-image {
grid-area: overlay;
width: 100dvw;
height: 100dvh;
}
.cover-img-darken {
grid-area: overlay;
background-color: rgb(0, 0, 0, 0.25);
z-index: 0;
}
.cover-img-image img {
width: 100dvw;
height: 100dvh;
object-fit: cover;
}

20
src/routes/+page.svelte
View file

@ -1,16 +1,18 @@
<script>
import "$lib/css/base.css";
import "$lib/css/main.css";
import CoverImg from "$lib/components/cover-img.svelte";
let hub_cover =
"https://share.etheryo.fr/rando/2024.07.28/IMG20240728141949_min.jpg";
</script>
<div class="main-banner">
<div class="main-banner-gradient"></div>
<div class="main-banner-content">
<div
class="flex-row center"
style="padding-top: 15rem;padding-bottom: 15rem;"
>
<h1>Welcome to Etheryo</h1>
</div>
</div>
<CoverImg
cover={hub_cover}
darken={true}
title="Welcome to Etheryo"
subtitle="'Etheryo' comes from the word 'ethernal' and my own name. The goal of this website is to showcase my creations. It consists of programming, art, philosophy and scientific pieces that reflects what I want to bring to this world."
/>
</div>