Merge pull request creativecommons#407 from creativecommons/update_hero

Dhruvi16 · web-flow · commit eb3dd913c7ba · 2020-08-08T12:20:41.000+05:30
Update image and columns for the hero section.
diff --git a/themes/vocabulary_theme/templates/blocks/hero.html b/themes/vocabulary_theme/templates/blocks/hero.html
@@ -1,18 +1,20 @@
-<section class="container hero">
-  <div class="hero-title column is-9 is-paddingless">
-    <h1>
-      {{ this.title }}
-    </h1>
-  </div>
-  <div class="columns">
-    <div class="column is-one-third">
-      <p class="hero-description">
-        {{ this.description }}
-      </p>
-      {{ this.links }}
+<section class="hero">
+  <div class="container">
+    <div class="hero-title column is-12 is-paddingless">
+      <h1>
+        {{ this.title }}
+      </h1>
     </div>
-    <div class="column">
-      <img src="./github.svg" />
+    <div class="columns">
+      <div class="column is-5">
+        <p class="hero-description">
+          {{ this.description }}
+        </p>
+        {{ this.links }}
+      </div>
     </div>
   </div>
+  <div class="level-right hero-image">
+    <img class="image" src="./github.svg" />
+  </div>
 </section>
diff --git a/webpack/sass/main.scss b/webpack/sass/main.scss
@@ -63,7 +63,7 @@ code {
   }
 
   .hero-links {
-    @extend .margin-top-normal;
+    @extend .margin-vertical-normal;
     @extend .padding-horizontal-big;
 
     .button {
@@ -76,6 +76,20 @@ code {
       }
     }
   }
+
+  .hero-image {
+    @include from($fullhd) {
+      margin-top: -20rem;
+      .image {
+        width: 50%;
+      }
+    }
+    @include until($fullhd) {
+      .image {
+        width: 100%;
+      }
+    }
+  }
 }
 
 // Get-involved section - Home page

Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@ code {`
`63`	`63`	`}`
`64`	`64`
`65`	`65`	`.hero-links {`
`66`		`- @extend .margin-top-normal;`
	`66`	`+ @extend .margin-vertical-normal;`
`67`	`67`	`@extend .padding-horizontal-big;`
`68`	`68`
`69`	`69`	`.button {`
`@@ -76,6 +76,20 @@ code {`
`76`	`76`	`}`
`77`	`77`	`}`
`78`	`78`	`}`
	`79`	`+`
	`80`	`+ .hero-image {`
	`81`	`+ @include from($fullhd) {`
	`82`	`+ margin-top: -20rem;`
	`83`	`+ .image {`
	`84`	`+ width: 50%;`
	`85`	`+ }`
	`86`	`+ }`
	`87`	`+ @include until($fullhd) {`
	`88`	`+ .image {`
	`89`	`+ width: 100%;`
	`90`	`+ }`
	`91`	`+ }`
	`92`	`+ }`
`79`	`93`	`}`
`80`	`94`
`81`	`95`	`// Get-involved section - Home page`