Skip to content

Commit

Permalink
Cherry-picked changes from master, a5d6597..43b009f
Browse files Browse the repository at this point in the history
  • Loading branch information
migurski committed Dec 30, 2013
1 parent 03696d3 commit 5544223
Show file tree
Hide file tree
Showing 18 changed files with 296 additions and 120 deletions.
2 changes: 1 addition & 1 deletion Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ style/css/main.css: \
_style/scss/patterns/nav-global-primary.scss _style/scss/patterns/nav-global-secondary.scss \
_style/scss/patterns/nav-page.scss _style/scss/patterns/nav-tabs.scss \
_style/scss/patterns/nav-tags.scss _style/scss/patterns/nav.scss \
_style/scss/patterns/offcanvas.scss \
_style/scss/patterns/offcanvas.scss _style/scss/patterns/fade.scss \
_style/scss/patterns/post.scss _style/scss/patterns/profile-medium.scss \
_style/scss/patterns/profile-small.scss _style/scss/patterns/profile.scss \
_style/scss/patterns/search-global.scss _style/scss/patterns/skip-to-nav.scss \
Expand Down
35 changes: 35 additions & 0 deletions _includes/blocks/patterns/fade.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<h4>We're collaborating with</h4>
<div class="fade" id="fade">
<nav class="list-credits">
<ul id="fade-content">
<li><a href="#">New York</a></li>
<li><a href="#">Philadelphia</a></li>
<li><a href="#">Boston</a></li>
<li><a href="#">Seattle</a></li>
<li><a href="#">San Francisco</a></li>
<li><a href="#">DC</a></li>
<li><a href="#">Oakland</a></li>
<li><a href="#">Chicago</a></li>
<li><a href="#">International</a></li>
<li><a href="#">Tampa</a></li>
<li><a href="#">Tulsa</a></li>
<li><a href="#">Chattanooga</a></li>
<li><a href="#">Austin</a></li>
<li><a href="#">Colorado</a></li>
<li><a href="#">Lexington</a></li>
<li><a href="#">Salt Lake</a></li>
<li><a href="#">San Diego</a></li>
<li><a href="#">Cincinnati</a></li>
<li><a href="#">Whitewater</a></li>
<li><a href="#">Raleigh</a></li>
<li><a href="#">Orlando</a></li>
<li><a href="#">Maine</a></li>
<li><a href="#">Kansas City</a></li>
<li><a href="#">Las Vegas</a></li>
<li><a href="#">Durham</a></li>
<li><a href="#">Hawaii</a></li>
<li><a href="#">Detroit</a></li>
</ul>
</nav>
</div>
<p class="isolate text-whisper"><a href="#" id="fade-activate">See all cities</p>
12 changes: 12 additions & 0 deletions _includes/blocks/patterns/nav-tags.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<nav class="nav-tags">
<h3 class="h4">Explore by tag</h3>
<ul>
<li class="state-active"><a href="#">Open Data</a></li>
<li><a href="#">Citizen Centered Design</a></li>
<li><a href="#">Data Driven Decision Making</a></li>
<li><a href="#">Community as Capacity</a></li>
<li><a href="#">Creating space for risk</a></li>
<li><a href="#">Sharing across cities</a></li>
<li><a href="#">Open Data</a></li>
</ul>
</nav>
16 changes: 16 additions & 0 deletions _includes/blocks/patterns/wodge-small.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<div class="wodge wodge-s">

<img src="http://placehold.it/120x120" class="wodge-image" />

<h3 class="wodge-header">Build capacity in your community</h3>

<div class="wodge-button">
<a href="#" class="button">Brigades</a>
<a href="#" class="button">Events</a>
</div>

<div class="wodge-text">
<p>Volunteer researchers, designers, developers and city officials are building better civic technology and deploying apps in more than 40 cities. See who’s hacking near you or check out an event in your city.</p>
</div>

</div>
35 changes: 31 additions & 4 deletions _style/css/cfa-light.css
Original file line number Diff line number Diff line change
Expand Up @@ -1533,10 +1533,6 @@ input.button-s,
color: rgba(255, 255, 255, 0.7);
}

.masthead-header .nav-breadcrumbs li {
background-image: url("/_styleimages/arrow-breadcrumb-white.png");
}

.masthead-header .nav-breadcrumbs li:first-child a {
background-image: url("../images/flag-white.png");
}
Expand Down Expand Up @@ -1894,6 +1890,37 @@ section,
color: white;
}

.slab-red .list-icons a:link,
.slab-red .list-icons a:visited,
.slab-red .list-icons a:hover,
.slab-red .list-icons a:focus,
.slab-red .list-icons a:active {
color: white;
}

.slab-red a.text-whisper:link, .slab-red a.heading-contrast:link,
.slab-red a.text-whisper:visited,
.slab-red a.heading-contrast:visited,
.slab-red a.text-whisper:hover,
.slab-red a.heading-contrast:hover,
.slab-red a.text-whisper:focus,
.slab-red a.heading-contrast:focus,
.slab-red a.text-whisper:active,
.slab-red a.heading-contrast:active {
border-bottom: none;
font-weight: 500;
color: white;
color: rgba(255, 255, 255, 0.7);
}

.slab-red a.text-whisper:hover, .slab-red a.heading-contrast:hover,
.slab-red a.text-whisper:focus,
.slab-red a.heading-contrast:focus,
.slab-red a.text-whisper:active,
.slab-red a.heading-contrast:active {
color: white;
}

.slab-medium-red {
background: #aa1c3a;
color: white;
Expand Down
124 changes: 94 additions & 30 deletions _style/css/documentation.css
Original file line number Diff line number Diff line change
Expand Up @@ -633,7 +633,6 @@ h6,
.brick-heading,
.chimney .profile .profile-role,
.chimney .profile .profile-note,
.list-icons li a,
.stat .stat-heading {
text-transform: uppercase;
margin: 0;
Expand Down Expand Up @@ -973,7 +972,7 @@ input[type="search"] {
}

/* Text ––––––––––––––––––––––––––––––––––––––––––––––––– */
.text-whisper, .heading-contrast, .brick-heading, .chimney .profile .profile-role, .chimney .profile .profile-note, .list-icons li a {
.text-whisper, .heading-contrast, .brick-heading, .chimney .profile .profile-role, .chimney .profile .profile-note {
color: #6d6e71;
}

Expand Down Expand Up @@ -2160,6 +2159,26 @@ input.button-s,
color: rgba(255, 255, 255, 0.7);
}

.js .fade {
overflow: hidden;
width: 100%;
position: relative;
}

.js .fade:before {
content: "";
background-image: url("../images/fade.png");
background-repeat: repeat-x;
background-position: bottom;
background-color: transparent;
height: 30px;
width: 100%;
display: block;
position: absolute;
bottom: 0;
z-index: 1;
}

.cfa-tag {
background-image: url("/images/tag-black.png");
text-indent: -99999px;
Expand Down Expand Up @@ -2390,10 +2409,6 @@ input.button-s,
color: rgba(255, 255, 255, 0.7);
}

.masthead-header .nav-breadcrumbs li {
background-image: url("/_styleimages/arrow-breadcrumb-white.png");
}

.masthead-header .nav-breadcrumbs li:first-child a {
background-image: url("../images/flag-white.png");
}
Expand Down Expand Up @@ -2684,12 +2699,6 @@ input.button-s,
font-size: 0.8125rem;
}

.js .list-credits.state-closed {
overflow: hidden;
height: 120px;
height: 7.5rem;
}

.list-credits a {
text-align: center;
color: #399fd3;
Expand All @@ -2704,18 +2713,6 @@ input.button-s,
content: none;
}

.js .list-credits .fade {
background-image: url("../images/fade.png");
background-repeat: repeat-x;
background-position: bottom;
padding-bottom: 1em;
position: absolute;
width: 100%;
height: 80px;
bottom: 0;
left: 0;
}

.list-icons li {
margin-bottom: 16px;
margin-bottom: 1rem;
Expand All @@ -2726,7 +2723,7 @@ input.button-s,
position: relative;
clear: both;
font-family: "Gotham A", "Gotham B", "Open Sans Regular", "Verdana", "Helvetica", "Arial";
font-weight: 700;
font-weight: 400;
font-style: normal;
}

Expand All @@ -2746,6 +2743,7 @@ input.button-s,
.list-icons li a {
display: block;
clear: both;
font-weight: 700;
}

.island {
Expand Down Expand Up @@ -3744,6 +3742,67 @@ section,
color: white;
}

.slab-red .list-icons a:link,
.slab-red .list-icons a:visited,
.slab-red .list-icons a:hover,
.slab-red .list-icons a:focus,
.slab-red .list-icons a:active {
color: white;
}

.slab-red a.text-whisper:link, .slab-red a.heading-contrast:link, .slab-red a.brick-heading:link, .slab-red .chimney .profile a.profile-role:link, .chimney .profile .slab-red a.profile-role:link, .slab-red .chimney .profile a.profile-note:link, .chimney .profile .slab-red a.profile-note:link,
.slab-red a.text-whisper:visited,
.slab-red a.heading-contrast:visited,
.slab-red a.brick-heading:visited,
.slab-red .chimney .profile a.profile-role:visited,
.chimney .profile .slab-red a.profile-role:visited,
.slab-red .chimney .profile a.profile-note:visited,
.chimney .profile .slab-red a.profile-note:visited,
.slab-red a.text-whisper:hover,
.slab-red a.heading-contrast:hover,
.slab-red a.brick-heading:hover,
.slab-red .chimney .profile a.profile-role:hover,
.chimney .profile .slab-red a.profile-role:hover,
.slab-red .chimney .profile a.profile-note:hover,
.chimney .profile .slab-red a.profile-note:hover,
.slab-red a.text-whisper:focus,
.slab-red a.heading-contrast:focus,
.slab-red a.brick-heading:focus,
.slab-red .chimney .profile a.profile-role:focus,
.chimney .profile .slab-red a.profile-role:focus,
.slab-red .chimney .profile a.profile-note:focus,
.chimney .profile .slab-red a.profile-note:focus,
.slab-red a.text-whisper:active,
.slab-red a.heading-contrast:active,
.slab-red a.brick-heading:active,
.slab-red .chimney .profile a.profile-role:active,
.chimney .profile .slab-red a.profile-role:active,
.slab-red .chimney .profile a.profile-note:active,
.chimney .profile .slab-red a.profile-note:active {
border-bottom: none;
font-weight: 500;
color: white;
color: rgba(255, 255, 255, 0.7);
}

.slab-red a.text-whisper:hover, .slab-red a.heading-contrast:hover, .slab-red a.brick-heading:hover, .slab-red .chimney .profile a.profile-role:hover, .chimney .profile .slab-red a.profile-role:hover, .slab-red .chimney .profile a.profile-note:hover, .chimney .profile .slab-red a.profile-note:hover,
.slab-red a.text-whisper:focus,
.slab-red a.heading-contrast:focus,
.slab-red a.brick-heading:focus,
.slab-red .chimney .profile a.profile-role:focus,
.chimney .profile .slab-red a.profile-role:focus,
.slab-red .chimney .profile a.profile-note:focus,
.chimney .profile .slab-red a.profile-note:focus,
.slab-red a.text-whisper:active,
.slab-red a.heading-contrast:active,
.slab-red a.brick-heading:active,
.slab-red .chimney .profile a.profile-role:active,
.chimney .profile .slab-red a.profile-role:active,
.slab-red .chimney .profile a.profile-note:active,
.chimney .profile .slab-red a.profile-note:active {
color: white;
}

.slab-medium-red {
background: #aa1c3a;
color: white;
Expand Down Expand Up @@ -4120,12 +4179,14 @@ section,
}

.wodge {
position: relative;
margin: 3em 0 2em 0;
border-bottom: 1px solid;
border-color: #494c49;
border-color: rgba(73, 76, 73, 0.3);
padding: 0 0 2em 0;
position: relative;
margin: 48px 0 32px 0;
margin: 3rem 0 2rem 0;
padding: 0 0 32px 0;
padding: 0 0 2rem 0;
}

.wodge:first-child {
Expand All @@ -4144,6 +4205,8 @@ section,
border-color: rgba(73, 76, 73, 0.5);
border-radius: 0.2em;
margin-bottom: 1em;
margin-bottom: 16px;
margin-bottom: 1rem;
}

.wodge .button:last-of-type, .wodge .button-prominent:last-of-type, .wodge .button-neutral:last-of-type, .wodge .button-alternative:last-of-type, .wodge .button-unstyled:last-of-type, .wodge .button-subtle:last-of-type, .wodge input[type="button"][disabled]:last-of-type,
Expand Down Expand Up @@ -4725,6 +4788,7 @@ body {

.sticky .nav-tier2 {
padding: 0 2.1%;
/* Compensates for a weird calculation bug */
}

.sticky .nav-tier2 a:link,
Expand Down Expand Up @@ -4783,13 +4847,13 @@ body {
width: 100%;
}

.xx-sidebar .xx-nav .text-whisper, .xx-sidebar .xx-nav .heading-contrast, .xx-sidebar .xx-nav .brick-heading, .xx-sidebar .xx-nav .chimney .profile .profile-role, .chimney .profile .xx-sidebar .xx-nav .profile-role, .xx-sidebar .xx-nav .chimney .profile .profile-note, .chimney .profile .xx-sidebar .xx-nav .profile-note, .xx-sidebar .xx-nav .list-icons li a, .list-icons li .xx-sidebar .xx-nav a,
.xx-sidebar .xx-nav .text-whisper, .xx-sidebar .xx-nav .heading-contrast, .xx-sidebar .xx-nav .brick-heading, .xx-sidebar .xx-nav .chimney .profile .profile-role, .chimney .profile .xx-sidebar .xx-nav .profile-role, .xx-sidebar .xx-nav .chimney .profile .profile-note, .chimney .profile .xx-sidebar .xx-nav .profile-note,
.xx-sidebar .xx-nav li a {
padding: 0.8em 5% 0.8em 15%;
display: block;
}

.xx-sidebar .xx-nav .text-whisper, .xx-sidebar .xx-nav .heading-contrast, .xx-sidebar .xx-nav .brick-heading, .xx-sidebar .xx-nav .chimney .profile .profile-role, .chimney .profile .xx-sidebar .xx-nav .profile-role, .xx-sidebar .xx-nav .chimney .profile .profile-note, .chimney .profile .xx-sidebar .xx-nav .profile-note, .xx-sidebar .xx-nav .list-icons li a, .list-icons li .xx-sidebar .xx-nav a {
.xx-sidebar .xx-nav .text-whisper, .xx-sidebar .xx-nav .heading-contrast, .xx-sidebar .xx-nav .brick-heading, .xx-sidebar .xx-nav .chimney .profile .profile-role, .chimney .profile .xx-sidebar .xx-nav .profile-role, .xx-sidebar .xx-nav .chimney .profile .profile-note, .chimney .profile .xx-sidebar .xx-nav .profile-note {
border-top: 1px solid #ddd;
margin-top: 1.5em;
}
Expand Down
1 change: 1 addition & 0 deletions _style/scss/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
@import 'patterns/bricks';
@import 'patterns/calendar';
@import 'patterns/chimney';
@import 'patterns/fade';
@import 'patterns/flags';
@import 'patterns/badge-headings';
@import 'patterns/masthead';
Expand Down
19 changes: 19 additions & 0 deletions _style/scss/patterns/fade.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
.js .fade {
overflow: hidden;
width: 100%;
position: relative;
}

.js .fade:before {
content: "";
background-image: url('../images/fade.png');
background-repeat: repeat-x;
background-position: bottom;
background-color: transparent;
height: 30px;
width: 100%;
display: block;
position: absolute;
bottom: 0;
z-index: 1;
}
Loading

0 comments on commit 5544223

Please sign in to comment.