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

mobile header & home

Browse Source
This commit is contained in:
ouidade
2023-11-30 12:09:55 +01:00
parent 8b58828e87
commit f7802735cc
3 changed files with 103 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/reha/css/reha.css
+44 -6
View File
@@ -208,7 +208,6 @@ header {
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
@media (max-width: 800px) { @media (max-width: 800px) {
header { header {
height: 100px;
width: 800px; } } width: 800px; } }
header .region-header { header .region-header {
display: inline-grid; display: inline-grid;
@@ -230,7 +229,6 @@ header {
object-fit: contain; } object-fit: contain; }
@media (max-width: 891px) { @media (max-width: 891px) {
header .region-header #block-reha-logoministere { header .region-header #block-reha-logoministere {
width: 10%;
padding-left: 1rem; } } padding-left: 1rem; } }
header .region-header #block-reha-logoreha { header .region-header #block-reha-logoreha {
display: none; display: none;
@@ -251,7 +249,6 @@ header {
height: fit-content; } height: fit-content; }
@media (max-width: 891px) { @media (max-width: 891px) {
header .region-header #block-reha-connexionutilisateur { header .region-header #block-reha-connexionutilisateur {
width: 10%;
padding-left: 1rem; } } padding-left: 1rem; } }
header .region-header #block-reha-connexionutilisateur .bouton-connexion { header .region-header #block-reha-connexionutilisateur .bouton-connexion {
padding-right: 3rem; } padding-right: 3rem; }
@@ -476,20 +473,57 @@ footer {
footer div { footer div {
display: flex; display: flex;
flex-direction: row; } flex-direction: row; }
@media (max-width: 891px) {
footer div {
flex-wrap: wrap; } }
@media (max-width: 520px) {
footer div {
flex-direction: column; } }
footer h2 { footer h2 {
font-size: 1.3rem; } font-size: 1.3rem; }
footer section:not(:first-of-type) { footer section:not(:first-of-type) {
border-left: #fdc300 solid 5px; border-left: #fdc300 solid 5px;
padding-left: 2rem; } 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) { footer section:not(:last-of-type) {
padding-right: 5rem; } 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 { #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 { #footer-left div {
display: flex; display: flex;
flex-direction: column; flex-direction: column; }
padding-right: 2rem; }
#footer-left div #block-reha-pieddepage ul { #footer-left div #block-reha-pieddepage ul {
padding-left: 0; } padding-left: 0; }
#footer-left div #block-reha-logoreha-3 { #footer-left div #block-reha-logoreha-3 {
@@ -500,6 +534,10 @@ footer {
#footer-left div .social-media-links--platforms svg.ext { #footer-left div .social-media-links--platforms svg.ext {
display: none; } display: none; }
@media (max-width: 891px) {
#footer-middle {
width: 40%; } }
#footer-middle #block-reha-operateurduprogramme { #footer-middle #block-reha-operateurduprogramme {
display: flex; display: flex;
flex-direction: column; } flex-direction: column; }
web/themes/custom/reha/scss/partials/_footer.scss
+56 -2
View File
@@ -8,6 +8,13 @@ footer{
div{ div{
display: flex; display: flex;
flex-direction: row; 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;} h2{font-size: 1.3rem;}
@@ -16,18 +23,62 @@ footer{
section:not(:first-of-type){ section:not(:first-of-type){
border-left: $yellow-puca solid 5px; border-left: $yellow-puca solid 5px;
padding-left: 2rem; 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){ section:not(:last-of-type){
padding-right: 5rem; 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 { #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{ div{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-right: 2rem; // padding-right: 2rem;
// @media(max-width: 891px){
// padding-right: 0;
// }
#block-reha-pieddepage { #block-reha-pieddepage {
ul{ ul{
padding-left: 0; padding-left: 0;
@@ -47,6 +98,9 @@ margin-left: 10rem;
} }
#footer-middle{ #footer-middle{
@media(max-width: 891px){
width: 40%;
}
#block-reha-operateurduprogramme{ #block-reha-operateurduprogramme{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
web/themes/custom/reha/scss/partials/_header.scss
+3 -3
View File
@@ -12,7 +12,7 @@ header{
top: 0; top: 0;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
@media (max-width:800px) { @media (max-width:800px) {
height: 100px; // height: 100px;
width: 800px; width: 800px;
} }
@@ -39,7 +39,7 @@ header{
object-fit: contain; object-fit: contain;
} }
@media (max-width:891px) { @media (max-width:891px) {
width: 10%; // width: 10%;
padding-left: 1rem; padding-left: 1rem;
} }
@@ -69,7 +69,7 @@ header{
flex-direction: column; flex-direction: column;
height: fit-content; height: fit-content;
@media (max-width:891px) { @media (max-width:891px) {
width: 10%; // width: 10%;
padding-left: 1rem; padding-left: 1rem;
} }