_content: make "Press Esc to move out of the editor" message stop flickering

It's distracting to have this "Press Esc to move out of the editor"
message flicker on and off as focus shifts around the pages, especially
since it moves everything else up and down.

Make the message permanent and unobtrusive instead.

Change-Id: Iabe7a723f01ff2b54c49b3ef1214a1787b2751cd
Reviewed-on: https://go-review.googlesource.com/c/website/+/517695
Run-TryBot: Russ Cox <rsc@golang.org>
Reviewed-by: Prudhvi Krishna Chintala <prudhvikrishna@google.com>
Reviewed-by: Jamal Carvalho <jamal@golang.org>
TryBot-Result: Gopher Robot <gobot@golang.org>

_content/css/styles.css

@@ -4591,7 +4591,7 @@ a.error {
   height: 100%;
   border: none;
   outline: none;
-  padding: 0.625rem 0.625rem 0 0.625rem;
+  padding: 0 0.625rem 0 0.625rem;
   min-height: 13rem;
   resize: none;
 }
@@ -4625,8 +4625,7 @@ a.error {
   background-color: var(--color-background-playground-input) !important;
 }
 .Playground-outputContainer,
-.Playground-output,
-.Playground-preContainer {
+.Playground-output {
   background: var(--color-background-code);
 }
 .Playground-inputContainer,
@@ -4641,13 +4640,9 @@ a.error {
   resize: vertical;
 }
 .Playground-preContainer {
-  border-bottom: var(--border-code);
-}
-.Playground-preContainer {
-  display: none;
-}
-.Playground-input:focus + .Playground-preContainer {
-  display: block;
+  font-size: 0.8em;
+  font-style: italic;
+  padding: 0.3rem 0 0.3rem 0.625rem;
 }
 .Playground-controls {
   display: flex;

_content/index.md

@@ -155,7 +155,7 @@ summary: Go is an open source programming language that makes it simple to build
     </div>
     <div class="Playground-inputContainer">
       <div class="Playground-preContainer">
-        <div style="font-family:Menlo, monospace; font-size: 0.875rem"> Press Esc to move out of the Editor. </div>
+        Press Esc to move out of the editor.
       </div>
       <textarea class="Playground-input js-playgroundCodeEl" spellcheck="false" aria-label="Try Go" aria-describedby="editor-description" id="code">
 // You can edit this code!
@@ -167,7 +167,7 @@ func main() {
 }</textarea>
     </div>
     <div class="screen-reader-only" id="editor-description" hidden>
-      Press Esc to move out of the Editor.
+      Press Esc to move out of the editor.
     </div>
     <div class="Playground-outputContainer js-playgroundOutputEl">
       <pre class="Playground-output"><noscript>Hello, 世界</noscript></pre>

_content/js/site.js

@@ -222,14 +222,6 @@ window.initFuncs = [];
         textarea.blur();
       }
     });
-
-    textarea?.addEventListener('blur', () => {
-      preContainer.style.display = 'none';
-    });
-
-    textarea?.addEventListener('focus', () => {
-      preContainer.style.display = 'block';
-    });
   }
 
   /**

_content/play.tmpl

@@ -41,10 +41,10 @@
     </div>
   </div>
   <div class="Playground-inputContainer">
-    <div id="wrap">
-    <div class="Playground-preContainer">
-        <div style="font-family:Menlo, monospace; font-size: 0.875rem"> Press Esc to move out of the Editor. </div>
+    <div class="Playground-preContainer" id="editor-description">
+      Press Esc to move out of the editor.
     </div>
+    <div id="wrap">
     <textarea id="code" name="code" class="Playground-input js-playgroundCodeEl" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false" aria-label="Try Go" aria-describedby="editor-description">{{if strings.Contains .URL "/play/p/"}}Loading share...
 {{else}}
 // You can edit this code!
@@ -56,9 +56,6 @@ import "fmt"
 func main() {
 	fmt.Println("Hello, 世界")
 }{{end}}</textarea>
-    <div class="screen-reader-only" id="editor-description" hidden>
-      Press Esc to move out of the Editor.
-    </div>
     </div>
   </div>
   <div class="Playground-outputContainer js-playgroundOutputEl">