body > .underlay > header, body > .underlay > footer {
display: flex; flex-flow: row wrap; @media screen and (min-width: $bigscreen-breakpoint) { flex-flow: row nowrap; } .site-logo { margin: 0; padding: 0; margin-right: 100px; line-height: .5; font-size: 24px; text-transform: lowercase; color: white; font-weight: 600; :link, :hover, :visited { color: inherit; } svg { height: 30px; vertical-align: middle; } } .social-links { > a { margin-left: 14px; font-size: 18px; &:first-child { margin-left: 0; } } }
}
body > .underlay.header {
background: $header-background; > .hero { padding-top: 20px; padding-bottom: 40px; @media screen and (min-width: $widescreen-breakpoint) { padding-top: 45px; padding-bottom: 110px; } text-align: center; color: white; > h1 { font-size: 44px; font-weight: bold; margin: 0; } > .desc { font-size: 20px; margin: 0; } }
} body.layout-index-page > .underlay.header {
background: $hero-background;
} body.layout-home > .underlay.header {
background: $superhero-background; > .hero { text-align: left; }
}
body > .underlay.footer {
background: #2E333B; margin-top: 50px; @media screen and (min-width: $bigscreen-breakpoint) { margin-top: 100px; }
}
body > .underlay > header {
padding-top: 32px; padding-bottom: 32px; color: white; > nav { flex: 1; > * { font-weight: 600; margin-right: 40px; } } > nav, > .social-links { color: $primary-color; a:link, a:hover, a:visited { color: white; } }
}
body > .underlay > footer {
padding-top: 50px; padding-bottom: 50px; color: #909B9C; a:link, a:visited, a:hover { color: #909B9C; } .legal { font-size: 14px; flex: 1; display: flex; flex-flow: row nowrap; justify-content: space-between; .copyright { margin-right: 40px; white-space: nowrap; } nav { > * { margin-right: 40px; } } }
}