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
This commit is contained in:
Andy Allan 2022-07-27 13:54:07 +01:00
parent 64b470aa3c
commit 1bf671f684
3 changed files with 26 additions and 44 deletions

View file

@ -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;

View file

@ -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>

View file

@ -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>