formattage du code gohtml et css
This commit is contained in:
parent
9b60983098
commit
b118912dbb
12 changed files with 118 additions and 192 deletions
|
@ -16,7 +16,6 @@
|
|||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: "Poppins";
|
||||
src: url('/public/fonts/Poppins/poppins-extralight.woff2') format('woff2'),
|
||||
|
@ -44,7 +43,6 @@
|
|||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: "Poppins";
|
||||
src: url('/public/fonts/Poppins/poppins-light-italic.woff2') format('woff2'),
|
||||
|
@ -106,7 +104,6 @@
|
|||
url('/public/fonts/Poppins/poppins-semibold-italic.otf') format('otf');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
@ -116,7 +113,6 @@
|
|||
url('/public/fonts/Poppins/poppins-bold.otf') format('otf');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
@ -126,7 +122,6 @@
|
|||
url('/public/fonts/Poppins/poppins-bold-italic.otf') format('otf');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
@ -136,10 +131,8 @@
|
|||
url('/public/fonts/Poppins/poppins-extrabold.otf') format('otf');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: "Poppins";
|
||||
src: url('/public/fonts/Poppins/poppins-extrabold-italic.woff2') format('woff2'),
|
||||
|
|
|
@ -1,6 +1,3 @@
|
|||
/* La propriété CSS box-sizing définit la façon dont la hauteur et la largeur totale d'un élément est calculée (avec le modèle de boîte CSS).
|
||||
// Références: https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing*/
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
@ -49,7 +46,6 @@ body {
|
|||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
|
||||
.wrapper {
|
||||
max-width: 768px;
|
||||
width: calc(100% - var(15px));
|
||||
|
@ -58,34 +54,17 @@ body {
|
|||
.heading1 {
|
||||
font-size: 4rem;
|
||||
/*64px*/
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.heading2 {
|
||||
font-size: 1.5rem;
|
||||
/*24px*/
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1140px) {
|
||||
|
||||
.wrapper {
|
||||
max-width: 1140px;
|
||||
width: calc(100% - var(30px));
|
||||
}
|
||||
|
||||
.heading1 {
|
||||
font-size: 4rem;
|
||||
/*64px*/
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.heading2 {
|
||||
font-size: 1.5rem;
|
||||
/*24px*/
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
|
@ -32,10 +32,7 @@ a:visited {
|
|||
/*regular*/
|
||||
font-size: 1.25rem;
|
||||
/*20px*/
|
||||
color: #000;
|
||||
/*Noir pur*/
|
||||
list-style: none;
|
||||
font-style: none;
|
||||
display: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
@ -52,10 +49,8 @@ a:visited {
|
|||
}
|
||||
|
||||
.headerMenuHamburger {
|
||||
fill: #394596;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
@ -63,19 +58,14 @@ a:visited {
|
|||
font-family: "Poppins";
|
||||
font-weight: 400;
|
||||
/*regular*/
|
||||
font-size: 1.25rem;
|
||||
/*20px*/
|
||||
color: #000;
|
||||
/*Noir pur*/
|
||||
font-size: 2rem;
|
||||
/*32px*/
|
||||
list-style: none;
|
||||
font-style: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-is-active {
|
||||
background-color: #fff;
|
||||
font-size: 2rem;
|
||||
/*32px*/
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: space-around;
|
||||
|
@ -88,19 +78,10 @@ a:visited {
|
|||
margin: 0;
|
||||
padding-top: 200px;
|
||||
padding-bottom: 200px;
|
||||
|
||||
}
|
||||
|
||||
/* Le header s'affiche en menu hamburger pour les breakpoints téléphone et tablette */
|
||||
@media screen and (min-width: 778px) {
|
||||
.headerMenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.headerMenuHamburger {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-is-active {
|
||||
font-size: 3rem;
|
||||
/*48px*/
|
||||
|
|
|
@ -1,23 +0,0 @@
|
|||
/** Création et exportation de la classe Header */
|
||||
class Header {
|
||||
constructor(element) {
|
||||
this.element = element;
|
||||
this.html = document.documentElement;
|
||||
|
||||
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');
|
||||
}
|
||||
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue