Your IP : 216.73.216.170
/* #PRODUIRE{fond=layout.css,layoutgala=34}
md5:8996debd1fd7487e476a3a72d6a9e770 */
/* http://blog.html.it/layoutgala/index.html */
/* Mode mobile ici sans media queries */
#navigation, #extra {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
/* Mode Tablette définition des grilles CSS */
@media screen and (min-width: 768px) {
#shadow {
display: grid;
grid-template-areas:
"header"
"maincontent"
"footer";
}
#mainheader {
grid-area: header;
}
#maincontent {
grid-area: maincontent;
display: grid;
}
#miettesdepain{
grid-area: ariane;
}
#heading{
grid-area: titre;
display: grid;
}
#contenu{
grid-area: content;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
#navigation {
grid-area: navigation;
}
#extra {
grid-area: extra;
}
#footer {
grid-area: footer;
}
/* un switch avec 2 types de cas pour ipad */
#maincontent {
grid-template-areas:
"ariane ariane"
"titre titre"
"content content"
"navigation extra";
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto auto 1fr;
}
}
@media screen and (min-width: 1310px) {
/* ce switch pour desktop */
#shadow {
grid-template-areas:
". header ."
". maincontent ."
". footer .";
grid-template-columns: minmax(0, 1fr) 1310px minmax(0, 1fr);
}
#maincontent {
grid-template-rows: max-content max-content max-content 1fr;
}
#maincontent {
grid-template-areas:
"ariane ariane"
"navigation titre"
"navigation content"
"extra content";
grid-template-columns: 170px minmax(0, 1fr);
grid-template-rows: auto auto auto 1fr;
}
}