js css timeline

This commit is contained in:
ouidade 2024-07-05 16:14:15 +02:00
parent 96ae5337a1
commit 4e7142dba8
3 changed files with 31 additions and 16 deletions

View File

@ -990,13 +990,10 @@ footer span.totop #toTop .arrow-up::before {
#home .timeline .__timeline-content .__paragraphs:first-of-type { #home .timeline .__timeline-content .__paragraphs:first-of-type {
height: 0px; height: 0px;
} }
#home .timeline .__timeline-content .__paragraphs:last-child {
width: 20px;
}
#home .timeline .__timeline-content .__paragraphs:not(:first-child) { #home .timeline .__timeline-content .__paragraphs:not(:first-child) {
margin-left: 14px; margin-left: 14px;
} }
#home .timeline .__timeline-content .__paragraphs:not(:last-child)::after { #home .timeline .__timeline-content .__paragraphs::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -1027,18 +1024,27 @@ footer span.totop #toTop .arrow-up::before {
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .moi-annee { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .moi-annee {
display: inline-flex; display: inline-flex;
font-size: 0.8rem; font-size: 0.6rem;
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .moi-annee .field_field_date_de_moi { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .moi-annee .field_field_date_de_moi {
padding-right: 0.5rem; padding-right: 0.5rem;
text-transform: uppercase; text-transform: uppercase;
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_jour {
font-size: 5rem;
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text {
border: solid rgb(7, 50, 194) 1px; border: solid rgb(7, 50, 194) 1px;
border-radius: 5%; border-radius: 5%;
padding: 0.6rem 0.6rem; padding: 0.6rem 0.6rem;
width: 45%; width: 45%;
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre {
font-size: 0.6rem;
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description p {
font-size: 0.5rem !important;
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description .field--label-above { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description .field--label-above {
display: none; display: none;
} }

View File

@ -39,13 +39,13 @@
&:first-of-type{ &:first-of-type{
height: 0px; height: 0px;
} }
&:last-child { // &:last-child {
width: 20px; // width: 20px;
} // }
&:not(:first-child) { &:not(:first-child) {
margin-left: 14px; margin-left: 14px;
} }
&:not(:last-child)::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -72,15 +72,20 @@
padding-bottom: 1rem; padding-bottom: 1rem;
.date{ .date{
width: 50%; width: 50%;
.moi-annee{ .moi-annee{
display: inline-flex; display: inline-flex;
font-size: 0.8rem; font-size: 0.6rem;
.field_field_date_de_moi{ .field_field_date_de_moi{
padding-right: 0.5rem; padding-right: 0.5rem;
text-transform: uppercase; text-transform: uppercase;
} }
} }
.field_field_date_de_jour{
font-size: 5rem;
}
} }
@ -89,10 +94,14 @@
border-radius: 5%; border-radius: 5%;
padding: 0.6rem 0.6rem; padding: 0.6rem 0.6rem;
width: 45%; width: 45%;
.field_field_titre{
font-size: 0.6rem;
}
.field_field_description{ .field_field_description{
p{font-size: 0.5rem !important;}
.field--label-above{display: none;} .field--label-above{display: none;}
} }
} }
} }
} }

View File

@ -67,8 +67,8 @@
</div> </div>
<div class="text"> <div class="text">
{{ content.field_description}}
{{ content.field_titre}} {{ content.field_titre}}
{{ content.field_description}}
</div> </div>
{% endblock %} {% endblock %}
</div> </div>