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

Global header and footnote changes, etc #2277

Merged
merged 8 commits into from
Apr 27, 2017
Merged

Global header and footnote changes, etc #2277

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
75de2ef
Global header and footnote changes, etc
Apr 25, 2017
32f0974
typo
Apr 25, 2017
1e57d4d
Header and ribbon card mods, etc.
Apr 27, 2017
eb4d31a
hound fix
Apr 27, 2017
9086d2a
Reduced top padding on ribbon cards
Apr 27, 2017
0523ebf
Typo fix: para-med to para-md
Apr 27, 2017
3b29088
Revert "Typo fix: para-med to para-md"
Apr 27, 2017
d3ce0fe
Changes weight spec to variable, one other niggle
Apr 27, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions _how-it-works/default.md
View file
Open in desktop
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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wooot woot!

{% include svg/how-it-works-ribbon-graphic.svg %}
</div>
<div class="ribbon-card-bottom">
Expand All @@ -25,7 +25,7 @@ permalink: /how-it-works/

<section class="container-page-wrapper landing-wrapper">

<article class="container-left-9">
<article class="container-left-8">

<section class="container">
<h2 id="ownership" class="h2-bar">Who owns natural resources in the U.S.?</h2>
Expand Down
4 changes: 2 additions & 2 deletions _layouts/case-studies-landing.html
View file
Open in desktop
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">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cut the misnomers!

<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
4 changes: 3 additions & 1 deletion _sass/_variables.scss
View file
Open in desktop
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,7 +107,9 @@ $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
$standard-padding-extra: 3.125rem; //50px
$standard-padding-jumbo: 3.8rem;
Expand Down
5 changes: 3 additions & 2 deletions _sass/blocks/jekyll-layouts/_content.scss
View file
Open in desktop
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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could this be something in variables? $standard-padding-large? 1/875rem

}
}

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

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

font-weight: 200;
font-weight: 400;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be $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-med');
Copy link
Contributor

@gemfarmer gemfarmer Apr 27, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is @include heading('para-md');

line-height: 1.375;
margin-bottom: $base-padding-lite;
}

li {
Expand Down
79 changes: 10 additions & 69 deletions _sass/components/_ribbon.scss
View file
Open in desktop
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 @@ -417,7 +373,8 @@ svg {
}

.ribbon .ribbon-card {
padding-top: $base-padding-large;
padding-top: $base-padding-extra;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Properties should be ordered margin-top, padding-top

margin-top: $standard-padding-lite;
}

.ribbon-card {
Expand All @@ -433,14 +390,6 @@ svg {
}
}

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

Expand All @@ -450,11 +399,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
View file
Open in desktop
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
View file
Open in desktop
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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're changing the color for h2s globally? Does that work on all of the other pages?

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
View file
Open in desktop
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
View file
Open in desktop
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