| /* ========================================================================== |
| FOOTER |
| ========================================================================== */ |
| |
| .page__footer { |
| @include full(); |
| @include clearfix; |
| /* sticky footer fix start */ |
| position: absolute; |
| bottom: 0; |
| width: 100%; |
| clear: both; |
| // height: auto; |
| /* sticky footer fix end */ |
| color: mix(#fff, $gray, 5%); |
| -webkit-animation: intro 0.3s both; |
| animation: intro 0.3s both; |
| -webkit-animation-delay: 0.45s; |
| animation-delay: 0.45s; |
| background-color: #262626; |
| |
| footer { |
| @include container; |
| @include clearfix; |
| } |
| |
| a { |
| color: #999999; |
| font-size: 14px; |
| text-decoration: none; |
| |
| &:hover { |
| color: #ffffff; |
| text-decoration: underline; |
| } |
| } |
| |
| ul { |
| margin-top: 40px; |
| margin-bottom: 40px; |
| list-style-type: none; |
| |
| .header { |
| color: #ffffff; |
| font-size: 14px; |
| line-height: 16px; |
| margin-bottom: 18px; |
| } |
| } |
| |
| li { |
| font-size: 14px; |
| line-height: 28px; |
| } |
| |
| @mixin social-icon($image-url) { |
| &::before { |
| content: ''; |
| display: inline-block; |
| background: url($image-url) no-repeat center/cover; |
| width: 16px; |
| height: 16px; |
| vertical-align: middle; |
| margin: 0 8px 0 0; |
| } |
| } |
| |
| .mail { |
| @include social-icon('/assets/images/Mail.png') |
| } |
| |
| .github { |
| @include social-icon('/assets/images/github.png') |
| } |
| |
| .twitter { |
| @include social-icon('/assets/images/Twitter.png') |
| } |
| |
| .rss { |
| @include social-icon('/assets/images/Rss.png') |
| } |
| } |
| |
| .page__footer-copyright { |
| font-family: $global-font-family; |
| font-size: $type-size-7; |
| } |
| |
| .page__footer-follow { |
| |
| ul { |
| margin: 0; |
| padding: 0; |
| list-style-type: none; |
| } |
| |
| li { |
| display: inline-block; |
| padding-top: 5px; |
| padding-bottom: 5px; |
| font-family: $sans-serif-narrow; |
| font-size: $type-size-6; |
| text-transform: uppercase; |
| } |
| |
| li + li:before { |
| content: ""; |
| padding-right: 5px; |
| } |
| |
| a { |
| padding-right: 10px; |
| font-weight: bold; |
| } |
| } |
| |
| .page__footer-bottom { |
| text-align: center; |
| font-size: 12px; |
| line-height: 13px; |
| color: #999999; |
| padding-top: 17px; |
| padding-bottom: 18px; |
| border-top: 1px solid #383838; |
| } |