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

modifs header sticky

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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