formattage du code gohtml et css

This commit is contained in:
Alexel 2023-08-15 14:30:10 -04:00
parent 9b60983098
commit b118912dbb
12 changed files with 118 additions and 192 deletions

View file

@ -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'),

View file

@ -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;
}
} }

View file

@ -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*/

View file

@ -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');
}
}

View file

@ -1,28 +1,27 @@
{{ 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>
{{ template "general-html" }} {{ template "general-html" }}
</head> </head>
<body> <body>
{{ template "header-html" }} {{ template "header-html" }}
<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>
</select> </select>
<br> <br>
Document: <input class="formDocUpload" type="file" name="document"> Document: <input class="formDocUpload" type="file" name="document">
<br> <br>
<br> <br>
<input class="formSubmit" type="submit" value="Submit"> <input class="formSubmit" type="submit" value="Submit">
</form> </form>
<p>{{ .Message }}</p> <p>{{ .Message }}</p>
</body> </body>
</html> </html>
{{ end }} {{ end }}

View file

@ -1,17 +1,17 @@
{{ 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>
{{ template "general-html" }} {{ template "general-html" }}
</head> </head>
<body> <body>
{{ template "header-html" }} {{ template "header-html" }}
<h1 class="heading1">Admin</h1> <h1 class="heading1">Admin</h1>
<ul> <ul>
<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 }}

View file

@ -1,30 +1,29 @@
{{ 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>
{{ template "general-html" }} {{ template "general-html" }}
</head> </head>
<body> <body>
{{ template "header-html" }} {{ template "header-html" }}
<div class="wrapper documentationWrapper"> <div class="wrapper documentationWrapper">
<h1 class="heading1">Documentation</h1> <h1 class="heading1">Documentation</h1>
<p> <p>
{{ range . }} {{ range . }}
{{ $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> {{ end}}
{{ end}} </ul>
</ul>
</details> </details>
{{ end }} {{ end }}
</p> </p>
</div> </div>
</body> </body>
</html> </html>
{{ end }} {{ end }}

View file

@ -1,14 +1,14 @@
{{ 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>
{{ template "general-html" }} {{ template "general-html" }}
</head> </head>
<body> <body>
{{ template "header-html" }} {{ template "header-html" }}
<h1 class="heading1">Formulaires</h1> <h1 class="heading1">Formulaires</h1>
</body> </body>
</html> </html>
{{ end }} {{ end }}

View file

@ -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 }}

View file

@ -1,29 +1,20 @@
{{ define "header-html" }} {{ define "header-html" }}
<link rel="stylesheet" href="/public/css/header.css"> <div class="header">
<script> <div class="wrapper headerWrapper">
function onToggleNav() { <a class="headerLink" href="/"><img class="headerMenuLogo" src="/public/icones/agecem-logo.svg"></img></a>
var menu = document.querySelector(".headerMenuMobile"); <ul class="headerMenu">
menu.classList.toggle('nav-is-active'); <li class="headerMenuElement"><a href="/">AGECEM</a></li>
} <li class="headerMenuElement"><a href="/vie-etudiante">Vie étudiante</a></li>
</script> <li class="headerMenuElement"><a href="/documentation">Documentation</a></li>
<div class="header"> <li class="headerMenuElement"><a href="/admin">admin</a></li>
<div class="wrapper headerWrapper"> </ul>
<a class="headerLink" href="/"><img class="headerMenuLogo" src="/public/icones/agecem-logo.svg"></img></a> <img class="headerMenuHamburger" src="/public/icones/hamburger-menu.svg" onclick="onToggleNav()"></img>
<ul class="headerMenu"> </div>
<ul class="headerMenuMobile">
<li class="headerMenuElement"><a href="/">AGECEM</a></li> <li class="headerMenuElement"><a href="/">AGECEM</a></li>
<li class="headerMenuElement"><a href="/vie-etudiante">Vie étudiante</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="/documentation">Documentation</a></li>
<li class="headerMenuElement"><a href="/admin">admin</a></li> <li class="headerMenuElement"><a href="/admin">admin</a></li>
</ul> </ul>
<img class="headerMenuHamburger" src="/public/icones/hamburger-menu.svg" onclick="onToggleNav()"></img>
</div> </div>
<ul class="headerMenuMobile">
<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>
</div>
{{ end }} {{ end }}

View file

@ -1,18 +1,18 @@
{{ 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>
{{ template "general-html" }} {{ template "general-html" }}
<link rel="stylesheet" href="/public/css/index.css"> <link rel="stylesheet" href="/public/css/index.css">
</head> </head>
<body> <body>
{{ template "header-html" }} {{ template "header-html" }}
<div class="wrapper indexWrapper"> <div class="wrapper indexWrapper">
<h1 class="heading1">AGECEM</h1> <h1 class="heading1">AGECEM</h1>
<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 }}

View file

@ -1,16 +1,16 @@
{{ 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>
{{ template "general-html" }} {{ template "general-html" }}
</head> </head>
<body> <body>
{{ template "header-html" }} {{ template "header-html" }}
<div class="wrapper vieEtudianteWrapper"> <div class="wrapper vieEtudianteWrapper">
<h1 class="heading1">Vie étudiante</h1> <h1 class="heading1">Vie étudiante</h1>
</div> </div>
</body> </body>
</html> </html>
{{ end }} {{ end }}