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

56
public/css/general.css
View file

@ -15,7 +15,7 @@ img {
max-width: 100%; max-width: 100%;
} }
body{ body {
margin: 0; margin: 0;
padding-top: 75px; padding-top: 75px;
} }
@ -28,34 +28,42 @@ 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;
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.wrapper{ .wrapper {
max-width: 768px; max-width: 768px;
width: calc(100% - var(15px)); width: calc(100% - var(15px));
} }
.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;
} }
@ -63,35 +71,21 @@ body{
@media screen and (min-width: 1140px) { @media screen and (min-width: 1140px) {
.wrapper{ .wrapper {
max-width: 1140px; max-width: 1140px;
width: calc(100% - var(30px)); width: calc(100% - var(30px));
} }
.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;
}

84
public/css/header.css
View file

@ -5,9 +5,9 @@
top: 0; top: 0;
background-color: #fff; background-color: #fff;
height: 75px; height: 75px;
} }
.headerWrapper{ .headerWrapper {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
align-items: center; align-items: center;
@ -15,39 +15,43 @@
padding: 5px; padding: 5px;
} }
a{ a {
color: #000; color: #000;
text-decoration: none; text-decoration: none;
} }
a:visited{ a:visited {
color: #000; color: #000;
text-decoration: none; text-decoration: none;
} }
.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;
width: 100%; width: 100%;
} }
.headerMenuElement{ .headerMenuElement {
padding-bottom: 5px; padding-bottom: 5px;
} }
.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;
} }
.headerMenuHamburger{ .headerMenuHamburger {
fill: #394596; fill: #394596;
height: 50px; height: 50px;
width: 50px; width: 50px;
@ -55,19 +59,23 @@ a:visited{
cursor: pointer; cursor: pointer;
} }
.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;
} }
.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;
@ -78,41 +86,43 @@ a:visited{
width: 100%; width: 100%;
height: 90%; height: 90%;
margin: 0; margin: 0;
padding-top: 200px; padding-top: 200px;
padding-bottom: 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) { @media screen and (min-width: 778px) {
.headerMenu{ .headerMenu {
display: none; display: none;
} }
.headerMenuHamburger{
.headerMenuHamburger {
display: block; display: block;
} }
.nav-is-active{
font-size: 3rem; /*48px*/ .nav-is-active {
font-size: 3rem;
/*48px*/
padding-top: 100px; padding-top: 100px;
padding-bottom: 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) { @media screen and (min-width: 1140px) {
.headerMenu{ .headerMenu {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
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;
} }
} }

40
public/js/index.js
View file

@ -1,23 +1,23 @@
/** Création et exportation de la classe Header */ /** Création et exportation de la classe Header */
class Header { class Header {
constructor(element) { constructor(element) {
this.element = element; this.element = element;
this.html = document.documentElement; this.html = document.documentElement;
this.init(); this.init();
} }
/** /**
* Méthode d'initialisation * Méthode d'initialisation
*/ */
init() { init() {
const toggle = this.element.querySelector('.js-toggle'); const toggle = this.element.querySelector('.js-toggle');
toggle.addEventListener('click', this.onToggleNav.bind(this)); toggle.addEventListener('click', this.onToggleNav.bind(this));
} }
onToggleNav() { 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 // 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'); this.html.classList.toggle('nav-is-active');
} }
} }