@import "variables"
/**
* The Global Footer.
* @component .footer
* @example <div class="ui footer">
* <!-- content -->
* </div>
*/
.footer
background-color #ebd088
border-top 16px solid #ae7d11
padding-bottom 20px
&--inner
container-max()
clear-left()
&--logo
float left
column(1, 1, gutter)
margin-left gutter
margin-right gutter
text-align center
@media (min-width: screen-xs)
column(1, 2, gutter)
text-align left
&--share
float left
column(1, 1, gutter)
margin-left gutter
margin-right gutter
text-align center
@media (min-width: screen-xs)
column(1, 2, gutter)
text-align right
&--items
padding 0
list-style-type none
margin 0
margin-bottom 10px
@media (min-width: screen-xs)
margin-top 30px
&--item
display inline-block
margin-left 15px
margin-right 15px
@media (min-width: screen-xs)
margin-right 0
a
color #2c1200
&--navigation
clear left
float left
text-align center
position relative
column(1, 1, gutter)
margin-left gutter
margin-right gutter
font-size 1.3rem
border-top 1px solid #373734
&--items
padding 0
list-style-type none
margin 0
&--item
text-transform uppercase
padding 8px
a
color #2c1200
trebuchet()
@media (min-width: screen-sm)
text-align right
column(1, 2, gutter)
push(1, 2)
&--item
display inline-block
&--copyright
float left
position relative
column(1, 1, gutter)
margin-left gutter
margin-right gutter
text-align center
font-size 1.1rem
trebuchet()
p
margin-top 5px
font-size 1.1rem
trebuchet()
img
display block
margin-left auto
margin-right auto
height 30px
@media (min-width: screen-sm)
column(1, 2, gutter)
pull(1, 2)
img
display inline-block
vertical-align middle
margin-right 15px
margin-bottom 0
text-align left
border-top 1px solid #373734