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

Ajouter responsiveness au header #93

Merged
vlbeaudoin merged 21 commits from feature/responsive-header into main 2023-08-16 13:43:50 -04:00
Conversation 0 Commits 21 Files changed 15 +25 -20
2 changed files with 25 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 6eda4ccf1b - Show all commits

38
public/css/header.css
View file

@ -2,48 +2,53 @@
width: 100%; width: 100%;
} }
a{
color: #000;
text-decoration: none;
}
a:visited{
color: #000;
text-decoration: none;
}
.headerMenu { .headerMenu {
font-family: "Poppins"; font-family: "Poppins";
font-weight: 400; /*regular*/ font-weight: 400; /*regular*/
font-size: 1.25rem; /*20px*/ font-size: 1.25rem; /*20px*/
color: #394596; /*Noir pur*/ color: #000; /*Noir pur*/
display: flex;
flex-flow: row;
justify-content: space-around;
align-items: center;
list-style: none; list-style: none;
font-style: none;
display: none;
} }
.headerMenuElement{ .headerMenuElement{
padding-bottom: 5px;
} }
.headerMenuElement:hover { .headerMenuElement:hover {
border-bottom: 5px #FF563C solid; /*Orange Highlight*/ border-bottom: 5px #FF563C solid; /*Orange Highlight*/
cursor: pointer; cursor: pointer;
padding-bottom: 0;
} }
.headerMenuHamburger{ .headerMenuHamburger{
fill: #394596; fill: #394596;
height: 100px; height: 50px;
width: 100px; width: 50px;
} }
/* 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 */
.headerMenuElement{
display: none;
}
.headerMenuHamburger{ .headerMenuHamburger{
display: block; display: block;
} }
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
.headerMenuElement{ .headerMenu{
display: none; display: none;
} }
.headerMenuHamburger{ .headerMenuHamburger{
@ -53,8 +58,11 @@
/* Les éléments du header s'affichent pour le breakpoint ordinateur */ /* Les éléments du header s'affichent pour le breakpoint ordinateur */
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.headerMenuElement{ .headerMenu{
display: block; display: flex;
flex-flow: row;
justify-content: space-around;
align-items: center;
} }
.headerMenuHamburger{ .headerMenuHamburger{
display: none; display: none;

7
templates/html/header.gohtml
View file

@ -1,14 +1,11 @@
{{ define "header-html" }} {{ define "header-html" }}
<link rel="stylesheet" href="/public/css/header.css"> <link rel="stylesheet" href="/public/css/header.css">
<div class="header"> <div class="header">
<a class="headerLink" href="/"><img class="headerMenuHamburger" src="/public/icones/hamburger-menu.svg"></img></a>
<ul class="headerMenu"> <ul class="headerMenu">
<li><a class="headerLink" href="/"><img class="headerMenuHamburger" src="/public/icones/hamburger-menu.svg"></img></a></li> <li class="headerMenuElement"><a href="/">AGECEM</a></li>
<li class="headerMenuElement"><a href="/">index</a></li>
<li class="headerMenuElement"><a href="/a-propos">À propos</a></li>
<li class="headerMenuElement"><a href="/actualite">Actualité</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="/formulaires">Formulaires</a></li>
<li class="headerMenuElement"><a href="/admin">admin</a></li> <li class="headerMenuElement"><a href="/admin">admin</a></li>
</ul> </ul>
</div> </div>