Add hero section with background gradient and logo to enhance user interface

This commit is contained in:
Edgar P. Burkhart 2025-06-14 13:49:01 +02:00
parent 3042382ae4
commit 9cb4f42d07
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
4 changed files with 87 additions and 44 deletions

View file

@ -70,3 +70,30 @@ article.message {
font-family: remixicon;
content: "\eca0";
}
#hero {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(
circle 50vh at 4rem 50%,
var(--pico-primary-background),
color-mix(in hsl, var(--pico-primary-background), var(--pico-background-color) 10%) 20%,
color-mix(in hsl, var(--pico-primary-background), var(--pico-background-color) 30%) 40%,
color-mix(in hsl, var(--pico-primary-background) 30%, var(--pico-background-color)) 60%,
color-mix(in hsl, var(--pico-primary-background) 10%, var(--pico-background-color)) 80%,
var(--pico-background-color));
display: grid;
align-items: center;
padding: 4rem;
.big-logo {
font-size: 8rem;
}
h1 {
font-size: 4rem;
font-weight: 900;
}
}