[chores:ui] Fixed spacing of deploy buttons

Author: nemesifier

content/pages/index.html

@@ -43,17 +43,17 @@ <h1 class="title is-spaced is-size-3-mobile">
           </p>
           <p class="button-container">
             <a
-              class="button with-text is-orange"
+              class="button with-text is-orange is-block-mobile"
               href="{filename}features.html"
             >
               <span class="fas fa-bolt"></span>
               <span>Features</span>
             </a>
-            <a class="button with-text is-white" href="{filename}demo.html">
+            <a class="button with-text is-white is-block-mobile" href="{filename}demo.html">
               <i class="fas fa-regular fa-circle-play"></i>
               <span>Try the Demo</span>
             </a>
-            <a class="button with-text is-inverted" href="{filename}deploy.html">
+            <a class="button with-text is-inverted is-block-mobile" href="{filename}deploy.html">
               <i class="fas fa-cloud-arrow-up"></i>
               <span>Deploy</span>
             </a>

css/theme.scss

@@ -69,13 +69,14 @@ $weight-semibold: 600;
   $control-border-width: 1px,
   $input-shadow: none,
   $navbar-breakpoint: 800px,
-  $tablet: 450px,
   $footer-padding: 1.5rem,
   $media-spacing: 0.7rem,
   $media-spacing-large: 1.1rem
 );
 
 @use "sass:color";
+@use "bulma/sass/utilities/mixins" as bulma-mixins;
+@use "bulma/sass/utilities/initial-variables" as bulma-vars;
 @use "@fortawesome/fontawesome-free/scss/variables" with (
   $font-path: "../webfonts",
   $font-display: swap
@@ -466,6 +467,14 @@ body {
 p.button-container .button {
   margin: 5px;
 }
+// Adjustment for the main call to action buttons in
+// home page which look terrible on mobile
+p.button-container .button.is-block-mobile {
+  @include bulma-mixins.until(bulma-vars.$tablet) {
+    margin: 1rem auto;
+    max-width: 55%;
+  }
+}
 #top-feature-container {
   min-height: var(--km);
 }

theme/templates/base.html

@@ -161,7 +161,7 @@
                     <span>Demo</span>
                   </a>
                   <a
-                    class="button is-inverted with-text"
+                    class="button is-inverted with-text ml-1"
                     href="{{ SITEURL }}/deploy/"
                   >
                     <span class="fas fa-cloud-arrow-up"></span>