Skip to content
This repository has been archived by the owner on Jul 30, 2019. It is now read-only.

Commit

Permalink
Merge 78c90e6 into 64f1c72
Browse files Browse the repository at this point in the history
  • Loading branch information
Andrew Maier committed Aug 9, 2016
2 parents 64f1c72 + 78c90e6 commit 1907ae7
Show file tree
Hide file tree
Showing 2 changed files with 158 additions and 79 deletions.
159 changes: 136 additions & 23 deletions app/assets/stylesheets/components/_footer.scss
View file
@@ -1,30 +1,143 @@
.usa-footer-primary-section,
.usa-footer-secondary_section {
background: $primary-darkest;
}
.site-footer{
html, body , div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, menu, nav,
output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

* { box-sizing: border-box; }
*:before, *:after { display: none; }

font-family: Source Sans Pro, Verdana, sans-serif;
font-size: 18px;
font-weight: 400;
background: #2b3e5c;
color: #fff;

padding-top: 18px;
padding-bottom: 36px;

.usa-footer-primary-section {
.usa-footer-primary-link,
.usa-footer-contact_info,
a {
color: $color-white;
font-weight: $font-normal;
font-size: $base-font-size;
.wrapper{
width: 95%;
max-width: 960px;
margin: 0 auto;
position: relative;
}
}

.usa-footer-secondary_section {
color: $color-white;
font-size: $lead-font-size;
padding-top: 0;
}
.wrapper::after{
content: "";
display: table;
clear: both;
}


.logo a,
.logo a img{ float: left; }

.logo{ margin-bottom: 16px; }

.logo::after{
content: "";
display: block;
clear: both;
}

.logo a{
font-size: 24px;
font-weight: 200;
text-decoration: none;
line-height: 44px;
color: #fff;
letter-spacing: -1px;
}

.logo img{
width: 44px;
height: 44px;
margin-right: 6px;
border: 1px solid #2a4674;
margin-left: -1px;
}

h1 a{
text-decoration: none;
font-size: 24px;
line-height: 44px;
font-weight: 100;
letter-spacing: -1px;
}

.nav-site-nav{
margin-bottom: 24px;
font-size: 16px;
}

a,
a:visited,
a:hover{ color: inherit; }

.nav-contact{ font-size: 14px; }

.nav-contact a{
margin-right: 16px;
text-decoration: none;
color: #b1cffe;
}

.nav-site-nav li:last-of-type,
.nav-contact a:last-of-type{
margin-right: 0;
}

.nav-contact h2{
display: none;
}

ul { display: block; }

ul li{
display: inline;
margin-right: 0.8em;
}

.usa-footer-slim-logo-heading {
padding-left: 0;
font-weight: $font-light;
}

.logo-img {
width: $logo-18f;
margin-right: .5em;
@media screen and (min-width: 799.99px){
.site-footer {
padding-top: 24px;
padding-bottom: 48px;
}
.site-footer .logo{ float: left; }
.site-footer .nav-site-nav,
.site-footer .nav-contact{
padding-top: 12px;
float: right;
text-align: right;
font-size: 18px;
}

.site-footer .nav-contact{
font-size: 14px;
float: right;
clear: right;
margin-top: -16px;
}

}

@media screen and (min-width: 568.88){ .site-footer .wrapper{ width: 90%; } }
78 changes: 22 additions & 56 deletions app/views/components/_footer.html.erb
View file
@@ -1,58 +1,24 @@
<footer class="usa-footer usa-footer-slim" role="contentinfo">
<div class="usa-grid usa-footer-return-to-top">
<a href="#">Return to top</a>
</div>

<div class="usa-footer-primary-section">
<div class="usa-grid-full">
<nav class="usa-footer-nav usa-width-two-thirds">
<ul class="usa-unstyled-list">
<li class="usa-width-one-sixth usa-footer-primary-content">
<%= link_to 'About',
'https://18f.gsa.gov/2015/10/13/open-source-micropurchasing/',
class: 'usa-footer-primary-link' %>
</li>
<li class="usa-width-one-sixth usa-footer-primary-content">
<%= link_to 'Feedback',
'https://docs.google.com/forms/d/15ycigLrTS7Ld4iVPgIMN-U5dMDFy6TnrHGOSkgk7qTI/viewform?c=0&w=1',
class: 'usa-footer-primary-link' %>
</li>
<li class="usa-width-one-sixth usa-footer-primary-content">
<%= link_to 'Policies',
faq_path,
class: 'usa-footer-primary-link' %>
</li>
<li class="usa-width-one-sixth usa-footer-primary-content">
<%= link_to 'API Docs',
api_doc_path,
class: 'usa-footer-primary-link' %>
</li>
<li class="usa-width-one-sixth usa-footer-primary-content">
<%= link_to 'Insights',
insights_path,
class: 'usa-footer-primary-link' %>
</li>
<footer class="site-footer" role="contentinfo">
<div class="wrapper">
<h1 class="logo">
<a href="/">
<%= image_tag "18F-Logo-2016-Blue.svg", alt: '18F Logo' %>
Micro-purchase
</a>
</h1>
<nav class="nav-site-nav">
<ul>
<li><%= link_to 'About', 'https://18f.gsa.gov/2015/10/13/open-source-micropurchasing/' %></li>
<li><%= link_to 'Feedback', 'https://docs.google.com/forms/d/15ycigLrTS7Ld4iVPgIMN-U5dMDFy6TnrHGOSkgk7qTI/viewform?c=0&w=1' %></li>
<li> <%= link_to 'Policies', faq_path %></li>
<li> <%= link_to 'API Docs', api_doc_path %></li>
<li> <%= link_to 'Insights', insights_path %></li>
</ul>
</nav>
<div class="usa-width-one-third">
<div class="usa-footer-primary-content usa-footer-contact_info">
<a href="https://github.com/18F/micropurchase/">
<i class="fa fa-github"></i> View on GitHub
</a>
</div>
<div class="usa-footer-primary-content usa-footer-contact_info">
<%= mail_to 'micropurchase@gsa.gov' %>
</div>
</div>
</div>
</div>

<div class="usa-footer-secondary_section">
<div class="usa-grid">
<div class="usa-footer-logo">
<%= image_tag "18F-Logo-2016-Blue.svg", class: 'usa-footer-slim-logo-img logo-img', alt: 'Logo image' %>
<div class="usa-footer-slim-logo-heading">Micro-purchase</div>
</div>
</div>
</nav>
<nav class="nav-contact">
<h2>Contact</h2>
<%= mail_to 'micropurchase@gsa.gov' %>
<a href="https://github.com/18F/micropurchase/">View our code on GitHub</a>
</nav>
</div>
</footer>
</footer>

0 comments on commit 1907ae7

Please sign in to comment.