compress sublinks to single line (#1371)

Author: bishabosha

_layouts/frontpage.html

@@ -54,21 +54,27 @@ <h1>{{page.headerTitle}}</h1>
         <div class="resources">
           <div class="get-started">
             <a href="{{page.gettingStarted.mainUrl}}" class="button">{{page.gettingStarted.mainTitle | upcase}}</a>
-            <ul>
-              <li><a href="{{page.gettingStarted.subtitleLink}}">{{page.gettingStarted.subtitle}}</a></li>
-              {% for link in page.gettingStarted.links %}
-                <li><a href="{{link.url}}">{{link.title}}</a></li>
-              {% endfor %}
-            </ul>
+            <div class="sublinks">
+              <ul>
+                <li><a href="{{page.gettingStarted.subtitleLink}}">{{page.gettingStarted.subtitle}}</a></li>
+                {% for link in page.gettingStarted.links %}
+                  <li>•</li>
+                  <li><a href="{{link.url}}">{{link.title}}</a></li>
+                {% endfor %}
+              </ul>
+            </div>
           </div>
           <div class="learn-scala">
             <a href="{{page.apiDocs.mainUrl}}" class="button">{{page.apiDocs.mainTitle | upcase}}</a>
-            <ul>
-              <li><a href="{{page.apiDocs.subtitleLink}}">{{page.apiDocs.subtitle}}</a></li>
-              {% for link in page.apiDocs.links %}
-                <li><a href="{{link.url}}">{{link.title}}</a></li>
-              {% endfor %}
-            </ul>
+            <div class="sublinks">
+              <ul>
+                <li><a href="{{page.apiDocs.subtitleLink}}">{{page.apiDocs.subtitle}}</a></li>
+                {% for link in page.apiDocs.links %}
+                  <li>•</li>
+                  <li><a href="{{link.url}}">{{link.title}}</a></li>
+                {% endfor %}
+              </ul>
+            </div>
           </div>
           <div class="scala-brand-circle">
             <div class="circle-solid">

_sass/layout/scala-main-resources.scss

@@ -3,7 +3,7 @@
 //------------------------------------------------
 
 .scala-main-resources {
-    height: 200px;
+    height: 100px;
     background: $gray-darker;
     position: relative;
 
@@ -69,22 +69,18 @@
             margin-top: -48px;
 
             ul {
+                @include display(flex);
+                @include align-items(center);
                 margin-top: 12px;
-                max-width: 180px;
                 text-align: center;
 
                 li {
-                    &:first-child {
-                        border-bottom: $base-border-white;
-                        font-family: $heading-font-family;
-                        padding-bottom: 4px;
-                        margin-bottom: 2px;
-                        font-weight: $font-bold;
-
-                        a {
-                          font-size: $font-size-large;
-                        }
-                    }
+                    display: inline-block;
+                    font-family: $heading-font-family;
+                    padding-bottom: 4px;
+                    margin-bottom: 2px;
+                    margin-right: 7px;
+                    font-weight: $font-bold;
 
                     a {
                         color: rgba(#fff, 0.90);
@@ -101,8 +97,14 @@
             }
         }
 
+        .get-started {
+            .sublinks {
+                max-width: 180px;
+            }
+        }
+
         .learn-scala {
-            ul {
+            .sublinks {
                 float: right;
             }
         }
@@ -113,8 +115,6 @@
             left: 50%;
             top: -142px;
             margin-left: -140px;
-            background: rgba($gray-darker, 0.4);
-            border-radius: 100%;
             position: absolute;
             z-index: 60;
             @include display(flex);
@@ -123,15 +123,15 @@
 
             .circle-solid {
                 background: $gray-darker;
-                width: 198px;
-                height: 198px;
+                width: 205px;
+                height: 205px;
                 border-radius: 100%;
                 text-align: center;
 
                 > img {
                     width: 152px;
                     height: auto;
-                    margin-top: -40px;
+                    margin-top: -36px;
                 }
 
                 .scala-version {
@@ -167,13 +167,25 @@
 
         .resources {
             .get-started {
-                margin-top: 180px;
+                margin-top: 110px;
             }
 
             .learn-scala {
                 margin-top: 40px;
             }
 
+            .get-started {
+                .sublinks {
+                    max-width: 100%;
+                }
+            }
+
+            .learn-scala {
+                .sublinks {
+                    float: none;
+                }
+            }
+
             .learn-scala,
             .get-started {
                 @include span-columns(12);
@@ -186,8 +198,11 @@
                 }
 
                 ul {
+                    @include span-columns(8);
+                    @include shift(2);
                     max-width: 100%;
                     float: none;
+                    align-items: center;
                 }
             }
 

index.md

@@ -11,27 +11,21 @@ headerButtonUrl: "/what-is-scala/"
 gettingStarted:
   mainTitle: "Get Started"
   mainUrl: "https://docs.scala-lang.org/getting-started.html"
-  subtitle: "All Scala Releases"
+  subtitle: "All Releases"
   subtitleLink: "/download/all.html"
   links:
-    - title: "API Documentation"
-      url: "https://www.scala-lang.org/api/current/?_ga=1.241039811.1310790544.1468501313"
-    - title: "API Docs (All Releases)"
+    - title: "API Docs"
       url: "https://docs.scala-lang.org/api/all.html"
-    - title: "Language Specification"
-      url: "https://scala-lang.org/files/archive/spec/2.13/"
 apiDocs:
   mainTitle: "Learn Scala"
   mainUrl: "https://docs.scala-lang.org"
   subtitle: "Scala Book"
   subtitleLink: "https://docs.scala-lang.org/scala3/book/introduction.html"
   links:
-    - title: "Tour of Scala"
+    - title: "Tour"
       url: "https://docs.scala-lang.org/tour/tour-of-scala.html"
-    - title: "Online Courses"
+    - title: "Courses"
       url: "https://docs.scala-lang.org/online-courses.html"
-    - title: "Scala 3 Reference"
-      url: "https://docs.scala-lang.org/scala3/reference/overview.html"
 
 
 # Scala backends