Template:Etusivu/styles.css: Difference between revisions
From kubu
Jump to navigationJump to search
Erland changed the content model of the page Etusivu/styles.css from "wikitext" to "CSS" |
No edit summary |
||
| Line 1: | Line 1: | ||
.container { display: grid; | body,html {background:red;} | ||
.container { | |||
display: grid; | |||
grid-template-columns: 1fr 1fr; | grid-template-columns: 1fr 1fr; | ||
grid-template-rows: auto auto auto; | grid-template-rows: auto auto auto auto auto; | ||
gap: | gap: 1em 1em; | ||
grid-auto-flow: row; | grid-auto-flow: row; | ||
grid-template-areas: | grid-template-areas: | ||
"aloita | "aloita kubunopeasti" | ||
" | "nayttelyt ." | ||
"problems | ". problems"; | ||
} | } | ||
.aloita { grid-area: aloita; } | .aloita { grid-area: aloita; } | ||
.kubunopeasti { grid-area: kubunopeasti; } | |||
.nayttelyt { grid-area: nayttelyt; } | |||
.problems { grid-area: problems; } | .problems { grid-area: problems; } | ||
.container > div { | |||
background: #00b7ff40; | |||
border: #00b7ffFF solid 1px; | |||
border-radius: 10px; | |||
} | |||
@media (max-width: 800px) { | |||
.container { | |||
grid-template-columns: 1fr; | |||
grid-template-areas: | |||
"aloita" | |||
"kubunopeasti" | |||
"nayttelyt" | |||
"problems"; | |||
} | |||
} | |||
Revision as of 11:31, 26 July 2024
body,html {background:red;}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto auto auto;
gap: 1em 1em;
grid-auto-flow: row;
grid-template-areas:
"aloita kubunopeasti"
"nayttelyt ."
". problems";
}
.aloita { grid-area: aloita; }
.kubunopeasti { grid-area: kubunopeasti; }
.nayttelyt { grid-area: nayttelyt; }
.problems { grid-area: problems; }
.container > div {
background: #00b7ff40;
border: #00b7ffFF solid 1px;
border-radius: 10px;
}
@media (max-width: 800px) {
.container {
grid-template-columns: 1fr;
grid-template-areas:
"aloita"
"kubunopeasti"
"nayttelyt"
"problems";
}
}