bachir
/
drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css background timeline

This commit is contained in:
ouidade 2024-07-05 21:02:46 +02:00
parent 4e7142dba8
commit cb46670aaf
4 changed files with 36 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@ -953,11 +953,18 @@ footer span.totop #toTop .arrow-up::before {
#home * { #home * {
box-sizing: border-box; box-sizing: border-box;
} }
#home .config_pages--type--deroulement {
background-color: #f3f5fc;
background-image: url(../../../dist/assets/img/pillier-1.svg);
background-repeat: no-repeat;
background-size: contain;
background-position-x: -20%;
}
#home .timeline { #home .timeline {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
padding-top: 10rem; padding-top: 10rem;
padding-bottom: 10rem; padding-bottom: 4rem;
} }
#home .timeline .__timeline-arrows { #home .timeline .__timeline-arrows {
width: fit-content; width: fit-content;
@ -966,7 +973,7 @@ footer span.totop #toTop .arrow-up::before {
top: -115px; top: -115px;
} }
#home .timeline .__timeline-arrows button { #home .timeline .__timeline-arrows button {
background-color: white; background-color: transparent;
border: none; border: none;
} }
#home .timeline .__timeline-arrows button:hover { #home .timeline .__timeline-arrows button:hover {
@ -977,7 +984,8 @@ footer span.totop #toTop .arrow-up::before {
} }
#home .timeline .__timeline-content { #home .timeline .__timeline-content {
width: 100vw; width: 100vw;
padding: 250px 0; padding-top: 7rem;
padding-bottom: 2rem;
transition: all 1s; transition: all 1s;
} }
#home .timeline .__timeline-content .__paragraphs { #home .timeline .__timeline-content .__paragraphs {
@ -1021,13 +1029,17 @@ footer span.totop #toTop .arrow-up::before {
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date {
width: 50%; width: 50%;
display: flex;
flex-direction: column;
margin: auto;
align-items: center;
} }
#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.6rem; 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.2rem;
text-transform: uppercase; text-transform: uppercase;
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_jour { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_jour {

23
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss
View File

@ -2,19 +2,28 @@
/* TIMELINE /* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
#home{ #home{
* { box-sizing: border-box; } * { box-sizing: border-box; }
.config_pages--type--deroulement{
background-color: #f3f5fcff;
background-image: url(../../../dist/assets/img/pillier-1.svg);
background-repeat: no-repeat;
background-size: contain;
background-position-x: -20%;
}
.timeline { .timeline {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
padding-top: 10rem; padding-top: 10rem;
padding-bottom: 10rem; padding-bottom: 4rem;
.__timeline-arrows{ .__timeline-arrows{
width: fit-content; width: fit-content;
margin: auto; margin: auto;
position: relative; position: relative;
top: -115px; top: -115px;
button{ button{
background-color: white; background-color: transparent;
border: none; border: none;
&:hover{ &:hover{
opacity: 0.5; opacity: 0.5;
@ -28,7 +37,8 @@
.__timeline-content{ .__timeline-content{
// font-size: 0; // font-size: 0;
width: 100vw; width: 100vw;
padding: 250px 0; padding-top: 7rem;
padding-bottom: 2rem;
transition: all 1s; transition: all 1s;
.__paragraphs{ .__paragraphs{
position: relative; position: relative;
@ -72,12 +82,15 @@
padding-bottom: 1rem; padding-bottom: 1rem;
.date{ .date{
width: 50%; width: 50%;
display: flex;
flex-direction: column;
margin: auto;
align-items: center;
.moi-annee{ .moi-annee{
display: inline-flex; display: inline-flex;
font-size: 0.6rem; font-size: 0.6rem;
.field_field_date_de_moi{ .field_field_date_de_moi{
padding-right: 0.5rem; padding-right: 0.2rem;
text-transform: uppercase; text-transform: uppercase;
} }

3
web/themes/custom/quartiers_de_demain/templates/field--config-pages--deroulement.html.twig
View File

@ -50,8 +50,9 @@
{% {%
set ancre_href = '#paragraph-id--' ~ paragraph.id() set ancre_href = '#paragraph-id--' ~ paragraph.id()
%} %}
{% if label_hidden %}
{% if label_hidden %}
{% if multiple %} {% if multiple %}
<div{{ attributes }}> <div{{ attributes }}>
{% for item in items %} {% for item in items %}

2
web/themes/custom/quartiers_de_demain/templates/html.html.twig
View File

@ -35,9 +35,7 @@
<js-placeholder token="{{ placeholder_token }}"> <js-placeholder token="{{ placeholder_token }}">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest"> <link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">