Issue 4797 - Separate white box and text from eyeo.com homepage banner

includes/index/style.html

 <style>
 
 #media
 {
   text-align: center;
 }
 
 #media-links
 {
   list-style: none;
@@ skipping 56 matching lines @@
 }
 
 @media (min-width: 930px)
 {
   #media small
   {
     display: none;
   }
 }
 
-#home-image-container div

[juliandoucette, 2018/01/25 14:27:29]

NIT: It seems like #home-image-container is really more about providing a
background color and the div within is really about "containing". Perhaps we
should re-consider these names. e.g.

<header class="bg-something">
  <div class"container">
    <img ...>
    <div id="home-header-overlay-text">
      <h1>...
      <p>...

(or similar)

Detail: I used an ID for the only thing that is actually unique to this
page/component.

[ire, 2018/01/26 10:11:01]

Done. I kept the ID on the <header> because I need to style more than jus the
overlay text

[juliandoucette, 2018/01/30 04:22:19]

Acknowledged.

+/*
+ * Hero section
+ */
+
+#hero > div
 {
   position: relative;
-  max-width: 1080px;
-  margin: 0 auto;
+  padding: 0;
 }
 
-#home-image-container p
+#hero img
+{
+  display: block;
+  width: 100%;
+}
+
+#hero h1
 {
   position: absolute;
   right: 0;
   bottom: 0;
   width: 100%;
   padding: 10px;
   background-color: #fff;
   text-transform: uppercase;
   font-size: 18px;
+  font-weight: 300;
   box-sizing: border-box;
 }
 
 @media (min-width: 350px)
 {
-  #home-image-container p
+  #hero h1
   {
     width: 80%;
   }
 }
 
 @media (min-width: 450px)
 {
-  #home-image-container p
+  #hero h1
   {
     width: 60%;
     font-size: 20px;
   }
 }
 
-@media (min-width: 767px)
+@media (min-width: 800px)
 {
-  #home-image-container p
+  #hero h1
   {
     padding: 15px;
-    width: 40%;
+    width: 39%;
     font-size: 22px;
   }
 }
 
 </style>