59 lines
No EOL
1.1 KiB
CSS
59 lines
No EOL
1.1 KiB
CSS
.cover-img {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"cover-img-gradient"
|
|
"cover-img-title"
|
|
"cover-img-subtitle"
|
|
"cover-img-darken"
|
|
"cover-img-image";
|
|
width: 100%;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.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-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: 105dvh;
|
|
}
|
|
|
|
.cover-img-darken {
|
|
grid-area: overlay;
|
|
background-color: rgb(0, 0, 0, 0.35);
|
|
z-index: 0;
|
|
border-bottom-left-radius: 2rem;
|
|
border-bottom-right-radius: 2rem;
|
|
}
|
|
|
|
.cover-img-image img {
|
|
width: 100dvw;
|
|
height: 105dvh;
|
|
object-fit: cover;
|
|
border-bottom-left-radius: 2rem;
|
|
border-bottom-right-radius: 2rem;
|
|
box-shadow: var(--shadow);
|
|
} |