Adjust home and process index styles

app/assets/stylesheets/legislation.scss

@@ -9,7 +9,7 @@
 // -----------------
 .brand-heading {
   background: $brand;
-  margin-bottom: 2rem;
+  margin-bottom: 5rem;
   
   .column {
     padding-top: 10rem;
@@ -58,7 +58,7 @@
 // 03. Legislation cards
 // -----------------
 .legislation {
-  margin: 0 0 4rem 0;
+  margin: 0 0 5rem 0;
   background: white;
   border: 1px solid;
   border-color: #e5e6e9 #dfe0e4 #d0d1d5;

app/assets/stylesheets/legislation_process.scss

@@ -34,6 +34,8 @@
   font-weight: 700;
 }
 
+$epigraph-font-size: rem-calc(15);
+
 // 02. Hero
 // -----------------
 .legislation-hero {
@@ -63,7 +65,9 @@
 
   #debate-info {
     display: none;
-    margin-top: 1rem;
+    margin-top: 3rem;
+    padding-top: 4rem;
+    border-top: 1px solid darken($border, 10%);
 
     @include breakpoint(medium) {
       margin-bottom: 2rem;
@@ -80,6 +84,7 @@
       }
 
       p {
+        font-size: $base-font-size;
         @include breakpoint(medium) {
           margin-left: 25%;
         }
@@ -97,7 +102,7 @@
   }
 
   .center .button {
-    background: #004A83;
+    background: $brand;
     margin-bottom: 0;
   }
 
@@ -112,6 +117,14 @@
 
   .description {
     margin-bottom: 1rem;
+    
+    p {
+      font-size: $epigraph-font-size;
+    }
+    
+    h4 {
+      font-size: $base-font-size;
+    }
 
     @include breakpoint(medium) {
         margin-bottom: 0;
@@ -145,61 +158,75 @@
 // -----------------
 .legislation-process-categories {
   position: relative;
-
-  svg {
-    position: absolute;
-    top: 1.5rem;
-    left: 0;
-
-    @include breakpoint(medium) {
-      transform: rotate(-8deg);
-      top: 0.75rem;
-    }
-  }
-
-  ul {
-    padding-top: 4rem;
-    list-style: none;
-    margin-left: 0;
-    padding-left: 0;
+  
+  .legislation-process-list {
     border-bottom: 1px solid $medium-gray;
-
-    li {
-      cursor: pointer;
+    margin: 0 1rem 1rem 1rem;
+    
+    @include breakpoint(medium) {
       margin-left: 0;
-      display: inline-block;
-      margin-bottom: 1rem;
-      margin-right: 1rem;
+    }
+    
+    ul {
+      max-width: 75rem;
+      margin-left: auto;
+      margin-right: auto;
+      list-style: none;
+      padding-top: 4rem;
+      padding-left: 0;
+      margin-bottom: 0;
+      
+      @include breakpoint(medium) {
+        padding-left: 1rem;
+      }
+      
+      svg {
+        position: absolute;
+        top: 1.5rem;
 
-      @media (min-width: 950px) {
-        margin-right: 0;
-        margin-left: 3rem;
-        margin-bottom: 0;
+        @include breakpoint(medium) {
+          transform: rotate(-8deg);
+          top: 0.75rem;
+        }
       }
 
-      a,
-      h4 {
-        color: #6D6D6D;
-        margin-bottom: 0;
-      }
-
-      a {
-        &:hover, &:active {
-          text-decoration: none;
+      li {
+        cursor: pointer;
+        display: inline-block;
+        margin: 0 1rem 1rem 0;
+        
+        &:first-of-type {
+          margin-left: 0;
         }
 
-        p {
-          margin-bottom: 0;
+        @media (min-width: 950px) {
+          margin: 0 0 0 3rem;
+        }
 
-          @include breakpoint(medium) {
-            margin-bottom: 1rem;
+        a,
+        h4 {
+          color: #6D6D6D;
+          margin-bottom: 0;
+        }
+
+        a {
+          &:hover, &:active {
+            text-decoration: none;
+          }
+
+          p {
+            margin-bottom: 0;
+
+            @include breakpoint(medium) {
+              margin-bottom: 1rem;
+            }
           }
         }
       }
-    }
 
-    .active {
-      border-bottom: 2px solid $brand;
+      .active {
+        border-bottom: 2px solid $brand;
+      }
     }
   }
 }

app/views/legislation/processes/_key_dates.html.erb

@@ -1,29 +1,32 @@
-<nav class="legislation-process-categories">
-  <%= render 'legislation/processes/key_dates_svg' %>
-  <ul>
-    <li <%= "class=active" if phase == :debate %>>
-      <%= link_to process do %>
-        <h4><%= t('legislation.processes.shared.debate_dates') %></h4>
-        <p><%= format_date(process.debate_start_date) %> - <%= format_date(process.debate_end_date) %></p>
-      <% end %>
-    </li>
-    <li <%= "class=active" if phase == :draft_publication %>>
-      <%= link_to legislation_process_draft_publication_path(process) do %>
-        <h4><%= t('legislation.processes.shared.draft_publication_date') %></h4>
-        <p><%= format_date(process.draft_publication_date) %></p>
-      <% end %>
-    </li>
-    <li <%= "class=active" if phase == :allegations %>>
-      <%= link_to legislation_process_allegations_path(process) do %>
-        <h4><%= t('legislation.processes.shared.allegations_dates') %></h4>
-        <p><%= format_date(process.allegations_start_date) %> - <%= format_date(process.allegations_end_date) %></p>
-      <% end %>
-    </li>
-    <li <%= "class=active" if phase == :final_version_publication %>>
-      <%= link_to legislation_process_final_version_publication_path(process) do %>
-        <h4><%= t('legislation.processes.shared.final_publication_date') %></h4>
-        <p><%= format_date(process.final_publication_date) %></p>
-      <% end %>
-    </li>
-  </ul>
+<nav class="legislation-process-categories">  
+  <div class="legislation-process-list">
+    <ul>
+      <%= render 'legislation/processes/key_dates_svg' %>
+      
+      <li <%= "class=active" if phase == :debate %>>
+        <%= link_to process do %>
+          <h4><%= t('legislation.processes.shared.debate_dates') %></h4>
+          <p><%= format_date(process.debate_start_date) %> - <%= format_date(process.debate_end_date) %></p>
+        <% end %>
+      </li>
+      <li <%= "class=active" if phase == :draft_publication %>>
+        <%= link_to legislation_process_draft_publication_path(process) do %>
+          <h4><%= t('legislation.processes.shared.draft_publication_date') %></h4>
+          <p><%= format_date(process.draft_publication_date) %></p>
+        <% end %>
+      </li>
+      <li <%= "class=active" if phase == :allegations %>>
+        <%= link_to legislation_process_allegations_path(process) do %>
+          <h4><%= t('legislation.processes.shared.allegations_dates') %></h4>
+          <p><%= format_date(process.allegations_start_date) %> - <%= format_date(process.allegations_end_date) %></p>
+        <% end %>
+      </li>
+      <li <%= "class=active" if phase == :final_version_publication %>>
+        <%= link_to legislation_process_final_version_publication_path(process) do %>
+          <h4><%= t('legislation.processes.shared.final_publication_date') %></h4>
+          <p><%= format_date(process.final_publication_date) %></p>
+        <% end %>
+      </li>
+    </ul>
+  </div>
 </nav>

app/views/legislation/processes/_process.html.erb

@@ -3,7 +3,6 @@
     <div class="small-12 medium-8 column">
       <div class="legislation-text">
         <h3><%= link_to process.title, process %></h3>
-        <%= markdown(first_paragraph(process.description)) %>
       </div>
     </div>
 
@@ -12,6 +11,10 @@
         <span class="icon-comments"></span>&nbsp; <%= t('.see_latest_comments') %>
       <% end %>
     </div>
+
+    <div class="small-12 medium-11 column end">
+      <%= markdown(first_paragraph(process.description)) %>
+    </div>
   </div>
 
   <div class="column row">

app/views/legislation/processes/phase_empty.html.erb

@@ -2,9 +2,9 @@
 
 <%= render 'legislation/processes/header', process: @process, header: :full %>
 
-<div class="row">
-  <%= render 'legislation/processes/key_dates', process: @process, phase: @phase %>
+<%= render 'legislation/processes/key_dates', process: @process, phase: @phase %>
 
+<div class="row">
   <div class="debate-chooser">
     <div class="row">
       <p><%= t(".empty") %></p>

app/views/legislation/processes/phase_not_open.html.erb

@@ -2,9 +2,9 @@
 
 <%= render 'legislation/processes/header', process: @process, header: :full %>
 
-<div class="row">
-  <%= render 'legislation/processes/key_dates', process: @process, phase: @phase %>
+<%= render 'legislation/processes/key_dates', process: @process, phase: @phase %>
 
+<div class="row">
   <div class="debate-chooser">
     <div class="row">
       <div class="debate-draft">

app/views/legislation/processes/show.html.erb

@@ -2,9 +2,9 @@
 
 <%= render 'legislation/processes/header', process: @process, header: :full %>
 
-<div class="row">
-  <%= render 'key_dates', process: @process, phase: :debate %>
+<%= render 'key_dates', process: @process, phase: :debate %>
 
+<div class="row">
   <div class="debate-chooser">
     <div class="row">
       <%= render 'debate', process: @process %>