css timeline
This commit is contained in:
parent
8c9c666444
commit
ff34737ccb
|
@ -74,7 +74,7 @@
|
|||
content: url("../img/noun-arrow-to-right.svg");
|
||||
padding-right: 0.2rem;
|
||||
padding-left: 0.2rem;
|
||||
padding-top: 1rem;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
#popup-content {
|
||||
width: 300px;
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 887 B |
|
@ -2,44 +2,18 @@
|
|||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="35px"
|
||||
height="35px"
|
||||
viewBox="0 0 10.531931 10.531931"
|
||||
width="18.174984"
|
||||
height="14.947381"
|
||||
viewBox="0 0 5.4690765 4.497851"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
sodipodi:docname="noun-arrow-to-right.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="0.86234568"
|
||||
inkscape:cx="20.293486"
|
||||
inkscape:cy="19.713672"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1172"
|
||||
inkscape:window-x="1920"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-99.747912,-143.13958)">
|
||||
|
||||
transform="translate(-102.27891,-146.15662)">
|
||||
<path
|
||||
d="m 105.44397,146.39759 1.82265,1.86476 h -4.84236 a 0.14436835,0.14436835 0 1 0 0,0.28873 h 4.84236 l -1.82265,1.86476 a 0.14436835,0.14436835 0 0 0 0,0.19851 0.1503837,0.1503837 0 0 0 0.20452,0 l 2.06326,-2.10537 a 0.1624144,0.1624144 0 0 0 0,-0.20452 l -2.06326,-2.10538 a 0.14436835,0.14436835 0 0 0 -0.20452,0 0.14436835,0.14436835 0 0 0 0,0.19851 z"
|
||||
id="path2-2"
|
||||
|
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 871 B |
|
@ -938,6 +938,11 @@ footer {
|
|||
.slick-prev {
|
||||
left: 45%;
|
||||
}
|
||||
@media (min-width: 1480px) {
|
||||
.slick-prev {
|
||||
left: 47%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1080px) {
|
||||
.slick-prev {
|
||||
left: 45%;
|
||||
|
@ -945,7 +950,12 @@ footer {
|
|||
}
|
||||
@media (max-width: 510px) {
|
||||
.slick-prev {
|
||||
right: 39%;
|
||||
left: 39%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 310px) {
|
||||
.slick-prev {
|
||||
left: 54%;
|
||||
}
|
||||
}
|
||||
[dir=rtl] .slick-prev {
|
||||
|
@ -985,6 +995,11 @@ footer {
|
|||
right: 45%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 390px) {
|
||||
.slick-next {
|
||||
right: 42%;
|
||||
}
|
||||
}
|
||||
[dir=rtl] .slick-next {
|
||||
left: -25px;
|
||||
right: auto;
|
||||
|
@ -1188,10 +1203,11 @@ footer {
|
|||
margin: auto;
|
||||
padding-top: 4rem;
|
||||
font-size: 1.7rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
#home .__container-deroulement .config_pages--type--deroulement {
|
||||
height: 550px;
|
||||
margin-top: 4.5rem;
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase {
|
||||
height: 100%;
|
||||
|
@ -1219,11 +1235,12 @@ footer {
|
|||
align-items: center;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
@media (max-width: 1100px) {
|
||||
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement {
|
||||
flex-direction: column;
|
||||
align-items: baseline;
|
||||
padding-bottom: 1rem;
|
||||
padding-left: 4rem;
|
||||
}
|
||||
}
|
||||
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .border-symbol {
|
||||
|
@ -1233,6 +1250,11 @@ footer {
|
|||
line-height: 0; /* Assure que la hauteur est minimale */
|
||||
transform: translateX(1rem);
|
||||
}
|
||||
@media (max-width: 1100px) {
|
||||
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .border-symbol {
|
||||
transform: translateY(18.6rem);
|
||||
}
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .border-symbol {
|
||||
align-self: center;
|
||||
|
@ -1243,6 +1265,11 @@ footer {
|
|||
padding-right: 3rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .border-symbol {
|
||||
transform: translateY(21.2rem);
|
||||
}
|
||||
}
|
||||
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date {
|
||||
width: fit-content !important;
|
||||
display: flex;
|
||||
|
@ -1365,11 +1392,12 @@ footer {
|
|||
}
|
||||
#actus-caroussel h2 {
|
||||
width: fit-content;
|
||||
padding-bottom: 1.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 3rem;
|
||||
font-size: 1.7rem;
|
||||
font-family: "gilroy-semibold";
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
#actus-caroussel .content-actus .view {
|
||||
display: flex;
|
||||
|
|
|
@ -5,11 +5,13 @@
|
|||
padding-bottom: 6rem;
|
||||
h2{
|
||||
width: fit-content;
|
||||
padding-bottom: 1.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 3rem;
|
||||
font-size: 1.7rem;
|
||||
font-family: 'gilroy-semibold';
|
||||
padding-left: 0.5rem;
|
||||
|
||||
}
|
||||
.content-actus{
|
||||
.view{
|
||||
|
|
|
@ -114,11 +114,17 @@ $slick-opacity-not-active: 0.25 !default;
|
|||
|
||||
.slick-prev {
|
||||
left: 45%;
|
||||
@media(min-width:1480px){
|
||||
left: 47%;
|
||||
}
|
||||
@media(max-width:1080px){
|
||||
left: 45%;
|
||||
}
|
||||
@media(max-width:510px){
|
||||
right: 39%;
|
||||
left: 39%;
|
||||
}
|
||||
@media(max-width:310px){
|
||||
left: 54%;
|
||||
}
|
||||
[dir="rtl"] & {
|
||||
left: auto;
|
||||
|
@ -137,6 +143,7 @@ $slick-opacity-not-active: 0.25 !default;
|
|||
left: 45%;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
@ -150,6 +157,9 @@ $slick-opacity-not-active: 0.25 !default;
|
|||
@media(max-width:510px){
|
||||
right: 45%;
|
||||
}
|
||||
@media(max-width:390px){
|
||||
right: 42%;
|
||||
}
|
||||
[dir="rtl"] & {
|
||||
left: -25px;
|
||||
right: auto;
|
||||
|
|
|
@ -19,11 +19,12 @@
|
|||
margin: auto;
|
||||
padding-top: 4rem;
|
||||
font-size: 1.7rem;
|
||||
padding-left: 0.5rem;
|
||||
|
||||
}
|
||||
.config_pages--type--deroulement{
|
||||
height: 550px;
|
||||
margin-top: 4.5rem;
|
||||
margin-top: 3.5rem;
|
||||
.field_field_phase{
|
||||
height: 100%;
|
||||
.timeline{
|
||||
|
@ -51,10 +52,11 @@
|
|||
align-items: center;
|
||||
padding-right: 1rem;
|
||||
// padding-bottom: 1rem;
|
||||
@media(max-width:500px){
|
||||
@media(max-width:1100px){
|
||||
flex-direction: column;
|
||||
align-items: baseline;
|
||||
padding-bottom: 1rem;
|
||||
padding-left: 4rem;
|
||||
}
|
||||
.border-symbol{
|
||||
align-self: end;
|
||||
|
@ -62,6 +64,10 @@
|
|||
display: inline-block; /* Permet d'utiliser height */
|
||||
line-height: 0; /* Assure que la hauteur est minimale */
|
||||
transform: translateX(1rem);
|
||||
@media(max-width:1100px){
|
||||
transform: translateY(18.6rem);
|
||||
|
||||
}
|
||||
@media(max-width:500px){
|
||||
align-self: center;
|
||||
font-size: 2.5rem;
|
||||
|
@ -70,6 +76,10 @@
|
|||
transform: translateY(22.5rem);
|
||||
padding-right: 3rem;
|
||||
}
|
||||
@media(max-width:810px){
|
||||
transform: translateY(21.2rem);
|
||||
|
||||
}
|
||||
}
|
||||
// border-bottom: solid black 1px;
|
||||
// &:before{
|
||||
|
|
Loading…
Reference in New Issue