_assets/stylesheets/_layout/_footer.scss
// -------------------------------
// FOOTER
// -------------------------------
.site__footer {
background-color: $slate;
color: rgba(white, .6);
margin-top: 4rem;
padding: 3rem 0;
small {
@extend %sans;
color: rgba(white, .4);
display: block;
font-size: .9rem;
margin-top: 2rem;
width: 100%;
@media #{$medium-up} {
font-size: .75rem;
}
+ small {
margin-top: .3rem;
}
}
p {
@extend %sans;
font-size: 1rem;
line-height: 1.5;
}
a {
text-decoration: none;
}
.container {
margin-left: auto;
margin-right: auto;
width: 90%;
@media #{$large-up} {
width: 100%;
}
}
.icon {
fill: $brand-color;
}
}
.footer__sections {
display: flex;
flex-direction: column;
@media #{$medium-up} {
flex-direction: row;
justify-content: space-between;
}
ul {
list-style-type: none;
margin: 0;
width: 100%;
li {
@extend %sans;
font-size: .9rem;
line-height: 1.4;
margin-bottom: .3125rem;
margin-left: 0;
padding: 0;
@media #{$medium-up} {
font-size: .8rem;
}
}
}
h6 {
color: rgba(white, .6);
font-weight: 600;
margin-bottom: .625rem;
}
}
%footer-grid {
margin-bottom: 2rem;
@media #{$medium-up} {
margin-bottom: 0;
margin-right: 2rem;
}
}
.footer__about {
@extend %footer-grid;
@media #{$medium-up} {
flex: 0 1 50%;
}
}
.footer__subscribe,
.footer__links {
@extend %footer-grid;
}
.footer__logo {
display: block;
height: 28px;
margin-bottom: .625rem;
width: 200px;
@media #{$medium-up} {
height: 32px;
width: 230px;
}
.bold__first,
.bold__third {
fill: white;
}
.bold__second {
fill: $brand-color;
}
}