Refactor About header to use bootstrap and flex

This reduces the amount of custom CSS required for the layout, and
makes it responsive on small screen sizes.

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index c95dcc9826a122d79933ffd8954679c87d8fdb42..3bec5fe3612fd125af6df3e85454adf18e7baa4c 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -1738,48 +1738,20 @@ div.secondary-actions {
   background-size: cover;
   background-attachment: fixed;
 
-
   .content-inner {
-    position: relative;
-    color: #333;
-    min-width: 320px;
-    max-width: 640px;
-  }
-
-  .text {
-    background: white;
-    padding: 40px;
+    max-width: 760px;
   }
 
   .attr {
-    position: relative;
-    padding: 170px 40px 20px;
-    background: #333;
-    background: rgba(0, 0, 0, .8);
-    margin-bottom: 0;
     margin-top: -20px;
 
     h1 {
-      display: block;
-      color: white;
-      font-weight: 300;
-      font-size: 28px;
       span {
         color: $vibrant-green;
       }
     }
 
-    @include media-breakpoint-up(sm) {
-      h1 {
-        font-size: 34px;
-      }
-    }
-
     .user-image {
-      position: absolute;
-      top: 0px;
-      right: 240px;
-      left: 0px;
       height: 150px;
       background-position: 0 50%;
       background-repeat: no-repeat;
@@ -1789,16 +1761,6 @@ div.secondary-actions {
     }
 
     .byosm {
-      position: absolute;
-      top: 0px;
-      right: 0px;
-      z-index: 1;
-      width: 240px;
-      height: 150px;
-      padding: 20px 20px 20px 40px;
-      font: 500 20px/24px Helvetica, Arial, sans-serif;
-      white-space: nowrap;
-      color: #fff;
       background: $vibrant-green;
     }
 

diff --git a/app/views/site/about.html.erb b/app/views/site/about.html.erb
index d1cb9905a74dd00f307ed4cc9d7101432e6f8c98..f495193a61e178760f84198941f21ddd9c3e0d8d 100644 (file)
--- a/app/views/site/about.html.erb
+++ b/app/views/site/about.html.erb
@@ -1,15 +1,19 @@
 <%= tag.div :lang => @locale, :dir => t("html.dir", :locale => @locale) do %>
-  <div class='attr'>
-    <div class='byosm'>
-      <%= t ".copyright_html", :locale => @locale %>
+  <div class="container-lg attr">
+    <div class='row'>
+      <div class='col-sm-7 user-image'></div>
+      <div class='col-sm-5 px-5 py-3 byosm'>
+        <h5 class='text-white text-nowrap'><%= t ".copyright_html", :locale => @locale %></h4>
+      </div>
+    </div>
+    <div class='row'>
+      <div class="w-100 px-5 py-4 bg-dark">
+        <h1 class="text-white font-weight-light"><%= t ".used_by_html", :name => tag.span("OpenStreetMap", :class => "user-name"), :locale => @locale %></h1>
+      </div>
     </div>
-
-    <div class='user-image'></div>
-
-    <h1><%= t ".used_by_html", :name => tag.span("OpenStreetMap", :class => "user-name"), :locale => @locale %></h1>
   </div>
 
-  <div class='text'>
+  <div class='bg-white px-5 py-4'>
     <div class='section'>
       <p><strong><%= t ".lede_text", :locale => @locale %></strong></p>
       <h2><div class='icon local'></div><%= t ".local_knowledge_title", :locale => @locale %></h2>