guichet/static/css/lesgv/faire-ma-page.css
2023-07-21 15:40:14 +02:00

270 lines
4.5 KiB
CSS

body {
margin: 0 auto;
max-width: 1300px;
overflow-x: hidden;
}
h1 {
text-align: center;
}
h2 {
text-align: left;
}
div.enclosing-grid {
display: grid;
}
div.enclosing-grid img {
scale: 90%;
}
.TL {
grid-area: 1 / 1 / 2 / 4;
display: flex;
justify-content: flex-start;
margin-bottom: -4rem;
}
.TL img {
display: inline-block;
align-self: flex-start;
}
.TR {
grid-area: 1 / 3 / 2 / 8;
z-index: 11;
display: flex;
width: 100%;
justify-content: flex-end;
margin-bottom: -4rem;
}
.TR img {
display: inline-block;
align-self: flex-start;
}
.HH {
grid-area: 2 / 1 / 3 / 7 ;
z-index: 15;
display: flex;
justify-content: center;
height: 100%;
border-radius: 1rem 1rem 0 0;
width: fit-content;
margin: 0 auto;
}
.HH a {
align-self: center;
}
.HH a img {
max-width: 100vw;
height: auto;
padding: 0 1rem;
}
.ML {
grid-area: 2 / 1 / 6 / 2;
z-index: 20;
}
.ML img {
margin-top: -75%;
}
.CT {
grid-area: 3 / 2 / 6 / 5;
z-index: 36;
max-width: 86vw;
background-color: var(--color-background);
padding: 1rem;
height: 100%;
border-radius: 1rem 1rem 0 1rem;
}
.MR {
grid-area: 2 / 5 / 10 / 8;
/* grid-area: 2 / 6 / 10 / 9; */
z-index: 17;
}
.FL {
grid-area: 6 / 2 / 8 / 4;
z-index: 28;
margin-left: 4rem;
border-radius: 0 0 0 1rem;
}
.FR {
grid-area: 6 / 4 / 8 / 5;
z-index: 29;
border-radius: 0 0 1rem 0;
}
.FR, .FL {
margin-bottom: 4rem;
background-color: var(--color-background);
padding: 1rem;
max-width: 86vw;
}
.BL {
grid-area: 5 / 1 / 9 / 4;
z-index: 12;
text-align: left;
display: flex;
justify-content: flex-start;
}
.BL a {
align-self: flex-end;
}
.BC {
grid-area: 7 / 1 / 9 / 6;
z-index: 14;
margin-top: 6rem;
text-align: center;
}
.BR {
grid-area: 7 / 1 / 9 / 8;
z-index: 13;
display: flex;
justify-content: flex-end;
}
.BR img {
display: inline-block;
align-self: flex-end;
}
.darkmode div.cadre img,
.darkmode div.HH img {
filter: sepia(0.25) brightness(1.25) contrast(0.75);
}
div.block-ghost_index_blog {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
body.fait_ma_page_home iframe,
div.lesgv-footer iframe,
div.enclosing-grid iframe {
height: 14rem;
width: 100%;
padding-right: 0;
padding-bottom: 0;
border-radius: 1rem;
}
@media (max-width: 1200px) {
.CT {
grid-area: 3 / 2 / 6 / 6;
}
.FL {
grid-area: 6 / 2 / 7 / 6;
margin-left: unset;
height: 100%;
}
.FR {
grid-area: 7 / 3 / 8 / 6;
border-radius: 0 0 1rem 1rem;
}
.MR {
grid-area: 2 / 6 / 10 / 8;
}
}
@media (max-width: 1000px) {
div.block-ghost_index_blog{
grid-template-columns: 1fr;
}
body.fait_ma_page_home iframe,
div.lesgv-footer iframe,
div.enclosing-grid iframe {
padding-right: unset;
padding-bottom: unset;
}
}
@media (max-width: 800px) {
body {
overflow-x: hidden;
}
div.enclosing-grid div {
scale: 60%;
}
div.enclosing-grid div.CT,
div.enclosing-grid div.HH,
div.enclosing-grid div.CT div,
div.enclosing-grid div.FL,
div.enclosing-grid div.FR{
scale: unset;
}
.HH {
grid-area: 2 / 1 / 4 / 8;
padding-right: revert;
}
.CT {
grid-area: 4 / 1 / 5 / 8;
}
.FL {
grid-area: 5 / 1 / 6 / 8;
border-radius: 0 0 0 0;
}
.FR {
grid-area: 6 / 1 / 7 / 8;
}
.MR {
grid-area: 2 / 3 / 7 / 8;
}
.BR {
grid-area: 5 / 1 / 8 / 8;
}
.BC {
grid-area: 7 / 1 / 8 / 4;
}
.CT, .FL, .FR {
max-width: 83vw;
margin: 0 3vw;
}
div.TL img {
position:fixed;
left: -12rem;
}
div.TR img {
position:fixed;
right: -15rem;
}
div.ML img {
position:fixed;
left: -10rem;
}
div.BC img {
position:fixed;
bottom: -15rem;
}
div.MR img {
position:absolute;
right: -15rem;
}
div.BL img {
position:fixed;
left: -10rem;
bottom: -22rem;
}
div.BR img {
position:fixed;
right: -22rem;
bottom: -22rem;
}
}
@media print {
div.enclosing-grid {
margin: 1rem auto;
}
img {
left: unset;
right: unset;
}
body {
margin-left: 5rem;
}
.CT {
grid-area: 4 / 3 / 5 / 7;
}
.FL {
grid-area: 5 / 2 / 6 / 7;
margin-left: unset;
}
.FR {
grid-area: 6 / 3 / 7 / 7;
}
.BC {
grid-area: 7 / 4 / 9 / 5;
}
}