agecem/agecem-org
4
1
Fork 0
Code Issues 8 Pull requests 1 Packages 1 Activity

nouvelles icônes, breakpoints & wrapper header

Browse source
This commit is contained in:
Alexel 2023-08-14 16:02:18 -04:00
parent 6eda4ccf1b
commit c98a587f59
5 changed files with 69 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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;