Ajouter responsiveness au header #93
12 changed files with 118 additions and 192 deletions
|
@ -16,7 +16,6 @@
|
||||||
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'),
|
||||||
|
@ -44,7 +43,6 @@
|
||||||
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'),
|
||||||
|
@ -106,7 +104,6 @@
|
||||||
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;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
|
@ -116,7 +113,6 @@
|
||||||
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;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
|
@ -126,7 +122,6 @@
|
||||||
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;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
|
@ -136,10 +131,8 @@
|
||||||
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;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@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'),
|
||||||
|
|
|
@ -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 {
|
html {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
@ -49,7 +46,6 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
@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));
|
||||||
|
@ -58,34 +54,17 @@ body {
|
||||||
.heading1 {
|
.heading1 {
|
||||||
font-size: 4rem;
|
font-size: 4rem;
|
||||||
/*64px*/
|
/*64px*/
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.heading2 {
|
.heading2 {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
/*24px*/
|
/*24px*/
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@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 {
|
|
||||||
font-size: 4rem;
|
|
||||||
/*64px*/
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.heading2 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
/*24px*/
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
|
@ -32,10 +32,7 @@ a:visited {
|
||||||
/*regular*/
|
/*regular*/
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
/*20px*/
|
/*20px*/
|
||||||
color: #000;
|
|
||||||
/*Noir pur*/
|
|
||||||
list-style: none;
|
list-style: none;
|
||||||
font-style: none;
|
|
||||||
display: none;
|
display: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
@ -52,10 +49,8 @@ a:visited {
|
||||||
}
|
}
|
||||||
|
|
||||||
.headerMenuHamburger {
|
.headerMenuHamburger {
|
||||||
fill: #394596;
|
|
||||||
height: 50px;
|
height: 50px;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
display: block;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -63,19 +58,14 @@ a:visited {
|
||||||
font-family: "Poppins";
|
font-family: "Poppins";
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
/*regular*/
|
/*regular*/
|
||||||
font-size: 1.25rem;
|
font-size: 2rem;
|
||||||
/*20px*/
|
/*32px*/
|
||||||
color: #000;
|
|
||||||
/*Noir pur*/
|
|
||||||
list-style: none;
|
list-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*/
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
@ -88,19 +78,10 @@ a:visited {
|
||||||
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 {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.headerMenuHamburger {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-is-active {
|
.nav-is-active {
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
/*48px*/
|
/*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');
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
|
@ -1,6 +1,6 @@
|
||||||
{{ define "admin-upload-html" }}
|
{{ define "admin-upload-html" }}
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>AGECEM</title>
|
<title>AGECEM</title>
|
||||||
|
@ -11,7 +11,6 @@
|
||||||
<h1 class="heading1">Upload</h1>
|
<h1 class="heading1">Upload</h1>
|
||||||
<form class="form adminUploadForm" action="/admin/documents/upload" method="post" enctype="multipart/form-data">
|
<form class="form adminUploadForm" action="/admin/documents/upload" method="post" enctype="multipart/form-data">
|
||||||
<label class="formLabel" for="bucket">Type de document:</label>
|
<label class="formLabel" for="bucket">Type de document:</label>
|
||||||
|
|
||||||
<select class="formSelect" name="bucket" id="bucket">
|
<select class="formSelect" name="bucket" id="bucket">
|
||||||
<option class="formOption" value="proces-verbaux">Procès verbaux</option>
|
<option class="formOption" value="proces-verbaux">Procès verbaux</option>
|
||||||
<option class="formOption" value="politiques-et-reglements">Politiques et Règlements</option>
|
<option class="formOption" value="politiques-et-reglements">Politiques et Règlements</option>
|
||||||
|
@ -24,5 +23,5 @@
|
||||||
</form>
|
</form>
|
||||||
<p>{{ .Message }}</p>
|
<p>{{ .Message }}</p>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{{ define "admin-html" }}
|
{{ define "admin-html" }}
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>AGECEM</title>
|
<title>AGECEM</title>
|
||||||
|
@ -13,5 +13,5 @@
|
||||||
<li><a href="/admin/documents/upload">Ajout de document</a></li>
|
<li><a href="/admin/documents/upload">Ajout de document</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{{ define "documentation-html" }}
|
{{ define "documentation-html" }}
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>AGECEM | Documentation</title>
|
<title>AGECEM | Documentation</title>
|
||||||
|
@ -15,7 +15,6 @@
|
||||||
{{ $bucket_name := .Name }}
|
{{ $bucket_name := .Name }}
|
||||||
<details>
|
<details>
|
||||||
<summary>{{ $bucket_name }}</summary>
|
<summary>{{ $bucket_name }}</summary>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
{{ range .Documents }}
|
{{ range .Documents }}
|
||||||
<li> <a href="/public/documentation/{{ $bucket_name }}/{{ . }}">{{ . }}</a></li>
|
<li> <a href="/public/documentation/{{ $bucket_name }}/{{ . }}">{{ . }}</a></li>
|
||||||
|
@ -26,5 +25,5 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{{ define "formulaires-html" }}
|
{{ define "formulaires-html" }}
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>AGECEM | Formulaires</title>
|
<title>AGECEM | Formulaires</title>
|
||||||
|
@ -10,5 +10,5 @@
|
||||||
{{ template "header-html" }}
|
{{ template "header-html" }}
|
||||||
<h1 class="heading1">Formulaires</h1>
|
<h1 class="heading1">Formulaires</h1>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
@ -1,4 +1,11 @@
|
||||||
{{ define "general-html" }}
|
{{ define "general-html" }}
|
||||||
<link rel="stylesheet" href="/public/css/general.css">
|
<link rel="stylesheet" href="/public/css/general.css">
|
||||||
<link rel="stylesheet" href="/public/css/fonts.css">
|
<link rel="stylesheet" href="/public/css/fonts.css">
|
||||||
|
<link rel="stylesheet" href="/public/css/header.css">
|
||||||
|
<script>
|
||||||
|
function onToggleNav() {
|
||||||
|
var menu = document.querySelector(".headerMenuMobile");
|
||||||
|
menu.classList.toggle('nav-is-active');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
@ -1,12 +1,5 @@
|
||||||
{{ define "header-html" }}
|
{{ define "header-html" }}
|
||||||
<link rel="stylesheet" href="/public/css/header.css">
|
<div class="header">
|
||||||
<script>
|
|
||||||
function onToggleNav() {
|
|
||||||
var menu = document.querySelector(".headerMenuMobile");
|
|
||||||
menu.classList.toggle('nav-is-active');
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<div class="header">
|
|
||||||
<div class="wrapper headerWrapper">
|
<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="headerMenuLogo" src="/public/icones/agecem-logo.svg"></img></a>
|
||||||
<ul class="headerMenu">
|
<ul class="headerMenu">
|
||||||
|
@ -23,7 +16,5 @@
|
||||||
<li class="headerMenuElement"><a href="/documentation">Documentation</a></li>
|
<li class="headerMenuElement"><a href="/documentation">Documentation</a></li>
|
||||||
<li class="headerMenuElement"><a href="/admin">admin</a></li>
|
<li class="headerMenuElement"><a href="/admin">admin</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{{ define "index-html" }}
|
{{ define "index-html" }}
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>AGECEM</title>
|
<title>AGECEM</title>
|
||||||
|
@ -14,5 +14,5 @@
|
||||||
<h2 class="heading2">Association Générale Étudiante du Cégep Édouard-Montpetit</h2>
|
<h2 class="heading2">Association Générale Étudiante du Cégep Édouard-Montpetit</h2>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{{ define "vie-etudiante-html" }}
|
{{ define "vie-etudiante-html" }}
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>AGECEM | Vie étudiante</title>
|
<title>AGECEM | Vie étudiante</title>
|
||||||
|
@ -12,5 +12,5 @@
|
||||||
<h1 class="heading1">Vie étudiante</h1>
|
<h1 class="heading1">Vie étudiante</h1>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
Loading…
Reference in a new issue