2020-09-05 22:39:55 +02:00
// Define easily accessible color-defalts for the footer.
$primary-link-color : $-beige ;
$primary-line-color : $-almost-white ;
* {
box-sizing : border-box
}
html , body {
height : 100 %
}
body {
font-family : $-primary-sans-serif-font ;
font-size : 0 .75 em ;
margin : auto ;
display : flex ;
flex-flow : column nowrap ;
// This justify-content is essentially unnecessary in Firefox and Chrome due to the flex: 1 1 auto on the main. However, it's needed to push the footer down on IE11
justify-content : space-between
}
ul {
list-style : none
}
a {
text-decoration : none
}
. generic-anchor {
color : $primary-link-color ;
& : hover {
color : $primary-line-color
}
}
. flex-rw {
display : flex ;
flex-flow : row wrap ;
}
footer {
background : $-grey ;
margin-top : auto ;
width : 100 %
}
. footer-list-top {
width : 33 .333 %
}
. footer-list-top > li {
text-align : center ;
padding-bottom : 10 px
}
. footer-list-header {
padding : 10 px 0 5 px 0 ;
color : $-almost-white ;
font-size : 2 .3 vw ;
}
. footer-list-anchor {
font-size : 1 .3 em ;
}
. footer-social-section {
2020-07-27 18:45:07 +02:00
width : 100 % ;
2020-09-05 22:39:55 +02:00
align-items : center ;
justify-content : space-around ;
position : relative ;
margin-top : 5 px ;
}
2020-07-27 18:45:07 +02:00
2020-09-05 22:39:55 +02:00
. footer-social-section : : after {
content : " " ;
position : absolute ;
z-index : 1 ;
top : 50 % ;
left : 10 px ;
border-top : 1 px solid $primary-line-color ;
width : calc ( 100 % - 20 px )
}
. footer-social-overlap {
position : relative ;
z-index : 2 ;
background : $-grey ;
padding : 0 20 px ;
}
2020-09-05 20:31:00 +02:00
2020-09-05 22:39:55 +02:00
. footer-social-explore {
display : flex ;
align-items : center ;
font-size : 3 .5 em ;
color : $-almost-white
}
2020-07-27 18:45:07 +02:00
2020-09-05 22:39:55 +02:00
. footer-social-small {
font-size : 0 .6 em ;
padding : 0 px 20 px
}
2020-07-27 18:45:07 +02:00
2020-09-05 22:39:55 +02:00
. footer-social-overlap > a {
font-size : 3 em
}
. footer-social-overlap > a : not ( : first-child ) {
margin-left : 0 .38 em
}
. footer-bottom-section {
width : 100 % ;
padding : 10 px ;
border-top : 1 px solid $primary-line-color ;
margin-top : 10 px
}
2020-07-27 18:45:07 +02:00
2020-09-05 22:39:55 +02:00
. footer-bottom-section > div : first-child {
margin-right : auto
}
. footer-bottom-wrapper {
font-size : 1 .5 em ;
color : $-almost-white
}
@media only screen and ( max-width : 768 px ) {
. footer-list-header {
font-size : 2 em
}
. footer-list-anchor {
font-size : 1 .1 em
}
. footer-social-connect {
font-size : 2 .5 em
}
. footer-social-overlap > a {
font-size : 2 .24 em
}
. footer-bottom-wrapper {
font-size : 1 .3 em
}
}
@media only screen and ( max-width : 568 px ) {
main {
font-size : 5 em
}
. footer-list-top {
width : 100 %
}
. footer-list-header {
font-size : 3 em ;
}
. footer-list-anchor {
font-size : 1 .5 em
}
. footer-social-section {
justify-content : center
}
. footer-social-section : : after {
top : 25 %
}
. footer-social-connect {
margin-bottom : 10 px ;
padding : 0 10 px
}
. footer-social-overlap {
display : flex ;
justify-content : center ;
}
. footer-social-icons-wrapper {
width : 100 % ;
padding : 0
}
. footer-social-overlap > a : not ( : first-child ) {
margin-left : 20 px ;
}
. footer-bottom-section {
padding : 0 5 px 10 px 5 px
}
. footer-bottom-wrapper {
text-align : center ;
width : 100 % ;
margin-top : 10 px
}
}
@media only screen and ( max-width : 480 px ) {
. footer-social-overlap > a {
margin : auto
}
. footer-social-overlap > a : not ( : first-child ) {
margin-left : 0 ;
}
. footer-bottom-rights {
display : block
}
}
@media only screen and ( max-width : 320 px ) {
. footer-list-header {
font-size : 2 .2 em
}
. footer-list-anchor {
font-size : 1 .2 em
}
. footer-social-connect {
font-size : 2 .4 em
}
. footer-social-overlap > a {
font-size : 2 .24 em
}
. footer-bottom-wrapper {
font-size : 1 .3 em
2020-07-27 18:45:07 +02:00
}
2020-09-05 22:39:55 +02:00
}