-
-
-
404
-
Page not found :(
-
The requested page could not be found.
+
+
+
404
+
+
Page not found :(
+
diff --git a/_i18n/en.yml b/_i18n/en.yml
index 9644f5f..73e3785 100644
--- a/_i18n/en.yml
+++ b/_i18n/en.yml
@@ -20,6 +20,12 @@ modal:
You will need to enable downloads from unknown sources to install this app on your Android phone.
butter_box_title: 'Welcome to the Butter Box'
+explore: 'Explore'
+message_board: "Message Board"
+app_store: 'App Store'
+offline_maps: 'Offline Maps'
+
+# Some of these are disused.
apps_subtitle: 'Get Android Apps.'
apps_text: 'Download the Butter app to view a collection of apps that use less internet and battery.'
fdroid_button_subtext: 'LESS THAN 10 MB'
diff --git a/_includes/header.html b/_includes/header.html
index 9ed0015..0fd583f 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,4 +1,4 @@
-
\ No newline at end of file
diff --git a/_scss/helpers/utilities.scss b/_scss/helpers/utilities.scss
index 3319ac9..83c2753 100644
--- a/_scss/helpers/utilities.scss
+++ b/_scss/helpers/utilities.scss
@@ -21,8 +21,6 @@ body {
}
.main-area {
- min-width: 375px;
- max-width: 500px;
margin: 0 auto;
overflow: hidden;
}
diff --git a/_scss/libs/micromodal.scss b/_scss/libs/micromodal.scss
index 598afd1..9e18067 100644
--- a/_scss/libs/micromodal.scss
+++ b/_scss/libs/micromodal.scss
@@ -2,6 +2,7 @@
// Modal Styles
// -------------------------
.modal__overlay {
+ z-index: 3;
position: fixed;
top: 0;
left: 0;
diff --git a/_scss/pages/home.scss b/_scss/pages/home.scss
index 6b61e5c..5b6d5b5 100644
--- a/_scss/pages/home.scss
+++ b/_scss/pages/home.scss
@@ -2,12 +2,11 @@
// Body Styles
// -------------------------
body {
- background-color: $gold;
- background-image: url("/assets/images/btr-texture.png");
- background-size: 170px;
+ background-color: #FFFCEC;
min-height: 100vh;
}
+
// -------------------------
// Link Styles
// -------------------------
@@ -34,19 +33,34 @@ a:active {
.darklink:link {
color: grey;
}
-.darklink:visited {
- color: grey;
-}
.darklink:hover {
color: grey;
}
.darklink:active {
color: grey;
}
+
+
// -------------------------
-// Header Styles
+// Content Styles
// -------------------------
-.header-area {
+.container {
+ width: 100%;
+ max-width: 400px;
+ margin: 0 auto;
+}
+
+.header {
+ position: relative;
+ background-color: $gold;
+ background-image: url("/assets/images/btr-texture.png");
+ background-size: 170px;
+ padding: 0 0 100px 0;
+ text-align: center;
+ border-radius: 0 0 20px 20px;
+ z-index: 1;
+
+ // Language selector
&-wrapper {
display: flex;
align-items: center;
@@ -54,7 +68,6 @@ a:active {
flex-direction: column;
}
.header-menu {
- margin-top: 20px;
&-list {
padding-left: 0;
list-style: none;
@@ -64,160 +77,63 @@ a:active {
font-weight: 600;
}
&:not(:last-child) {
- margin-right: 45px;
+ margin: 10px;
}
}
}
}
+
}
+.header-content {
+ position: relative;
+ z-index: 2;
+}
-// -------------------------
-// Content Styles
-// -------------------------
-.content-area {
+.header-image {
+ width: 150px;
+}
+
+.header-title {
+ font-size: 1.5em;
+ color: #333;
+ margin: 20px 0;
+ font-weight: bold;
+}
+
+.content {
+ position: relative;
+ top: -100px;
+ padding: 20px;
+ z-index: 2;
+}
+
+.card {
background-color: white;
- // This makes the radius as large as a pill shape can be.
- border-top-left-radius: 9999px;
- border-top-right-radius: 9999px;
- border-bottom-left-radius: 9999px;
- border-bottom-right-radius: 9999px;
- padding-bottom: Min(50vw, 250px);
- &-topper {
- margin-top: 175px;
- // The content below the topper shouldn't be too high or too low.
- height: Min(Max(50vw, 175px), 250px);
- text-align: center;
- position:relative;
- // Keep Paddy just cresting the top.
- top: calc(-20px - Min(Max(50vw, 175px), 250px) * .3);
- .topper-img {
- width: 40%;
- height: auto;
- }
- .content-title {
- margin-top: 25px;
- margin-left: 15%;
- margin-right: 15%;
- font-size: 36px;
- font-weight: 800;
- @media (max-width: 500px) {
- font-size: 28px;
- }
- }
- }
- &-wrapper {
- margin-bottom: 30px;
- margin-left: 30px;
- margin-right: 30px;
- .content-subtitle {
- font-size: 20px;
- font-weight: bold;
- text-align: left;
- }
- .split-content {
- display: flex;
- }
- .left-content {
- width: 65%;
- }
- .right-content {
- width: 65%;
- }
- .right-bleed {
- width: 35%;
- img {
- width: calc(100% + 40px);
- }
- }
- .left-img {
- width: 35%;
- img {
- width: 80%;
- }
- }
- .content-text {
- text-align: left;
- }
- // Expander per: https://www.digitalocean.com/community/tutorials/css-collapsible
- input[type='checkbox'] {
- display:none;
- }
- .outlink {
- display: block;
- cursor: pointer;
- transition: all 0.5s ease-out;
- }
- .outlink::after {
- content: url("/assets/images/btr-carrot.svg");
- display: inline-block;
- vertical-align: middle;
- transform: rotate(90deg);
- }
- .lbl-toggle {
- display: block;
- cursor: pointer;
- transition: all 0.5s ease-out;
- }
- .lbl-toggle::after {
- content: url("/assets/images/btr-carrot.svg");
- display: inline-block;
- vertical-align: middle;
- transform: rotate(180deg);
- transition: transform .25s ease-out;
- }
- .content-expander {
- border-bottom-color: $light-gray;
- border-bottom-style: solid;
- border-bottom-width: 2px;
- padding: 10px;
- width: 100%;
- text-align: left;
- font-weight: 600;
- font-size: 14px;
- span {
- // Take up space so ::after is on the right
- display: inline-block;
- width: 94%;
- }
- }
- .toggle:checked + .lbl-toggle + .content-expanded {
- max-height: 100vh;
- overflow: visible;
- display: inherit;
- }
- .toggle:checked + .lbl-toggle::after {
- transform: rotate(360deg) translate(0, -2px);
- }
- .toggle:checked + .content-expander {
- border-bottom: none;
- }
- .content-expanded {
- max-height: 0px;
- display: none;
- overflow: hidden;
- transition: max-height .5s ease-in-out;
- width: 100%;
- padding: 0 10px 20px 10px;
- margin-bottom: 40px;
- margin-top: 5px;
- text-align: left;
- font-size: 13px;
- border-bottom-color: $light-gray;
- border-bottom-style: solid;
- border-bottom-width: 2px;
- }
- .content-img {
- img {
- margin-top: 10px;
- position: relative;
- left: -40px;
- // Bleed to the edges of the main section.
- width: calc(100% + 80px);
- height: auto;
- }
- }
- }
+ padding: 20px;
+ margin: 10px 0;
+ border-radius: 10px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ font-size: 1.2em;
+ color: #333;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.card-icon {
+ width: 32px; /* Desired width */
+ height: 32px; /* Desired height */
+ margin-bottom: 10px;
+ object-fit: cover;
+}
+
+.card-icon-big {
+ width: 60px; /* Desired width */
+ height: 60px; /* Desired height */
+ margin-bottom: 10px;
+ object-fit: cover;
}
// -------------------------
diff --git a/assets/images/appstore-icon.png b/assets/images/appstore-icon.png
new file mode 100644
index 0000000..e24e203
Binary files /dev/null and b/assets/images/appstore-icon.png differ
diff --git a/assets/images/explore-icon.png b/assets/images/explore-icon.png
new file mode 100644
index 0000000..e601bd0
Binary files /dev/null and b/assets/images/explore-icon.png differ
diff --git a/assets/images/maps-icon.png b/assets/images/maps-icon.png
new file mode 100644
index 0000000..ccff574
Binary files /dev/null and b/assets/images/maps-icon.png differ
diff --git a/assets/images/message-icon.png b/assets/images/message-icon.png
new file mode 100644
index 0000000..3963f84
Binary files /dev/null and b/assets/images/message-icon.png differ
diff --git a/assets/images/paddy.svg b/assets/images/paddy.svg
new file mode 100644
index 0000000..6d42943
--- /dev/null
+++ b/assets/images/paddy.svg
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
diff --git a/assets/js/main.js b/assets/js/main.js
index bc92cb2..b76fcb2 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -39,6 +39,7 @@ const usbButter = document.querySelector('#usb-butter');
if (usbButter) {
fetch('/usb-butter')
.then(response => {
+ console.log(response);
if (response.status === 200) {
usbButter.style.display = 'inherit';
}
diff --git a/index.html b/index.html
index fb13e42..09d1482 100644
--- a/index.html
+++ b/index.html
@@ -4,84 +4,33 @@ layout: default
{% assign page_data = site.data.home %}
-
- 
+ 
- 
- 
- 
- 
- 
- 
+ {% t explore %}
+ {% t message_board %}
+ 
+ {% t app_store %}
+ 
+ {% t offline_maps %}