app/assets/stylesheets/header.scss
@import 'variables';
.header {
background: $secondary-color;
border-bottom: 0.625rem solid $primary-color;
padding: 1.5rem 0 2rem;
@media (min-width: 768px) {
padding: 3rem 0;
}
}
.hero {
background: $white;
border: 5px solid $primary-color;
border-radius: $border-radius;
box-shadow: 0 0 0.625rem $primary-color;
margin-bottom: 1rem;
padding: 1.5rem 1.5rem 1rem;
position: relative;
text-align: center;
@media (min-width: 768px) {
margin: 0 5rem;
margin-bottom: 2rem;
padding: 2rem 4rem;
}
@media (min-width: 1024px) {
text-align: left;
}
> h1 {
color: $primary-color;
font-size: 1.5625rem;
font-weight: bold;
}
> p {
color: $sub-heading;
font-weight: bold;
}
}
.header-secondary {
background: $white;
border-radius: $border-radius;
box-shadow: 0 0 20px rgba($primary-color, 0.7);
padding: 2rem;
text-align: center;
@media (min-width: 768px) {
margin: 0 8rem;
padding: 2rem 3rem;
}
@media (min-width: 1024px) {
margin: 0 12rem;
padding: 2rem 3rem;
}
> h2 {
color: $primary-color;
font-size: 1.125rem;
font-weight: bold;
margin-bottom: 1.5rem;
}
}
.sub-header {
background: $secondary-color;
overflow: auto;
padding: 1rem 0;
@media (min-width: 768px) {
padding: 2.5rem 0;
}
h1 {
background: $white;
border: 0.3125rem solid $primary-color;
border-radius: $border-radius;
color: $primary-color;
display: inline-block;
font-size: 1rem;
font-weight: bold;
padding: 0.75rem 1.5rem;
width: auto;
}
}