agecem/agecem-org
4
1
Fork 0
Code Issues 31 Pull requests 2 Activity

Ajouter responsiveness au header #93

Merged
vlbeaudoin merged 21 commits from feature/responsive-header into main 2023-08-16 13:43:50 -04:00
Conversation 0 Commits 21 Files changed 15 +142 -138
4 changed files with 142 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 689d36f22c - Show all commits

46
public/css/general.css
View file

@ -28,17 +28,23 @@ body{
.heading1 { .heading1 {
font-family: "Poppins"; font-family: "Poppins";
font-weight: 600; /*semi-bold*/ font-weight: 600;
font-size: 3rem; /*48px*/ /*semi-bold*/
color: #394596; /*Bleu AGECEM*/ font-size: 3rem;
/*48px*/
color: #394596;
/*Bleu AGECEM*/
text-align: center; text-align: center;
} }
.heading2 { .heading2 {
font-family: "Poppins"; font-family: "Poppins";
font-weight: 300; /*light*/ font-weight: 300;
font-size: 1rem; /*16px*/ /*light*/
color: #394596; /*Bleu AGECEM*/ font-size: 1rem;
/*16px*/
color: #394596;
/*Bleu AGECEM*/
text-align: center; text-align: center;
} }
@ -50,12 +56,14 @@ body{
} }
.heading1 { .heading1 {
font-size: 4rem; /*64px*/ font-size: 4rem;
/*64px*/
text-align: center; text-align: center;
} }
.heading2 { .heading2 {
font-size: 1.5rem; /*24px*/ font-size: 1.5rem;
/*24px*/
text-align: center; text-align: center;
} }
@ -69,29 +77,15 @@ body{
} }
.heading1 { .heading1 {
font-size: 4rem; /*64px*/ font-size: 4rem;
/*64px*/
text-align: center; text-align: center;
} }
.heading2 { .heading2 {
font-size: 1.5rem; /*24px*/ font-size: 1.5rem;
/*24px*/
text-align: center; text-align: center;
} }
} }
/*Utilisation du css Layout Grid pour faire le wrapper*/
.grid-wrapper {
display: grid;
grid-template-columns: auto minmax(375px, 1440px) auto;
grid-column-gap: 30px;
}
.grid-center {
grid-column: 2/3;
}

34
public/css/header.css
View file

@ -28,9 +28,12 @@ a:visited{
.headerMenu { .headerMenu {
background-color: #fff; background-color: #fff;
font-family: "Poppins"; font-family: "Poppins";
font-weight: 400; /*regular*/ font-weight: 400;
font-size: 1.25rem; /*20px*/ /*regular*/
color: #000; /*Noir pur*/ font-size: 1.25rem;
/*20px*/
color: #000;
/*Noir pur*/
list-style: none; list-style: none;
font-style: none; font-style: none;
display: none; display: none;
@ -42,7 +45,8 @@ a:visited{
} }
.headerMenuElement:hover { .headerMenuElement:hover {
border-bottom: 5px #FF563C solid; /*Orange Highlight*/ border-bottom: 5px #FF563C solid;
/*Orange Highlight*/
cursor: pointer; cursor: pointer;
padding-bottom: 0; padding-bottom: 0;
} }
@ -57,9 +61,12 @@ a:visited{
.headerMenuMobile { .headerMenuMobile {
font-family: "Poppins"; font-family: "Poppins";
font-weight: 400; /*regular*/ font-weight: 400;
font-size: 1.25rem; /*20px*/ /*regular*/
color: #000; /*Noir pur*/ font-size: 1.25rem;
/*20px*/
color: #000;
/*Noir pur*/
list-style: none; list-style: none;
font-style: none; font-style: none;
display: none; display: none;
@ -67,7 +74,8 @@ a:visited{
.nav-is-active { .nav-is-active {
background-color: #fff; background-color: #fff;
font-size: 2rem; /*32px*/ font-size: 2rem;
/*32px*/
display: flex; display: flex;
flex-flow: column; flex-flow: column;
justify-content: space-around; justify-content: space-around;
@ -88,11 +96,14 @@ padding-bottom: 200px;
.headerMenu { .headerMenu {
display: none; display: none;
} }
.headerMenuHamburger { .headerMenuHamburger {
display: block; display: block;
} }
.nav-is-active { .nav-is-active {
font-size: 3rem; /*48px*/ font-size: 3rem;
/*48px*/
padding-top: 100px; padding-top: 100px;
padding-bottom: 100px; padding-bottom: 100px;
} }
@ -106,13 +117,12 @@ padding-bottom: 200px;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
} }
.headerMenuHamburger { .headerMenuHamburger {
display: none; display: none;
} }
.nav-is-active { .nav-is-active {
display: none; display: none;
} }
} }