agecem/agecem-org
4
1
Fork 0
Code Issues 31 Pull requests 2 Activity

Ajouter CSS pour header et pages principales #75

Merged
vlbeaudoin merged 10 commits from css-general into main 2023-07-25 14:18:16 -04:00
Conversation 0 Commits 10 Files changed 10 +227 -14
3 changed files with 227 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 715053ca70 - Show all commits

208
outline.txt Normal file
View file

@ -0,0 +1,208 @@
Fonts: Poppins, Arial Narrow?/Arial?
Couleurs:
#394596; /*Bleu AGECEM*/
#E5E5E5; /*Gris pâle*/
#8A8A8A; /*Gris foncé*/
#FFF; /*Blanc pur*/
#000; /*Noir pur*/
Couleurs (Light Mode):
#394596; /*Bleu AGECEM*/
Couleurs (Dark Mode):
div.wrapper{
width: 1420px;
margin: 0 auto;
}
/*tête de page*/
header.entete{
}
ul.enteteMenu{
font-family: Poppins;
font-weight: 400; /*regular*/
font-size: 1.25rem; /*20px*/
color: #000; /*Noir pur*/
display: flex;
flex-flow: row;
justify-content: start;
align-items: center;
}
li.enteteMenuElement{
}
li.enteteMenuElement:hover{
border-bottom: 5px #FF563C solid; /*Orange Highlight*/
cursor: pointer;
}
ul.enteteSousMenu{
font-family: Poppins;
font-weight: 400; /*regular*/
font-size: 1.125rem; /*18px*/
display: flex;
flex-flow: column;
justify-content: start;
align-items: center;
}
li.enteteSousMenuElement{
background-color: #D8D8D8 /*gris pâle*/;
color: #000; /*Noir pur*/
}
li.enteteSousMenuElement:hover{
background-color: #FF563C /*gris pâle*/;
color: #FFF; /*Blanc pur*/
cursor: pointer;
}
---/*page*/---
/*titres*/
h1.titre1Page{
font-family: Poppins;
font-weight: 600; /*semi-bold*/
font-size: 6rem; /*96px*/
color: #394596; /*Bleu AGECEM*/
}
h2.titre2Page{
font-family: Poppins;
font-weight: 600; /*semi-bold*/
font-size: 1.5rem; /*24px*/
color: #394596; /*Bleu AGECEM*/
}
div.h3Background{
background-color: #394596; /*Bleu AGECEM*/
width: 100%; /*largeur complète du wrapper*/
height: 80px;
display: flex;
flex-flow: wrap row;
align-content: center;
justify-content: center;
text-align: center
}
h3.h3Page{
font-family: Poppins;
font-weight: 600; /*semi-bold*/
font-size: 2.25rem; /*36px*/
color: #FFF; /*Blanc pur*/
}
.reglementNom{
font-family: Poppins;
font-weight: 600; /*semi-bold*/
font-size: 3rem; /*48px*/
color: #394596; /*Bleu AGECEM*/
}
.reglementDesc{
font-family: Poppins;
font-weight: 500; /*medium*/
font-size: 1.5rem /*24px*/;
color: #394596; /*Bleu AGECEM*/
}
.politiqueNom{
font-family: Poppins;
font-weight: 600; /*semi-bold*/
font-size: 3rem; /*48px*/
color: #394596; /*Bleu AGECEM*/
}
.politiqueNom{
font-family: Poppins;
font-weight: 500; /*medium*/
font-size: 2.25rem; /*36px*/
color: #394596; /*Bleu AGECEM*/
}
/*page*/
/*article*/
/*titres*/
h1.h1Article{
font-family: Poppins;
font-weight: 600; /*semi-bold*/
font-size: 6rem;/*96px*/
color: #394596; /*Bleu AGECEM*/
}
.grilleArticleTitre{
font-family: Poppins;
font-weight: 600; /*semi-bold*/
font-size: 1.5rem /*24px*/;
color: #394596; /*Bleu AGECEM*/
line-height: 115%;
}
.grilleArticleTitre.vacant{
font-family: Poppins;
font-weight: 600; /*semi-bold*/
font-size: 1.5rem /*24px*/;
color: #8A8A8A; /*Gris foncé*/
}
.grilleArticleSousTitre{
font-family: Poppins;
font-weight: 400; /*regular*/
font-size: 1.125rem /*18px*/;
color: #394596; /*Bleu AGECEM*/
line-height: 115%;
}
.grilleArticleDesc{
font-family: Poppins;
font-weight: 300; /*light*/
font-size: 0.875rem /*14px*/;
color: #505050; /*Gris foncé*/
line-height: 150%;
}
.grilleArticleLien{
font-family: Poppins;
font-weight: 300; /*light*/
font-size: 1.125rem /*18px*/;
color: #FF563C; /*Orange Highlight*/
}
/*FAQ*/
div.questionEtReponse{
display: grid;
}
div.question{
border-left: 5px #FF563C solid; /*Orange Highlight*/
background-color: #E5E5E5 /*Gris pâle*/
}
p.questionQ{
font-family: Poppins;
font-weight: 300; /*light*/
font-size: 6rem /*96px*/;
color: #FF563C; /*Orange Highlight*/
}
p.questionTexte{
font-family: Poppins;
font-weight: 600; /*semi-bold*/
font-size: 2.25rem; /*36px*/
color: #000; /*Noir pur*/
line-height: 150%;
}
div.reponse{
border-left: 5px #8A8A8A solid; /*Gris foncé*/
background-color: #FFF /*Blanc pur*/
}
p.reponseR{
font-family: Poppins;
font-weight: 300; /*light*/
font-size: 6rem /*96px*/;
color: #8A8A8A; /*Gris foncé*/
}
p.reponseTexte{
font-family: Poppins;
font-weight: 600; /*semi-bold*/
font-size: 2.25rem; /*36px*/
color: #000; /*Noir pur*/
line-height: 150%;
}
/*FAQ*/
/*pied de page*/

14
public/css/general.css
View file

@ -2,28 +2,32 @@ h1 {
text-align: center;
}
ul.enteteMenu{
.header{
width: 100%;
}
.enteteMenu{
font-family: Poppins;
font-weight: 400; /*regular*/
font-size: 1.25rem; /*20px*/
color: #000; /*Noir pur*/
display: flex;
flex-flow: row;
justify-content: start;
justify-content: space-around;
align-items: center;
}
li.enteteMenuElement:hover{
.enteteMenuElement:hover{
border-bottom: 5px #FF563C solid; /*Orange Highlight*/
cursor: pointer;
}
h1.titre1Page{
.titre1Page{
font-family: Poppins;
font-weight: 600; /*semi-bold*/
font-size: 6rem; /*96px*/
color: #394596; /*Bleu AGECEM*/
}
h2.titre2Page{
.titre2Page{
font-family: Poppins;
font-weight: 600; /*semi-bold*/
font-size: 1.5rem; /*24px*/

3
templates/html/header.gohtml
View file

@ -1,5 +1,6 @@
{{ define "header-html" }}
<div class="header">
<ul class="enteteMenu">
<li class="enteteMenuElement"><a href="/">index</a></li>
<li class="enteteMenuElement"><a href="/a-propos">À propos</a></li>
@ -8,7 +9,7 @@
<li class="enteteMenuElement"><a href="/documentation">Documentation</a></li>
<li class="enteteMenuElement"><a href="/formulaires">Formulaires</a></li>
</ul>
</div>
<ul>
<li><a href="/admin">admin</a></li>
</ul>