Rebrand the top links, add Scastie

_data/nav-header.yml

@@ -1,10 +1,12 @@
-- title: Documentation
+- title: Learn
   url: https://docs.scala-lang.org
-- title: Download
+- title: Install
   url: /download/
+- title: Playground
+  url: https://scastie.scala-lang.org
+- title: Find a Library
+  url: https://index.scala-lang.org
 - title: Community
   url: /community/
-- title: Libraries
-  url: https://index.scala-lang.org
 - title: Blog
   url: /blog/

_layouts/download.html

@@ -20,7 +20,7 @@ <h1>{{page.title}}</h1>
   <div class="wrap">
     <div class="inner-box download">
       <div class="main-download">
-        <h2>Download or Upgrade Scala</h2>
+        <h2>Install or Upgrade Scala</h2>
         <div class="install-steps">
           <div class="download-options">
             <div class="download-left">
@@ -44,8 +44,8 @@ <h2>Download or Upgrade Scala</h2>
                 <img src="/resources/img/download/arrow-right.png" alt="">
                 <p>Best if you have an advanced use case.</p>
               </div>
-              <a href="{{ site.baseurl }}/download/all.html" class="btn-plain-download">
-                <i class="fa fa-download"></i>
+              <a href="{{ site.baseurl }}/download/all.html" class="btn-download dl-find-all">
+                <i class="fa fa-list-ul"></i>
                 <span>Pick a Specific Release</span>
               </a>
               <ul>

_sass/layout/download.scss

@@ -163,16 +163,6 @@
         margin-top: 38px;
     }
 
-    .btn-plain-download {
-        background: $gray-lighter;
-        display: block;
-        text-align: center;
-        text-transform: uppercase;
-        padding: 16px 0;
-        border-radius: 100px;
-        margin-bottom: 34px;
-    }
-
     .btn-download {
         background: $brand-primary;
         display: block;
@@ -207,6 +197,18 @@
         }
     }
 
+    .btn-download.dl-find-all {
+        background: $gray-lighter;
+        font-weight: 500;
+        color: $std-link;
+        &:active,
+        &:focus,
+        &:hover {
+            text-decoration: none;
+            background: darken($gray-lighter, 10%);
+        }
+    }
+
     .download-left,
     .download-right {
         position: relative;

_sass/utils/_variables.scss

@@ -17,7 +17,7 @@ $gray-li: #244E58;
 $gray-light: #E5EAEA;
 $gray-lighter: #F0F3F3;
 $apple-blue: #6dccf5;
-
+$std-link: #23aad1;
 
 //-------------------------------------------------
 $headings-font-color: $gray-dark;

download/index.md

@@ -1,7 +1,8 @@
 ---
 layout: download
-title: Download
+title: Install
 redirect_from:
+  - /install/
   - /download/scala2.html
   - /download/scala3.html