agecem/agecem-org
4
1
Fork 0
Code Issues 31 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 +69 -5
5 changed files with 69 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit c98a587f59 - Show all commits

34
public/css/general.css
View file

@ -1,4 +1,38 @@
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";

13
public/css/header.css
View file

@ -2,6 +2,14 @@
width: 100%;
}
.headerWrapper{
display: flex;
flex-flow: row;
align-items: center;
justify-content: space-between;
padding: 5px;
}
a{
color: #000;
text-decoration: none;
@ -19,6 +27,7 @@ text-decoration: none;
list-style: none;
font-style: none;
display: none;
width: 100%;
}
.headerMenuElement{
@ -47,7 +56,7 @@ text-decoration: none;
}
@media screen and (min-width: 576px) {
@media screen and (min-width: 778px) {
.headerMenu{
display: none;
}
@ -57,7 +66,7 @@ text-decoration: none;
}
/* Les éléments du header s'affichent pour le breakpoint ordinateur */
@media screen and (min-width: 1024px) {
@media screen and (min-width: 1140px) {
.headerMenu{
display: flex;
flex-flow: row;

9
public/icones/agecem-logo.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 27 KiB

11
public/icones/hamburger-menu.svg
View file

@ -1 +1,10 @@
<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>
<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>

Side by side

After

Width:  |  Height:  |  Size: 396 B

5
templates/html/header.gohtml
View file

@ -1,13 +1,16 @@
{{ define "header-html" }}
<link rel="stylesheet" href="/public/css/header.css">
<div class="header">
<a class="headerLink" href="/"><img class="headerMenuHamburger" src="/public/icones/hamburger-menu.svg"></img></a>
<div class="wrapper headerWrapper">
<a class="headerLink" href="/"><img class="headerMenuLogo" src="/public/icones/agecem-logo.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>