From d50e86138d766ca28f727853677de1c2d69b2ece Mon Sep 17 00:00:00 2001
From: Peixuan Ding <pding@freewheel.com>
Date: Tue, 18 May 2021 01:07:45 -0400
Subject: [PATCH] wrap the installation section into a blue card

---
 site/assets/scss/_variables_project.scss | 8 ++++----
 site/content/en/docs/start/_index.md     | 4 ++++
 site/layouts/shortcodes/card.html        | 1 +
 site/layouts/shortcodes/quiz_row.html    | 2 +-
 4 files changed, 10 insertions(+), 5 deletions(-)
 create mode 100644 site/layouts/shortcodes/card.html

diff --git a/site/assets/scss/_variables_project.scss b/site/assets/scss/_variables_project.scss
index 7f556f5094..dd9bed8014 100644
--- a/site/assets/scss/_variables_project.scss
+++ b/site/assets/scss/_variables_project.scss
@@ -229,10 +229,6 @@ div.code-toolbar > .toolbar {
     top: -.3em !important;
 }
 
-.option-row {
-    margin-bottom: 0.5rem;
-}
-
 .option-button {
     border-radius: 0.2rem !important;
     margin-right: 0.2rem;
@@ -241,3 +237,7 @@ div.code-toolbar > .toolbar {
 .hide {
     display: none !important;
 }
+
+.card-body-blue {
+    background: #f3f9fa;
+}
diff --git a/site/content/en/docs/start/_index.md b/site/content/en/docs/start/_index.md
index 9915491f3f..0ddbcc70f9 100644
--- a/site/content/en/docs/start/_index.md
+++ b/site/content/en/docs/start/_index.md
@@ -20,6 +20,8 @@ All you need is Docker (or similarly compatible) container or a Virtual Machine
 
 <h2 class="step"><span class="fa-stack fa-1x"><i class="fa fa-circle fa-stack-2x"></i><strong class="fa-stack-1x text-primary">1</strong></span>Installation</h2>
 
+{{% card %}}
+
 Click on the buttons that describe your target platform:
 
 {{% quiz_row base="" name="Operating system" %}}
@@ -212,6 +214,8 @@ Download and run the stand-alone [minikube Windows installer](https://storage.go
 _If you used a CLI to perform the installation, you will need to close that CLI and open a new one before proceeding._
 {{% /quiz_instruction %}}
 
+{{% /card %}}
+
 
 <h2 class="step"><span class="fa-stack fa-1x"><i class="fa fa-circle fa-stack-2x"></i><strong class="fa-stack-1x text-primary">2</strong></span>Start your cluster</h2>
 
diff --git a/site/layouts/shortcodes/card.html b/site/layouts/shortcodes/card.html
new file mode 100644
index 0000000000..89f4cb2586
--- /dev/null
+++ b/site/layouts/shortcodes/card.html
@@ -0,0 +1 @@
+<div class="card"><div class="card-body card-body-blue">{{ .Inner }}</div></div>
diff --git a/site/layouts/shortcodes/quiz_row.html b/site/layouts/shortcodes/quiz_row.html
index 80f5ff6325..50d4efdde7 100644
--- a/site/layouts/shortcodes/quiz_row.html
+++ b/site/layouts/shortcodes/quiz_row.html
@@ -8,7 +8,7 @@
 
 <div data-quiz-id="{{ .Get "base" }}" data-level="{{ $level }}" class="row option-row {{ $hide }}">
     <div class="col-lg-2 my-auto">
-        <span>{{ with .Get "name"}}{{.}}{{end}}</span>
+        <p>{{ with .Get "name"}}{{.}}{{end}}</p>
     </div>
     <div class="col-lg-10">{{ .Inner }}</div>
 </div>