Skip to content
This repository has been archived by the owner on Nov 10, 2020. It is now read-only.

Commit

Permalink
Global header and footnote changes, etc (#2277)
Browse files Browse the repository at this point in the history
* Global header and footnote changes, etc

 - Global header styles tweaked for improved hierarchy
 - Footnotes shrunk
 - How it works landing narrowed
 - About landing header style simplified
 - Added $standard-padding-standard variable (1rem)

* typo

* Header and ribbon card mods, etc.

* hound fix

* Reduced top padding on ribbon cards

* Typo fix: para-med to para-md

* Revert "Typo fix: para-med to para-md"

This reverts commit 0523ebf.

* Changes weight spec to variable, one other niggle
  • Loading branch information
Eric Ronne authored and gemfarmer committed Apr 27, 2017
1 parent 297736a commit 1af2043
Show file tree
Hide file tree
Showing 10 changed files with 42 additions and 96 deletions.
4 changes: 2 additions & 2 deletions _how-it-works/default.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ permalink: /how-it-works/
<p class="ribbon-hero-description">In the U.S., land and the resources beneath it can be owned by private individuals and corporations or by federal, state, local, and tribal governments. This makes the U.S. different from nearly every other country; in many places oil, gas, coal, and other minerals simply belong to the government, but in the U.S. there is widespread private ownership of these resources.</p>
<p class="ribbon-hero-description">Learn what the <a href="#process">extraction process</a> looks like, how <a href="#state-tribal">state and tribal lands</a> are managed, and what <a href="#laws">laws and governance</a> relate to the industry.</p>
</div>
<div class="container-right-4 ribbon-card-column ribbon-card-has-image ribbon-card">
<div class="container-right-4 ribbon-card-column ribbon-card">
<div class="ribbon-card-top ribbon-card-top-text">
<h2 class="ribbon-card-top-text-header ribbon-card-top-text-header-padded">The U.S. ranks at or near the top worldwide in the production of many natural resources.</h2>
<h2 class="ribbon-card-top-text-header">The U.S. ranks at or near the top worldwide in the production of many natural resources.</h2>
{% include svg/how-it-works-ribbon-graphic.svg %}
</div>
<div class="ribbon-card-bottom">
Expand Down
4 changes: 2 additions & 2 deletions _layouts/case-studies-landing.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@ <h1 id="title">Case studies</h1>
</figure>
</div>
<div class="container-right-4 ribbon-card-column ribbon-card state_pages-ribbon-card ribbon-card-no-margin">
<figure class="ribbon-card-top ribbon-card-case_studies">
<div class="ribbon-card-top">
<h2 class="ribbon-card-top-text-header">How do extractive industries impact communities like mine?</h2>
<p>This section includes twelve case studies that provide a snapshot of communities that have led the U.S. in producing oil, gas, coal, gold, iron, or copper over the last decade.</p>
<p>These case studies shed light on the economic and fiscal effects of oil, gas, and mineral extraction on local communities.</p>
</figure>
</div>
<figcaption class="ribbon-card-bottom state_pages-select">
<label for="case_studies-selector">Browse this section:</label>
{% include case-studies/_selector.html %}
Expand Down
3 changes: 2 additions & 1 deletion _sass/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ $cobalt: #1075a5;


// Font Colors
$base-font-color: $dark-gray;
$base-font-color: $black-light;
$base-accent-color: $mid-blue;

// Padding
Expand All @@ -107,6 +107,7 @@ $base-padding-jumbo: 3.8em; //60.8px

// Padding on rem scale
$standard-padding: 1.25rem;
$standard-padding-standard: 1rem;
$standard-padding-lite: $standard-padding / 3;
$standard-padding-small: 0.7rem; //11.2px Reduced from .9em
$standard-padding-large: 1.875rem; //30px
Expand Down
5 changes: 3 additions & 2 deletions _sass/blocks/jekyll-layouts/_content.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,15 @@

p {
@include heading('para-xl');
margin-top: 2.25rem;
}
}

h3 {
font-size: 1rem;
margin-bottom: 0;
}

p + h2 {
margin-top: $base-padding-large - 0.75em;
}
Expand Down
6 changes: 2 additions & 4 deletions _sass/components/_footnotes.scss
Original file line number Diff line number Diff line change
Expand Up @@ -31,19 +31,17 @@ body {
ol {
@include heading('para-sm');

font-weight: 200;
font-weight: $weight-book;
list-style-type: decimal;
padding-bottom: $base-padding;
padding-left: $base-padding;
padding-top: $base-padding-lite;

&:target {
background-color: $mid-blue;
}
}

p {
padding-bottom: $base-padding-lite;
@include heading('para-md');
}

li {
Expand Down
76 changes: 8 additions & 68 deletions _sass/components/_ribbon.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
// <p class="ribbon-hero-description">Interacting with the data helps shed light on where natural resources in the U.S. are extracted, how they contribute to national revenues, and how they affect state and local economies.</p>
// <p class="ribbon-hero-description">We have information from government sources on <a href="#revenue">revenue</a>, <a href="#production">production</a>, and <a href="#economic-impact">economic impact</a>. Several datasets are new in 2015, including <a href="{{ site.baseurl }}/explore/federal-production/">federal production</a> and <a href="{{ site.baseurl }}/explore/federal-revenue-by-company/">federal revenue by company</a> information.</p>
// </div>
// <div class="container-right-4 ribbon-card-column ribbon-card-has-image ribbon-card">
// <div class="container-right-4 ribbon-card-column ribbon-card">
// <figure class="ribbon-card-top">
// <a href="{{site.baseurl}}/explore/#revenue/">
// <img class="ribbon-card-image" src="{{ site.baseurl }}/img/explore-landing-intro.png" alt="Map of the US with the Gulf of Mexico highlighted. Total U.S. revenue: 12,261,828,343. Gulf of Mexico revenue: 7,572,080,117. Calendar year 2013.">
Expand Down Expand Up @@ -40,32 +40,6 @@
border-bottom: 4px solid $white;
}
}

&.ribbon-card-has-image {

@include respond-to(tiny-down) {
padding-top: $base-padding-large;
}

.ribbon-card-top {
margin: 0;
padding-top: 0;

.ribbon-card-image {
background-color: $gray-pale;
border: 0;
padding-left: 20%;
padding-right: 20%;
width: 100%;
}
}
}

&.ribbon-card-no-margin {
.ribbon-card-top {
margin: 0;
}
}
}

.ribbon-card,
Expand All @@ -80,7 +54,7 @@
padding-left: $base-padding;
padding-right: $base-padding;
padding-top: 0;
text-align: center;
text-align: left;

&.ribbon-card-top-text {
display: flex;
Expand Down Expand Up @@ -113,38 +87,30 @@
}

h2 {
align-self: center;
align-self: flex-start;
text-align: left;
}
}
}

.ribbon-card-top-text-header {
@include heading(para-md);
@include heading(para-lg);
font-weight: $weight-bold;
line-height: 1.3;
margin-bottom: 0;
padding-bottom: $base-padding-lite;
text-align: left;
}

.ribbon-card-top-text-header-padded {
margin-bottom: $base-padding;
}

.ribbon-card-top-text-header-sub {
@include heading(para-md);
@include heading('para-lg');
}

.ribbon-card-top-list {
@include heading(para-md);
@include heading('para-md');
margin-bottom: 1.25rem;
padding-bottom: $base-padding-lite;
text-align: left;

li {
line-height: 1.2;
padding-bottom: $base-padding-lite;
}
}

.ribbon-card-bottom {
Expand Down Expand Up @@ -208,11 +174,10 @@
padding-bottom: $base-padding-large;
padding-left: $base-padding;
padding-right: $base-padding;
padding-top: $base-padding-large;
padding-top: $base-padding-extra;

&.ribbon-hero-home {
padding-bottom: $base-padding-jumbo;
padding-top: $base-padding-extra;
}

&.ribbon-hero-column {
Expand Down Expand Up @@ -300,15 +265,6 @@ svg {
padding-top: $base-padding-large;
}
}

&.ribbon-card-has-image {
.ribbon-card-top {
.ribbon-card-image {
padding-left: 30%;
padding-right: 30%;
}
}
}
}
}

Expand Down Expand Up @@ -433,14 +389,6 @@ svg {
}
}

&.ribbon-card-has-image {
.ribbon-card-top {
.ribbon-card-image {
padding-left: 5%;
padding-right: 5%;
}
}
}
}
}

Expand All @@ -450,11 +398,3 @@ svg {
margin-right: auto;
}
}

.ribbon-card-case_studies {
text-align: left;

p {
@include heading('para-md');
}
}
4 changes: 2 additions & 2 deletions _sass/elements/_typography.scss
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ h2,
}

@mixin h2-bar {
border-bottom: 14px solid $light-green;
padding-bottom: $standard-padding-lite;
border-bottom: 12px solid $light-green;
padding-bottom: $standard-padding-small;
}

.h2-bar {
Expand Down
28 changes: 17 additions & 11 deletions _sass/mixins/_type-mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,39 +11,45 @@
font-size: $base-font-size;

@if $level == h1 {
// bold 30/40
font-size: 1.875rem; // 30px
// bold 38/48
color: $black;
font-size: 2rem; // 38px
font-weight: $weight-bold;
line-height: 2.5rem; // 40px
line-height: 2.5rem; // 48px
}

@if $level == h2 {
// light 32/40
font-size: 2rem; // 32px
font-weight: $weight-light;
line-height: 2.5rem; // 40px
// light 30/38.4
color: $gray-darkest;
font-size: 1.625rem; // 30px
font-weight: $weight-bold;
line-height: 2rem; // 38.4px
margin-top: 1.5rem;
}

@if $level == h3 {
// bold 22/32
font-size: 1.375rem; // 22px
// bold 21/29
color: $black;
font-size: 1.3125rem; // 21px
font-weight: $weight-bold;
line-height: 2rem; // 32px
line-height: 1.8125rem; // 29px
margin-bottom: 0.5rem;
}

@if $level == h4 {
// light 22/32
color: $black;
font-size: 1.375rem; // 22px
font-weight: $weight-light;
line-height: 2rem; // 32px
}

@if $level == h5 {
// bold 18/27
color: $gray-darkest;
font-size: 1.125rem; // 18px
font-weight: $weight-bold;
line-height: 1.6875rem; // 27px
line-height: 1.625rem; // 27px
}

@if $level == 'para-xl' {
Expand Down
4 changes: 2 additions & 2 deletions pages/about.html
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ <h2 class="ribbon-card-top-text-header">The 2016 USEITI report is now available,

<div class="container-left-7">

<h2 id="initiative" class="h3">The initiative</h2>
<h2 id="initiative">The initiative</h2>

<p>The EITI International Board and implementing member countries believe that a nation’s natural resource wealth belongs to its citizens. Through increased transparency and accountability, EITI can increase public trust and dialogue, improve governance, attract investment, and manage and enhance growth so that citizens receive financial and societal benefits from a country’s natural resources.</p>

Expand All @@ -53,7 +53,7 @@ <h2 id="initiative" class="h3">The initiative</h2>

<div class="container-left-7">

<h2 class="h3">Who’s involved</h2>
<h2>Who’s involved</h2>

<h3 class="h4">1 | Multi-Stakeholder Group</h3>

Expand Down
4 changes: 2 additions & 2 deletions styleguide/section-components.html
Original file line number Diff line number Diff line change
Expand Up @@ -760,7 +760,7 @@ <h1></h1>
<p class="ribbon-hero-description">Interacting with the data helps shed light on where natural resources in the U.S. are extracted, how they contribute to national revenues, and how they affect state and local economies.</p>
<p class="ribbon-hero-description">We have information from government sources on <a href="#revenue">revenue</a>, <a href="#production">production</a>, and <a href="#economic-impact">economic impact</a>. Several datasets are new in 2015, including <a href="/explore/federal-production/">federal production</a> and <a href="/explore/federal-revenue-by-company/">federal revenue by company</a> information.</p>
</div>
<div class="container-right-4 ribbon-card-column ribbon-card-has-image ribbon-card">
<div class="container-right-4 ribbon-card-column ribbon-card">
<figure class="ribbon-card-top">
<a href="/explore/#revenue/">
<img class="ribbon-card-image" src="/img/explore-landing-intro.png" alt="Map of the US with the Gulf of Mexico highlighted. Total U.S. revenue: 12,261,828,343. Gulf of Mexico revenue: 7,572,080,117. Calendar year 2013.">
Expand All @@ -781,7 +781,7 @@ <h1></h1>
&lt;p class=&quot;ribbon-hero-description&quot;&gt;Interacting with the data helps shed light on where natural resources in the U.S. are extracted, how they contribute to national revenues, and how they affect state and local economies.&lt;/p&gt;
&lt;p class=&quot;ribbon-hero-description&quot;&gt;We have information from government sources on &lt;a href=&quot;#revenue&quot;&gt;revenue&lt;/a&gt;, &lt;a href=&quot;#production&quot;&gt;production&lt;/a&gt;, and &lt;a href=&quot;#economic-impact&quot;&gt;economic impact&lt;/a&gt;. Several datasets are new in 2015, including &lt;a href=&quot;/explore/federal-production/&quot;&gt;federal production&lt;/a&gt; and &lt;a href=&quot;/explore/federal-revenue-by-company/&quot;&gt;federal revenue by company&lt;/a&gt; information.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;container-right-4 ribbon-card-column ribbon-card-has-image ribbon-card&quot;&gt;
&lt;div class=&quot;container-right-4 ribbon-card-column ribbon-card&quot;&gt;
&lt;figure class=&quot;ribbon-card-top&quot;&gt;
&lt;a href=&quot;/explore/#revenue/&quot;&gt;
&lt;img class=&quot;ribbon-card-image&quot; src=&quot;/img/explore-landing-intro.png&quot; alt=&quot;Map of the US with the Gulf of Mexico highlighted. Total U.S. revenue: 12,261,828,343. Gulf of Mexico revenue: 7,572,080,117. Calendar year 2013.&quot;&gt;
Expand Down

0 comments on commit 1af2043

Please sign in to comment.