Compare commits
No commits in common. "1fed4e9a8e5468d0884b18717c06337dafe9ba30" and "6eda4ccf1bd14b78d021225ef3323641605893fc" have entirely different histories.
1fed4e9a8e
...
6eda4ccf1b
7 changed files with 5 additions and 113 deletions
|
@ -1,55 +1,4 @@
|
|||
/* 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;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
body{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
max-width: 375px;
|
||||
width: calc(100% - var(5px));
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.wrapper{
|
||||
max-width: 768px;
|
||||
width: calc(100% - var(15px));
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1140px) {
|
||||
.wrapper{
|
||||
max-width: 1140px;
|
||||
width: calc(100% - var(30px));
|
||||
}
|
||||
}
|
||||
|
||||
/*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;
|
||||
}
|
||||
|
||||
.heading1 {
|
||||
font-family: "Poppins";
|
||||
|
|
|
@ -1,17 +1,5 @@
|
|||
.header {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.headerWrapper{
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
a{
|
||||
|
@ -31,7 +19,6 @@ text-decoration: none;
|
|||
list-style: none;
|
||||
font-style: none;
|
||||
display: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.headerMenuElement{
|
||||
|
@ -60,7 +47,7 @@ text-decoration: none;
|
|||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 778px) {
|
||||
@media screen and (min-width: 576px) {
|
||||
.headerMenu{
|
||||
display: none;
|
||||
}
|
||||
|
@ -70,7 +57,7 @@ text-decoration: none;
|
|||
}
|
||||
|
||||
/* Les éléments du header s'affichent pour le breakpoint ordinateur */
|
||||
@media screen and (min-width: 1140px) {
|
||||
@media screen and (min-width: 1024px) {
|
||||
.headerMenu{
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
|
|
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 27 KiB |
|
@ -1,10 +1 @@
|
|||
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1405_1060)">
|
||||
<path d="M3.125 9.375V15.625H46.875V9.375H3.125ZM3.125 21.875V28.125H46.875V21.875H3.125ZM3.125 34.375V40.625H46.875V34.375H3.125Z" fill="black"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1405_1060">
|
||||
<rect width="50" height="50" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><path d="M0 0h512v512H0z" fill="#000" fill-opacity="1"></path><g class="" transform="translate(0,0)" style=""><path d="M32 96v64h448V96H32zm0 128v64h448v-64H32zm0 128v64h448v-64H32z" fill="#fff" fill-opacity="1"></path></g></svg>
|
Before Width: | Height: | Size: 396 B After Width: | Height: | Size: 328 B |
|
@ -1,23 +0,0 @@
|
|||
/** Création et exportation de la classe Header */
|
||||
export default 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');
|
||||
}
|
||||
|
||||
}
|
|
@ -1,16 +1,13 @@
|
|||
{{ define "header-html" }}
|
||||
<link rel="stylesheet" href="/public/css/header.css">
|
||||
<div class="header">
|
||||
<div class="wrapper headerWrapper">
|
||||
<a class="headerLink" href="/"><img class="headerMenuLogo" src="/public/icones/agecem-logo.svg"></img></a>
|
||||
<a class="headerLink" href="/"><img class="headerMenuHamburger" src="/public/icones/hamburger-menu.svg"></img></a>
|
||||
<ul class="headerMenu">
|
||||
<li class="headerMenuElement"><a href="/">AGECEM</a></li>
|
||||
<li class="headerMenuElement"><a href="/vie-etudiante">Vie étudiante</a></li>
|
||||
<li class="headerMenuElement"><a href="/documentation">Documentation</a></li>
|
||||
<li class="headerMenuElement"><a href="/admin">admin</a></li>
|
||||
</ul>
|
||||
<a class="headerLink" href="/"><img class="headerMenuHamburger" src="/public/icones/hamburger-menu.svg"></img></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
Loading…
Reference in a new issue