wasm page (#65)

* WIP wasm page

* coloring and refactoring

* update design and content

* fix review comments

* scss revert

* revert style changes

* add customer love

* trim css and styles

* Add content from rustwasm/team README and book's "why rust and wasm?" section

Author: sendilkumarn

src/styles/app.scss

@@ -13,6 +13,10 @@ body {
   font-family: $body-font;
 }
 
+code {
+  background-color: rgba(127, 127, 127, 0.25);
+}
+
 header h1, section h2 {
   font-family: $header-font;
   z-index: 999999;
@@ -80,6 +84,10 @@ span.brand img {
 
 .domain-icon {
   min-height: 100px;
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
 }
 
 .domains {
@@ -513,8 +521,6 @@ blockquote::before {
 }
 
 #embedded-project-gallery {
-  background-color: $purple;
-  color: white;
   iframe {
     width: 100%;
     height: 250px;
@@ -525,25 +531,15 @@ blockquote::before {
 }
 
 #embedded-why-rust {
-  background-color: $green;
-  color: white;
-  a {
-    color: $purple;
-  }
   img {
     width: 40%;
-  } 
+  }
 }
 
 #embedded-get-started {
-  background-color: $red;
-  color: white;
   img {
     width: 40%;
   }
-  a {
-    color: $yellow;
-  }
 }
 
 #embedded-testimonials {
@@ -553,14 +549,48 @@ blockquote::before {
 }
 
 #embedded-friends {
-  background-color: $yellow;
   img {
     width: 80%;
     background-color: white;
     padding: 20px;
   }
 }
 
+.background-green {
+  background-color: $green;
+  color: white;
+  a {
+    color: $purple;
+  }
+}
+
+.background-yellow {
+  background-color: $yellow;
+}
+
+.background-purple {
+  background-color: $purple;
+  color: white;
+}
+
+.background-red {
+  background-color: $red;
+  color: white;
+  a {
+    color: $yellow;
+  }
+}
+
+#wasm-production-use {
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+  p.attribution a {
+    font-style: italic;
+  }
+}
+    
 #cli-pitch,
 #cli-features {
   .domain-icon {
@@ -620,4 +650,4 @@ blockquote::before {
 
 #ferris-error {
   width: 80%;
-}
+}

static/images/mdn-logo.svg

@@ -9,7 +9,7 @@
 <!-- TODO looping video header that autoplays and that includes clips of different embedded projects -->
 <!-- like the one in https://www.patreon.com/ -->
 <!-- cliking the header leads to a community maintained gallery of projects -->
-<section id="embedded-project-gallery">
+<section id="embedded-project-gallery" class="background-purple">
   <div class="container">
     <header>
       <h2>Project Gallery</h2>
@@ -30,7 +30,7 @@
   </div>
 </section>
 
-<section id="embedded-why-rust">
+<section id="embedded-why-rust" class="background-green">
   <div class="container">
     <header>
       <h2>Why Rust for embedded development?</h2>
@@ -102,7 +102,7 @@
   </div>
 </section>
 
-<section id="embedded-get-started">
+<section id="embedded-get-started" class="background-red">
   <div class="container">
     <header>
       <h2>Get started!</h2>