Rework welcome and fixthemap pages

* Use lead class for lede paragraphs
* Change headings to start from h2
* Remove custom css and use bootstrap utilities where required

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index aaad72342b3ce6eb5c71d0099022973234036c1e..8d3da8f7e8267d467b642176d13e9e6ae8a8ecd9 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -1498,19 +1498,10 @@ dl.dl-inline {
 
 /* Rules for the "Welcome" page */
 .site-welcome, .site-fixthemap {
-  .center {
-    text-align: center;
-    .sprite {
-      float: none;
-      margin: auto;
-    }
-  }
-
   .sprite {
     background-image: image-url("welcome-sprite.png");
     background-size: 500px 250px;
     display: block;
-    float: left;
   }
 
   .icon-list {
@@ -1560,15 +1551,6 @@ dl.dl-inline {
     /* no-r2 */ background-position: -350px 0;
   }
 
-  .start-mapping {
-    margin: auto;
-    cursor: pointer;
-    border: none;
-    padding: 20px 40px;
-    font-size: 30px;
-    text-decoration: none;
-  }
-
   .icon.note {
     background-color: #333;
     border-radius: 4px;

diff --git a/app/views/site/fixthemap.html.erb b/app/views/site/fixthemap.html.erb
index f5adb83ace7de51219999f880332b145832f24ec..28e0fe237b547d9fe3c2071513466ab9acddbe0a 100644 (file)
--- a/app/views/site/fixthemap.html.erb
+++ b/app/views/site/fixthemap.html.erb
@@ -6,10 +6,10 @@
   <h1><%= t ".title" %></h1>
 <% end %>
 
-<h3><%= t "layouts.intro_header" %></h3>
-<p><%= t "layouts.intro_text" %></p>
+<h2><%= t "layouts.intro_header" %></h2>
+<p class="lead"><%= t "layouts.intro_text" %></p>
 
-<h3><%= t ".how_to_help.title" %></h3>
+<h2><%= t ".how_to_help.title" %></h2>
 
 <div class='container'>
   <div class='row'>
@@ -28,9 +28,9 @@
   </div>
 </div>
 
-<h3><%= t ".other_concerns.title" %></h3>
+<h2><%= t ".other_concerns.title" %></h2>
 <p><%= t ".other_concerns.explanation_html" %></p>
 
-<h3><%= t "site.welcome.questions.title" %></h3>
-<span class='sprite small term question'></span>
+<h2><%= t "site.welcome.questions.title" %></h2>
+<span class='sprite small term question float-start'></span>
 <p><%= t "site.welcome.questions.paragraph_1_html", :help_url => help_path %></p>

diff --git a/app/views/site/welcome.html.erb b/app/views/site/welcome.html.erb
index 4617935e768cc49c6a80ca9c9a151a47d1233532..7c1ee38ab86d9fc434f80fd571379b310230e7c1 100644 (file)
--- a/app/views/site/welcome.html.erb
+++ b/app/views/site/welcome.html.erb
@@ -6,66 +6,66 @@
   <h1><%= t ".title" %></h1>
 <% end %>
 
-<p><%= t ".introduction_html" %></p>
+<p class="lead"><%= t ".introduction_html" %></p>
 
-<h3><%= t ".whats_on_the_map.title" %></h3>
+<h2><%= t ".whats_on_the_map.title" %></h2>
 
 <div class='row'>
   <div class='col'>
-    <div class='center'>
-      <span class='sprite small check'></span>
+    <div>
+      <span class='sprite small check mx-auto'></span>
     </div>
     <p><%= t ".whats_on_the_map.on_html" %></p>
   </div>
   <div class='col'>
     <div class='center'>
-      <span class='sprite small x'></span>
+      <span class='sprite small x mx-auto'></span>
     </div>
     <p><%= t ".whats_on_the_map.off_html" %></p>
   </div>
 </div>
 
-<h3><%= t ".basic_terms.title" %></h3>
+<h2><%= t ".basic_terms.title" %></h2>
 
 <p><%= t ".basic_terms.paragraph_1_html" %></p>
 
-<div class='clearfix icon-list'>
+<div class='clearfix'>
   <div class='clearfix'>
-    <span class='sprite small term editor'></span>
+    <span class='sprite small term editor float-start'></span>
     <p><%= t ".basic_terms.editor_html" %></p>
   </div>
   <div class='clearfix'>
-    <span class='sprite small term node'></span>
+    <span class='sprite small term node float-start'></span>
     <p><%= t ".basic_terms.node_html" %></p>
   </div>
   <div class='clearfix'>
-    <span class='sprite small term way'></span>
+    <span class='sprite small term way float-start'></span>
     <p><%= t ".basic_terms.way_html" %></p>
   </div>
   <div class='clearfix'>
-    <span class='sprite small term tag'></span>
+    <span class='sprite small term tag float-start'></span>
     <p><%= t ".basic_terms.tag_html" %></p>
   </div>
 </div>
 
-<div class='clearfix icon-list'>
-  <h3><%= t ".rules.title" %></h3>
-  <span class='sprite small term rules'></span>
+<div class='clearfix'>
+  <h2><%= t ".rules.title" %></h2>
+  <span class='sprite small term rules float-start'></span>
   <p><%= t ".rules.paragraph_1_html" %></p>
 </div>
 
-<div class='clearfix icon-list'>
-  <h3><%= t ".questions.title" %></h3>
-  <span class='sprite small term question'></span>
+<div class='clearfix'>
+  <h2><%= t ".questions.title" %></h2>
+  <span class='sprite small term question float-start'></span>
   <p><%= t ".questions.paragraph_1_html", :help_url => help_path %></p>
 </div>
 
-<div class='clearfix center'>
-  <p><a href="<%= edit_path %>" class="button start-mapping"><%= t ".start_mapping" %></a></p>
+<div class='clearfix text-center'>
+  <p class="display-5"><a href="<%= edit_path %>" class="button start-mapping"><%= t ".start_mapping" %></a></p>
 </div>
 
 <div class='alert alert-primary'>
-  <h3><%= t ".add_a_note.title" %></h3>
+  <h2><%= t ".add_a_note.title" %></h2>
   <p><%= t ".add_a_note.paragraph_1_html" %></p>
   <p><%= t ".add_a_note.paragraph_2_html", :map_url => root_path %></p>
 </div>