Add new getting-started page (#367)

* Add new getting-started page * Add numbers to steps * Put new trade encouragement on its own line * Fix bug with altcoin text showing unexpectedly * Add getting-started page to main navbar * Stop videos playing in background when switched * Make steps responsive * Space out bottom note * Improve wording of step 2 According to cd2357 feedback. * Update wiki links * Update _redirects
bisq-network · Jun 19, 2020 · 095ed45 · 095ed45
1 parent 3923fa9
commit 095ed45
Show file tree

Hide file tree

Showing 5 changed files with 290 additions and 22 deletions.
diff --git a/_data/main_nav.yml b/_data/main_nav.yml
@@ -1,8 +1,8 @@
 en:
   links:
 
-    - title: Vision
-      url: /vision/
+    - title: Getting Started
+      url: /getting-started/
 
     - title: Bisq DAO
       url: /dao/
@@ -31,8 +31,8 @@ en:
 de:
   links:
 
-    - title: Vision
-      url: /de/vision/
+    - title: Erste Schritte
+      url: /getting-started/
 
     - title: Bisq DAO
       url: /de/dao/
@@ -61,8 +61,8 @@ de:
 es:
   links:
 
-    - title: Visión
-      url: /es/vision/
+    - title: Empezando
+      url: /getting-started/
 
     - title: DAO Bisq
       url: /es/dao/
@@ -91,8 +91,8 @@ es:
 fr:
   links:
 
-    - title: Vision
-      url: /fr/vision/
+    - title: Mise en route
+      url: /getting-started/
 
     - title: La DAO de Bisq
       url: /fr/dao/
@@ -121,8 +121,8 @@ fr:
 ja:
   links:
 
-    - title: ビジョン
-      url: /ja/vision/
+    - title: 始めに
+      url: /getting-started/
 
     - title: Bisq DAO
       url: /ja/dao/
@@ -151,8 +151,8 @@ ja:
 pt-PT:
   links:
 
-    - title: Visão
-      url: /pt-PT/vision/
+    - title: Começar
+      url: /getting-started/
 
     - title: OAD do Bisq
       url: /pt-PT/dao/
@@ -181,8 +181,8 @@ pt-PT:
 zh-CN:
   links:
 
-    - title: 愿景
-      url: /zh-CN/vision/
+    - title: 快速入门
+      url: /getting-started/
 
     - title: Bisq DAO
       url: /zh-CN/dao/
@@ -211,8 +211,8 @@ zh-CN:
 pt-BR:
   links:
 
-    - title: Visão
-      url: /pt-BR/vision/
+    - title: Começando
+      url: /getting-started/
 
     - title: A DAO Bisq
       url: /pt-BR/dao/
@@ -241,8 +241,8 @@ pt-BR:
 ru:
   links:
 
-    - title: Видение
-      url: /ru/vision/
+    - title: Начало работы
+      url: /getting-started/
 
     - title: ДАО Bisq
       url: /ru/dao/

diff --git a/_includes/footer.html b/_includes/footer.html
@@ -33,7 +33,7 @@ <h5 class="text-uppercase small grey">{{ item.ulResources }}</h5>
               </li>-->
               <div class="virtual-column">
                 <li>
-                  <a href="{% lingual_link downloads %}">{{ item.liDownloads }}</a>
+                  <a href="{% lingual_link vision %}">Vision</a>
                 </li>
                 <li>
                   <a href="https://github.com/orgs/bisq-network/projects/3" target="_blank">Roadmap</a>

diff --git a/_redirects b/_redirects
@@ -170,8 +170,7 @@ https://bisq.io https://bisq.network 301
 /intro https://docs.bisq.network/intro.html 302
 /contrib-checklist /contributor-checklist 302
 /contributor-checklist https://docs.bisq.network/contributor-checklist.html 302
-/get-started https://docs.bisq.network/getting-started.html 302
-/getting-started https://docs.bisq.network/getting-started.html 302
+/get-started /getting-started 302
 /contribute https://docs.bisq.network/contributor-checklist.html 301
 /payment-methods https://bisq.wiki/Payment_methods 302
 /trading-fees https://bisq.wiki/Trading_fees 302

diff --git a/css/styles.scss b/css/styles.scss
@@ -12,10 +12,14 @@ body {
   letter-spacing: 0.03rem;
 }
 
-strong {
+strong, .strong {
     font-weight: 700;
 }
 
+.centered {
+    text-align: center;
+}
+
 .green, a {
   color: #25B135
 }
@@ -912,6 +916,97 @@ faq page
     margin: 20px 0;
 }
 
+/*****************
+getting started page
+*****************/
+
+#getting-started .admonition {
+    padding: 25px;
+    margin: 40px auto;
+}
+
+#getting-started .admonition.grey {
+    background-color: #f3f3f3;
+}
+
+#getting-started .admonition p:last-child {
+    margin-bottom: 0;
+}
+
+#getting-started .start-step-container {
+    margin: 50px auto;
+    overflow: hidden;
+}
+
+#getting-started .start-step-container .final-notes {
+    padding: 0 25px;
+}
+
+#getting-started .start-step-container .final-notes {
+    padding: 0 25px;
+}
+
+#getting-started .start-step-container .final-notes h3.separator {
+    color: #bdc3c7;
+}
+
+#getting-started .start-step-container .start-step {
+    clear: both;
+    overflow: hidden;
+    margin: 25px auto;
+}
+
+#getting-started .start-step-container .start-step .step-text {
+    width: 60%;
+    float: left;
+    padding-right: 50px;
+    padding-left: 40px;
+}
+
+#getting-started .start-step-container .start-step .step-text h2 .step-number {
+    color: #bdc3c7;
+    position: absolute;
+    left: 20px;
+}
+
+#getting-started .start-step-container .start-step .step-text .topical {
+    display: none;
+}
+
+#getting-started .start-step-container .start-step .step-text .topical.active {
+    display: block;
+}
+
+#getting-started .start-step-container .start-step .step-feature {
+    width: 40%;
+    float: right;
+    padding-top: 7px;
+}
+
+#getting-started .start-step-container .start-step .step-feature .feature-selector > a {
+    padding: 8px 12px;
+    background-color: #f3f3f3;
+    color: #7E7E7E;
+    margin-right: 15px;
+    white-space: nowrap;
+    display: inline-block;
+    margin-top: 5px;
+    font-size: 14px;
+}
+
+#getting-started .start-step-container .start-step .step-feature .feature-selector > a.active {
+    background-color: #25B135;
+    color: #fff;
+}
+
+#getting-started .step-feature .responsive-youtube-container {
+    margin-top: 15px;
+    display: none;
+}
+
+#getting-started .step-feature .responsive-youtube-container.active {
+    display: block;
+}
 
 /****************/
 
@@ -1026,6 +1121,20 @@ faq page
     .chart-stat-container .stat-chart {
         width: 100%;
     }
+
+    /*****************
+    getting started page
+    *****************/
+
+    #getting-started .start-step-container .start-step .step-text {
+        width: 100%;
+    }
+
+    #getting-started .start-step-container .start-step .step-feature {
+        width: 100%;
+        padding-right: 50px;
+        padding-left: 40px;
+    }
 }