Victor Lacasse-Beaudoin
076bb1a90c
Si on suit les considérations du domain-driven design, le fait qu'on réfère toustes à cette partie du code comme `le frontend` me pousse à renommer le package pour mieux réflèter notre utilisation. Ça devrait rendre plus évident où les fichiers sources du frontend sont situés.
105 lines
No EOL
1.8 KiB
CSS
105 lines
No EOL
1.8 KiB
CSS
.header {
|
|
position: fixed;
|
|
z-index: 20;
|
|
width: 100%;
|
|
top: 0;
|
|
background-color: #fff;
|
|
height: 60px;
|
|
}
|
|
|
|
.headerWrapper {
|
|
display: flex;
|
|
flex-flow: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 5px;
|
|
}
|
|
|
|
.headerMenuElementLink {
|
|
color: #000;
|
|
}
|
|
|
|
.headerMenuElementLink:visited {
|
|
color: #000;
|
|
}
|
|
|
|
.headerMenu {
|
|
background-color: #fff;
|
|
font-family: "Poppins";
|
|
font-weight: 400;
|
|
/*regular*/
|
|
font-size: 1.25rem;
|
|
/*20px*/
|
|
list-style: none;
|
|
display: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.headerMenuElement {
|
|
padding-bottom: 5px;
|
|
margin: 0;
|
|
}
|
|
|
|
.headerMenuElement:hover {
|
|
border-bottom: 5px #FF563C solid;
|
|
/*Orange Highlight*/
|
|
cursor: pointer;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.headerMenuHamburger {
|
|
height: 50px;
|
|
width: 50px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.headerMenuMobile {
|
|
font-family: "Poppins";
|
|
font-weight: 400;
|
|
/*regular*/
|
|
font-size: 2rem;
|
|
/*32px*/
|
|
list-style: none;
|
|
display: none;
|
|
}
|
|
|
|
.nav-is-active {
|
|
background-color: #fff;
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: left;
|
|
position: fixed;
|
|
top: 75px;
|
|
width: 100%;
|
|
height: 90%;
|
|
margin: 0;
|
|
padding: auto;
|
|
}
|
|
|
|
/* Le header s'affiche en menu hamburger pour les breakpoints téléphone et tablette */
|
|
@media screen and (min-width: 778px) {
|
|
.nav-is-active {
|
|
font-size: 2rem;
|
|
/*32px*/
|
|
}
|
|
}
|
|
|
|
/* Les éléments du header s'affichent pour le breakpoint ordinateur */
|
|
@media screen and (min-width: 1140px) {
|
|
.headerMenu {
|
|
display: flex;
|
|
flex-flow: row;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
|
|
.headerMenuHamburger {
|
|
display: none;
|
|
}
|
|
|
|
.nav-is-active {
|
|
display: none;
|
|
}
|
|
} |