minor clean of responsive css

- amended padding and margins of text content to
ensure lined up with logo correctly
- floated logo right to maintain correct position responsively
- swapped position of logo and text content
to make logo sit on top text at mob
- added BEM style classes to target new styles and overwrite bootstrap

Change-Id: Ie68c952f21378178ef2c1e716dbdbc12bdae5371

refstack-ui/app/assets/css/style.css

@@ -124,9 +124,33 @@ h1, h2, h3, h4, h5, h6 {
   height: 70%;
 }
 
+.jumbotron .openstack-intro__logo {
+  width: 100%;
+}
+
 .result-filters {
   padding-bottom: 10px;
   border-top: 2px solid #C9C9C9;
   border-bottom: 2px solid #C9C9C9;
   margin-bottom: 15px;
 }
+
+@media (min-width: 450px) {
+  .jumbotron .openstack-intro__logo {
+    width: 30%;
+  }
+  .openstack-intro__logo img {
+    float: right;
+  }
+  .openstack-intro__content > *:first-child {
+    margin-top: 0;
+  }
+  .openstack-intro__content > *:last-child {
+    margin-bottom: 0;
+  }
+}
+@media (min-width: 768px) {
+  .jumbotron.openstack-intro {
+    padding: 40px;
+  }
+}

refstack-ui/app/components/home/home.html

@@ -1,11 +1,11 @@
-<div class="jumbotron">
-    <div class="pull-left left">
+<div class="jumbotron openstack-intro">
+    <div class="pull-right right openstack-intro__logo">
+        <img src="assets/img/openstack-logo.png" alt="OpenStack">
+    </div>
+    <div class="pull-left left openstack-intro__content">
         <h1>OpenStack Interoperability</h1>
         <p>Refstack is a source of tools for OpenStack interoperability testing.</p>
     </div>
-    <div class="pull-right right">
-        <img src="assets/img/openstack-logo.png" alt="OpenStack">
-    </div>
     <div class="clearfix"></div>
 </div>