Merge pull request #969 from creativecommons/correct-hero

align hero area of homepage to better align with vocabulary norms

Author: possumbilities

assets/static/css/style.css

@@ -348,33 +348,60 @@ main > aside.sidebar nav.filter-menu ul li.current a {
   font-size: 1rem;
 }
 
+.home-page .topic-summary {
+  grid-column: 2 / span 9;
+  display: grid;
+  grid-template:
+      "title graphic graphic"
+      "description graphic graphic"
+      "button graphic graphic";
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin-bottom: 6.4em;
+  gap: 0 4em;
+}
 
-@media (min-width: 1024px) {
-  .hero-section img {
-    width: auto;
-  }
+.home-page .topic-summary h2 {
+  grid-area: title;
 
-  .hero-section {
-    display: grid;
-    grid-column: 2 / span 9;
-    grid-template:
-        "title title title"
-        "description description description "
-        "graphic graphic graphic";
+  font-size: 2.4em;
+}
 
-    margin-bottom: 6.4em;
-    gap: 0 4em;
-  }
+.home-page .topic-summary img {
+  width: 100%;
+  grid-area: graphic;
+  margin-top: 3.1em;
+}
 
-  .hero-section h2 {
-    grid-area: title;
-  }
+.home-page .topic-summary figure {
+  width: 100%;
+  grid-area: graphic;
+  margin: 0;
+  padding: 0;
+  margin-top: .6em;
+}
 
-  .hero-description {
-    grid-area: description;
-    width: 41.67%
-  }
+.home-page .topic-summary .description {
+  grid-area: description;
+}
+
+.home-page .topic-summary .description p {
+  margin-bottom: 1em;
+}
+
+.home-page .topic-summary .description a {
+  display: inline;
+  box-sizing: border-box;
+  grid-column-start: 1;
+  grid-row-start: 3;
+
+  text-transform: uppercase;
+  font-size: 1.5em;
+  font-weight: 700;
+}
 
+
+@media (min-width: 1024px) {
   .projects ul {
     grid-template-columns: 1fr 1fr;
 
@@ -431,3 +458,14 @@ main > aside.sidebar nav.filter-menu ul li.current a {
     margin-top: -6rem;
   }
 }
+
+@media (max-width: 900px) {
+  .home-page .topic-summary {
+    display: block;
+  }
+
+  .home-page .topic-summary figure {
+    display: none;
+  }
+}
+

themes/vocabulary_theme/templates/blocks/hero.html

@@ -1,9 +1,10 @@
-<article class="hero-section">
+<article class="topic-summary">
     <h2> {{ this.title }} </h2>
-    <div class="hero-description">
-        {{ this.links }}
-    </div>
-    <div class="hero-image">
+    <figure>
         <img class="image" src="./github.svg" />
+    </figure>
+    <div class="description">
+        {{ this.links }}
     </div>
+    
 </article>