Changed footer layout

This commit is contained in:
Michael Smith 2016-12-26 15:13:20 +01:00
parent 46d13e2bba
commit af569859e5
2 changed files with 7 additions and 90 deletions

View File

@ -1,39 +1,12 @@
<footer class="site-footer"> <footer class="site-footer">
<div class="wrapper"> <div class="wrapper">
<h2 class="footer-heading">{{ site.title | escape }}</h2> <h2 class="footer-heading">{{ site.title | escape }}</h2>
<p><em>{{ site.description | escape }}</em></p>
<div class="footer-col-wrapper"> {% if site.author %}
<div class="footer-col footer-col-1"> <br>{{ site.author | escape }}
<ul class="contact-list"> {% endif %}
<li> {% if site.email %}
{% if site.author %} <br><a href="mailto:{{ site.email }}">{{ site.email }}
{{ site.author | escape }} {% endif %}
{% else %}
{{ site.title | escape }}
{% endif %}
</li>
{% if site.email %}
<li><a href="mailto:{{ site.email }}">{{ site.email }}</a></li>
{% endif %}
</ul>
</div>
<div class="footer-col footer-col-2">
<ul class="social-media-list">
{% if site.github_username %}
<li>
{% include icon-github.html username=site.github_username %}
</li>
{% endif %}
</ul>
</div>
<div class="footer-col footer-col-3">
<p>{{ site.description | escape }}</p>
</div>
</div>
</div> </div>
</footer> </footer>

View File

@ -82,62 +82,6 @@
margin-bottom: $spacing-unit / 2; margin-bottom: $spacing-unit / 2;
} }
.contact-list,
.social-media-list {
list-style: none;
margin-left: 0;
}
.footer-col-wrapper {
font-size: 15px;
margin-left: -$spacing-unit / 2;
@extend %clearfix;
}
.footer-col {
float: left;
margin-bottom: $spacing-unit / 2;
padding-left: $spacing-unit / 2;
}
.footer-col-1 {
width: -webkit-calc(35% - (#{$spacing-unit} / 2));
width: calc(35% - (#{$spacing-unit} / 2));
}
.footer-col-2 {
width: -webkit-calc(20% - (#{$spacing-unit} / 2));
width: calc(20% - (#{$spacing-unit} / 2));
}
.footer-col-3 {
width: -webkit-calc(45% - (#{$spacing-unit} / 2));
width: calc(45% - (#{$spacing-unit} / 2));
}
@include media-query($on-laptop) {
.footer-col-1,
.footer-col-2 {
width: -webkit-calc(50% - (#{$spacing-unit} / 2));
width: calc(50% - (#{$spacing-unit} / 2));
}
.footer-col-3 {
width: -webkit-calc(100% - (#{$spacing-unit} / 2));
width: calc(100% - (#{$spacing-unit} / 2));
}
}
@include media-query($on-palm) {
.footer-col {
float: none;
width: -webkit-calc(100% - (#{$spacing-unit} / 2));
width: calc(100% - (#{$spacing-unit} / 2));
}
}
/** /**
* Page content * Page content
*/ */