Fix web site scrolling on mobile browsers

themes/helm/assets/sass/bulma/sass/components/level.sass

@@ -1,5 +1,9 @@
 $level-item-spacing: ($block-spacing / 2) !default
 
+.columns.level-columns
+  margin-left: 0
+  margin-right: 0
+
 .level
   @extend %block
   align-items: center

themes/helm/assets/sass/docs-responsive.scss

@@ -201,14 +201,6 @@
 // mobile adjustments
 */
 @media only screen and (max-width: 768px) {
-  html,
-  body,
-  #helm {
-    width: 100vw !important;
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-
   // mobile menu
   .navbar-burger {
     position: fixed;
@@ -435,6 +427,11 @@
     }
   }
 
+  .content-columns.columns {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
   section.content-docs {
     order: 1;
   }
@@ -450,13 +447,13 @@
     bottom: auto;
     left: auto;
     min-height: 2rem;
-    width: 100vw;
+    width: 100%;
     overflow: visible;
 
     .sidebar {
       position: relative;
       margin-top: 2.5rem;
-      width: 100vw;
+      width: 100%;
       min-height: 2rem;
       padding: 0;
       border: none;
@@ -469,7 +466,7 @@
 
     // toggle docs menu on mobile
     #sidebar-toggle {
-      width: 100vw;
+      width: 100%;
       position: relative;
       text-align: center;
       margin: 0 auto;
@@ -491,11 +488,9 @@
       display: none;
       padding: 1rem 7.5vw;
       border: 12px solid $light2;
-      margin-left: 8px;
       z-index: 940;
 
       .sidebar-nav {
-        width: 80vw;
         position: relative;
         top: auto;
         bottom: auto;
@@ -509,7 +504,6 @@
         display: block;
         left: 0;
         right: 0;
-        width: 96.8%;
         min-height: 100vh;
         z-index: 1850;
         background: url("/img/topography.png") left 100px repeat-x;
@@ -539,7 +533,7 @@
 
   // content sizes
   .content-wrapper {
-    max-width: 90vw !important;
+    max-width: 92vw !important;
     padding: 2rem 5vw 3rem;
 
     h1 {
@@ -548,8 +542,8 @@
     }
 
     article {
-      padding-left: 7.5vw;
-      padding-right: 7.5vw;
+      padding-left: 5vw;
+      padding-right: 5vw;
 
       h1 {
         font-size: 5.35vw;

themes/helm/assets/sass/helm-boat.scss

@@ -24,7 +24,6 @@
 
 // boat full width default
 .boat {
-  width: 100vw;
   position: absolute;
   top: auto;
   bottom: 8px;
@@ -70,7 +69,7 @@
     margin: 0;
     left: 0;
       // offsets for navy border
-      right: 15px;
+      right: 0;
       bottom: -8px;
     height: 15vw;
     overflow: hidden;
@@ -206,4 +205,4 @@
   h1 {
     font-size:24px;
   }
-}*/
+}*/

themes/helm/layouts/404.html

@@ -5,7 +5,7 @@
 {{ define "main" }}
 {{ $home := site.BaseURL }}
 
-<div id="helm" class="page-wrapper page-home page-404">
+<div class="page-wrapper page-home page-404">
   <header>
     {{ partial "banner.html" . }}
     {{ partial "nav.html" . }}

themes/helm/layouts/blog/list.html

@@ -10,7 +10,7 @@
     {{ partial "nav-fixed.html" . }}
   </header>
 
-  <div class="columns" id="helm">
+  <div class="columns content-columns">
     <section class="column content-blog">
       <article class="content-wrapper">
         {{ .Content }}

themes/helm/layouts/blog/single.html

@@ -6,7 +6,7 @@
     {{ partial "nav-fixed.html" . }}
   </header>
 
-  <div class="columns" id="helm">
+  <div class="columns content-columns">
     <section class="column content-blog">
       <article class="content-wrapper">
 

themes/helm/layouts/docs/list.html

@@ -12,7 +12,7 @@
     {{ partial "nav-fixed.html" . }}
   </header>
 
-  <div class="columns" id="helm">
+  <div class="columns content-columns">
     <aside class="column is-narrow is-gapless sidebar-wrapper">
       {{ partial "sidebar.html" . }}
     </aside>

themes/helm/layouts/docs/single.html

@@ -11,7 +11,7 @@
     {{ partial "nav-fixed.html" . }}
   </header>
 
-  <div class="columns" id="helm">
+  <div class="columns content-columns">
     <aside class="column is-narrow is-gapless sidebar-wrapper">
       {{ partial "sidebar.html" . }}
     </aside>

themes/helm/layouts/index.html

@@ -28,12 +28,10 @@ <h2>
   </section>
 
   <section class="home-overview-wrap">
-    <section class="columns">
-      <div class="column has-text-centered">
-        <img src="/img/helm-pyramid.png" alt="Helm" class="pyramid" />
-        <h2>{{ T "main_what_is_helm_title" | markdownify }}</h2>
-      </div>
-    </section>
+    <div class="has-text-centered">
+      <img src="/img/helm-pyramid.png" alt="Helm" class="pyramid" />
+      <h2>{{ T "main_what_is_helm_title" | markdownify }}</h2>
+    </div>
 
     <section class="content-wrapper columns">
 
@@ -124,7 +122,7 @@ <h2>{{ T "get_charts_title" }}</h2>
       </div>
     </section>
 
-    <section class="has-text-centered columns">
+    <section class="columns level-columns has-text-centered">
       <nav class="level level-faqs">
         <div class="level-item has-text-centered is-hidden-mobile">
           <div>

themes/helm/layouts/partials/footer.html

@@ -1,15 +1,14 @@
 <footer>
-  <div class="columns helm-contrib-logos">
-    <div class="column has-centered-text">
+  <div class="helm-contrib-logos">
+    <div class="has-centered-text">
       <img src="/img/helm.svg" style="max-width: 140px;" alt="Helm is supported by and built with a community of over 250 contributors" class="helm-logo">
 
       <hr>
       <p class="contributors">{{ T "footer_support_title" }}</p>
       <hr>
 
-      <div class="contrib-logos columns">
+      <div class="contrib-logos">
 	<!-- Add to list in alphabetical order. -->
-        <div class="column">
           <a target="_blank" href="https://bitnami.com/"><img src="/img/logowall/bitnami.png" alt="Bitnami"></a>
 
           <a target="_blank" href="https://bloodorange.io"><img src="/img/logowall/bloodorange.png" alt="Blood Orange"></a>
@@ -34,7 +33,6 @@
 
           <a target="_blank" href="https://www.weave.works/"><img src="/img/logowall/weaveworks.png" alt="Weaveworks"></a>
 
-        </div>
       </div>
 
       <p><small>{{ T "footer_support_subtitle" | markdownify }}</small></p>