Skip to content
Snippets Groups Projects

A bunch of design stuff

Files

@page {
@page {
size: a4 landscape;
size: a4 landscape;
margin: 50px;
margin: 50px;
}
}
* {
* {
box-sizing: border-box;
box-sizing: border-box;
}
}
body {
body {
font-size: 48px;
font-size: 48px;
font-family: "Noto Sans", sans-serif;
font-family: "Noto Sans", sans-serif;
padding: 0;
padding: 0;
margin: 0;
margin: 0;
display: flex;
background-color: #fff;
flex-direction: column;
color: #000;
@media not print {
display: flex;
/* This magic constant approximately corresponds to 48px at A4 size, but scales
flex-direction: column;
* with the viewport/iframe size
*/
@media not print {
font-size: 4.27426536064114vw;
/* This magic constant approximately corresponds to 48px at A4 size, but scales
padding: 4.27426536064114vw;
* with the viewport/iframe size
width: 100vw;
*/
height: 100vh;
font-size: 4.27426536064114vw;
max-width: 100vw;
padding: 4.27426536064114vw;
max-height: 100vh;
width: 100vw;
}
height: 100vh;
 
max-width: 100vw;
 
max-height: 100vh;
 
}
}
}
main {
main {
flex-grow: 1;
flex-grow: 1;
max-height: 11.3em;
max-height: 11.3em;
}
}
img {
img {
max-width: 100%;
max-width: 100%;
max-height: 100%;
max-height: 100%;
object-fit: contain;
object-fit: contain;
display: block;
display: block;
}
}
#logo {
#logo {
width: 15%;
width: 15%;
}
}
footer {
footer {
font-size: 0.5em;
font-size: 0.5em;
display: flex;
display: flex;
align-items: flex-end;
align-items: flex-end;
}
}
#footer {
#footer {
flex-grow: 1;
flex-grow: 1;
}
}
h1 {
h1 {
margin-top: 0;
margin-top: 0;
}
}
p {
p {
margin-top: 0;
margin-top: 0;
margin-bottom: 0;
margin-bottom: 0;
}
}
.container {
.container {
column-count: 2;
column-count: 2;
column-fill: balance;
column-fill: balance;
}
}
.container > img,
.container > img,
.container > svg {
.container > svg {
max-width: 100%;
max-width: 100%;
max-height: 8em;
max-height: 8em;
display: block;
display: block;
margin-left: auto;
margin-left: auto;
margin-right: auto;
margin-right: auto;
}
}
.box, svg {
.box, svg {
width: 100%;
width: 100%;
margin: 0;
margin: 0;
padding: 0;
padding: 0;
}
}
Loading