Merge pull request #5958 from roc-lang/mobile-wrap

More WIP website improvements

www/wip_new_website/content/index.md

@@ -57,15 +57,19 @@
     <div id="repl-description" role="presentation">
         <p>You can try Roc using this read-eval-print loop (<a href="https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop">REPL</a>), which is running in your browser in <a href="https://webassembly.org">WebAssembly</a>.</p>
         <p><code>Shift-Enter</code> adds a newline.</p>
-        <p><span id="repl-arrow" role="presentation">←</span> Try entering <code>0.1 + 0.2</code></p>
+        <p>Try entering <code>0.1 + 0.2</code>
+        <svg id="repl-arrow" role="presentation" width="100" height="50" viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
+          <polygon points="70,20 30,20 30,15 0,25 30,35 30,30 70,30"/>
+        </svg>
+        </p>
     </div>
     <div id="repl" role="presentation">
         <code class="history">
           <div id="repl-intro-text">Enter an expression to evaluate, or a definition (like <span class="color-blue">x = 1</span>) to use later.</div>
           <div id="history-text" aria-live="polite"></div>
         </code>
         <div id="repl-prompt" role="presentation">»</div>
-        <textarea aria-label="Enter Roc code here, then press Enter to submit it to the REPL" rows="5" id="source-input" placeholder="Type some Roc code here and press Enter."></textarea>
+        <textarea aria-label="Input Roc code here, then press Enter to submit it to the REPL" rows="5" id="source-input" placeholder="Type some Roc code and press Enter."></textarea>
     </div>
 </div>
 <script type="module" src="/wip/repl.js"></script>
@@ -85,19 +89,19 @@ Currently these use cases are the best-supported:
 
 ### Command-Line Interfaces (CLIs)
 
-You can use Roc to write command-line tools and scripts. 
+You can use Roc to write command-line tools and scripts.
 
 Checkout [roc-lang/basic-cli](https://github.com/roc-lang/basic-cli) for a basic platform to build your own CLI tools.
 
 ### Web Servers
 
-You can use Roc to write web servers. 
+You can use Roc to write web servers.
 
 *(Coming soon)*
 
 ### Embedding
 
-You can call Roc from another language. See [basic examples](https://github.com/roc-lang/roc/tree/main/examples) to help you get started with Node.js, JVM, Ruby, Python, Swift, and WASM. 
+You can call Roc from another language. See [basic examples](https://github.com/roc-lang/roc/tree/main/examples) to help you get started with Node.js, JVM, Ruby, Python, Swift, and WASM.
 
 It is easy to add support for other languages too.
 

www/wip_new_website/static/repl.js

@@ -50,7 +50,7 @@ roc_repl_wasm.default("/wip/roc_repl_wasm_bg.wasm").then(async (instance) => {
     loadingMessage.remove();
   }
 
-  repl.elemSourceInput.placeholder = "Type some Roc code here and press Enter.";
+  repl.elemSourceInput.placeholder = "Type some Roc code and press Enter.";
   repl.compiler = instance;
 
   // Get help text from the compiler, and display it at top of the history panel

www/wip_new_website/static/site.css

@@ -254,7 +254,8 @@ pre > code {
 }
 
 #homepage-repl-container #repl-description {
-    padding: 0 36px;
+    padding: 0 30px;
+    margin-top: 2px;
     flex: 1;
 }
 
@@ -272,7 +273,7 @@ pre > code {
     border: 2px solid #444;
     font-size: var(--font-size-normal);
     min-height: 0; /* On /repl on mobile, this expands to fill the screen, which we don't want */
-    min-width: 496px; /* Make sure the placeholder doesn't wrap */
+    margin-right: 6px;
 }
 
 #homepage-repl-container #repl,
@@ -295,13 +296,13 @@ pre > code {
 #homepage-repl-container #repl-arrow {
     cursor: default;
     font-weight: bold;
-    color: var(--primary-1);
     font-size: 48px;
     position: absolute;
-    top: -4px;
-    left: -56px;
+    top: -9px;
+    left: -79px;
     text-shadow: 1px 1px 1px #444;
     z-index: 3;
+    fill: var(--primary-1);
 }
 
 .repl-err {