app/assets/stylesheets/scss/footer.scss
@import "colors.scss";
footer {
display: grid;
background-color: $dark-blue;
color: $light-blue;
margin-top: 5rem;
grid-template-columns: repeat(2, 1fr) min-content repeat(2, 1fr);
grid-row-gap: 0.9375rem;
grid-column-gap: 1.875rem;
padding: 2.5rem calc((100vw - 1250px) / 2) 2.5rem calc((100vw - 1250px) / 2);
grid-row-gap: 0.9375rem;
grid-column-gap: 1.875rem;
.logo {
grid-column: 3;
height: 168.567px;
width: 145px;
max-width: 155px;
grid-row: 1;
margin-top: -2.5rem;
display: flex;
justify-content: space-around;
svg {
width: 100%;
fill: $white;
}
svg #badge-bg {
opacity: 1 !important;
fill: $dark-blue;
}
}
a.logo-badge {
grid-area: logo;
display: flex;
align-items: flex-end;
justify-content: center;
margin-top: -2.5rem;
}
div.footer-list {
grid-row: 1;
display: flex;
justify-content: space-around;
}
ul {
list-style-type: none;
font-family: "Open Sans", sans-serif;
font-size: 0.8125rem;
padding: 0;
}
a.nav-link {
text-decoration: none;
color: $light-blue;
&:hover {
color: $alt-bright-blue;
text-decoration: none;
transition: all 0.25s ease;
}
}
a {
text-decoration: none;
color: $light-blue;
}
a.link {
padding: 0.5rem 1rem;
display: block;
&:hover {
color: $alt-bright-blue;
text-decoration: none;
transition: all 0.25s ease;
}
}
div.footer-placeholder {
height: 100px;
grid-row: 2;
}
div.footer-version {
margin-top: 3.125rem;
grid-row: 2;
grid-column: 1 / span 5;
font-family: "Open Sans", sans-serif;
font-size: 0.8125rem;
p {
margin-bottom: 0.2rem;
}
}
div.footer-copyright {
font-family: "Open Sans", sans-serif;
font-size: 0.8125rem;
grid-row: 3;
grid-column: 1 / span 5;
display: flex;
flex-direction: column;
}
.copyright-signature {
display: flex;
justify-content: center;
margin: 1.5625rem 1rem;
}
a.copyright-policy {
margin-left: 0.625rem;
color: $light-blue;
text-decoration: underline;
&:hover {
color: $alt-bright-blue;
transition: all 0.25s ease;
}
}
}