Website improvements for mobile (#1140)

* Index page : Improve responsiveness of Ready to get Started section
* Docs: Fix contribute CTA
* Docs layout: more space for content + don't move content when sidebar open
* Docs layout: footer over sidebar when collapsed

Site/_includes/doc/contribute.html

@@ -1,5 +1,5 @@
 {% if site.social_links.github and site.gh_contribute %}
-    <div class="f5 contribution">
+    <div class="col col-md-11 col-lg-10 col-xl-7 p-5 mt-5 contribution">
         <h2>Help us make these docs great!</h2>
         <p>All {{ site.name | default: 'the' }} docs are open source. See something that's wrong or unclear? Submit a
             pull request.</p>

Site/_sass/extras-styles.scss

@@ -123,7 +123,7 @@
 }
 
 .features-body > tr:nth-child(even) {
-   background-color: #00000004;
+  background-color: #00000004;
 }
 
 .features-body-col {
@@ -255,13 +255,14 @@
   overflow-y: scroll;
   height: calc(100vh - 100px);
   background: #002C5A;
-  z-index: 200;
+  z-index: 301;
   padding: 0;
 }
 
 #sidebar.sidebar-collapsed {
-  transform: translateX(calc(-75% - 12px));  // calculated from column ratios (9/12) and padding on sidebar header
-  overflow: hidden;  // disable scrolling
+  transform: translateX(calc(-75% - 12px)); // calculated from column ratios (9/12) and padding on sidebar header
+  z-index: 299;
+  overflow: hidden; // disable scrolling
 }
 
 #sidebar.sidebar-animated {
@@ -298,15 +299,21 @@
 }
 
 #wiki-main {
-  margin-left: 325px;
-  padding: 32px 50px 130px 50px;
+  padding: 16px;
   min-height: 92vh;
 }
 
-#wiki-main.sidebar-collapsed {
+#wiki-main, #wiki-main.sidebar-collapsed {
   margin-left: 70px;
 }
 
+@media (min-width: 576px) {
+  #wiki-main {
+    padding: 32px 50px 130px 50px;
+    margin-left: 325px;
+  }
+}
+
 #wiki-main.sidebar-animated {
   @include sidebar-collapse-transition(margin-left);
 }
@@ -334,11 +341,8 @@
 }
 
 .contribution {
-  margin-top: 60px;
   box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.1);
-  width: 50%;
-  padding: 50px 30px;
-  border-radius: 6px;
+  border-radius: 8px;
 }
 
 .wiki a.btn {
@@ -374,9 +378,8 @@
   margin-right: 4px;
 }
 
-.wiki #footer {
+#footer {
   z-index: 300;
-  position: relative;
 }
 
 /***** DOC LAYOUT *****/

Site/assets/css/doc.scss

@@ -7,12 +7,14 @@
 @import 'override-colors';
 @import 'sidebar-collapse';
 
-#breadcrumbs .container {
-  margin-left: 340px;
+#breadcrumbs .container, #breadcrumbs .container.sidebar-collapsed {
+  margin-left: 85px;
 }
 
-#breadcrumbs .container.sidebar-collapsed {
-  margin-left: 85px;
+@media (min-width: 576px) {
+  #breadcrumbs .container {
+    margin-left: 340px;
+  }
 }
 
 #breadcrumbs .container.sidebar-animated {

Site/index.html

@@ -298,7 +298,7 @@ <h3>Ready to get started?</h3>
                 </div>
             </div>
             <div class="row">
-                <div class="col-lg-6">
+                <div class="col-lg-6 text-center">
                     <a class="cta-btn cta-btn-1" href="{{ docs_url }}">Documentation</a>
                     <a class="cta-btn" href="{{ social.github | default: '#' }}/" target="_blank"><i
                                 class="bx bxl-github"></i>Github</a>