Beispiel:SELFHTML-Beispiel-Grundlayout.css
Aus SELFHTML-Wiki
/* Grundlayout für SELFHTML-Beispiele */
html {
background: transparent!important;
--blue: #337599;
--green: #93b946;
--red: #c82f04;
--yellow: #dfac20;
--lightblue: #d6e3eb;
--lightgreen: #ebf5d7;
--lightred: #ffebe6;
--lightyellow: #f9eed2;
}
body {
margin: 1em auto;
max-width: 60em;
font-family: sans-serif;
color: #333333;
}
h1 {
border-radius: 0 .5rem .5rem;
border: thin solid;
padding: 1rem;
margin: 1rem;
}
h1 {
background: #F1F3F4 url("//wiki.selfhtml.org/images/a/ad/Selfhtml-beispiel_150.svg") 10px 5px no-repeat;
border-color: #d5d5d5;
font-size: 100%;
padding-top: 60px;
}
@media(min-width: 20em) {
h1 {
font-size: 120%;
}
}
@media(min-width: 25em) {
h1 {
font-size: 100%;
padding-left: 200px;
padding-top: 1rem;
}
}
@media(min-width: 30em) {
h1 {
font-size: 110%;
padding-left: 200px;
padding-top: 1rem;
}
}
@media(min-width: 35em) {
h1 {
font-size: 120%;
}
}
@media(min-width: 40em) {
h1 {
font-size: 140%;
}
}
@media(min-width: 50em) {
h1 {
font-size: 200%;
}
}