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

100
public/css/fonts.css
View file

@ -1,109 +1,109 @@
@font-face {
font-family: "Poppins";
src: url('/public/fonts/Poppins/poppins-thin.woff2') format('woff2'),
url('/public/fonts/Poppins/poppins-thin.woff') format('woff'),
url('/public/fonts/Poppins/poppins-thin.otf') format('otf');
url('/public/fonts/Poppins/poppins-thin.woff') format('woff'),
url('/public/fonts/Poppins/poppins-thin.otf') format('otf');
font-weight: 100;
font-style: normal;
}
}
@font-face {
font-family: "Poppins";
src: url('/public/fonts/Poppins/poppins-thin-italic.woff2') format('woff2'),
url('/public/fonts/Poppins/poppins-thin-italic.woff') format('woff'),
url('/public/fonts/Poppins/poppins-thin-italic.otf') format('otf');
url('/public/fonts/Poppins/poppins-thin-italic.woff') format('woff'),
url('/public/fonts/Poppins/poppins-thin-italic.otf') format('otf');
font-weight: 100;
font-style: italic;
}
}
@font-face {
font-family: "Poppins";
src: url('/public/fonts/Poppins/poppins-extralight.woff2') format('woff2'),
url('/public/fonts/Poppins/poppins-extralight.woff') format('woff'),
url('/public/fonts/Poppins/poppins-extralight.otf') format('otf');
url('/public/fonts/Poppins/poppins-extralight.woff') format('woff'),
url('/public/fonts/Poppins/poppins-extralight.otf') format('otf');
font-weight: 200;
font-style: normal;
}
}
@font-face {
font-family: "Poppins";
src: url('/public/fonts/Poppins/poppins-extralight-italic.woff2') format('woff2'),
url('/public/fonts/Poppins/poppins-extralight-italic.woff') format('woff'),
url('/public/fonts/Poppins/poppins-extralight-italic.otf') format('otf');
url('/public/fonts/Poppins/poppins-extralight-italic.woff') format('woff'),
url('/public/fonts/Poppins/poppins-extralight-italic.otf') format('otf');
font-weight: 200;
font-style: italic;
}
}
@font-face {
font-family: "Poppins";
src: url('/public/fonts/Poppins/poppins-light.woff2') format('woff2'),
url('/public/fonts/Poppins/poppins-light.woff') format('woff'),
url('/public/fonts/Poppins/poppins-light.otf') format('otf');
url('/public/fonts/Poppins/poppins-light.woff') format('woff'),
url('/public/fonts/Poppins/poppins-light.otf') format('otf');
font-weight: 300;
font-style: normal;
}
}
@font-face {
font-family: "Poppins";
src: url('/public/fonts/Poppins/poppins-light-italic.woff2') format('woff2'),
url('/public/fonts/Poppins/poppins-light-italic.woff') format('woff'),
url('/public/fonts/Poppins/poppins-light-italic.otf') format('otf');
url('/public/fonts/Poppins/poppins-light-italic.woff') format('woff'),
url('/public/fonts/Poppins/poppins-light-italic.otf') format('otf');
font-weight: 300;
font-style: italic;
}
}
@font-face {
font-family: "Poppins";
src: url('/public/fonts/Poppins/poppins-regular.woff2') format('woff2'),
url('/public/fonts/Poppins/poppins-regular.woff') format('woff'),
url('/public/fonts/Poppins/poppins-regular.otf') format('otf');
url('/public/fonts/Poppins/poppins-regular.woff') format('woff'),
url('/public/fonts/Poppins/poppins-regular.otf') format('otf');
font-weight: 400;
font-style: normal;
}
}
@font-face {
font-family: "Poppins";
src: url('/public/fonts/Poppins/poppins-regular-italic.woff2') format('woff2'),
url('/public/fonts/Poppins/poppins-regular-italic.woff') format('woff'),
url('/public/fonts/Poppins/poppins-regular-italic.otf') format('otf');
url('/public/fonts/Poppins/poppins-regular-italic.woff') format('woff'),
url('/public/fonts/Poppins/poppins-regular-italic.otf') format('otf');
font-weight: 400;
font-style: italic;
}
}
@font-face {
font-family: "Poppins";
src: url('/public/fonts/Poppins/poppins-medium.woff2') format('woff2'),
url('/public/fonts/Poppins/poppins-medium.woff') format('woff'),
url('/public/fonts/Poppins/poppins-medium.otf') format('otf');
url('/public/fonts/Poppins/poppins-medium.woff') format('woff'),
url('/public/fonts/Poppins/poppins-medium.otf') format('otf');
font-weight: 500;
font-style: normal;
}
}
@font-face {
font-family: "Poppins";
src: url('/public/fonts/Poppins/poppins-medium-italic.woff2') format('woff2'),
url('/public/fonts/Poppins/poppins-medium-italic.woff') format('woff'),
url('/public/fonts/Poppins/poppins-medium-italic.otf') format('otf');
url('/public/fonts/Poppins/poppins-medium-italic.woff') format('woff'),
url('/public/fonts/Poppins/poppins-medium-italic.otf') format('otf');
font-weight: 500;
font-style: italic;
}
}
@font-face {
font-family: "Poppins";
src: url('/public/fonts/Poppins/poppins-semibold.woff2') format('woff2'),
url('/public/fonts/Poppins/poppins-semibold.woff') format('woff'),
url('/public/fonts/Poppins/poppins-semibold.otf') format('otf');
url('/public/fonts/Poppins/poppins-semibold.woff') format('woff'),
url('/public/fonts/Poppins/poppins-semibold.otf') format('otf');
font-weight: 600;
font-style: normal;
}
}
@font-face {
font-family: "Poppins";
src: url('/public/fonts/Poppins/poppins-semibold-italic.woff2') format('woff2'),
url('/public/fonts/Poppins/poppins-semibold-italic.woff') format('woff'),
url('/public/fonts/Poppins/poppins-semibold-italic.otf') format('otf');
url('/public/fonts/Poppins/poppins-semibold-italic.woff') format('woff'),
url('/public/fonts/Poppins/poppins-semibold-italic.otf') format('otf');
font-weight: 600;
font-style: italic;
@ -112,8 +112,8 @@
@font-face {
font-family: "Poppins";
src: url('/public/fonts/Poppins/poppins-bold.woff2') format('woff2'),
url('/public/fonts/Poppins/poppins-bold.woff') format('woff'),
url('/public/fonts/Poppins/poppins-bold.otf') format('otf');
url('/public/fonts/Poppins/poppins-bold.woff') format('woff'),
url('/public/fonts/Poppins/poppins-bold.otf') format('otf');
font-weight: 700;
font-style: normal;
@ -122,8 +122,8 @@
@font-face {
font-family: "Poppins";
src: url('/public/fonts/Poppins/poppins-bold-italic.woff2') format('woff2'),
url('/public/fonts/Poppins/poppins-bold-italic.woff') format('woff'),
url('/public/fonts/Poppins/poppins-bold-italic.otf') format('otf');
url('/public/fonts/Poppins/poppins-bold-italic.woff') format('woff'),
url('/public/fonts/Poppins/poppins-bold-italic.otf') format('otf');
font-weight: 700;
font-style: italic;
@ -132,8 +132,8 @@
@font-face {
font-family: "Poppins";
src: url('/public/fonts/Poppins/poppins-extrabold.woff2') format('woff2'),
url('/public/fonts/Poppins/poppins-extrabold.woff') format('woff'),
url('/public/fonts/Poppins/poppins-extrabold.otf') format('otf');
url('/public/fonts/Poppins/poppins-extrabold.woff') format('woff'),
url('/public/fonts/Poppins/poppins-extrabold.otf') format('otf');
font-weight: 800;
font-style: normal;
@ -143,26 +143,26 @@
@font-face {
font-family: "Poppins";
src: url('/public/fonts/Poppins/poppins-extrabold-italic.woff2') format('woff2'),
url('/public/fonts/Poppins/poppins-extrabold-italic.woff') format('woff'),
url('/public/fonts/Poppins/poppins-extrabold-italic.otf') format('otf');
url('/public/fonts/Poppins/poppins-extrabold-italic.woff') format('woff'),
url('/public/fonts/Poppins/poppins-extrabold-italic.otf') format('otf');
font-weight: 800;
font-style: italic;
}
}
@font-face {
font-family: "Poppins";
src: url('/public/fonts/Poppins/poppins-black.woff2') format('woff2'),
url('/public/fonts/Poppins/poppins-black.woff') format('woff'),
url('/public/fonts/Poppins/poppins-black.otf') format('otf');
url('/public/fonts/Poppins/poppins-black.woff') format('woff'),
url('/public/fonts/Poppins/poppins-black.otf') format('otf');
font-weight: 900;
font-style: normal;
}
}
@font-face {
font-family: "Poppins";
src: url('/public/fonts/Poppins/poppins-black-italic.woff2') format('woff2'),
url('/public/fonts/Poppins/poppins-black-italic.woff') format('woff'),
url('/public/fonts/Poppins/poppins-black-italic.otf') format('otf');
url('/public/fonts/Poppins/poppins-black-italic.woff') format('woff'),
url('/public/fonts/Poppins/poppins-black-italic.otf') format('otf');
font-weight: 900;
font-style: italic;
}
}

54
public/css/general.css
View file

@ -15,7 +15,7 @@ img {
max-width: 100%;
}
body{
body {
margin: 0;
padding-top: 75px;
}
@ -28,34 +28,42 @@ body{
.heading1 {
font-family: "Poppins";
font-weight: 600; /*semi-bold*/
font-size: 3rem; /*48px*/
color: #394596; /*Bleu AGECEM*/
font-weight: 600;
/*semi-bold*/
font-size: 3rem;
/*48px*/
color: #394596;
/*Bleu AGECEM*/
text-align: center;
}
}
.heading2 {
font-family: "Poppins";
font-weight: 300; /*light*/
font-size: 1rem; /*16px*/
color: #394596; /*Bleu AGECEM*/
font-weight: 300;
/*light*/
font-size: 1rem;
/*16px*/
color: #394596;
/*Bleu AGECEM*/
text-align: center;
}
@media screen and (min-width: 768px) {
.wrapper{
.wrapper {
max-width: 768px;
width: calc(100% - var(15px));
}
.heading1 {
font-size: 4rem; /*64px*/
font-size: 4rem;
/*64px*/
text-align: center;
}
.heading2 {
font-size: 1.5rem; /*24px*/
font-size: 1.5rem;
/*24px*/
text-align: center;
}
@ -63,35 +71,21 @@ body{
@media screen and (min-width: 1140px) {
.wrapper{
.wrapper {
max-width: 1140px;
width: calc(100% - var(30px));
}
.heading1 {
font-size: 4rem; /*64px*/
font-size: 4rem;
/*64px*/
text-align: center;
}
.heading2 {
font-size: 1.5rem; /*24px*/
font-size: 1.5rem;
/*24px*/
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;
}

76
public/css/header.css
View file

@ -5,9 +5,9 @@
top: 0;
background-color: #fff;
height: 75px;
}
}
.headerWrapper{
.headerWrapper {
display: flex;
flex-flow: row;
align-items: center;
@ -15,39 +15,43 @@
padding: 5px;
}
a{
a {
color: #000;
text-decoration: none;
}
a:visited{
a:visited {
color: #000;
text-decoration: none;
}
.headerMenu{
.headerMenu {
background-color: #fff;
font-family: "Poppins";
font-weight: 400; /*regular*/
font-size: 1.25rem; /*20px*/
color: #000; /*Noir pur*/
font-weight: 400;
/*regular*/
font-size: 1.25rem;
/*20px*/
color: #000;
/*Noir pur*/
list-style: none;
font-style: none;
display: none;
width: 100%;
}
.headerMenuElement{
.headerMenuElement {
padding-bottom: 5px;
}
.headerMenuElement:hover {
border-bottom: 5px #FF563C solid; /*Orange Highlight*/
border-bottom: 5px #FF563C solid;
/*Orange Highlight*/
cursor: pointer;
padding-bottom: 0;
}
.headerMenuHamburger{
.headerMenuHamburger {
fill: #394596;
height: 50px;
width: 50px;
@ -55,19 +59,23 @@ a:visited{
cursor: pointer;
}
.headerMenuMobile{
.headerMenuMobile {
font-family: "Poppins";
font-weight: 400; /*regular*/
font-size: 1.25rem; /*20px*/
color: #000; /*Noir pur*/
font-weight: 400;
/*regular*/
font-size: 1.25rem;
/*20px*/
color: #000;
/*Noir pur*/
list-style: none;
font-style: none;
display: none;
}
}
.nav-is-active{
.nav-is-active {
background-color: #fff;
font-size: 2rem; /*32px*/
font-size: 2rem;
/*32px*/
display: flex;
flex-flow: column;
justify-content: space-around;
@ -78,41 +86,43 @@ a:visited{
width: 100%;
height: 90%;
margin: 0;
padding-top: 200px;
padding-bottom: 200px;
padding-top: 200px;
padding-bottom: 200px;
}
}
/* Le header s'affiche en menu hamburger pour les breakpoints téléphone et tablette */
/* Le header s'affiche en menu hamburger pour les breakpoints téléphone et tablette */
@media screen and (min-width: 778px) {
.headerMenu{
.headerMenu {
display: none;
}
.headerMenuHamburger{
.headerMenuHamburger {
display: block;
}
.nav-is-active{
font-size: 3rem; /*48px*/
.nav-is-active {
font-size: 3rem;
/*48px*/
padding-top: 100px;
padding-bottom: 100px;
}
}
/* Les éléments du header s'affichent pour le breakpoint ordinateur */
/* Les éléments du header s'affichent pour le breakpoint ordinateur */
@media screen and (min-width: 1140px) {
.headerMenu{
.headerMenu {
display: flex;
flex-flow: row;
justify-content: space-around;
align-items: center;
}
.headerMenuHamburger{
.headerMenuHamburger {
display: none;
}
.nav-is-active{
.nav-is-active {
display: none;
}
}

34
public/js/index.js
View file

@ -1,23 +1,23 @@
/** Création et exportation de la classe Header */
class Header {
constructor(element) {
this.element = element;
this.html = document.documentElement;
constructor(element) {
this.element = element;
this.html = document.documentElement;
this.init();
}
this.init();
}
/**
* Méthode d'initialisation
*/
init() {
const toggle = this.element.querySelector('.js-toggle');
toggle.addEventListener('click', this.onToggleNav.bind(this));
}
onToggleNav() {
// Enlever la classe .is-scrolling-down pour éviter les bugs si l'on fait défiler la page jsute après l'ouverture du menu
this.html.classList.toggle('nav-is-active');
}
/**
* Méthode d'initialisation
*/
init() {
const toggle = this.element.querySelector('.js-toggle');
toggle.addEventListener('click', this.onToggleNav.bind(this));
}
onToggleNav() {
// Enlever la classe .is-scrolling-down pour éviter les bugs si l'on fait défiler la page jsute après l'ouverture du menu
this.html.classList.toggle('nav-is-active');
}
}