90 lines
1.2 KiB
CSS
90 lines
1.2 KiB
CSS
h1 {
|
|
color: blue;
|
|
}
|
|
|
|
[data-loader] {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1000;
|
|
height: .2em;
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: blue;
|
|
transition: all 500ms;
|
|
}
|
|
|
|
body {
|
|
display: grid;
|
|
grid-template-columns: 15em 1fr;
|
|
grid-template-rows: 3em 1fr 3em;
|
|
|
|
grid-template-areas:
|
|
"nav header"
|
|
"nav main"
|
|
"nav footer";
|
|
|
|
margin: 0;
|
|
height: 100vh;
|
|
}
|
|
|
|
@media (max-width: 1080px) {
|
|
body {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 3em 1fr 3em;
|
|
|
|
grid-template-areas:
|
|
"header"
|
|
"main"
|
|
"footer";
|
|
}
|
|
|
|
nav {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 15em;
|
|
}
|
|
}
|
|
|
|
body > * {
|
|
padding: 1em;
|
|
}
|
|
|
|
hgroup * {
|
|
margin: 0;
|
|
}
|
|
|
|
nav {
|
|
grid-area: nav;
|
|
|
|
background-color: lightgray;
|
|
}
|
|
|
|
header {
|
|
grid-area: header;
|
|
|
|
background-color: orange;
|
|
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
}
|
|
|
|
main {
|
|
grid-area: main;
|
|
|
|
background-color: darkgray;
|
|
}
|
|
|
|
footer {
|
|
grid-area: footer;
|
|
|
|
background-color: grey;
|
|
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|