diff --git a/web/themes/custom/reha/css/reha.css b/web/themes/custom/reha/css/reha.css index c41d56c..115df56 100644 --- a/web/themes/custom/reha/css/reha.css +++ b/web/themes/custom/reha/css/reha.css @@ -208,7 +208,6 @@ header { box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } @media (max-width: 800px) { header { - height: 100px; width: 800px; } } header .region-header { display: inline-grid; @@ -230,7 +229,6 @@ header { object-fit: contain; } @media (max-width: 891px) { header .region-header #block-reha-logoministere { - width: 10%; padding-left: 1rem; } } header .region-header #block-reha-logoreha { display: none; @@ -251,7 +249,6 @@ header { height: fit-content; } @media (max-width: 891px) { header .region-header #block-reha-connexionutilisateur { - width: 10%; padding-left: 1rem; } } header .region-header #block-reha-connexionutilisateur .bouton-connexion { padding-right: 3rem; } @@ -476,20 +473,57 @@ footer { footer div { display: flex; flex-direction: row; } + @media (max-width: 891px) { + footer div { + flex-wrap: wrap; } } + @media (max-width: 520px) { + footer div { + flex-direction: column; } } footer h2 { font-size: 1.3rem; } footer section:not(:first-of-type) { border-left: #fdc300 solid 5px; padding-left: 2rem; } + @media (max-width: 891px) { + footer section:not(:first-of-type) { + margin-left: 1rem; + margin-right: 1rem; + border-left: #fdc300 solid 2px; } } + @media (max-width: 520px) { + footer section:not(:first-of-type) { + margin-left: 1rem; + margin-right: 1rem; + border-left: none; + border-top: #fdc300 solid 2px; } } footer section:not(:last-of-type) { padding-right: 5rem; } + @media (max-width: 891px) { + footer section:not(:last-of-type) { + padding-right: 0; } } + @media (max-width: 520px) { + footer section:not(:last-of-type) { + padding-right: 0; } } + footer section:last-of-type { + padding-right: 5rem; } + @media (max-width: 891px) { + footer section:last-of-type { + border-top: #fdc300 solid 2px; + border-left: none; } } #footer-left { - margin-left: 10rem; } + margin-left: 10%; } + @media (max-width: 891px) { + #footer-left { + margin-left: 1rem; + padding-left: 2rem; + width: 40%; } } + @media (max-width: 520px) { + #footer-left { + margin-left: 1rem; + padding-left: 2rem; } } #footer-left div { display: flex; - flex-direction: column; - padding-right: 2rem; } + flex-direction: column; } #footer-left div #block-reha-pieddepage ul { padding-left: 0; } #footer-left div #block-reha-logoreha-3 { @@ -500,6 +534,10 @@ footer { #footer-left div .social-media-links--platforms svg.ext { display: none; } +@media (max-width: 891px) { + #footer-middle { + width: 40%; } } + #footer-middle #block-reha-operateurduprogramme { display: flex; flex-direction: column; } diff --git a/web/themes/custom/reha/scss/partials/_footer.scss b/web/themes/custom/reha/scss/partials/_footer.scss index 3645303..5e7d71b 100644 --- a/web/themes/custom/reha/scss/partials/_footer.scss +++ b/web/themes/custom/reha/scss/partials/_footer.scss @@ -8,6 +8,13 @@ footer{ div{ display: flex; flex-direction: row; + @media(max-width: 891px){ + // // flex-direction: row; + flex-wrap: wrap; + } + @media(max-width: 520px){ + flex-direction: column; + } } h2{font-size: 1.3rem;} @@ -16,18 +23,62 @@ footer{ section:not(:first-of-type){ border-left: $yellow-puca solid 5px; padding-left: 2rem; + @media(max-width: 891px){ + margin-left: 1rem; + margin-right: 1rem; + border-left: $yellow-puca solid 2px; + + // border-left: none; + // border-top: $yellow-puca solid 2px; + } + @media(max-width: 520px){ + margin-left: 1rem; + margin-right: 1rem; + border-left: none; + border-top: $yellow-puca solid 2px; + } } section:not(:last-of-type){ padding-right: 5rem; + @media(max-width: 891px){ + padding-right: 0; + } + @media(max-width: 520px){ + padding-right: 0; + } + + } + section:last-of-type{ + padding-right: 5rem; + @media(max-width: 891px){ + border-top: $yellow-puca solid 2px; + border-left: none; + } + + } } #footer-left { -margin-left: 10rem; +margin-left: 10%; +@media(max-width: 891px){ + margin-left: 1rem; + padding-left: 2rem; + width: 40%; + +} +@media(max-width: 520px){ + margin-left: 1rem; + padding-left: 2rem; +} div{ display: flex; flex-direction: column; - padding-right: 2rem; + // padding-right: 2rem; + // @media(max-width: 891px){ + + // padding-right: 0; + // } #block-reha-pieddepage { ul{ padding-left: 0; @@ -47,6 +98,9 @@ margin-left: 10rem; } #footer-middle{ + @media(max-width: 891px){ + width: 40%; + } #block-reha-operateurduprogramme{ display: flex; flex-direction: column; diff --git a/web/themes/custom/reha/scss/partials/_header.scss b/web/themes/custom/reha/scss/partials/_header.scss index 933d56c..6a0016b 100644 --- a/web/themes/custom/reha/scss/partials/_header.scss +++ b/web/themes/custom/reha/scss/partials/_header.scss @@ -12,7 +12,7 @@ header{ top: 0; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; @media (max-width:800px) { - height: 100px; + // height: 100px; width: 800px; } @@ -39,7 +39,7 @@ header{ object-fit: contain; } @media (max-width:891px) { - width: 10%; + // width: 10%; padding-left: 1rem; } @@ -69,7 +69,7 @@ header{ flex-direction: column; height: fit-content; @media (max-width:891px) { - width: 10%; + // width: 10%; padding-left: 1rem; }