Cleaning up home design (#4747)

* added new svgs and fixed their css

* fixed blog buttons colors

docs/images/corporate-logos/Triggermesh.svg

@@ -1,43 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 374 56.6" style="enable-background:new 0 0 374 56.6;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#0096DB;}
-</style>
-<g>
-	<path class="st0" d="M78.5,22c-1.2-22-32.5-31.4-46-9.5c-8.8-3.9-19.3,2-19.4,11.8c-17.4,1.8-19.2,28.3,6.4,28.3h0.9
-		c-0.7-2.1-0.6-4.3,0.1-6.2l-2.7,0c-12.4-0.1-15.6-18,0.9-16.3c-3-9.9,7.4-18.1,16.2-10.7C42.7,1.1,71.7,0.6,73,26.7
-		c16.2,1.1,15.6,18.3,3.8,19.9H60.3c1.2,1.8,1.4,4,0.6,6h15.9C94.8,52.3,98,25.7,78.5,22z"/>
-	<path class="st0" d="M47,34.1l0.2-0.3c1.6-2.9,8.2-3.1,10.8-0.8c0.8,1.1,1.6,1.8,2.7,2.4c3.2,1.5,7,0.1,8.5-3.1
-		c1.5-3.2,0.1-7-3.1-8.5c-3.2-1.5-6.8,0-8.5,3.1c-1.9,3.5-9.3,2.4-10.7,0.9c-1-1.2-2.3-2.1-3.5-2.5c-1-0.4-2.1-0.5-3.2-0.3
-		c-3.3,0.5-5.6,3.7-5,7c0.1,0.6,0,0.6,0.7,2.2c0.7,1.6-2.6,8.9-6,9.5c-1.4,0-2.4,0.1-3.5,0.7C23,46,21.9,49.9,23.5,53
-		c1.7,3.1,5.5,4.3,8.7,2.6c3.1-1.7,4.1-5.4,2.6-8.7c-1.6-3.6,3.2-9.3,5.9-9.5c2.7-0.2,7.5,6.3,5.9,9.3c-1.7,3.1-1,7,2,8.9
-		c3,1.9,7,1,8.9-2c1.9-3,1-7-2-8.9c-1.1-0.7-2.1-0.9-3.5-1c-3.4-0.9-6.8-6.4-5.2-9.4C46.9,34.3,46.9,34.2,47,34.1z M63.6,26.8
-		c1.5,0,2.8,1.2,2.8,2.8s-1.2,2.8-2.8,2.8c-1.5,0-2.8-1.2-2.8-2.8S62,26.8,63.6,26.8z M29.1,53.1c-1.5,0-2.8-1.2-2.8-2.8
-		c0-1.5,1.2-2.8,2.8-2.8c1.5,0,2.8,1.2,2.8,2.8C31.9,51.8,30.7,53.1,29.1,53.1z M41,32.8c-1.2,0-2.1-0.9-2.1-2.1
-		c0-1.2,0.9-2.1,2.1-2.1c1.2,0,2.1,0.9,2.1,2.1C43.1,31.9,42.2,32.8,41,32.8z M52.2,47.5c1.5,0,2.8,1.2,2.8,2.8
-		c0,1.5-1.2,2.8-2.8,2.8s-2.8-1.2-2.8-2.8C49.4,48.7,50.6,47.5,52.2,47.5z"/>
-	<g>
-		<path d="M114,15.8h-8.5v-2.6h19.8v2.6h-8.5v22.6H114V15.8z"/>
-		<path d="M130.6,13.1h10.8c3.1,0,5.6,0.9,7.2,2.5c1.2,1.2,1.9,3,1.9,5v0.1c0,4.2-2.9,6.6-6.8,7.3l7.7,10.3h-3.5l-7.3-9.8h-7.2v9.8
-			h-2.8V13.1z M141.1,26c3.8,0,6.5-1.9,6.5-5.2v-0.1c0-3.1-2.4-5-6.4-5h-7.8V26H141.1z"/>
-		<path d="M156.8,13.1h2.8v25.2h-2.8V13.1z"/>
-		<path d="M165.9,25.8L165.9,25.8c0-7,5.1-13.1,12.6-13.1c4.2,0,6.9,1.2,9.4,3.3l-1.8,2.2c-1.9-1.7-4.1-2.9-7.7-2.9
-			c-5.6,0-9.6,4.7-9.6,10.3v0.1c0,6,3.9,10.5,10,10.5c2.9,0,5.5-1.1,7.3-2.5v-6.3h-7.7v-2.6h10.4v10c-2.3,2.1-5.9,3.9-10.1,3.9
-			C170.8,38.8,165.9,33,165.9,25.8z"/>
-		<path d="M194.2,25.8L194.2,25.8c0-7,5.1-13.1,12.6-13.1c4.2,0,6.9,1.2,9.4,3.3l-1.8,2.2c-1.9-1.7-4.1-2.9-7.7-2.9
-			c-5.6,0-9.6,4.7-9.6,10.3v0.1c0,6,3.9,10.5,10,10.5c2.9,0,5.5-1.1,7.3-2.5v-6.3h-7.7v-2.6h10.4v10c-2.3,2.1-5.9,3.9-10.1,3.9
-			C199.1,38.8,194.2,33,194.2,25.8z"/>
-		<path d="M223.5,13.1h18.2v2.6h-15.4v8.6h13.8v2.6h-13.8v8.8h15.5v2.6h-18.4V13.1z"/>
-		<path d="M247.6,13.1h10.8c3.1,0,5.6,0.9,7.2,2.5c1.2,1.2,1.9,3,1.9,5v0.1c0,4.2-2.9,6.6-6.8,7.3l7.7,10.3H265l-7.3-9.8h-7.2v9.8
-			h-2.8V13.1z M258.2,26c3.8,0,6.5-1.9,6.5-5.2v-0.1c0-3.1-2.4-5-6.4-5h-7.8V26H258.2z"/>
-		<path d="M272.3,13.1h7.4l6,9.8l6-9.8h7.4v25.2h-6.9V23.9l-6.4,9.9h-0.1l-6.4-9.8v14.4h-6.8V13.1z"/>
-		<path d="M303.6,13.1h20.3V19h-13.4v3.9h12.1v5.5h-12.1v4H324v5.9h-20.4V13.1z"/>
-		<path d="M325.7,34.6l3.9-4.6c2.5,2,5.3,3,8.2,3c1.9,0,2.9-0.6,2.9-1.7v-0.1c0-1.1-0.8-1.6-4.3-2.4c-5.4-1.2-9.5-2.7-9.5-7.9v-0.1
-			c0-4.7,3.7-8.1,9.8-8.1c4.3,0,7.6,1.2,10.4,3.3l-3.5,4.9c-2.3-1.7-4.8-2.5-7.1-2.5c-1.7,0-2.5,0.7-2.5,1.6v0.1
-			c0,1.2,0.9,1.7,4.4,2.4c5.8,1.3,9.4,3.1,9.4,7.8v0.1c0,5.1-4.1,8.2-10.2,8.2C333.1,38.8,328.8,37.4,325.7,34.6z"/>
-		<path d="M351.1,13.1h7v9.4h9v-9.4h7v25.2h-7v-9.6h-9v9.6h-7V13.1z"/>
-	</g>
-</g>
-</svg>

overrides/assets/stylesheets/home.css

@@ -146,7 +146,7 @@ h2.secondary-headline, h3.trusted-by {
 }
 
 .trusted-by-container .logo.triggermesh img {
-  width: 121pt;
+  max-width: 120pt;
   height: auto;
 }
 
@@ -415,6 +415,10 @@ h2.secondary-headline, h3.trusted-by {
   color: #7cc57c;
 }
 
+.md-typeset .md-button {
+  color: #024c93;
+}
+
 @media only screen and (max-width: 1219px) {
   .md-header__topic {
     margin: 0;

overrides/home.html

@@ -34,7 +34,7 @@
                 <img src="images/corporate-logos/Redhat.svg" alt="" draggable="false" />
               </div>
               <div class="logo triggermesh">
-                <img src="images/corporate-logos/triggermesh_logo_hp.png" alt="" draggable="false" />
+                <img src="images/corporate-logos/triggermesh_logo.svg" alt="" draggable="false" />
               </div>
             </div>
           </div>
@@ -68,9 +68,9 @@
         <div class="img-row">
           <div class="img-col">
             <div class="reason-img">
-              <img src="images/home-images/blue_simple_abstractions_icon.png"
-                onmouseover="this.src='images/home-images/dkblue_simple_abstractions_icon.png'"
-                onmouseout="this.src='images/home-images/blue_simple_abstractions_icon.png'" alt="" draggable="false">
+              <img src="images/home-images/blue_simple_abstractions_icon.svg"
+                onmouseover="this.src='images/home-images/dkblue_simple_abstractions_icon.svg'"
+                onmouseout="this.src='images/home-images/blue_simple_abstractions_icon.svg'" alt="" draggable="false">
             </div>
             <div class="reason-text">
               <h2>Simpler Abstractions</h2>
@@ -81,9 +81,9 @@
           </div>
           <div class="img-col">
             <div class="reason-img">
-              <img src="images/home-images/blue_autoscaling_icon.png"
-                onmouseover="this.src='images/home-images/dkblue_autoscaling_icon.png'"
-                onmouseout="this.src='images/home-images/blue_autoscaling_icon.png'" alt="" draggable="false">
+              <img src="images/home-images/blue_autoscaling_icon.svg"
+                onmouseover="this.src='images/home-images/dkblue_autoscaling_icon.svg'"
+                onmouseout="this.src='images/home-images/blue_autoscaling_icon.svg'" alt="" draggable="false">
             </div>
             <div class="reason-text">
               <h2>Autoscaling</h2>
@@ -94,9 +94,9 @@
           </div>
           <div class="img-col">
             <div class="reason-img">
-              <img src="images/home-images/blue_progressive_rollouts_icon.png"
-                onmouseover="this.src='images/home-images/dkblue_progressive_rollouts_icon.png'"
-                onmouseout="this.src='images/home-images/blue_progressive_rollouts_icon.png'" alt="" draggable="false">
+              <img src="images/home-images/blue_progressive_rollouts_icon.svg"
+                onmouseover="this.src='images/home-images/dkblue_progressive_rollouts_icon.svg'"
+                onmouseout="this.src='images/home-images/blue_progressive_rollouts_icon.svg'" alt="" draggable="false">
             </div>
             <div class="reason-text">
               <h2>Progressive Rollouts</h2>
@@ -109,9 +109,9 @@
         <div class="img-row">
           <div class="img-col">
             <div class="reason-img">
-              <img src="images/home-images/blue_event_intergrations_icon.png"
-                onmouseover="this.src='images/home-images/dkblue_event_intergrations_icon.png'"
-                onmouseout="this.src='images/home-images/blue_event_intergrations_icon.png'" alt="" draggable="false">
+              <img src="images/home-images/blue_event_intergrations_icon.svg"
+                onmouseover="this.src='images/home-images/dkblue_event_intergrations_icon.svg'"
+                onmouseout="this.src='images/home-images/blue_event_intergrations_icon.svg'" alt="" draggable="false">
             </div>
             <div class="reason-text">
               <h2>Event Integrations</h2>
@@ -122,9 +122,9 @@
           </div>
           <div class="img-col">
             <div class="reason-img">
-              <img src="images/home-images/blue_handle_events_icon.png"
-                onmouseover="this.src='images/home-images/dkblue_handle_events_icon.png'"
-                onmouseout="this.src='images/home-images/blue_handle_events_icon.png'" alt="" draggable="false">
+              <img src="images/home-images/blue_handle_events_icon.svg"
+                onmouseover="this.src='images/home-images/dkblue_handle_events_icon.svg'"
+                onmouseout="this.src='images/home-images/blue_handle_events_icon.svg'" alt="" draggable="false">
             </div>
             <div class="reason-text">
               <h2>Handle Events</h2>
@@ -135,9 +135,9 @@
           </div>
           <div class="img-col">
             <div class="reason-img">
-              <img src="images/home-images/blue_plugable_icon.png"
-                onmouseover="this.src='images/home-images/dkblue_plugable_icon.png'"
-                onmouseout="this.src='images/home-images/blue_plugable_icon.png'" alt="" draggable="false">
+              <img src="images/home-images/blue_plugable_icon.svg"
+                onmouseover="this.src='images/home-images/dkblue_plugable_icon.svg'"
+                onmouseout="this.src='images/home-images/blue_plugable_icon.svg'" alt="" draggable="false">
             </div>
             <div class="reason-text">
               <h2>Plugable</h2>
@@ -159,7 +159,7 @@
         Eventing work together to automate and manage tasks and applications.
       </p>
       <div class="components-content">
-        <img class="components-img" src="images/home-images/knative_componets_image.png" alt="" draggable="false" />
+        <img class="components-img" src="images/home-images/knative_flowchart_graphic.svg" alt="" draggable="false" />
         <div class="text-table">
           <p class="normal-text">
             Run serverless containers in Kubernetes with ease. Knative takes care of the details of networking,
@@ -182,7 +182,7 @@
         <div class="img-row">
           <div class="img-col">
             <div class="reason-img">
-              <img src="images/home-images/dev_focus_code_icon.png" alt="" draggable="false">
+              <img src="images/home-images/dev_focus_code_icon.svg" alt="" draggable="false">
             </div>
             <div class="reason-text">
               <h2>Developers focus on code</h2>
@@ -195,7 +195,7 @@
 
           <div class="img-col">
             <div class="reason-img">
-              <img src="images/home-images/dkblue_scale_icon.png" alt="" draggable="false">
+              <img src="images/home-images/dkblue_scale_icon.svg" alt="" draggable="false">
             </div>
             <div class="reason-text">
               <h2>Scale up and down</h2>
@@ -208,7 +208,7 @@
 
           <div class="img-col">
             <div class="reason-img">
-              <img src="images/home-images/cloud_agnostic_icon.png" alt="" draggable="false">
+              <img src="images/home-images/cloud_agnostic_icon.svg" alt="" draggable="false">
             </div>
             <div class="reason-text">
               <h2>Cloud agnostic</h2>