grid-ify splash page, put quickstart on side

Signed-off-by: Alex Suraci <[email protected]>

Author: vito

css/booklit.css

@@ -88,6 +88,7 @@ h2, h3 {
 
 .top-logo {
   grid-area: logo;
+  min-width: 300px;
 }
 
 .top-nav {
@@ -155,8 +156,7 @@ h2, h3 {
 }
 
 .page-nav {
-  background: #212121;
-  box-shadow: inset -9px 9px 9px -6px rgba(0, 0, 0, .125);
+  background: #2A2929;
   display: flex;
   flex-direction: column;
 }
@@ -169,14 +169,45 @@ h2, h3 {
 }
 
 .page-content.wide {
-  padding-left: 50px;
-  padding-right: 50px;
-  grid-column-start: 2;
-  grid-column-end: 3;
+  grid-column-start: span 2;
 }
 
-.top-logo {
-  flex: 1;
+.splash-title {
+  grid-column-start: span 2;
+  margin-bottom: 14px;
+  font-size: 19px;
+  border: 0;
+  align-self: end;
+}
+
+.page-content.wide .section {
+  display: grid;
+  grid-template-columns: 385px auto;
+  grid-gap: 0 30px;
+}
+
+.splash-intro h2 {
+  font-size: 18px;
+  font-style: italic;
+  color: #616161;
+  font-family: 'Roboto Slab', serif;
+  font-style: normal;
+  margin: 0;
+  border: 0;
+  font-size: 26px;
+  font-weight: 500;
+  margin-top: -4px;
+}
+
+.segment.example pre {
+  margin-top: 6px;
+  font-size: .9em;
+}
+
+@media (min-width: 800px) {
+  .segment p:first-child {
+    margin-top: 0;
+  }
 }
 
 .top-logo a {
@@ -223,7 +254,7 @@ h2, h3 {
 }
 
 .page-content h1 {
-  border-top: 5px solid #212121;
+  border-top: 5px solid #2A2929;
   padding-top: 10px;
 }
 
@@ -334,7 +365,7 @@ h2, h3 {
 }
 
 .page-nav .context .children a.active {
-  color: #fff;
+  text-decoration: underline;
 }
 
 .page-nav .context a.self {
@@ -391,38 +422,6 @@ h2, h3 {
   font-style: italic;
 }
 
-.splash-intro {
-  font-size: 18px;
-  font-style: italic;
-  color: #616161;
-}
-
-.splash-intro h2 {
-  font-family: 'Roboto Slab', serif;
-  font-style: normal;
-  margin: 0;
-  border: 0;
-  font-size: 26px;
-  font-weight: 500;
-  margin-top: -4px;
-}
-
-.splash-example h2 {
-  margin-bottom: 14px;
-  font-size: 19px;
-  border: 0;
-}
-
-.splash-example pre {
-  margin-top: 6px;
-}
-
-.side-by-side {
-  display: flex;
-  flex-direction: column;
-}
-
-
 .schema-content {
   display: none;
 }
@@ -673,7 +672,7 @@ h2, h3 {
 }
 
 .note-tag.security {
-  border-color: #212121;
+  border-color: #2A2929;
 }
 
 .note-tag.fix {
@@ -687,7 +686,7 @@ h2, h3 {
 
 .downloads-toggle {
   position: relative;
-  border-left: 2px solid #212121;
+  border-left: 2px solid #2A2929;
   padding-left: 10px;
   margin-left: 100px;
 }
@@ -920,26 +919,6 @@ label.quickstart-label::before {
   padding-bottom: 2px;
 }
 
-@media (min-width: 800px) {
-  .side-by-side {
-    flex-direction: row;
-    justify-content: space-between;
-  }
-
-  .segment {
-    width: 390px;
-  }
-
-  .segment.example {
-    width: 385px;
-    flex-shrink: 0;
-  }
-
-  .segment p:first-child {
-    margin-top: 0;
-  }
-}
-
 @media (max-width: 1200px) {
   body {
     grid-template-columns: 3fr 1fr;
@@ -958,10 +937,6 @@ label.quickstart-label::before {
     vertical-align: top;
   }
 
-  .page-nav {
-    box-shadow: inset 9px 9px 9px -6px rgba(0, 0, 0, .25);
-  }
-
   .page-aside {
     display: none;
   }

html/splash-example.tmpl

@@ -1,15 +1,11 @@
-<div class="splash-example">
-  <h2>
-    {{.Partial "Title" | render}}
-  </h2>
+<h2 class="splash-title">
+  {{.Partial "Title" | render}}
+</h2>
 
-  <div class="side-by-side">
-    <div class="segment example">
-      {{.Partial "Example" | render}}
-    </div>
+<div class="segment example">
+  {{.Partial "Example" | render}}
+</div>
 
-    <div class="segment">
-      {{.Content | render}}
-    </div>
-  </div>
+<div class="segment">
+  {{.Content | render}}
 </div>

html/splash-intro.tmpl

@@ -1,11 +1,7 @@
-<div class="splash-intro">
-  <div class="side-by-side">
-    <div class="segment example">
-      <h2>{{.Partial "Intro" | render}}</h2>
-    </div>
+<div class="segment example splash-intro">
+  <h2>{{.Partial "Intro" | render}}</h2>
+</div>
 
-    <div class="segment">
-      {{.Content | render}}
-    </div>
-  </div>
+<div class="segment">
+  {{.Content | render}}
 </div>

html/wide-page.tmpl

@@ -6,6 +6,14 @@
   <body class="wide">
     {{template "top.tmpl" .}}
 
+    <div class="page-aside">
+      {{- if .Partial "RightSide" }}
+      <div class="page-partial">
+        {{.Partial "RightSide" | render}}
+      </div>
+      {{ end -}}
+    </div>
+
     <div class="page-content wide">
       {{template "section.tmpl" .}}
     </div>

lit/download.lit

@@ -1,7 +1,7 @@
-\use-plugin{concourse-docs}
-
 \title{Download}{download}{downloads}
 
+\use-plugin{concourse-docs}
+
 \right-side{Warnings}{
   \warn{
     If you are currently on a version older than \reference{v3.6.0}, \bold{you

lit/index.lit

@@ -13,7 +13,7 @@
   \link{CI}{https://en.wikipedia.org/wiki/Continuous_integration}/\link{CD}{https://en.wikipedia.org/wiki/Continuous_delivery}.
 }
 
-\quick-start{
+\right-side{Quick Start}{
   Concourse is distributed as a single \code{concourse} binary, making it easy
   to run just about anywhere, especially with Docker.
 
@@ -33,7 +33,7 @@
   target your local Concourse as the \code{test} user:
 
   \codeblock{bash}{{
-  $ fly -t tutorial login -c http://localhost:8080 -u test -p test
+  $ fly -t tutorial login -c http://localhost:8080
   logging in to team 'main'
 
   target saved