modal for "continue with confidence"

_includes/fancybutton.html

@@ -1,4 +1,5 @@
-<a class="btn-main btn-slim" href="{{ include.href }}">
+<a class="btn-main btn-slim" href="{{ include.href }}" data-micromodal-trigger="{{ include.modal }}" %}
+>
     <div class="btn-split">
         <div class="btn-logo">
             <img class="btn-android" src="{{ site.baseurl}}/assets/images/btr-android.svg">

_includes/modal.html

@@ -1,42 +0,0 @@
-<div class="modal micromodal-slide" id="product-modal" aria-hidden="true">
-  <div class="modal__overlay" tabindex="-1" data-micromodal-close>
-    <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="product-modal-title">
-      <header class="modal__header">
-        <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
-      </header>
-      <main class="modal__content" id="product-modal-content">
-        <div class="modal__content__header">
-          <div class="header__logo">
-            <img src="{{ site.baseurl }}{{ page_data.modal.butter_app_logo }}" alt="{% t modal.butter_app_logo_alt %}" />
-          </div>
-          <div class="header__text">
-            <h2 class="modal__title ls-40" id="product-modal-title">{% t modal.title %}</h2>
-            <ul class="info__list">
-              {% for item in site.translations[site.lang].modal.info_list %}
-                <li>{{ item }}</li>
-              {% endfor %}
-            </ul>
-          </div>
-          <div class="header__btn">
-            <a class="btn-main" href="{{ site.baseurl }}{{ page_data.modal.button_url }}">{% t modal.button_text %}</a>
-          </div>
-        </div>
-        <div class="modal__content__description">
-          <p class="content-text ls-40">{% t modal.text %}</p>
-        </div>
-        <div class="modal__content__slider">
-          <div class="screens-slider">
-            {% for slide in page_data.modal.slider_list %}
-              <div class="slider-item">
-                <img src="{{ site.baseurl }}{{ slide }}" alt="slider image" />
-              </div>
-            {% endfor %}
-          </div>
-        </div>
-      </main>
-      <footer class="modal__footer">
-        <p class="ls-40">{% t modal.warning %}</p>
-      </footer>
-    </div>
-  </div>
-</div>

_includes/sideload.html

@@ -0,0 +1,32 @@
+<div class="modal micromodal-slide" id="product-modal" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+        <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="product-modal-title">
+            <main class="modal__content" id="product-modal-content">
+                <div class="modal__content__header">
+                    <div class="header__text">
+                        <h2 class="modal__title ls-40" id="product-modal-title">Continue With Confidence</h2>
+                    </div>
+                </div>
+                <div class="modal__content__description">
+                    <p class="modal__text ls-40">
+                        Downloading apps from unknown sources can expose your device to malicious software. For this
+                        reason, your phone will warn against it.
+                    </p>
+                    <p class="modal__text ls-40">
+                        The Butter App Store and the apps in it are checked for malware before they are shared. Consider
+                        it a safe source.
+                    </p>
+                </div>
+                <a class="modal__close" aria-label="Close modal" data-micromodal-close>
+                    Go Back
+                </a>
+                <hr style="color: #00000033">
+                <a class="modal__close modal__continue"
+                    onclick="MicroModal.close(); window.location='{{ site.baseurl }}/assets/download/butter.apk'"
+                    aria-label="Download App Store">
+                    Continue to Download
+                </a>
+            </main>
+        </div>
+    </div>
+</div>

_scss/helpers/utilities.scss

@@ -94,19 +94,11 @@ body {
   }
 }
 
-
 .btn-main.btn-slim {
   padding: .5em 2.5em;
 }
 
-
 // Text utility classes
-.content-text {
-  font-family: $text-font-family;
-  font-size: 16px;
-  line-height: 1.5;
-}
-
 .caption {
   color: $dark-gray;
   font-family: $text-font-family;

_scss/helpers/variables.scss

@@ -11,5 +11,5 @@ $royal-blue: #6166E9;
 
 // Typography
 $base-font-family: 'Poppins', sans-serif !default;
-$text-font-family: 'Prata', serif;
+$text-font-family: 'Poppins', sans-serif !default;
 $footer-font-family: 'Inter', sans-serif;

_scss/libs/micromodal.scss

@@ -16,47 +16,54 @@
 
 .modal__container {
   background-color: #fff;
-  padding: 30px;
+  margin: 10px;
-  max-width: 1070px;
+  max-width: 500px;
-  max-height: 100vh;
+  border-radius: 21px;
-  border-radius: 4px;
-  overflow-y: auto;
-  box-sizing: border-box;
 }
 
-.modal__header {
+.header__text {
-  display: flex;
+  margin: 0 20px;
-  justify-content: flex-end;
+  h2.modal__title {
-  align-items: center;
+    margin: 30px auto 20px auto;
-}
+    font-weight: 700;
-
+    font-size: 24px;
-.modal__title {
+    color: black;
-  margin-top: 0;
-  margin-bottom: 0;
-  font-weight: 600;
-  font-size: 1.75em;
-  line-height: 1.25;
-  color: $dark-gray;
     box-sizing: border-box;
+    text-align: center;
+  }
 }
 
 .modal__close {
+  margin: 20px;
   cursor: pointer;
   background: transparent;
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
+  display: block;
   border: 0;
 }
 
-.modal__header .modal__close:before { content: "\2715"; font-size: 24px; }
+.modal__continue {
+  color: #6166E9;
+}
 
 .modal__content {
   margin-top: 2rem;
-  margin-bottom: 2rem;
   line-height: 1.5;
   @media (max-width: 768px) {
     margin-top: 1rem;
   }
 }
 
+.modal__content__description {
+  margin: 0 20px;
+  p {
+    font-family: $text-font-family;
+    font-size: 16px;
+    margin: 20px 0;
+  }
+}
 
 /**************************\
   Demo Animation Style

_scss/pages/home.scss

@@ -184,7 +184,7 @@ a:active {
     font-weight: 500;
     margin: 30px 0 15px 0;
   }
-  p {
+  p.informational-text {
     font-size: 14px;
     font-weight: 400;
     margin: 10px 0;
@@ -306,7 +306,6 @@ a:active {
   width: auto;
 }
 
-
 // -------------------------
 // Footer Styles
 // -------------------------
@@ -315,85 +314,6 @@ a:active {
   padding: 35px 0;
 }
 
-
-// -------------------------
-// Modal Styles
-// -------------------------
-.modal__content {
-  &__header {
-    display: flex;
-    align-items: flex-start;
-    @media (max-width: 768px) {
-      flex-direction: column;
-    }
-    .header__logo {
-      img {
-        display: block;
-        max-width: 100%;
-        @media (max-width: 768px) {
-          max-width: 120px;
-          width: 100%;
-        }
-      }
-    }
-    .header__text {
-      margin: 0 30px;
-      max-width: 430px;
-      width: 100%;
-      @media (max-width: 768px) {
-        margin: 20px 0;
-      }
-      .info__list {
-        font-size: 14px;
-        list-style: none;
-        margin-top: 10px;
-        padding: 0;
-      }
-    }
-    .header__btn {
-      @media (min-width: 769px) {
-        margin-left: auto;
-      }
-      .btn-main {
-        @media (max-width: 992px) {
-          font-size: 10px;
-        }
-      }
-    }
-  }
-
-  &__description {
-    margin: 30px 0;
-  }
-
-  &__slider {
-    //to prevent slider jump
-    @media (min-width: 1200px) {
-      min-height: 586px;
-      height: 100%;
-    }
-    .slider-item {
-      margin: 0 10px;
-    }
-    img {
-      max-width: 100%;
-      @media (max-width: 768px) {
-        margin: 0 auto;
-      }
-    }
-  }
-}
-
-.modal__footer {
-  p {
-    font-size: 14px;
-    a {
-      color: inherit;
-    }
-  }
-}
-
-
 // -------------------------
 // Slider Styles
 // -------------------------

apps.html

@@ -4,16 +4,17 @@ breadcrumb: "App Store"
 ---
 
 <!-- Custom style= makes the image line up with the icon. -->
-<img src="{{ site.baseurl }}/assets/images/app-store-top.png" alt="App Store icon samples" class="hero" style="max-width: 473px; display: block; margin: 0 auto;">
+<img src="{{ site.baseurl }}/assets/images/app-store-top.png" alt="App Store icon samples" class="hero"
+    style="max-width: 473px; display: block; margin: 0 auto;">
 <img src="{{ site.baseurl }}/assets/images/butter-app-icon-large.svg" alt="Butter Tile" class="app-tile">
 
 <h1>Discover the Butter App Store</h1>
 <p class="subtitle">Featuring free, ad-free Android apps that use less internet and less battery</p>
 
 <div class="btn-container">
-    {% assign apk_url = site.baseurl | append: "/assets/download/butter.apk" %}
+    {% include fancybutton.html main_cta="Download App Store" sub_cta="Less than 10 MB" href="#" modal="product-modal" %}
-    {% include fancybutton.html main_cta="Download App Store" sub_cta="Less than 10 MB" href=apk_url %}
 </div>
+{% include sideload.html %}
 
 <a class="btn-secondary" href="{{ site.base_url }}/fdroid-webdash/">View in Browser</a>
 

assets/js/main.js

@@ -29,9 +29,11 @@ $(document).ready(function(){
 
 // Prevent default for modal trigger button
 const btnModal = document.querySelector('.btn-modal');
+if (btnModal) {
   btnModal.addEventListener('click', (event) => {
     event.preventDefault();
   });
+}
 
 // If #usb-butter exists and a request to thishost.tld/usb-butter returns status 200
 // change display of #usb-butter to inherit

index.html

@@ -33,5 +33,3 @@ layout: default
     </a>
   </div>
 </div>
-
-{% include modal.html %}

maps.html

@@ -15,11 +15,11 @@ breadcrumb: "Offline Maps"
 </div>
 
 <h2>About OsmAnd</h2>
-<p>OsmAnd allows you to navigate taking into account the preferred roads and vehicle dimensions. Plan routes based on
+<p class="informational-text">OsmAnd allows you to navigate taking into account the preferred roads and vehicle dimensions. Plan routes based on
     inclines and record GPX tracks without an internet connection. OsmAnd is an open source app. It does not collect
     user data and you decide what data the app will have access to.</p>
 <h2>Map Files</h2>
-<p>Download map files for your region. To import a map file into OsmAnd, locate the file in your device downloads. Then
+<p class="informational-text">Download map files for your region. To import a map file into OsmAnd, locate the file in your device downloads. Then
     open it with the OsmAnd app.</p>
 
 <div class="filelist">