The year is now SVG HTTPArchive#894

catalinred · Jul 7, 2020 · 9113988 · 9113988
1 parent b07c26d
commit 9113988
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 63 deletions.
diff --git a/src/static/css/index.css b/src/static/css/index.css
@@ -106,34 +106,29 @@ p {
   font-family: 'Poppins', sans-serif;
 }
 
-.intro-image-wrapper {
-  -ms-grid-column: 1;
-  -ms-grid-row: 2;
-  grid-area: image;
-  display: none;
-  width: 100%;
-}
-
 .intro-image {
   background-image: url(/static/images/home-hero.png);
   background-size: cover;
   height: 67.5vw;
   width: 86vw;
 }
 
-.intro-image-year-wrapper {
+.intro-image-wrapper {
   -ms-grid-column: 2;
   grid-area: image;
-  width: 100%;
+  max-height: 485px;
+  max-width: 485px;
 }
 
-.intro-image-year {
-  background-image: url(/static/images/home-hero.png);
-  background-size: cover;
-  max-height: 470px;
-  max-width: 458px;
-  height: 41vw;
-  width: 40vw;
+.intro-image-wrapper svg {
+  position: relative;
+  top: 28px;
+  fill: #f7f779;
+}
+
+.intro-image-wrapper text {
+  font-family: 'Poppins', sans-serif;
+  font-weight: bold;
 }
 
 .year-2019 .intro-image-year {
@@ -392,27 +387,6 @@ p {
     text-align: center;
   }
 
-  .intro-year {
-    display: block;
-    margin: 0;
-    width: auto;
-    color: #f7f779;
-    font-size: 190px;
-    line-height: 160px;
-    font-weight: bold;
-  }
-
-  .intro-image-wrapper {
-    display: block;
-    max-width: 100%;
-    margin-top: 80px;
-    margin-right: -46px;
-  }
-
-  .intro-image-year-wrapper {
-    display: none;
-  }
-
   .featured-chapter,
   .featured-chapter-content-data {
     flex-direction: column;
@@ -556,27 +530,6 @@ p {
     justify-content: center;
   }
 
-  .intro-year {
-    display: block;
-    margin: 0;
-    width: auto;
-    color: #f7f779;
-    font-size: 40vw;
-    line-height: 100%;
-    font-weight: bold;
-  }
-
-  .intro-image-wrapper {
-    display: block;
-    max-width: 100%;
-    margin-top: 60px;
-    margin-right: -46px;
-  }
-
-  .intro-image-year-wrapper {
-    display: none;
-  }
-
   /* Featured Chapter */
   .featured-chapter,
   .featured-chapter-content-data {
@@ -682,3 +635,22 @@ p {
     margin: 0;
   }
 }
+
+@media (max-width: 900px) {
+  .intro-year {
+    display: block;
+    color: #F7F779;
+    font-size: min(190px, 40vw);
+    line-height: 1;
+    font-weight: bold;
+  }
+
+  .intro-image-wrapper {
+    margin: 3rem 0;
+    max-width: 100vw;
+  }  
+
+  .intro-image-wrapper svg {
+    display: none;
+  }
+}
diff --git a/src/templates/base/2019/index.html b/src/templates/base/2019/index.html
@@ -36,11 +36,13 @@ <h2>{{ self.intro_sub_title() }}</h2>
         {{ self.start_exploring() }}
       </a>
     </div>
-    <div class="intro-image-year-wrapper">
-      <div class="intro-image-year"></div>
-    </div>
     <div class="intro-image-wrapper">
-      <div class="intro-image"></div>
+      <!-- 2020  ~ viewBox="0 0 47 16" -->
+      <!-- 2019  ~ viewBox="0 0 42 16" -->
+      <svg viewBox="0 0 42 16">
+        <text x="0" y="15">{{ year }}</text>
+      </svg>      
+      <img src="/static/images/home-hero.png" alt="">
     </div>
   </section>
   {% include "%s/2019/featured_chapters.html" % lang %}