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

28
public/css/fonts.css
View file

@ -5,7 +5,7 @@
url('/public/fonts/Poppins/poppins-thin.otf') format('otf');
font-weight: 100;
font-style: normal;
}
}
@font-face {
font-family: "Poppins";
@ -14,7 +14,7 @@
url('/public/fonts/Poppins/poppins-thin-italic.otf') format('otf');
font-weight: 100;
font-style: italic;
}
}
@font-face {
@ -24,7 +24,7 @@
url('/public/fonts/Poppins/poppins-extralight.otf') format('otf');
font-weight: 200;
font-style: normal;
}
}
@font-face {
font-family: "Poppins";
@ -33,7 +33,7 @@
url('/public/fonts/Poppins/poppins-extralight-italic.otf') format('otf');
font-weight: 200;
font-style: italic;
}
}
@font-face {
font-family: "Poppins";
@ -42,7 +42,7 @@
url('/public/fonts/Poppins/poppins-light.otf') format('otf');
font-weight: 300;
font-style: normal;
}
}
@font-face {
@ -52,7 +52,7 @@
url('/public/fonts/Poppins/poppins-light-italic.otf') format('otf');
font-weight: 300;
font-style: italic;
}
}
@font-face {
font-family: "Poppins";
@ -61,7 +61,7 @@
url('/public/fonts/Poppins/poppins-regular.otf') format('otf');
font-weight: 400;
font-style: normal;
}
}
@font-face {
font-family: "Poppins";
@ -70,7 +70,7 @@
url('/public/fonts/Poppins/poppins-regular-italic.otf') format('otf');
font-weight: 400;
font-style: italic;
}
}
@font-face {
font-family: "Poppins";
@ -79,7 +79,7 @@
url('/public/fonts/Poppins/poppins-medium.otf') format('otf');
font-weight: 500;
font-style: normal;
}
}
@font-face {
font-family: "Poppins";
@ -88,7 +88,7 @@
url('/public/fonts/Poppins/poppins-medium-italic.otf') format('otf');
font-weight: 500;
font-style: italic;
}
}
@font-face {
font-family: "Poppins";
@ -97,7 +97,7 @@
url('/public/fonts/Poppins/poppins-semibold.otf') format('otf');
font-weight: 600;
font-style: normal;
}
}
@font-face {
font-family: "Poppins";
@ -147,7 +147,7 @@
url('/public/fonts/Poppins/poppins-extrabold-italic.otf') format('otf');
font-weight: 800;
font-style: italic;
}
}
@font-face {
font-family: "Poppins";
@ -156,7 +156,7 @@
url('/public/fonts/Poppins/poppins-black.otf') format('otf');
font-weight: 900;
font-style: normal;
}
}
@font-face {
font-family: "Poppins";
@ -165,4 +165,4 @@
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;
}
}

2
public/js/index.js
View file

@ -20,4 +20,4 @@ class Header {
this.html.classList.toggle('nav-is-active');
}
}
}