Skip to content

Commit b55c4fb

Browse files
author
JT
committed
footer responsive
1 parent bd37130 commit b55c4fb

3 files changed

Lines changed: 91 additions & 41 deletions

File tree

‎website/source/layouts/_footer.erb‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
11
<div id="footer-wrap">
22
<div id="footer">
3-
<div class="container">
4-
<div class="footer-links">
5-
<ul class="footer-links nav navbar-nav rls-sb">
6-
<li class="li-under"><a href="/intro/index.html">Intro</a></li>
7-
<li class="active li-under"><a href="/docs/index.html">Docs</a></li>
8-
<li class="li-under"><a href="/community.html">Community</a></li>
9-
<li class="li-under"><a href="http://demo.terraform.io/">Demo</a></li>
10-
</ul>
11-
</div>
12-
<div class="footer-hashi os">
13-
<span>&copy; 2014. A <a href="http://www.hashicorp.com">HashiCorp</a> Project.</span>
14-
<a class="hashi-logo" href="http://www.hashicorp.com"><i class="hashi-logo"></i></a>
3+
<div class="container">
4+
<div class="row">
5+
<div class="footer-links col-sm-7 col-xs-12">
6+
<ul class="footer-links nav navbar-nav">
7+
<li class="li-under"><a href="/intro/index.html">Intro</a></li>
8+
<li class="active li-under"><a href="/docs/index.html">Docs</a></li>
9+
<li class="li-under"><a href="/community.html">Community</a></li>
10+
<li class="li-under"><a href="http://demo.terraform.io/">Demo</a></li>
11+
</ul>
12+
</div>
13+
<div class="footer-hashi col-sm-5 col-xs-12">
14+
<div class="pull-right">
15+
<span>&copy; 2014. A <a href="http://www.hashicorp.com">HashiCorp</a> Project.</span>
16+
<a class="hashi-logo" href="http://www.hashicorp.com"><i class="hashi-logo"></i></a>
17+
</div>
18+
</div>
19+
</div>
1520
</div>
1621
</div>
1722
</div>
18-
</div>
1923

2024
<script src="/javascripts/lib/jquery-2.0.3.min.js"></script>
2125
<script src="/javascripts/lib/bootstrap.min.js"></script>

‎website/source/stylesheets/_footer.less‎

Lines changed: 41 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,6 @@ body.page-home{
2727

2828

2929
.footer-links{
30-
float: none;
31-
display: inline-block;
3230
margin-bottom: 20px;
3331

3432
.li-under a:hover::after,
@@ -91,7 +89,7 @@ body.page-home{
9189

9290
.footer-hashi{
9391
float: right;
94-
padding-top: 8px;
92+
padding-top: 5px;
9593
letter-spacing: 2px;
9694

9795
a{
@@ -111,8 +109,8 @@ body.page-home{
111109
width: 37px;
112110
height: 40px;
113111
background: url(../images/footer-hashicorp-logo.png) 0 0 no-repeat;
114-
.img-retina("../images/footer-hashicorp-logo.png", "../images/footer-hashicorp-logo@2x.png", 37px, 40px);
115-
}
112+
.img-retina("../images/footer-hashicorp-logo.png", "../images/footer-hashicorp-logo@2x.png", 37px, 40px);
113+
}
116114
}
117115
}
118116
}
@@ -148,27 +146,55 @@ body.page-home{
148146
}
149147
}
150148

151-
@media (max-width: 768px) {
149+
@media (max-width: 992px) {
152150
#footer{
153151
.footer-hashi {
152+
padding-top: 14px;
154153
span{
155-
margin-right: 0;
154+
margin-right: 6px;
156155
}
157-
158156
.hashi-logo{
159-
display: block;
160-
margin-top: 15px;
161-
margin-bottom: 20px;
157+
i{
158+
width: 20px;
159+
height: 22px;
160+
background-size: 20px 22px;
161+
}
162+
}
163+
}
164+
}
165+
}
166+
167+
@media (max-width: 768px) {
168+
#footer{
169+
padding: 100px 0 40px;
170+
text-align: center;
171+
172+
.footer-links{
173+
float: none;
174+
display: inline-block;
175+
}
176+
177+
.footer-hashi {
178+
float: none;
179+
display: inline-block;
180+
181+
.pull-right{
182+
float: none !important;
162183
}
163184
}
185+
}
186+
}
164187

165-
.buttons.navbar-nav{
166-
margin-left: 0;
188+
@media (max-width: 320px) {
189+
#footer{
190+
text-align: center;
167191

168-
li.first {
169-
margin-right: 0 !important;
192+
.footer-links{
193+
.li-under{
194+
float: none !important;
170195
}
171196
}
172197
}
173198
}
174199

200+

‎website/source/stylesheets/main.css‎

Lines changed: 33 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -387,8 +387,6 @@ body.page-home #footer {
387387
color: black;
388388
}
389389
#footer .footer-links {
390-
float: none;
391-
display: inline-block;
392390
margin-bottom: 20px;
393391
}
394392
#footer .footer-links .li-under a:hover::after,
@@ -447,7 +445,7 @@ body.page-home #footer {
447445
}
448446
#footer .footer-hashi {
449447
float: right;
450-
padding-top: 8px;
448+
padding-top: 5px;
451449
letter-spacing: 2px;
452450
}
453451
#footer .footer-hashi a {
@@ -503,20 +501,42 @@ body.page-home #footer {
503501
background-size: 37px 40px;
504502
}
505503
}
506-
@media (max-width: 768px) {
504+
@media (max-width: 992px) {
505+
#footer .footer-hashi {
506+
padding-top: 14px;
507+
}
507508
#footer .footer-hashi span {
508-
margin-right: 0;
509+
margin-right: 6px;
509510
}
510-
#footer .footer-hashi .hashi-logo {
511-
display: block;
512-
margin-top: 15px;
513-
margin-bottom: 20px;
511+
#footer .footer-hashi .hashi-logo i {
512+
width: 20px;
513+
height: 22px;
514+
background-size: 20px 22px;
514515
}
515-
#footer .buttons.navbar-nav {
516-
margin-left: 0;
516+
}
517+
@media (max-width: 768px) {
518+
#footer {
519+
padding: 100px 0 40px;
520+
text-align: center;
521+
}
522+
#footer .footer-links {
523+
float: none;
524+
display: inline-block;
525+
}
526+
#footer .footer-hashi {
527+
float: none;
528+
display: inline-block;
529+
}
530+
#footer .footer-hashi .pull-right {
531+
float: none !important;
532+
}
533+
}
534+
@media (max-width: 320px) {
535+
#footer {
536+
text-align: center;
517537
}
518-
#footer .buttons.navbar-nav li.first {
519-
margin-right: 0 !important;
538+
#footer .footer-links .li-under {
539+
float: none !important;
520540
}
521541
}
522542
#jumbotron-mask {

0 commit comments

Comments
 (0)