content/static: fix various issues with homepage

+ Add blank alt text to decorative images (including the main image)
+ Preserve the main image ratio when sizing using CSS
+ Reduce the intrinsic size of the main image since we were displaying
  a much smaller version on the page
+ Adjust CSS for smaller viewports. Specifically, reduce top margins
  at smaller viewports
+ Update CSS to be mobile by default, with media queries covering
  wider viewports (to be in line with the other CSS across the site)
+ Update the background color of one of the footers to ensure we have
  satisfactory contrast ratio as reported by Lighthouse
+ Use smart quotes around sample searches
+ Transform the label text for example searches using CSS instead
  of directly typing in all caps

Updates golang/go#40504

Change-Id: I55d2823094d9968d00c6d48e64b10af5abd965f6
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/248185
Run-TryBot: Andrew Bonventre <andybons@golang.org>
TryBot-Result: kokoro <noreply+kokoro@google.com>
Reviewed-by: Jamal Carvalho <jamal@golang.org>

content/static/css/homepage.css

@@ -7,15 +7,23 @@
 .Homepage {
   display: flex;
   flex-direction: column;
-  margin: 2rem auto;
+  margin: 0 auto;
   max-width: 38rem;
 }
 .Homepage-logo {
   display: block;
-  height: 15.25rem;
-  margin: 3.125rem auto;
+  height: 14.6rem;
+  margin: 0 auto 3.125rem;
   width: 22.8125rem;
 }
+@media only screen and (min-width: 52rem) {
+  .Homepage {
+    margin: 2rem auto;
+  }
+  .Homepage-logo {
+    margin: 3.125rem auto;
+  }
+}
 .Homepage-searchForm input {
   background: url('/static/img/icon-search.svg') right no-repeat;
   background-position: left 0.75rem center;
@@ -73,19 +81,23 @@ a.Homepage-helpButton {
   margin: 1.5rem auto;
   text-align: center;
 }
-.Homepage-exampleSearches a {
+.Homepage-exampleSearchesLabel {
+  display: block;
+  text-transform: uppercase;
+}
+.Homepage-exampleSearch {
   color: var(--turq-dark);
   font-size: 1rem;
   font-weight: initial;
   padding: 0 0.625rem;
 }
-@media only screen and (max-width: 30rem) {
-  .Homepage-exampleSearches > span {
-    display: block;
+@media only screen and (min-width: 30rem) {
+  .Homepage-exampleSearchesLabel {
+    display: inline;
   }
 }
 .Questions {
-  background: var(--gray-9);
+  background: var(--gray-10);
   color: var(--gray-2);
   display: flex;
   padding: 0.5rem 0;

content/static/html/pages/index.tmpl

@@ -16,7 +16,7 @@
 {{define "main_content"}}
   <div class="Container">
     <div class="Homepage">
-      <img class="Homepage-logo" src="/static/img/gopher-homepage.jpg" alt="go.dev">
+      <img class="Homepage-logo" src="/static/img/gopher-homepage.jpg" alt="">
       <form class="Homepage-searchForm" action="/search" role="search">
         <input
           id="AutoComplete"
@@ -33,16 +33,16 @@
           autofocus="true">
         <div class="Homepage-buttonGroup">
           <button type="submit" class="Homepage-searchButton">Search</button>
-          <a href="/search-help" target="_blank" class="Homepage-helpButton">
-            Search help <span><img src="/static/img/icon-launch.svg"></span>
+          <a href="/search-help" target="_blank" rel="noopener" class="Homepage-helpButton">
+            Search help <span><img src="/static/img/icon-launch.svg" alt=""></span>
           </a>
         </div>
       </form>
       <div class="Homepage-exampleSearches">
-        <span>EXAMPLE SEARCHES:</span>
-        <a href="/search?q=logrus">"logrus"</a>
-        <a href="/search?q=yaml+OR+json">"yaml OR json"</a>
-        <a href="/search?q=go%2Fpackages">"go/packages"</a>
+        <span class="Homepage-exampleSearchesLabel">Example searches:</span>
+        <a class="Homepage-exampleSearch" href="/search?q=logrus">“logrus”</a>
+        <a class="Homepage-exampleSearch" href="/search?q=yaml+OR+json">“yaml OR json”</a>
+        <a class="Homepage-exampleSearch" href="/search?q=go%2Fpackages">“go/packages”</a>
       </div>
     </div>
   </div>