updating footer markup, first pass at styles (not responsive yet)

This commit is contained in:
Joshua Seigler 2016-07-24 18:44:43 -04:00
parent 0b3cbea742
commit ee61fa65c1
3 changed files with 121 additions and 104 deletions

View file

@ -1,53 +1,79 @@
{% t nav.get-dash %}
<ul>
<li>{% t nav.download %}</li>
<li>{% t nav.buy %}</li>
<li>{% t nav.shop %}</li>
<li>{% t nav.debit %}</li>
</ul>
<nav class="content">
<section>
{% t nav.get-dash %}
<ul>
<li><a href="#">{% t nav.download %}</a></li>
<li><a href="#">{% t nav.buy %}</a></li>
<li><a href="#">{% t nav.shop %}</a></li>
<li><a href="#">{% t nav.debit %}</a></li>
</ul>
</section>
{% t nav.participate %}
<ul>
<li>{% t nav.mining %}</li>
<li>{% t nav.masternode %}</li>
<li>{% t nav.wallet %}</li>
<li>{% t nav.funding %}</li>
</ul>
<section>
{% t nav.participate %}
<ul>
<li><a href="#">{% t nav.mining %}</a></li>
<li><a href="#">{% t nav.masternode %}</a></li>
<li><a href="#">{% t nav.wallet %}</a></li>
<li><a href="#">{% t nav.funding %}</a></li>
</ul>
</section>
{% t nav.currency %}
<ul>
<li>{% t nav.exchange %}</li>
<li>{% t nav.governance %}</li>
<li>{% t nav.explorers %}</li>
<li>{% t nav.stats %}</li>
</ul>
<section>
{% t nav.currency %}
<ul>
<li><a href="#">{% t nav.exchange %}</a></li>
<li><a href="#">{% t nav.governance %}</a></li>
<li><a href="#">{% t nav.explorers %}</a></li>
<li><a href="#">{% t nav.stats %}</a></li>
</ul>
</section>
{% t nav.community %}
<ul>
<li>{% t nav.discussion %}</li>
<li>{% t nav.social-apps %}</li>
<li>{% t nav.news %}</li>
<li>{% t nav.tools-dev %}</li>
<li>{% t nav.tools-masternodes %}</li>
</ul>
<section>
{% t nav.community %}
<ul>
<li><a href="#">{% t nav.discussion %}</a></li>
<li><a href="#">{% t nav.social-apps %}</a></li>
<li><a href="#">{% t nav.news %}</a></li>
<li><a href="#">{% t nav.tools-dev %}</a></li>
<li><a href="#">{% t nav.tools-masternodes %}</a></li>
</ul>
</section>
{% t nav.project %}
<ul>
<li>{% t nav.help %}</li>
<li>{% t nav.info %}</li>
<li>{% t nav.team %}</li>
<li>{% t nav.contact %}</li>
</ul>
<section>
{% t nav.project %}
<ul>
<li><a href="#">{% t nav.help %}</a></li>
<li><a href="#">{% t nav.info %}</a></li>
<li><a href="#">{% t nav.team %}</a></li>
<li><a href="#">{% t nav.contact %}</a></li>
</ul>
</section>
{% t nav.social %}
<ul>
<li>{% t nav.blog %}</li>
<li>{% t nav.reddit %}</li>
<li>{% t nav.twitter %}</li>
<li>{% t nav.youtube %}</li>
<li>{% t nav.google %}</li>
<li>{% t nav.linkedin %}</li>
<li>{% t nav.facebook %}</li>
<li>{% t nav.instagram %}</li>
<li>{% t nav.github %}</li>
</ul>
<section>
{% t nav.social %}
<ul class="footer--social">
<li><a href="#">{% t nav.blog %}</a></li>
<li><a href="#">{% t nav.reddit %}</a></li>
<li><a href="#">{% t nav.twitter %}</a></li>
<li><a href="#">{% t nav.youtube %}</a></li>
<li><a href="#">{% t nav.google %}</a></li>
<li><a href="#">{% t nav.linkedin %}</a></li>
<li><a href="#">{% t nav.facebook %}</a></li>
<li><a href="#">{% t nav.instagram %}</a></li>
<li><a href="#">{% t nav.github %}</a></li>
</ul>
</section>
</nav>
<div class="footer--menu content">
<div class="footer--languagePicker"></div>
<a href="#">Terms of Use</a>
<a href="#">Contact</a>
<a href="#">Sitemap</a>
</div>
<div class="footer--legal">
<div class="content">
<span class="footer--copyright">&copy; {{ site.time | date: "%Y" }} The Dash Network</span>
<a href="#">Github Source</a>
</div>
</div>

View file

@ -26,8 +26,8 @@
{{ content }}
<!-- Footer -->
<footer class="content">
{% include footer.html %}
<footer>
{% include footer.html %}
</footer>
<!-- Mobile Nav -->

View file

@ -1,55 +1,46 @@
/*
footer
nav.content
section x5
<text>
ul
li
.footer--menu.content
.footer--languagePicker
a x3
.footer--legal
.content
.footer--copyright
a
*/
footer {
padding-top: 20px;
ul {
margin: 0;
padding: 0;
}
.nav {
float: right;
text-align: right;
display: block;
li {
display: inline;
margin-left: 20px;
a {
text-decoration: none;
color: $blue;
font-size: 16px;
font-family: 'montserratregular';
&:hover {
color: darken($blue, 6);
}
}
.sign-up {
color: $green !important;
&:hover {
color: darken($green, 6) !important;
}
}
}
}
.social {
float: right;
text-align: right;
display: block;
li {
display: inline;
margin-left: 10px;
}
.social-icon {
width: 30px;
height: auto;
}
}
.logo {
float: left;
width: 56px;
height: auto;
}
.copyright {
margin-top: 13px;
float: left;
font-size: 12px;
color: #999;
}
}
background-color: #333333;
color: #717171;
padding-top: 4em;
a {
color: $white;
}
> nav {
display: table;
table-layout: fixed;
> section {
display: table-cell;
> ul {
margin: 1em 0 0;
padding: 0;
> li {
list-style: none;
}
}
}
}
}
.footer--social {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}