From a84e83b3e213e9d7c8457feb39e670d16eb8e8f6 Mon Sep 17 00:00:00 2001
From: gemfarmer <bshslowfood@gmail.com>
Date: Wed, 25 May 2016 14:09:19 -0500
Subject: [PATCH] start ownership

---
 _includes/location/section-overview.html      |  2 +-
 _includes/location/section-ownership.html     | 69 ++++++++++---------
 _sass/blocks/jekyll-layouts/_state-pages.scss | 10 +++
 3 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/_includes/location/section-overview.html b/_includes/location/section-overview.html
index 805045aa9..e5cf8a26e 100644
--- a/_includes/location/section-overview.html
+++ b/_includes/location/section-overview.html
@@ -2,7 +2,7 @@
 
   <p>This is where an introduction to this page will go with a few nice words on what a regional profile is and what to expect here. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
 
-  <section class="panel-gray">
+  <section class="panel-gray container-outer">
 
     <p>{%
         include location/key-gdp.html
diff --git a/_includes/location/section-ownership.html b/_includes/location/section-ownership.html
index a8e37144f..59caf7612 100644
--- a/_includes/location/section-ownership.html
+++ b/_includes/location/section-ownership.html
@@ -1,39 +1,44 @@
 {% capture states_svg %}{{ site.baseurl }}/maps/states/all.svg{% endcapture %}
 {% capture state_svg %}{{ site.baseurl }}/maps/states/{{ state_id }}.svg{% endcapture %}
-<section id="ownership" data-nav-header="ownership">
+<section id="ownership" data-nav-header="ownership" class="container-outer">
   <h2>Land ownership</h2>
-  <p><strong>In {{ state_name }}, {{ site.data.land_stats[state_id].federal_percent | percent }} percent of land is owned by the federal government.</strong></p>
 
-  <figure>
-    {% assign _width = 50 %}
-    {% assign _viewbox = site.data.viewboxes[state_id] %}
-    <div class="svg-container county map-container"{% if _viewbox %}
-      style="width: {{ _width }}%; padding-bottom: {{ _viewbox | svg_viewbox_padding: _width }}%;"{% endif %}>
-      <svg class="county ownership map"{% if _viewbox %} viewBox="{{ _viewbox }}"{% endif %}>
-        <g class="states features">
-          <use xlink:href="{{ states_svg }}#states"></use>
-        </g>
-        <g class="states mesh">
-          <use xlink:href="{{ states_svg }}#states-mesh"></use>
-        </g>
-        <g class="counties features">
-          <use xlink:href="{{ state_svg }}#counties"></use>
-        </g>
-        {%
-          include maps/federal_land_ownership.svg
-          clip='#state-outline'
-        %}
-        <g class="counties mesh">
-          <use xlink:href="{{ state_svg }}#counties-mesh"></use>
-        </g>
-        <g class="state feature overlay">
-          <use xlink:href="{{ states_svg }}#state-{{ state_id }}"></use>
-        </g>
-      </svg>
-    </div>
 
-    <figcaption>Federally owned land (gray)</figcaption>
-  </figure>
+  <section class="container-half">
+    <h3>In {{ state_name }}, {{ site.data.land_stats[state_id].federal_percent | percent }} percent of land is owned by the federal government.</h3>
 
-  <p>When companies extract natural resources on federal land, they pay royalties, rents, bonuses, and other fees — much like they would to any landowner. They also have to report more data about their activities on government-owned land than on private land. Learn more about <a href="{{ site.baseurl }}/how-it-works/ownership/">natural resources and land ownership in the U.S.</a></p>
+    <p>When companies extract natural resources on federal land, they pay royalties, rents, bonuses, and other fees — much like they would to any landowner. They also have to report more data about their activities on government-owned land than on private land. Learn more about <a href="{{ site.baseurl }}/how-it-works/ownership/">natural resources and land ownership in the U.S.</a></p>
+  </section>
+
+  <aside class="container-half">
+    <figure>
+      {% assign _viewbox = site.data.viewboxes[state_id] %}
+      <div class="svg-container county map-container"{% if _viewbox %}
+        style="padding-bottom: {{ _viewbox | svg_viewbox_padding: _width }}%;"{% endif %}>
+        <svg class="county ownership map"{% if _viewbox %} viewBox="{{ _viewbox }}"{% endif %}>
+          <g class="states features">
+            <use xlink:href="{{ states_svg }}#states"></use>
+          </g>
+          <g class="states mesh">
+            <use xlink:href="{{ states_svg }}#states-mesh"></use>
+          </g>
+          <g class="counties features">
+            <use xlink:href="{{ state_svg }}#counties"></use>
+          </g>
+          {%
+            include maps/federal_land_ownership.svg
+            clip='#state-outline'
+          %}
+          <g class="counties mesh">
+            <use xlink:href="{{ state_svg }}#counties-mesh"></use>
+          </g>
+          <g class="state feature overlay">
+            <use xlink:href="{{ states_svg }}#state-{{ state_id }}"></use>
+          </g>
+        </svg>
+      </div>
+
+      <figcaption><icon class="icon-plus-lg"></icon> Details</figcaption>
+    </figure>
+  </aside>
 </section>
diff --git a/_sass/blocks/jekyll-layouts/_state-pages.scss b/_sass/blocks/jekyll-layouts/_state-pages.scss
index 8b048b136..6df661abc 100644
--- a/_sass/blocks/jekyll-layouts/_state-pages.scss
+++ b/_sass/blocks/jekyll-layouts/_state-pages.scss
@@ -1,10 +1,20 @@
 .layout-state-pages {
 
   section + section {
+    padding-top: $base-padding-extra;
     margin-top: $base-padding-extra;
+    border-top: 1px solid $neutral-gray;
   }
 
   hr {
+    border-top: 1px solid $neutral-gray;
+    margin-bottom: $base-padding;
+    margin-top: $base-padding;
+  }
+
+  p + [class*='panel-'],
+  section + [class*='panel-'],
+  h3 + [class*='panel-'] {
     margin-bottom: $base-padding;
     margin-top: $base-padding;
   }