diff --git a/_includes/modal.html b/_includes/modal.html
deleted file mode 100644
index 56da990..0000000
--- a/_includes/modal.html
+++ /dev/null
@@ -1,42 +0,0 @@
-
-
-
-
-
-
-
-
-
- {% for slide in page_data.modal.slider_list %}
-
-
-
- {% endfor %}
-
-
-
-
-
-
diff --git a/_includes/sideload.html b/_includes/sideload.html
new file mode 100644
index 0000000..0f7b94e
--- /dev/null
+++ b/_includes/sideload.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+ Downloading apps from unknown sources can expose your device to malicious software. For this
+ reason, your phone will warn against it.
+
+
+ The Butter App Store and the apps in it are checked for malware before they are shared. Consider
+ it a safe source.
+
+
+
+ Continue to Download
+
+
+
+
+
\ No newline at end of file
diff --git a/_scss/helpers/utilities.scss b/_scss/helpers/utilities.scss
index 49a4a16..59065b5 100644
--- a/_scss/helpers/utilities.scss
+++ b/_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;
diff --git a/_scss/helpers/variables.scss b/_scss/helpers/variables.scss
index c59d3a7..f6b99da 100644
--- a/_scss/helpers/variables.scss
+++ b/_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;
diff --git a/_scss/libs/micromodal.scss b/_scss/libs/micromodal.scss
index 9e18067..c2433c7 100644
--- a/_scss/libs/micromodal.scss
+++ b/_scss/libs/micromodal.scss
@@ -16,47 +16,54 @@
.modal__container {
background-color: #fff;
- padding: 30px;
- max-width: 1070px;
- max-height: 100vh;
- border-radius: 4px;
- overflow-y: auto;
- box-sizing: border-box;
+ margin: 10px;
+ max-width: 500px;
+ border-radius: 21px;
}
-.modal__header {
- display: flex;
- justify-content: flex-end;
- align-items: center;
-}
-
-.modal__title {
- margin-top: 0;
- margin-bottom: 0;
- font-weight: 600;
- font-size: 1.75em;
- line-height: 1.25;
- color: $dark-gray;
- box-sizing: border-box;
+.header__text {
+ margin: 0 20px;
+ h2.modal__title {
+ margin: 30px auto 20px auto;
+ font-weight: 700;
+ font-size: 24px;
+ color: black;
+ 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
diff --git a/_scss/pages/home.scss b/_scss/pages/home.scss
index 2784d3e..6589d69 100644
--- a/_scss/pages/home.scss
+++ b/_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
// -------------------------
diff --git a/apps.html b/apps.html
index d6b057a..f0db9bd 100644
--- a/apps.html
+++ b/apps.html
@@ -4,16 +4,17 @@ breadcrumb: "App Store"
---
-
+
Discover the Butter App Store
Featuring free, ad-free Android apps that use less internet and less battery
- {% 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=apk_url %}
+ {% include fancybutton.html main_cta="Download App Store" sub_cta="Less than 10 MB" href="#" modal="product-modal" %}
+{% include sideload.html %}
View in Browser
diff --git a/assets/js/main.js b/assets/js/main.js
index 0fe5213..6fe59ee 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -29,9 +29,11 @@ $(document).ready(function(){
// Prevent default for modal trigger button
const btnModal = document.querySelector('.btn-modal');
-btnModal.addEventListener('click', (event) => {
- event.preventDefault();
-});
+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
diff --git a/index.html b/index.html
index 70ff86c..f7cb03d 100644
--- a/index.html
+++ b/index.html
@@ -32,6 +32,4 @@ layout: default
-