46 lines
794 B
CSS
46 lines
794 B
CSS
|
:root {
|
||
|
|
--break-point: 60em;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
width: 100%;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr var(--break-point) 1fr;
|
||
|
|
place-content: center;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
body > .container {
|
||
|
|
margin-top: 2rem;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
border: var(--default-border);
|
||
|
|
box-shadow: var(--default-box-shadow);
|
||
|
|
grid-column: 2;
|
||
|
|
transition: 1s margin-top;
|
||
|
|
}
|
||
|
|
|
||
|
|
body > .container > .content {
|
||
|
|
padding: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content > .title {
|
||
|
|
display: grid;
|
||
|
|
grid-gap: 1rem;
|
||
|
|
grid-auto-flow: column;
|
||
|
|
place-content: start;
|
||
|
|
place-items: center start;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (max-width: 60em) {
|
||
|
|
body {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
body > .container {
|
||
|
|
grid-column: 1;
|
||
|
|
margin-top: 0;
|
||
|
|
border: unset;
|
||
|
|
box-shadow: unset;
|
||
|
|
}
|
||
|
|
}
|