new header css

This commit is contained in:
2025-09-22 15:07:45 +02:00
parent dbccbadbfb
commit 4db57ba2dc
5 changed files with 327 additions and 251 deletions
-1
View File
@@ -10,7 +10,6 @@
* @see index.php
* @see core/install.php
* @see core/rebuild.php
* @see core/modules/statistics/statistics.php
*/
return require __DIR__ . '/../vendor/autoload.php';
+141 -108
View File
@@ -6285,20 +6285,16 @@ body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefiel
box-shadow: 1px 0px 8px rgb(0, 0, 0);
display: flex;
flex-direction: row;
justify-content: space-between;
color: rgb(0, 0, 0);
top: 0%;
scroll-margin: 8rem;
}
#header-top .region-header-top-left {
width: 80vw;
display: flex;
flex-direction: row;
padding: 1rem;
padding-left: 4%;
align-items: center;
color: rgb(0, 0, 0);
font-weight: 800;
flex: 1;
}
#header-top .region-header-top-left #block-logogouv {
@@ -6307,7 +6303,7 @@ body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefiel
align-items: center;
}
#header-top .region-header-top-left #block-logogouv img {
width: 80%;
width: 100%;
height: auto;
}
#header-top .region-header-top-left #block-logoeql {
@@ -6316,73 +6312,93 @@ body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefiel
align-items: center;
}
#header-top .region-header-top-left #block-logoeql img {
width: 80%;
width: 100%;
height: auto;
}
#header-top .region-header-top-left #block-headermenu {
align-self: baseline;
width: 70%;
margin-left: 3rem;
margin-right: 3rem;
}
#header-top .region-header-top-left ul {
font-size: 1rem;
list-style: none;
#header-top .region-header-top-rigth {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
padding-inline-start: 0px;
padding: 1rem;
width: 40%;
align-items: center;
}
#header-top .region-header-top-left ul .is-active {
#header-top .region-header-top-rigth #block-eql-identitedusite {
text-transform: uppercase;
font-family: "Source Code Pro";
color: rgb(9, 57, 139) !important;
font-size: 1.2rem;
}
#header-top .region-header-top-rigth #block-eql-identitedusite :visited {
color: rgb(9, 57, 139) !important;
}
#header-top .region-header-top-rigth #block-eql-identitedusite :link {
color: rgb(9, 57, 139) !important;
}
#header-top .region-header-top-rigth #block-logoeql {
padding-left: 1rem;
padding-right: 2.5rem;
}
#header-top .region-header-top-rigth #block-logoeql img {
width: 80px;
height: auto;
}
#header-top .region-header-top-rigth #block-burger {
z-index: 1;
background-color: rgb(0, 158, 227);
font-size: 0.7rem;
color: black;
display: block;
width: 7rem;
height: 100%;
margin-top: 0;
aspect-ratio: 1;
}
#header-top .region-header-top-rigth #block-burger :hover {
cursor: pointer;
}
#header-top .region-header-top-rigth #block-burger h2 {
padding-top: 1rem;
font-size: 1em;
font-weight: light;
color: rgb(0, 158, 227);
}
#header-top .region-header-top-left ul ul {
position: absolute;
left: -28%;
z-index: 1000;
display: flex;
flex-direction: column;
min-width: 210px;
width: fit-content;
justify-content: space-between;
padding-inline-start: 0px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
#header-top .region-header-top-rigth #block-burger h2:after {
display: block;
margin: auto;
height: 70px;
content: url('data:image/svg+xml,<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 5,13 H 65" stroke-linecap="round" stroke="black" stroke-width="2.5"/><path id="path930-3" d="M 5,25 H 65" stroke-linecap="round" stroke="black" stroke-width="2.5"/><path id="path930-6" d="M 5,37 H 65" stroke-linecap="round" stroke="black" stroke-width="2.5"/></svg>');
}
#header-top .region-header-top-left ul ul .is-active {
color: rgb(0, 158, 227);
#header-top .region-header-top-rigth #block-burger #block-burger-menu {
display: block;
margin: 0;
align-self: center;
text-align: center;
}
#header-top .region-header-top-left ul li {
#header-top .region-header-top-rigth #block-burger .ul1:not(.sous-liste) {
width: 300%;
position: relative;
display: flex;
flex-direction: column;
background-color: rgb(255, 255, 255);
padding-bottom: 0.8rem;
max-width: inherit;
padding-left: 1rem;
padding-right: 0.5rem;
height: fit-content;
right: 260px;
margin: 0;
padding-top: 2rem;
padding-bottom: 2rem;
z-index: 99;
}
#header-top .region-header-top-left ul li a {
color: rgb(0, 0, 0);
#header-top .region-header-top-rigth #block-burger ul {
display: none;
background-color: rgb(0, 158, 227);
line-height: 2rem;
list-style: none;
}
#header-top .region-header-top-left ul li .is-active {
color: rgb(0, 158, 227);
}
#header-top .region-header-top-left ul li :hover {
color: rgb(0, 158, 227);
}
#header-top .region-header-top-left ul li:hover ul {
#header-top .region-header-top-rigth #block-burger ul .ul1 .sous-liste a {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
#header-top .region-header-top-left ul .ul1.sous-liste.ul2 {
padding-left: 1rem;
#header-top .region-header-top-rigth #block-burger ul a {
opacity: 1;
color: rgb(255, 255, 255);
font-weight: 800;
font-size: 1rem;
}
#header-top .region-header-top-rigth #block-burger.opened ul {
display: block;
}
#header-top #block-socialnetwork-2 {
display: none;
@@ -6445,60 +6461,77 @@ body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefiel
min-width: 35px;
padding-bottom: 0.2rem;
}
#header-top #block-burger {
z-index: 1;
background-color: rgb(0, 158, 227);
font-size: 0.7rem;
color: rgb(255, 255, 255);
display: block;
width: 7rem;
height: 100%;
margin-top: 0;
.region-header-bottom {
box-shadow: 0 4px 4px 3px rgba(0, 0, 0, 0.1);
}
#header-top #block-burger :hover {
cursor: pointer;
.region-header-bottom #block-headermenu {
align-self: baseline;
width: 100%;
background-color: white;
border-top: solid rgb(0, 158, 227) 1px;
}
#header-top #block-burger h2 {
padding-top: 1rem;
}
#header-top #block-burger h2:after {
display: block;
margin: auto;
height: 70px;
content: url('data:image/svg+xml,<svg width="70" height="50" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 5,13 H 65" stroke-linecap="round" stroke="white" stroke-width="3"/><path id="path930-3" d="M 5,25 H 65" stroke-linecap="round" stroke="white" stroke-width="3"/><path id="path930-6" d="M 5,37 H 65" stroke-linecap="round" stroke="white" stroke-width="3"/></svg>');
}
#header-top #block-burger #block-burger-menu {
display: block;
margin: 0;
align-self: center;
text-align: center;
}
#header-top #block-burger .ul1:not(.sous-liste) {
width: 300%;
position: relative;
right: 260px;
margin: 0;
padding-top: 2rem;
padding-bottom: 2rem;
z-index: 99;
}
#header-top #block-burger ul {
display: none;
background-color: rgb(0, 158, 227);
line-height: 2rem;
list-style: none;
}
#header-top #block-burger ul .ul1 .sous-liste a {
opacity: 1;
}
#header-top #block-burger ul a {
opacity: 1;
color: rgb(255, 255, 255);
font-weight: 800;
.region-header-bottom ul {
font-size: 1rem;
font-weight: 900;
list-style: none;
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 100%;
padding-inline-start: 0px;
padding: 1rem;
margin-top: 0 !important;
padding-bottom: 0.5rem;
}
#header-top #block-burger.opened ul {
display: block;
.region-header-bottom ul .is-active {
color: rgb(0, 158, 227);
}
.region-header-bottom ul ul {
position: absolute;
left: -28%;
z-index: 1000;
display: flex;
flex-direction: column;
min-width: 210px;
width: fit-content;
justify-content: space-between;
padding-inline-start: 0px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.region-header-bottom ul ul .is-active {
color: rgb(0, 158, 227);
}
.region-header-bottom ul li {
position: relative;
display: flex;
flex-direction: column;
background-color: rgb(255, 255, 255);
padding-bottom: 0.8rem;
max-width: inherit;
padding-left: 1rem;
padding-right: 0.5rem;
height: fit-content;
}
.region-header-bottom ul li a {
color: rgb(0, 0, 0);
}
.region-header-bottom ul li .is-active {
color: rgb(0, 158, 227);
}
.region-header-bottom ul li :hover {
color: rgb(0, 158, 227);
}
.region-header-bottom ul li:hover ul {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.region-header-bottom ul .ul1.sous-liste.ul2 {
padding-left: 1rem;
}
#fotter-bottom {
Binary file not shown.

After

Width:  |  Height:  |  Size: 809 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

+186 -142
View File
@@ -16,33 +16,29 @@
box-shadow: 1px 0px 8px $black;
display: flex;
flex-direction: row;
justify-content: space-between;
// justify-content: space-between;
color: $black;
top:0%;
scroll-margin: 8rem {};
// logo + menu déroulant
// logo
.region-header-top-left {
width: 80vw;
// width: 80vw;
display:flex;
flex-direction: row;
padding: 1rem;
// padding: 1rem;
padding-left: 4%;
align-items:center;
color: $black;
font-weight: 800;
// font-weight: 800;
flex: 1;
#block-logogouv{
display: flex;
height: 100%;
align-items: center;
img{
width: 80%;
width: 100%;
height: auto;
}
}
@@ -53,83 +49,118 @@
img{
// min-width: 80px;
width: 80%;
width: 100%;
height: auto;
}
}
#block-headermenu{
align-self: baseline;
width: 70%;
margin-left: 3rem;
margin-right: 3rem;
}
ul{
font-size: 1rem;
list-style: none;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
padding-inline-start: 0px;
padding: 1rem;
.is-active{
color:$blue-light;
}
ul{
position: absolute;
left: -28%;
z-index: 1000;
// display: none;
display: flex;
flex-direction: column;
min-width: 210px;
width: fit-content;
justify-content: space-between;
padding-inline-start: 0px;
.is-active{
color:$blue-light;
}
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
li{
position: relative;
display: flex;
flex-direction: column;
background-color: $white;
padding-bottom: 0.8rem;
max-width: inherit;
padding-left: 1rem;
padding-right: 0.5rem;
height: fit-content;
a {
color: $black;
}
.is-active{
color:$blue-light;
}
:hover{
color: $blue-light;
}
}
li:hover ul {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.ul1.sous-liste.ul2{
padding-left: 1rem;
}
}
}
.region-header-top-rigth{
display: flex;
flex-direction: row;
width: 40%;
align-items: center;
#block-eql-identitedusite{
text-transform: uppercase;
font-family: "Source Code Pro";
color: $blue-dark !important;
font-size: 1.2rem;
:visited {
color: $blue-dark !important;
}
:link{
color: $blue-dark !important;
}
}
#block-logoeql{
padding-left: 1rem;
padding-right: 2.5rem;
img{
width: 80px;
height: auto;
}
}
// menu burger à droite
#block-burger {
z-index: 1;
background-color: $blue-light;
font-size: 0.7rem;
color: black;
display: block;
width: 7rem;
height: 100%;
margin-top: 0;
aspect-ratio: 1;
:hover{
cursor: pointer;
}
h2{
padding-top: 1rem;
font-size: 1em;
font-weight: light;
color: $blue-light;
}
h2:after{
display: block;
margin:auto;
height: 70px;
content:url('data:image/svg+xml,<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 5,13 H 65" stroke-linecap="round" stroke="black" stroke-width="2.5"/><path id="path930-3" d="M 5,25 H 65" stroke-linecap="round" stroke="black" stroke-width="2.5"/><path id="path930-6" d="M 5,37 H 65" stroke-linecap="round" stroke="black" stroke-width="2.5"/></svg>');
}
#block-burger-menu{
display: block;
margin: 0;
align-self: center;
text-align: center;
// height:7rem;
}
// block menu open fond bleu
.ul1:not(.sous-liste){
width: 300%;
position: relative;
right: 260px;
margin: 0;
padding-top: 2rem;
padding-bottom: 2rem;
z-index: 99;
}
ul {
display: none;
background-color: $blue-light;
line-height: 2rem;
list-style: none;
.ul1 .sous-liste{
a{
opacity: 1;
}
}
a{
opacity: 1;
color: $white;
font-weight: 800;
font-size: 1rem;
}
}
&.opened ul {
display: block;
}
}
}
// reseaux sociaux
@@ -200,74 +231,87 @@
}
// menu burger à droite
#block-burger {
z-index: 1;
background-color: $blue-light;
font-size: 0.7rem;
color: $white;
display: block;
width: 7rem;
height: 100%;
margin-top: 0;
:hover{
cursor: pointer;
}
h2{
padding-top: 1rem;
}
h2:after{
display: block;
margin:auto;
height: 70px;
content:url('data:image/svg+xml,<svg width="70" height="50" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 5,13 H 65" stroke-linecap="round" stroke="white" stroke-width="3"/><path id="path930-3" d="M 5,25 H 65" stroke-linecap="round" stroke="white" stroke-width="3"/><path id="path930-6" d="M 5,37 H 65" stroke-linecap="round" stroke="white" stroke-width="3"/></svg>');
}
#block-burger-menu{
display: block;
margin: 0;
align-self: center;
text-align: center;
// height:7rem;
}
.region-header-bottom{
box-shadow: 0 4px 4px 3px rgba(0, 0, 0, 0.1);
#block-headermenu{
align-self: baseline;
width: 100%;
// margin-left: 3rem;
// margin-right: 3rem;
background-color: white;
border-top: solid $blue-light 1px;
}
ul{
font-size: 1rem;
font-weight: 900;
list-style: none;
display: flex;
flex-direction: row;
// justify-content: space-between;
justify-content: space-evenly;
width: 100%;
padding-inline-start: 0px;
padding: 1rem;
margin-top: 0 !important;
padding-bottom: 0.5rem;
.is-active{
color:$blue-light;
}
ul{
position: absolute;
left: -28%;
z-index: 1000;
// display: none;
display: flex;
flex-direction: column;
min-width: 210px;
width: fit-content;
justify-content: space-between;
padding-inline-start: 0px;
.is-active{
color:$blue-light;
}
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
// block menu open fond bleu
.ul1:not(.sous-liste){
width: 300%;
li{
position: relative;
right: 260px;
margin: 0;
padding-top: 2rem;
padding-bottom: 2rem;
z-index: 99;
}
ul {
display: none;
background-color: $blue-light;
line-height: 2rem;
list-style: none;
.ul1 .sous-liste{
a{
opacity: 1;
}
display: flex;
flex-direction: column;
background-color: $white;
padding-bottom: 0.8rem;
max-width: inherit;
padding-left: 1rem;
padding-right: 0.5rem;
height: fit-content;
a {
color: $black;
}
a{
opacity: 1;
color: $white;
font-weight: 800;
font-size: 1rem;
.is-active{
color:$blue-light;
}
:hover{
color: $blue-light;
}
}
&.opened ul {
display: block;
li:hover ul {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
.ul1.sous-liste.ul2{
padding-left: 1rem;
}
}
}