Skip to content

Instantly share code, notes, and snippets.

@jwchristiansen

jwchristiansen/index.scss Secret

Last active Sep 8, 2020
Embed
What would you like to do?
$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