Home page Hero Image fix (#604)

* Home page Hero Image fix * Change to use vh method instead of padding * Update AR version
HTTPArchive · Dec 31, 2019 · 05c0bb2 · 05c0bb2
1 parent 0a5524d
commit 05c0bb2
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 17 deletions.
diff --git a/src/static/css/index.css b/src/static/css/index.css
@@ -95,17 +95,31 @@ p {
   font-family: 'Poppins', sans-serif;
 }
 
-.intro-image {
+.intro-image-wrapper {
   grid-area: image;
   display: none;
+  width:100%;
 }
 
-.intro-image-2019 {
+.intro-image {
+  background-image: url(/static/images/home-hero.png);
+  background-size: cover;
+  height: 67.5vw;
+  width: 86vw;
+}
+
+.intro-image-2019-wrapper {
   grid-area: image;
+  width:100%;
+}
+
+.intro-image-2019 {
+  background-image: url(/static/images/home-hero-2019.png);
+  background-size: cover;
   max-height: 470px;
-  max-width: 100%;
-  height: auto;
-  margin-bottom: -90px;
+  max-width: 458px;
+  height: 41vw;
+  width: 40vw;
 }
 
 .intro .btn {
@@ -345,13 +359,13 @@ p {
     font-weight: bold;
   }
 
-  .intro-image {
+  .intro-image-wrapper {
     display: block;
     max-width: 100%;
     margin-top: 80px;
     margin-right: -46px;
   }
-  .intro-image-2019 {
+  .intro-image-2019-wrapper {
     display: none;
   }
 
@@ -490,14 +504,14 @@ p {
     font-weight: bold;
   }
 
-  .intro-image {
+  .intro-image-wrapper {
     display: block;
     max-width: 100%;
     margin-top: 60px;
     margin-right: -46px;
   }
 
-  .intro-image-2019 {
+  .intro-image-2019-wrapper {
     display: none;
   }
 

diff --git a/src/templates/ar/2019/base.html b/src/templates/ar/2019/base.html
@@ -68,8 +68,12 @@ <h2>
           Start exploring
         </a>
       </div>
-      <img class="intro-image-2019" src="/static/images/home-hero-2019.png" alt="The Web Almanac 2019 edition" />
-      <img class="intro-image" src="/static/images/home-hero.png" alt="The Web Almanac 2019 edition" />
+      <div class="intro-image-2019-wrapper">
+        <div class="intro-image-2019"></div>
+      </div>
+      <div class="intro-image-wrapper">
+        <div class="intro-image"></div>
+      </div>
     </div>
     {% endif %}
   </header>

diff --git a/src/templates/en/2019/base.html b/src/templates/en/2019/base.html
@@ -68,8 +68,12 @@ <h2>
           Start exploring
         </a>
       </div>
-      <img class="intro-image-2019" src="/static/images/home-hero-2019.png" alt="The Web Almanac 2019 edition" />
-      <img class="intro-image" src="/static/images/home-hero.png" alt="The Web Almanac 2019 edition" />
+      <div class="intro-image-2019-wrapper">
+        <div class="intro-image-2019"></div>
+      </div>
+      <div class="intro-image-wrapper">
+        <div class="intro-image"></div>
+      </div>
     </div>
     {% endif %}
   </header>

diff --git a/src/templates/es/2019/base.html b/src/templates/es/2019/base.html
@@ -65,8 +65,12 @@ <h2>
           Empieza a explorar
         </a>
       </div>
-      <img class="intro-image-2019" src="/static/images/home-hero-2019.png" alt="Web Almanac edición 2019" />
-      <img class="intro-image" src="/static/images/home-hero.png" alt="Web Almanac edición 2019" />
+      <div class="intro-image-2019-wrapper">
+        <div class="intro-image-2019"></div>
+      </div>
+      <div class="intro-image-wrapper">
+        <div class="intro-image"></div>
+      </div>
     </div>
     {% endif %}    
   </header>

diff --git a/src/templates/fr/2019/base.html b/src/templates/fr/2019/base.html
@@ -68,8 +68,12 @@ <h2>
           Commencer l’exploration
         </a>
       </div>
-      <img class="intro-image-2019" src="/static/images/home-hero-2019.png" alt="Édition 2019 du Web Almanac" />
-      <img class="intro-image" src="/static/images/home-hero.png" alt="Web Almanac" />
+      <div class="intro-image-2019-wrapper">
+        <div class="intro-image-2019"></div>
+      </div>
+      <div class="intro-image-wrapper">
+        <div class="intro-image"></div>
+      </div>
     </div>
     {% endif %}
   </header>