You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
2.0 KiB
CSS
114 lines
2.0 KiB
CSS
@media print {
|
|
|
|
/* Define the size of the pages and layout settings */
|
|
@page {
|
|
size: 90mm 148mm;
|
|
marks: crop cross;
|
|
margin: 15mm;
|
|
}
|
|
|
|
/* img{
|
|
width: 50%;
|
|
} */
|
|
|
|
h1{
|
|
break-before: always;
|
|
}
|
|
|
|
body{
|
|
background-color: rgba(107, 207, 107, 0.953);
|
|
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
|
|
}
|
|
|
|
|
|
/* LAYOUTS */
|
|
|
|
.containers1 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
/* height: 100vh; */
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.containers1>* {
|
|
/* font-size: 5vw */
|
|
margin: 10px;
|
|
border-radius: 3px;
|
|
/* background: yellowgreen; */
|
|
border: 5px solid black;
|
|
object-fit: cover;
|
|
|
|
}
|
|
|
|
.containers1>*:nth-child(odd) {
|
|
width: 10%;
|
|
}
|
|
|
|
.containers1>*:nth-child(even) {
|
|
width: 20%;
|
|
}
|
|
|
|
.containers1>*:nth-child(2),
|
|
.containers1>*:nth-child(4),
|
|
.containers1>*:nth-child(9) {
|
|
width: 60%;
|
|
}
|
|
|
|
|
|
.containers2 {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, 60mm);
|
|
grid-gap: 10px;
|
|
align-items: start;
|
|
justify-items: center;
|
|
margin: auto;
|
|
/* width: 540px; */
|
|
}
|
|
|
|
.containers2 img {
|
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
/* box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3); */
|
|
max-width: 100%;
|
|
/* max-height: auto; */
|
|
object-fit: cover;
|
|
}
|
|
|
|
.containers2 img:nth-child(4) {
|
|
grid-column: 3 span;
|
|
}
|
|
|
|
|
|
.containers3 {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
|
|
grid-gap: 10px;
|
|
align-items: start;
|
|
justify-items: center;
|
|
margin: auto;
|
|
}
|
|
|
|
.containers3 img {
|
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
|
|
max-width: 100%;
|
|
/* max-height: 75%; */
|
|
object-fit: cover;
|
|
}
|
|
|
|
.containers3 img:nth-child(2) {
|
|
grid-column: span 3;
|
|
grid-row: span 2;
|
|
}
|
|
|
|
.containers4 img,p{
|
|
width: 76%;
|
|
margin-left: 12%;
|
|
margin-top: 23%;
|
|
}
|
|
|
|
.containers4 *:nth-child(odd) {
|
|
break-after: always;
|
|
}
|
|
|
|
} |