Merge pull request #529 from ember-learn/ecosystem-icons-component

MelSumner · web-flow · commit 9cbebe84233f · 2020-01-22T11:43:59.000-06:00
Ecosystem icons component
diff --git a/app/styles/app.css b/app/styles/app.css
@@ -1,4 +1,5 @@
 @import "components/brand-logos.css";
+@import "components/ecosystem-icons.css";
 @import "components/faqs.css";
 @import "components/homepage-image-grid.css";
 @import "components/release-timeline.css";
diff --git a/app/styles/components/ecosystem-icons.css b/app/styles/components/ecosystem-icons.css
@@ -0,0 +1,38 @@
+.ecosystem-icons {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 30px;
+  width: 190px;
+  margin: auto;
+}
+
+@media (max-width: 1007px) {
+  .ecosystem-icons {
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    width: inherit;
+  }
+
+  .ecosystem-icon {
+    margin: auto;
+  }
+}
+
+.ecosystem-icon {
+  position: relative;
+  width: 130px;
+  height: 130px;
+}
+
+.ecosystem-icon .logo {
+  bottom: 20px;
+  right: 10px;
+  position: absolute;
+}
+.ecosystem-icon .logo.rotate {
+  transform: rotate(-9deg);
+}
+
+.ecosystem-icon .background {
+  position: absolute;
+  left: 0;
+}
diff --git a/app/templates/components/ecosystem-icon.hbs b/app/templates/components/ecosystem-icon.hbs
@@ -0,0 +1,4 @@
+<div class="ecosystem-icon">
+  <svg class="background" xmlns="http://www.w3.org/2000/svg" width="133" height="130"><defs/><path fill={{@bg}} fill-rule="nonzero" d="M.91 27.535l15.047 93.176c.878 5.44 5.993 9.145 11.436 8.283l96.19-15.233c5.45-.863 9.172-5.98 8.314-11.43L117.264 9.301c-.857-5.451-5.969-9.178-11.42-8.326L9.238 16.06a10 10 0 00-8.33 11.475z"/></svg>
+  <img class="logo {{if @rotate "rotate"}}" src="/images/home/logos/{{@icon}}.svg" alt={{@icon}}>
+</div>
diff --git a/app/templates/components/ecosystem-icons.hbs b/app/templates/components/ecosystem-icons.hbs
@@ -0,0 +1,8 @@
+<div class="ecosystem-icons">
+  <EcosystemIcon @icon="babel" @bg="#323330"/>
+  <EcosystemIcon @icon="js" @bg="#FAE125" @rotate={{true}} />
+  <EcosystemIcon @icon="prettier" @bg="#FFFFFF" />
+  <EcosystemIcon @icon="code" @bg="#272827" @rotate={{true}} />
+  <EcosystemIcon @icon="ts" @bg="#0075C7" @rotate={{true}} />
+  <EcosystemIcon @icon="npm" @bg="#c12127" @rotate={{true}}/>
+</div>
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
@@ -104,7 +104,7 @@
 <section aria-labelledby="section-ecosystem" class="bg-dark bg-shape-swipe-bottom">
   <div class="container layout">
     <div class="lg:col-3 lg:start-4 text-center">
-      <img src="/images/ecosystem.svg" alt="ember ecosystem">
+      <EcosystemIcons />
     </div>
 
     <div class="lg:col-3">
diff --git a/public/images/ecosystem.svg b/public/images/ecosystem.svg
diff --git a/public/images/home/logos/babel.svg b/public/images/home/logos/babel.svg
diff --git a/public/images/home/logos/background.svg b/public/images/home/logos/background.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="130" height="130"><path fill="#323330" d="M.91 27.535l15.047 93.176c.878 5.44 5.993 9.145 11.436 8.283l96.19-15.233c5.45-.863 9.172-5.98 8.314-11.43l-14.633-93.03c-.857-5.451-5.969-9.178-11.42-8.326L9.238 16.06a10 10 0 0 0-8.33 11.475z"/></svg>
diff --git a/public/images/home/logos/code.svg b/public/images/home/logos/code.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="-11.9 -2 1003.9 995.6"><defs/><path fill="#2489ca" d="M12.1 353.9s-24-17.3 4.8-40.4l67.1-60s19.2-20.2 39.5-2.6l619.2 468.8v224.8s-.3 35.3-45.6 31.4z"/><path fill="#1070b3" d="M171.7 498.8L12.1 643.9s-16.4 12.2 0 34l74.1 67.4s17.6 18.9 43.6-2.6L299 614.4z"/><path fill="#0877b9" d="M451.9 500l292.7-223.5-1.9-223.6s-12.5-48.8-54.2-23.4L299 384z"/><path fill="#3c99d4" d="M697.1 976.2c17 17.4 37.6 11.7 37.6 11.7l228.1-112.4c29.2-19.9 25.1-44.6 25.1-44.6V159.7c0-29.5-30.2-39.7-30.2-39.7L760 24.7c-43.2-26.7-71.5 4.8-71.5 4.8s36.4-26.2 54.2 23.4v887.5c0 6.1-1.3 12.1-3.9 17.5-5.2 10.5-16.5 20.3-43.6 16.2z"/></svg>
diff --git a/public/images/home/logos/js.svg b/public/images/home/logos/js.svg
@@ -0,0 +1 @@
+<svg width="67" height="45" xmlns="http://www.w3.org/2000/svg"><text transform="translate(0 -14)" fill="#323330" fill-rule="evenodd" font-family="Helvetica" font-size="58"><tspan x=".923" y="57.949">JS</tspan></text></svg>
diff --git a/public/images/home/logos/npm.svg b/public/images/home/logos/npm.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="85" viewBox="0 0 780 250"><defs/><path fill="#FFFFFF" d="M240 250h100v-50h100V0H240v250zM340 50h50v100h-50V50zM480 0v200h100V50h50v150h50V50h50v150h50V0H480zM0 200h100V50h50v150h50V0H0v200z"/></svg>
diff --git a/public/images/home/logos/prettier.svg b/public/images/home/logos/prettier.svg
@@ -0,0 +1 @@
+<svg width="82" height="82" xmlns="http://www.w3.org/2000/svg"><g transform="rotate(-9 67.401 13.456)" fill-rule="nonzero" fill="none"><rect fill="#56B3B4" x="52.169" y="14.834" width="7" height="3" rx="1.4"/><rect fill="#EA5E5E" x="1.363" y="68.664" width="20" height="3" rx="1.4"/><rect fill="#BF85BF" x="41.326" y="41.763" width="14" height="3" rx="1.4"/><rect fill="#EA5E5E" x="21.426" y="42.233" width="17" height="3" rx="1.4"/><rect fill="#56B3B4" x=".823" y="41.526" width="17" height="3" rx="1.4"/><rect fill="#BF85BF" x="1.102" y="55.065" width="20" height="3" rx="1.4"/><rect fill="#BF85BF" x=".578" y="27.867" width="20" height="3" rx="1.4"/><rect fill="#F7BA3E" x="17.854" y="7.527" width="37" height="3" rx="1.4"/><rect fill="#EA5E5E" x="1.25" y="7.384" width="14" height="3" rx="1.4"/><rect fill="#F7BA3E" x="14.624" y="62.325" width="7" height="3" rx="1.4"/><rect fill="#56B3B4" x="14.8" y="21.804" width="7" height="3" rx="1.4"/><rect fill="#56B3B4" x="1.043" y="62.526" width="10" height="3" rx="1.4"/><rect fill="#F7BA3E" x="1.494" y="21.044" width="10" height="3" rx="1.4"/><rect fill="#D0D4D8" opacity=".5" x="44.982" y="61.667" width="7" height="3" rx="1.4"/><rect fill="#D0D4D8" opacity=".5" x="25.116" y="62.016" width="17" height="3" rx="1.4"/><rect fill="#D0D4D8" opacity=".5" x="55.198" y="62.32" width="17" height="3" rx="1.4"/><rect fill="#56B3B4" x="28.782" y="34.718" width="31" height="3" rx="1.4"/><rect fill="#F7BA3E" x="10.976" y="35.14" width="14" height="3" rx="1.4"/><rect fill="#EA5E5E" x=".778" y="34.427" width="7" height="3" rx="1.4"/><rect fill="#BF85BF" x="31.342" y="14.907" width="17" height="3" rx="1.4"/><rect fill="#56B3B4" x="1.312" y="14.423" width="27" height="3" rx="1.4"/><rect fill="#F7BA3E" x="11.342" y="48.377" width="34" height="3" rx="1.4"/><rect fill="#BF85BF" x=".764" y="48.988" width="7" height="3" rx="1.4"/><rect fill="#EA5E5E" x="42.068" y="21.038" width="20" height="3" rx="1.4"/><rect fill="#F7BA3E" x="42.061" y="28.319" width="20" height="3" rx="1.4"/><rect fill="#56B3B4" x="1.137" y=".522" width="44" height="3" rx="1.4"/><rect fill="#D0D4D8" opacity=".5" x="48.834" y="1.067" width="24" height="3" rx="1.4"/><rect fill="#D0D4D8" opacity=".5" x="48.582" y="49.11" width="10" height="3" rx="1.4"/><rect fill="#D0D4D8" opacity=".5" x="62.181" y="48.848" width="10" height="3" rx="1.4"/><rect fill="#D0D4D8" opacity=".5" x="59.046" y="41.642" width="14" height="3" rx="1.4"/><rect fill="#D0D4D8" opacity=".5" x="58.254" y="8.125" width="14" height="3" rx="1.4"/><rect fill="#D0D4D8" opacity=".5" x="61.919" y="35.249" width="10" height="3" rx="1.4"/><rect fill="#D0D4D8" opacity=".5" x="62.626" y="14.646" width="10" height="3" rx="1.4"/><rect fill="#D0D4D8" opacity=".5" x="65.761" y="21.852" width="7" height="3" rx="1.4"/><rect fill="#D0D4D8" opacity=".5" x="66.03" y="28.171" width="7" height="3" rx="1.4"/><rect fill="#D0D4D8" opacity=".5" x="38.533" y="55.134" width="34" height="3" rx="1.4"/><rect fill="#D0D4D8" opacity=".5" x="24.813" y="55.818" width="10" height="3" rx="1.4"/><rect fill="#D0D4D8" opacity=".5" x="52.324" y="68.712" width="20" height="3" rx="1.4"/><rect fill="#D0D4D8" opacity=".5" x="25.144" y="69.176" width="24" height="3" rx="1.4"/><rect fill="#D0D4D8" opacity=".5" x="25.275" y="21.555" width="14" height="3" rx="1.4"/><rect fill="#D0D4D8" opacity=".5" x="24.306" y="28.56" width="14" height="3" rx="1.4"/></g></svg>
diff --git a/public/images/home/logos/ts.svg b/public/images/home/logos/ts.svg
@@ -0,0 +1,10 @@
+<svg width="68" height="46" xmlns="http://www.w3.org/2000/svg">
+  <g fill="#FFF" fill-rule="evenodd" font-family="Helvetica" font-size="58">
+    <text transform="translate(0 -13)">
+      <tspan x=".581" y="57.354">T</tspan>
+    </text>
+    <text transform="translate(0 -13)">
+      <tspan x="31.637" y="57.354">S</tspan>
+    </text>
+  </g>
+</svg>

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`@import "components/brand-logos.css";`
	`2`	`+@import "components/ecosystem-icons.css";`
`2`	`3`	`@import "components/faqs.css";`
`3`	`4`	`@import "components/homepage-image-grid.css";`
`4`	`5`	`@import "components/release-timeline.css";`