File: D:/HostingSpaces/SBogers10/zelfverkopen.komma.pro/resources/assets/sass/site/partials/_footer.sass
/* ==========================================================================
Main footer
========================================================================== */
footer
background: rgba($lighterGrey2, 0.5)
/* Pre footer
========================================================================== */
.pre-footer
background-color: $greyBluer
padding: 20px 0
margin-bottom: 60px
&.no-margin-bottom
margin-bottom: 0
.grid-row
+flex(space-between, center)
.streamer
position: relative
top: -3px
margin: 0
font-size: 1.2rem
line-height: 1.2
+bree
color: white
.branding-logos
+flex(flex-start, center)
a
+flex(center, center)
padding: 2px 0
opacity: 0.5
transition: opacity 0.3s
&:hover
opacity: 1
+ a
margin-left: 30px
&:before
content: ''
display: block
&.nvm
&:before
+sprite(-105px 0, 31px, 36px)
&.funda
&:before
+sprite(-89px -52px, 60px, 22px)
.cta
+flex(flex-end, center)
margin: 0
font-size: 0.8rem
line-height: 1.2
font-weight: 600
color: white
p
margin: 0
a:not(.button)
text-decoration: none
padding: 0 5px
color: white
transition: color 0.2s
&:hover
color: rgba(white, 0.6)
.button
position: relative
//top: 2px
+flex(center, center)
height: 40px
margin-left: 8px
padding: 5px 15px
border-radius: 6px
background-color: $lightOrange
font-size: 0.8rem
font-family: $fontFamily
font-weight: 600
letter-spacing: 0
transition: background-color 0.4s
&:hover
background-color: darken($lightOrange, 5%)
+respond-to-width(1000)
padding: 30px 0
.grid-row
display: block
.streamer
text-align: center
.branding-logos
position: relative
top: 10px
margin: auto
+flex(center, center)
.cta
+flex(center, center)
margin-top: 15px
+respond-to-width(500)
padding: 20px column(1, 12)
.grid-row
width: 100%
.streamer
display: none
.cta
margin-top: 0
.wrapper
display: none
.button
//width: 100%
//margin-left: 0
//margin-right: auto
/* Secondary footer
========================================================================== */
.primary
position: relative
min-height: 340px
.grid-col
vertical-align: top
h4
font-size: 0.8rem
line-height: 1.4
font-weight: 600
color: $greyBluer
margin: 0 0 40px
.blog
width: column(7, 24)
margin-right: column(1, 24)
.articles
width: 100%
//background-color: rgba($greyBluer, 0.2)
ul
padding: 0
margin: 0
max-width: 300px
li
opacity: 1
transition: opacity 0.3s
+ li
a
padding-top: 18px
a
+flex(flex-start, flex-start)
text-decoration: none
background-color: transparent
.author-image
position: relative
width: 60px
height: 60px
border-radius: 100%
background-color: rgba($lighterGrey2, 0.5)
margin: 0 25px 0 0
span
position: absolute
width: 100%
height: 100%
border-radius: 100%
background-position: center
background-size: cover
background-repeat: no-repeat
.content
width: calc(100% - 60px - 25px)
p
margin: 0
font-size: 0.8rem
line-height: 1.2
color: $grey
font-weight: 600
.meta
display: block
margin-top: 4px
color: rgba($grey, 0.8)
font-size: 0.75rem
line-height: 1
.date
display: inline-block
margin-left: 4px
color: $greyBluer
font-weight: 600
&:hover
li
opacity: 0.4
&:hover
opacity: 1
.to-blog
display: inline-block
font-size: 0.8rem
line-height: 1.2
color: $greyBluer
margin-left: 85px
text-decoration: none
margin-top: 10px
margin-bottom: 30px
.double-arrow
opacity: 0.6
&:hover
.double-arrow
&:before
transition-delay: 0.15s
&:before, &:after
transform: translate3d(5px,0,0)
+respond-to-width(780)
margin-left: 0
margin-top: 20px
//margin-bottom: 10px
.menu
width: column(7, 24)
margin-right: column(1, 24)
padding-bottom: 20px
.wrapper
+flex(space-between, flex-start)
.sub-menu
width: 47.5%
h5
margin: 0 0 40px
font-size: 0.8rem
line-height: 1.4
color: $greyBluer
font-weight: 600
ul
padding: 0
margin: 0
list-style: none
li + li
margin-top: 2px
li
padding: 0
margin: 0
line-height: 1.2
a
text-decoration: none
color: $grey
font-size: 0.8rem
line-height: 1.2
transition: color 0.3s
&:hover
color: darken($grey, 10%)
&.active
a
font-weight: bold
.social
display: block
margin-top: 40px
.wrapper
+flex(flex-start, center)
a + a
margin-left: 18px
a
+flex(center, center)
width: 25px
height: 25px
opacity: 1
transition: opacity 0.2s
&:hover
opacity: 0.6
&:after
content: ''
display: block
&.twitter
&:after
+sprite(-52px -75px, 24px, 20px)
&.facebook
&:after
+sprite(0 -75px, 24px, 24px)
&.youtube
&:after
+sprite(-62px -52px, 24px, 17px)
&.instagram
&:after
+sprite(-26px -75px, 24px, 25px)
.team
position: absolute
height: 100%
width: column(4, 12)
text-decoration: none
overflow: visible
h4
text-align: right
.double-arrow
margin-left: 9px
top: 2px
&:before, &:after
+sprite(-93px -1px, 6px, 10px)
&:hover
.double-arrow
&:before
transition-delay: 0.15s
&:before, &:after
transform: translate3d(5px,0,0)
figure
position: absolute
width: 115%
bottom: 0
right: 0
margin: 0
img
width: 100%
+respond-to-width(1100)
.blog
width: column(3.5, 8)
margin-right: column(0.5, 8)
.menu
display: none
.team
width: 50%
/* Secondary footer
========================================================================== */
.secondary
border-top: 1px solid $lighterGrey2
.grid-row
+flex(space-between, center)
padding: 28px 0 24px
.social
display: block
.wrapper
+flex(flex-start, center)
a + a
margin-left: 18px
a
+flex(center, center)
width: 25px
height: 25px
opacity: 1
transition: opacity 0.2s
&:hover
opacity: 0.6
&:after
content: ''
display: block
&.twitter
&:after
+sprite(-52px -75px, 24px, 20px)
&.facebook
&:after
+sprite(0 -75px, 24px, 24px)
&.youtube
&:after
+sprite(-62px -52px, 24px, 17px)
&.instagram
&:after
+sprite(-26px -75px, 24px, 25px)
.branding-logos
+flex(flex-start, center)
margin-left: 35px
a
+flex(center, center)
padding: 0
opacity: 0.4
transition: opacity 0.3s
&:hover
opacity: 1
+ a
margin-left: 30px
&:before
content: ''
display: block
&.nvm
&:before
+sprite(-205px -107px, 31px, 36px)
&.funda
&:before
+sprite(-215px 0, 60px, 22px)
.komma
position: relative
+flex(space-between, center)
font-size: 0.75rem
line-height: 1
width: 275px
color: rgba($greyBluer, 0.6)
text-decoration: none
transition: color 0.2s
&:hover
color: $greyBluer
span
opacity: 1
span
position: relative
top: 1px
display: inline-block
opacity: 0.4
transition: opacity 0.2s
+sprite(0 -132px, 93px, 31px)
+respond-to-width(400)
display: block
text-align: center
span
display: block
margin: 10px auto 0
.left
+flex(flex-start, center)
p
display: inline-block
vertical-align: middle
margin: 0
font-size: 0.75rem
line-height: 1.6
color: rgba($greyBluer, 0.8)
span
color: rgba($greyBluer, 0.8)
a
text-decoration: none
color: rgba($greyBluer, 0.8)
margin-left: 20px
transition: color 0.3s
&:hover
color: $greyBluer
+respond-to-width(480)
margin-bottom: 15px
span, a
display: block
text-align: center
margin: 5px 0
.social
display: none
.right
.branding-logos
display: none
+respond-to-width(1000)
.grid-row
+flex-rows
padding: 0
width: 100%
.left, .right
width: 100%
+flex(space-between, center)
padding: 25px column(1, 14)
.left
border-bottom: 1px solid $lighterGrey2
.branding-logos
display: none
.social
display: block
.right
.branding-logos
+flex(flex-start, center)
margin-left: 0
a
padding: 0
+respond-to-width(700)
display: block
text-align: center
.left
+flex(center, center)
+flex-rows
p
display: block
width: 100%
+order(2)
margin-top: 30px
.social
+order(1)
+flex(center, center)
margin-left: 0
/* Mobile blog in footer
========================================================================== */
.mobile-blog
display: none
padding: 40px
background-color: $lighterGrey2
text-align: center
h4
font-size: 0.8rem
line-height: 1.4
font-weight: 600
color: $greyBluer
margin: 0 0 40px
.to-blog
display: inline-block
font-size: 0.8rem
line-height: 1.2
font-weight: 600
color: white
text-decoration: none
margin-top: 20px
.double-arrow
margin-left: 10px
&:hover
.double-arrow
&:before
transition-delay: 0.15s
&:before, &:after
transform: translate3d(5px,0,0)
.articles
width: 100%
text-align: left
ul
padding: 0
margin: 0
list-style: none
li
opacity: 1
transition: opacity 0.3s
+ li
a
padding-top: 20px
a
display: block
text-decoration: none
padding-bottom: 20px
p
margin: 0
font-size: 0.8rem
line-height: 1.2
color: $grey
font-weight: 600
.meta
display: block
margin-top: 4px
color: rgba($grey, 0.8)
font-size: 0.75rem
line-height: 1
.date
display: inline-block
margin-left: 4px
color: $greyBluer
font-weight: 600
&:hover
li
opacity: 0.4
&:hover
opacity: 1
+respond-to-width(700)
.mobile-blog
display: block
.pre-footer
margin-bottom: 0
.primary
display: none
.secondary
.left
+flex(flex-start, center)
.social
width: 100%
.wrapper
width: 100%
max-width: 250px
margin-left: auto
margin-right: auto
+flex(center, center)
a
+ a
margin-left: 25px
.right
+flex(center, center)
.branding-logos
display: none