Skip to content

Commit 0006c99

Browse files
author
Scott Cranfill
committed
Update design to "version 1.1"
- Add featured projects to homepage - Display multiple articles on the homepage - Update single entry layout - Revise footer
1 parent af1ddfa commit 0006c99

24 files changed

+1421
-625
lines changed

‎TERMS.md

+7
Original file line numberDiff line numberDiff line change
@@ -40,3 +40,10 @@ author or the affirmer.
4040

4141
[policy]: http://github.com/cfpb/source-code-policy/
4242
[CC0]: http://creativecommons.org/publicdomain/zero/1.0/legalcode
43+
44+
45+
## This project makes use of:
46+
47+
- [Respond.js](https://github.com/scottjehl/Respond) by Scott Jehl, licensed under the MIT license.
48+
- [The HTML5 Shiv](https://github.com/aFarkas/html5shiv), dual licensed under the MIT or GPL Version 2 licenses.
49+
- [A Fonte Garde](https://github.com/filamentgroup/a-font-garde) by Filament Group,licensed under the MIT license.

‎_includes/footer.html

+31-5
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,44 @@
11
<div class="wrap">
22

33
<section class="footer-links">
4-
<ul>
4+
<ul class="footer-links_primary cf">
55
<li>
66
<a href="http://www.consumerfinance.gov/">consumerfinance.gov</a>
77
</li>
88
<li>
99
<a href="http://github.com/cfpb">github.com/cfpb</a>
1010
</li>
11+
</ul>
12+
<ul class="footer-links_secondary cf">
1113
<li>
12-
<a href="http://www.consumerfinance.gov/jobs/">Work with us</a>
14+
<a href="http://cfpb.github.io/introducing-cfpb-open-tech">About</a>
1315
</li>
16+
<!-- <li>
17+
<a href="http://cfpb.github.io/design-manual/">Design Manual</a>
18+
</li> -->
1419
<li>
1520
<a href="mailto:[email protected]">Contact us</a>
1621
</li>
22+
<li>
23+
<a href="http://www.consumerfinance.gov/jobs/">Work here</a>
24+
</li>
25+
</ul>
26+
<ul class="footer-links_social cf">
27+
<li>
28+
<a class="icon-fallback-text" href="http://github.com/cfpb">
29+
<i class="icon icon-github-alt" aria-hidden="true"></i>
30+
<span class="text">GitHub</span>
31+
</a>
32+
</li>
33+
<li>
34+
<a class="icon-fallback-text" href="http://twitter.com/CFPB">
35+
<i class="icon icon-twitter-alt" aria-hidden="true"></i>
36+
<span class="text">Twitter</span>
37+
</a>
38+
</li>
39+
<!-- <li>
40+
<a href="#"><i class="icon-rss-alt">RSS Feed</i></a>
41+
</li> -->
1742
</ul>
1843
</section>
1944

@@ -22,10 +47,11 @@ <h4>Open Source</h4>
2247
<p>
2348
As a work of the United States Government, source code released by the CFPB is in the public
2449
domain by default within the United States.
25-
<a href="https://github.com/cfpb/source-code-policy/blob/master/cfpb-source-code-policy.txt">
26-
View our full source code policy.
27-
</a>
2850
</p>
51+
<a class="call-to-action__arrow"
52+
href="https://github.com/cfpb/source-code-policy/blob/master/cfpb-source-code-policy.txt">
53+
View our full source code policy.
54+
</a>
2955
</section>
3056

3157
</div>

‎_includes/header.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33
<img class="logo" src="{% if page.assetpath %}{{ page.assetpath }}{% endif %}img/logo_210.png"
44
alt="Consumer Financial Protection Bureau">
55
</a>
6-
<h1><a class="home" href="/">Open Tech</a></h1>
6+
<h1><a class="home" href="/">CFPB Open Tech</a></h1>
77
</div>

‎_layouts/default.html

+3-14
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@
1616

1717
<!--[if lt IE 9]>
1818
<link rel="stylesheet" href="{% if page.assetpath %}{{ page.assetpath }}{% endif %}css/ie8.css">
19-
<script src="{% if page.assetpath %}{{ page.assetpath }}{% endif %}js/html5shiv-printshiv.js" media="all"></script>
2019
<script src="{% if page.assetpath %}{{ page.assetpath }}{% endif %}js/respond.min.js" media="all"></script>
2120
<![endif]-->
2221

22+
<script src="{% if page.assetpath %}{{ page.assetpath }}{% endif %}js/modernizr-afontgarde.min.js" media="all"></script>
2323
</head>
2424

2525
<body>
@@ -43,20 +43,9 @@
4343
</footer>
4444

4545
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
46+
<script src="{% if page.assetpath %}{{ page.assetpath }}{% endif %}js/afontgarde.js"></script>
4647
<script>
47-
$(document).ready(function() {
48-
// Select a random feature to display.
49-
var features = $('.feature');
50-
var numFeatures = features.length;
51-
var showFeature = Math.floor(Math.random()*numFeatures);
52-
features.removeClass('is-showing');
53-
var i = 0;
54-
features.each(function(index) {
55-
if (showFeature == index) {
56-
$(this).addClass('is-showing');
57-
}
58-
});
59-
});
48+
AFontGarde( 'CFPB_Icons', '\uE600\uE601\uE602\uE605' );
6049
</script>
6150
<!-- <script src="{% if page.assetpath %}{{ page.assetpath }}{% endif %}js/site.js"></script> -->
6251

‎_layouts/post.html

+68-4
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,73 @@
44
---
55

66
<div class="content-body wrap">
7-
<article class="single entry">
8-
<h1 class="entry-title">{{ page.title }}</h1>
9-
<p class="entry-date">{{ page.date | date_to_string }}</p>
10-
{{ content }}
7+
<article class="entry entry__single">
8+
<div class="entry__single_wrap">
9+
<h1 class="entry_title">{{ page.title }}</h1>
10+
11+
{% if page.tagline %}
12+
<p class="entry_tagline">{{ page.tagline }}</p>
13+
{% endif %}
14+
15+
<div class="entry_meta">
16+
{% if page.author %}
17+
By <span class="author">{{ page.author }}</span> &ndash;
18+
{% endif %}
19+
20+
{% if page.date %}
21+
<time datetime="{{ page.date | date: '%b %d, %Y' }}">
22+
{{ page.date | date: '%b %d, %Y' }}
23+
</time>
24+
{% endif %}
25+
26+
{% if page.tags %}
27+
<div class="tags cf">
28+
<h4 class="tags_head">Tags:</h4>
29+
<ul class="tag-list">
30+
{% for tag in page.tags %}
31+
<li class="tag">
32+
<a class="tag_link">{{ tag }}</a>
33+
</li>
34+
{% endfor %}
35+
</ul>
36+
</div>
37+
{% endif %}
38+
</div>
39+
40+
{{ content }}
41+
</div>
1142
</article>
43+
44+
<section class="sidebar more-articles sidebar__single">
45+
<div class="sidebar__single_wrap">
46+
<h2 class="sidebar_head">More articles</h2>
47+
<ul class="sidebar_list nav-list">
48+
{% for post in site.posts limit:5 %}
49+
<li class="sidebar_list_item">
50+
<h3 class="sidebar_list_item_head">
51+
<a href="{{ post.url | remove_first:'/'}}/">
52+
{{ post.title }}
53+
</a>
54+
</h3>
55+
56+
<div class="sidebar_list_item_meta entry_meta">
57+
{% if post.author %}
58+
By <span class="author">{{ post.author }}</span> &ndash;
59+
{% endif %}
60+
61+
{% if post.date %}
62+
<time datetime="{{ post.date | date: '%b %d, %Y' }}">
63+
{{ post.date | date: '%b %d, %Y' }}
64+
</time>
65+
{% endif %}
66+
</div>
67+
</li>
68+
{% endfor %}
69+
</ul>
70+
<a class="more-articles_read-more-link call-to-action__icon"
71+
href="articles/">
72+
Read more articles <i class="icon-right"></i>
73+
</a>
74+
</div>
75+
</section>
1276
</div>

‎_posts/2013-10-31-introducing-cfpb-open-tech.md

+7-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,14 @@
22
layout: post
33
published: true
44
title: Introducing CFPB Open Tech
5+
tagline:
6+
description:
7+
Welcome to CFPB Open Tech, the new home on the web for the Consumer Financial Protection Bureau to share and
8+
discuss the work we do with technology to improve the financial lives of consumers throughout the country.
59
author:
6-
description: Welcome to CFPB Open Tech, the new home on the web for the Consumer Financial Protection Bureau to share and discuss the work we do with technology to improve the financial lives of consumers throughout the country.
10+
tags:
11+
- Hello, world!
12+
- announcements
713
---
814

915
Welcome to **CFPB Open Tech**, the new home on the web for the Consumer Financial Protection Bureau to share and

‎css/afontgarde.css

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/*! afontgarde - v0.1.0 - 2013-12-20
2+
* https://github.com/filamentgroup/a-font-garde
3+
* Copyright (c) 2013 Filament Group c/o Zach Leatherman
4+
* Licensed MIT */
5+
6+
.icon-fallback-text .icon {
7+
display: none;
8+
}
9+
/*
10+
ADDED BY afontgarde.js:
11+
.supports-fontface.FONT_NAME.supports-generatedcontent .icon-fallback-text .icon {
12+
display: inline-block;
13+
}*/
14+
15+
.icon-fallback-glyph .text,
16+
.icon-fallback-img .text/*,
17+
ADDED BY afontgarde.js:
18+
.supports-fontface.FONT_NAME.supports-generatedcontent .icon-fallback-text .text*/ {
19+
/* visually hide but accessible (h5bp.com) */
20+
clip: rect(0 0 0 0);
21+
overflow: hidden;
22+
position: absolute;
23+
height: 1px;
24+
width: 1px;
25+
}
26+
27+
/* Careful, don’t use adjoining classes here (IE7) */
28+
.supports-no-generatedcontent .icon-fallback-glyph .text {
29+
clip: auto;
30+
overflow: visible;
31+
position: static;
32+
height: auto;
33+
width: auto;
34+
}
35+
/*
36+
ADDED BY afontgarde.js:
37+
.supports-fontface.FONT_NAME .icon-fallback-glyph .icon:before {
38+
font-size: inherit;
39+
line-height: inherit;
40+
}*/
41+
.icon-fallback-img .icon {
42+
display: inline-block;
43+
}
44+
.icon-fallback-img .icon:before {
45+
content: "";
46+
}
47+
/* The img fallback version is not as reliable since it does not check to make sure the fontloaded font has loaded. If we did add the .fontloaded class, it would unnecessarily request the fallback image. */
48+
.supports-fontface.supports-generatedcontent .icon-fallback-img .icon {
49+
background-image: none;
50+
}

‎css/icons.min.css

+15
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)