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

modifs header sticky

This commit is contained in:
Valentin 2024-04-10 12:37:31 +02:00
parent 440134ae68
commit 1b9e835792
4 changed files with 92 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
web/themes/erabletheme/css/styles.css
View File

@ -46,13 +46,18 @@ a {
text-decoration: none; text-decoration: none;
} }
main[role=main] { /* main[role="main"] {
margin-top: 10vh; margin-top: 10vh;
@media (min-width: $breakpoint_desktop) {
margin-top: calc(10vh + 3rem);
}
} */
body {
overflow-x: hidden;
} }
@media (min-width: 1080px) {
main[role=main] { .layout-container {
margin-top: calc(10vh + 3rem); margin: 0 !important;
}
} }
strong { strong {
@ -77,21 +82,16 @@ body.toolbar-fixed header[role=banner] {
top: 2.4em !important; top: 2.4em !important;
} }
.layout-container {
width: 100%;
overflow: hidden;
}
.layout-container header[role=banner] { .layout-container header[role=banner] {
width: 100%; width: 100%;
background: white; background: white;
position: fixed;
top: 0;
left: 0;
z-index: 99; z-index: 99;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
} }
@media (min-width: 1080px) { @media (min-width: 1080px) {
.layout-container header[role=banner] { .layout-container header[role=banner] {
position: sticky;
top: -12vh;
box-shadow: none; box-shadow: none;
} }
} }
@ -100,7 +100,7 @@ body.toolbar-fixed header[role=banner] {
grid-template-columns: repeat(16, 1fr); grid-template-columns: repeat(16, 1fr);
} }
.layout-container header[role=banner] > div > div { .layout-container header[role=banner] > div > div {
height: 10vh; height: 12vh;
grid-row: 1; grid-row: 1;
max-height: 100%; max-height: 100%;
width: 100%; width: 100%;
@ -112,7 +112,7 @@ body.toolbar-fixed header[role=banner] {
align-items: center; align-items: center;
} }
.layout-container header[role=banner] > div > div > div > div { .layout-container header[role=banner] > div > div > div > div {
height: 10vh; height: 12vh;
} }
.layout-container header[role=banner] > div > div > div > div a { .layout-container header[role=banner] > div > div > div > div a {
display: block; display: block;
@ -131,6 +131,10 @@ body.toolbar-fixed header[role=banner] {
.layout-container header[role=banner] > div #block-erabletheme-logorep-2 { .layout-container header[role=banner] > div #block-erabletheme-logorep-2 {
grid-column: 1/5; grid-column: 1/5;
} }
.layout-container header[role=banner] > div #block-erabletheme-logorep-2 img {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
}
@media (min-width: 760px) { @media (min-width: 760px) {
.layout-container header[role=banner] > div #block-erabletheme-logorep-2 { .layout-container header[role=banner] > div #block-erabletheme-logorep-2 {
grid-column: 0/4; grid-column: 0/4;
@ -142,23 +146,38 @@ body.toolbar-fixed header[role=banner] {
} }
} }
.layout-container header[role=banner] > div #block-erabletheme-logoepau-2 { .layout-container header[role=banner] > div #block-erabletheme-logoepau-2 {
grid-column: 5/10; grid-column: 5/9;
}
.layout-container header[role=banner] > div #block-erabletheme-logoepau-2 > div {
align-items: flex-start;
justify-content: flex-start;
}
.layout-container header[role=banner] > div #block-erabletheme-logoepau-2 > div > div > a > img {
transform: translateX(-20px);
padding-top: 1.2rem;
padding-bottom: 1.2rem;
} }
@media (min-width: 760px) { @media (min-width: 760px) {
.layout-container header[role=banner] > div #block-erabletheme-logoepau-2 { .layout-container header[role=banner] > div #block-erabletheme-logoepau-2 {
grid-column: 4/7; grid-column: 4/7;
} }
.layout-container header[role=banner] > div #block-erabletheme-logoepau-2 > div > div > a > img {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
} }
@media (min-width: 1080px) { @media (min-width: 1080px) {
.layout-container header[role=banner] > div #block-erabletheme-logoepau-2 { .layout-container header[role=banner] > div #block-erabletheme-logoepau-2 {
grid-column: 3/6; grid-column: 3/6;
} }
.layout-container header[role=banner] > div #block-erabletheme-logoepau-2 img { .layout-container header[role=banner] > div #block-erabletheme-logoepau-2 > div > div > a > img {
padding: 0 1rem; transform: translateX(-40px);
padding-top: 30px;
padding-bottom: 30px;
} }
} }
.layout-container header[role=banner] > div #block-erabletheme-logoerable { .layout-container header[role=banner] > div #block-erabletheme-logoerable {
grid-column: 11/15; grid-column: 10/15;
} }
@media (min-width: 1080px) { @media (min-width: 1080px) {
.layout-container header[role=banner] > div #block-erabletheme-logoerable { .layout-container header[role=banner] > div #block-erabletheme-logoerable {
@ -166,7 +185,9 @@ body.toolbar-fixed header[role=banner] {
} }
} }
.layout-container header[role=banner] > div #block-erabletheme-logoerable img { .layout-container header[role=banner] > div #block-erabletheme-logoerable img {
padding: 0 1.5rem; padding-right: 1rem;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
} }
.layout-container header[role=banner] > div #block-erabletheme-socialmedialinks { .layout-container header[role=banner] > div #block-erabletheme-socialmedialinks {
display: none; display: none;
@ -181,7 +202,7 @@ body.toolbar-fixed header[role=banner] {
} }
.layout-container header[role=banner] > div #block-erabletheme-header #hamburger { .layout-container header[role=banner] > div #block-erabletheme-header #hamburger {
cursor: pointer; cursor: pointer;
width: 100%; width: auto;
height: 100%; height: 100%;
background-color: #00ff80; background-color: #00ff80;
display: flex; display: flex;
@ -222,16 +243,14 @@ body.toolbar-fixed header[role=banner] {
transform: translate(0rem, -0.5rem) rotate(45deg); transform: translate(0rem, -0.5rem) rotate(45deg);
} }
.layout-container header[role=banner] > div #block-erabletheme-header ul:not(.social-media-links--platforms) { .layout-container header[role=banner] > div #block-erabletheme-header ul:not(.social-media-links--platforms) {
position: absolute;
z-index: -1;
display: none; display: none;
height: auto; height: auto;
max-height: 0vh; max-height: 0vh;
transition: max-height 0.9s ease, padding 0.5s ease-out; transition: max-height 0.9s ease, padding 0.5s ease-out;
position: fixed;
background-color: #314e41; background-color: #314e41;
top: 10vh;
left: 0;
width: 100vw; width: 100vw;
z-index: 0;
padding: 0; padding: 0;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
@ -320,12 +339,8 @@ body.toolbar-fixed header[role=banner] {
margin-top: 0 !important; margin-top: 0 !important;
} }
.layout-container #block-erabletheme-navigationprincipale { .layout-container #block-erabletheme-navigationprincipale {
position: fixed; width: 100vw;
width: 100%;
margin-top: 10vh;
display: none; display: none;
grid-column: 1/17;
grid-row: 2;
background-color: white; background-color: white;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
} }

2
web/themes/erabletheme/css/styles.css.map
View File

File diff suppressed because one or more lines are too long

10
web/themes/erabletheme/scss/global/_global.scss
View File

@ -1,9 +1,17 @@
main[role="main"] { /* main[role="main"] {
margin-top: 10vh; margin-top: 10vh;
@media (min-width: $breakpoint_desktop) { @media (min-width: $breakpoint_desktop) {
margin-top: calc(10vh + 3rem); margin-top: calc(10vh + 3rem);
} }
} */
body {
overflow-x: hidden;
}
.layout-container {
margin: 0 !important;
} }
strong { strong {

60
web/themes/erabletheme/scss/partials/_header.scss
View File

@ -9,24 +9,23 @@ body.toolbar-fixed header[role="banner"] {
} }
.layout-container { .layout-container {
width: 100%; //max-width: 100vw;
overflow: hidden; //overflow: hidden;
header[role="banner"] { header[role="banner"] {
width: 100%; width: 100%;
background: white; background: white;
position: fixed; z-index: 99;
top: 0;
left: 0;
z-index: 99;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
@media (min-width: $breakpoint_desktop) { @media (min-width: $breakpoint_desktop) {
position: sticky;
top: -12vh;
box-shadow: none; box-shadow: none;
} }
> div { > div {
display: grid; display: grid;
grid-template-columns: repeat(16, 1fr); grid-template-columns: repeat(16, 1fr);
> div{ > div{
height: 10vh; height: 12vh;
grid-row: 1; grid-row: 1;
max-height: 100%; max-height: 100%;
width: 100%; width: 100%;
@ -36,7 +35,7 @@ body.toolbar-fixed header[role="banner"] {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
> div { > div {
height: 10vh; height: 12vh;
a { a {
display: block; display: block;
height: 100%; height: 100%;
@ -55,6 +54,10 @@ body.toolbar-fixed header[role="banner"] {
} }
} }
#block-erabletheme-logorep-2 { #block-erabletheme-logorep-2 {
img {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
}
grid-column: 1 / 5; grid-column: 1 / 5;
@media (min-width: $breakpoint_tablet) { @media (min-width: $breakpoint_tablet) {
grid-column: 0 / 4; grid-column: 0 / 4;
@ -64,24 +67,41 @@ body.toolbar-fixed header[role="banner"] {
} }
} }
#block-erabletheme-logoepau-2 { #block-erabletheme-logoepau-2 {
grid-column: 5 / 10; grid-column: 5 / 9;
> div {
align-items: flex-start;
justify-content: flex-start;
> div > a > img {
transform: translateX(-20px);
padding-top: 1.2rem;
padding-bottom: 1.2rem;
}
}
@media (min-width: $breakpoint_tablet) { @media (min-width: $breakpoint_tablet) {
grid-column: 4 / 7; grid-column: 4 / 7;
> div > div > a > img {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
} }
@media (min-width: $breakpoint_desktop) { @media (min-width: $breakpoint_desktop) {
grid-column: 3 / 6; grid-column: 3 / 6;
img { > div > div > a > img {
padding: 0 1rem; transform: translateX(-40px);
padding-top: 30px;
padding-bottom: 30px;
} }
} }
} }
#block-erabletheme-logoerable { #block-erabletheme-logoerable {
grid-column: 11 / 15; grid-column: 10 / 15;
@media (min-width: $breakpoint_desktop) { @media (min-width: $breakpoint_desktop) {
grid-column: 14 / 16; grid-column: 14 / 16;
} }
img { img {
padding: 0 1.5rem; padding-right: 1rem;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
} }
} }
#block-erabletheme-socialmedialinks { #block-erabletheme-socialmedialinks {
@ -94,7 +114,7 @@ body.toolbar-fixed header[role="banner"] {
} }
#hamburger { #hamburger {
cursor: pointer; cursor: pointer;
width: 100%; width: auto;
height: 100%; height: 100%;
background-color: $fluo_green; background-color: $fluo_green;
display: flex; display: flex;
@ -137,16 +157,14 @@ body.toolbar-fixed header[role="banner"] {
} }
} }
ul:not(.social-media-links--platforms) { ul:not(.social-media-links--platforms) {
position: absolute;
z-index: -1;
display: none; display: none;
height: auto; height: auto;
max-height: 0vh; max-height: 0vh;
transition: max-height 0.9s ease, padding 0.5s ease-out; transition: max-height 0.9s ease, padding 0.5s ease-out;
position: fixed;
background-color: $dark_green; background-color: $dark_green;
top: 10vh;
left: 0;
width: 100vw; width: 100vw;
z-index: 0;
padding: 0; padding: 0;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
@ -236,12 +254,8 @@ body.toolbar-fixed header[role="banner"] {
} }
} }
#block-erabletheme-navigationprincipale { #block-erabletheme-navigationprincipale {
position: fixed; width: 100vw;
width: 100%;
margin-top: 10vh;
display: none; display: none;
grid-column: 1 / 17;
grid-row: 2;
background-color: white; background-color: white;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
@media (min-width: $breakpoint_desktop) { @media (min-width: $breakpoint_desktop) {