$red: #ffd3d3; | |
$blue: #caecff; | |
$grey: #f0f0f0; | |
html, body { | |
padding: 0; | |
margin: 0; | |
} | |
body { | |
font-family: Arial, sans-serif; | |
} | |
#header h1 { | |
margin: 0; | |
} | |
.container { | |
max-width: map-get($breakpoints, screen); | |
margin: auto; | |
} | |
.page-grid { | |
display: grid; | |
grid-auto-rows: minmax(75px, auto); | |
} | |
#header { | |
background: $red; | |
padding: 1rem; | |
grid-row: 1 / span 1; | |
} | |
#content { | |
grid-row: 2 / span 1; | |
} | |
@include respond-above(screen){ | |
#content { | |
display: grid; | |
grid-template-columns: 30% 70%; | |
grid-auto-rows: minmax(600px, auto); | |
.sidebar { | |
background: $grey; | |
grid-column: 1 / span 1; | |
} | |
.main { | |
padding: 1rem; | |
grid-column: 2 / span 1; | |
} | |
} | |
} | |
@include respond-below(screen){ | |
#content { | |
padding: 1rem; | |
} | |
} | |
#footer { | |
background: $blue; | |
padding: 1rem; | |
grid-row: 3 / span 1; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment