change page header implementation to allow it to flex for larger screens

Author: insectengine

_includes/1kcontributors-header.html

@@ -1,3 +1,3 @@
-<div class="full-width-imgbkg">
-      <img src="{{site.baseurl}}/assets/images/1kcontributors/header_1kcontributors.png">
+<div class="image-header-centered">
+      <img src="{{site.baseurl}}/assets/images/1kcontributors/hero_1k_graphic.svg" class="project-logo" title="Quarkus Core reaches 1000 Contributors milestone">
 </div>

_sass/includes/image-pageheader.scss

@@ -0,0 +1,30 @@
+.image-header-centered {
+  background-image: url(/assets/images/1kcontributors/header_1kcontributors.png);
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-color: $black;
+  margin: 0 -13rem;
+  display: flex;
+  justify-content: center;
+
+  img {
+  width: 33%;
+  padding: 2rem 0;
+  }
+
+  @media screen and (max-width: 1366px) {
+    margin: 0 -4rem;
+
+    img {
+    width: 50%;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    margin: 0 -2rem;
+    
+    img {
+    width: 60%;
+    }
+  }
+}

assets/css/main.scss

@@ -66,5 +66,6 @@ $baseurl: "{{ site.baseurl }}";
 @import "includes/language-band.scss";
 @import "includes/homepage-userstory-callout";
 @import "includes/contributor_list.scss";
+@import "includes/image-pageheader.scss";
 @import "includes/brand";