fix(Landing): cover title background

This commit is contained in:
Matthieu Bessat 2023-05-06 08:45:31 +02:00
parent 81a5802dbf
commit bf987e19ad
3 changed files with 15 additions and 14 deletions

View file

@ -20,17 +20,13 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
}
.cover__content .page-container {
display: flex; display: flex;
height: 100%;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
padding-bottom: 1em;
} }
.cover__overlay { .cover__overlay {
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -51,7 +47,10 @@
.cover__title-container { .cover__title-container {
position: relative; position: relative;
padding-top: 1rem;
padding-bottom: 1rem;
animation: cover_title_in 0.5s cubic-bezier(.39,.58,.57,1); animation: cover_title_in 0.5s cubic-bezier(.39,.58,.57,1);
background-color: rgba(1, 1, 1, 0.5);
} }
.cover__title { .cover__title {
@ -59,12 +58,10 @@
color: white; color: white;
font-size: 3em; font-size: 3em;
margin: 0; margin: 0;
margin-bottom: 0.3em; margin-bottom: 0;
z-index: 2; z-index: 2;
// position: absolute; // position: absolute;
display: inline; display: block;
padding: 0.4rem 0.75rem;
background: rgba(1, 1, 1, 0.5);
} }
.cover__backdrop { .cover__backdrop {

View file

@ -0,0 +1,7 @@
---
title: "Timeline"
date: 2022-09-14T16:43:45+02:00
draft: true
---
## Timeline

View file

@ -1,19 +1,16 @@
{{ define "main" }} {{ define "main" }}
<div class="cover__container"> <div class="cover__container">
<div class="cover__back" style="background-image: url('https://share.lefuturiste.fr/u/2478737d-7e5e-42cd-8764-d0136ef83546/cover_v2_01.jpg')"> <div class="cover__back" style="background-image: url('https://share.lefuturiste.fr/u/2478737d-7e5e-42cd-8764-d0136ef83546/cover_v2_01.jpg')">
</div> </div>
<div class="cover__overlay"> <div class="cover__overlay">
</div> </div>
<div class="cover__content"> <div class="cover__content">
<div class="page-container">
<div class="cover__title-container"> <div class="cover__title-container">
<div class="page-container">
<h1 class="cover__title"> <h1 class="cover__title">
Sauvons la chapelle Sauvons la chapelle
de Bethléem ! de Bethléem !
</h1> </h1>
<div class="cover__backdrop">
</div>
</div> </div>
</div> </div>
</div> </div>