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 * {
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 {
white-space: nowrap;
overflow: hidden;
padding-top: 10rem;
padding-bottom: 10rem;
padding-bottom: 4rem;
}
#home .timeline .__timeline-arrows {
width: fit-content;
@ -966,7 +973,7 @@ footer span.totop #toTop .arrow-up::before {
top: -115px;
}
#home .timeline .__timeline-arrows button {
background-color: white;
background-color: transparent;
border: none;
}
#home .timeline .__timeline-arrows button:hover {
@ -977,7 +984,8 @@ footer span.totop #toTop .arrow-up::before {
}
#home .timeline .__timeline-content {
width: 100vw;
padding: 250px 0;
padding-top: 7rem;
padding-bottom: 2rem;
transition: all 1s;
}
#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 {
width: 50%;
display: flex;
flex-direction: column;
margin: auto;
align-items: center;
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .moi-annee {
display: inline-flex;
font-size: 0.6rem;
}
#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;
}
#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
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#home{
* { 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 {
white-space: nowrap;
overflow: hidden;
padding-top: 10rem;
padding-bottom: 10rem;
padding-bottom: 4rem;
.__timeline-arrows{
width: fit-content;
margin: auto;
position: relative;
top: -115px;
button{
background-color: white;
background-color: transparent;
border: none;
&:hover{
opacity: 0.5;
@ -28,7 +37,8 @@
.__timeline-content{
// font-size: 0;
width: 100vw;
padding: 250px 0;
padding-top: 7rem;
padding-bottom: 2rem;
transition: all 1s;
.__paragraphs{
position: relative;
@ -72,12 +82,15 @@
padding-bottom: 1rem;
.date{
width: 50%;
display: flex;
flex-direction: column;
margin: auto;
align-items: center;
.moi-annee{
display: inline-flex;
font-size: 0.6rem;
.field_field_date_de_moi{
padding-right: 0.5rem;
padding-right: 0.2rem;
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()
%}
{% if label_hidden %}
{% if label_hidden %}
{% if multiple %}
<div{{ attributes }}>
{% 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 }}">
<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="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffffff">