From d5109425580341ed9889f49a366e9b084e694b6e Mon Sep 17 00:00:00 2001 From: John Hess Date: Tue, 4 Jun 2024 22:41:13 -0500 Subject: [PATCH] new styles with placeholder EN text --- 404.html | 26 +--- _includes/header.html | 8 +- _scss/helpers/utilities.scss | 2 - _scss/pages/home.scss | 226 ++++++++++---------------------- assets/images/appstore-icon.png | Bin 0 -> 1751 bytes assets/images/explore-icon.png | Bin 0 -> 2126 bytes assets/images/maps-icon.png | Bin 0 -> 2346 bytes assets/images/message-icon.png | Bin 0 -> 2255 bytes assets/images/paddy.svg | 36 +++++ index.html | 91 +++---------- 10 files changed, 135 insertions(+), 254 deletions(-) create mode 100644 assets/images/appstore-icon.png create mode 100644 assets/images/explore-icon.png create mode 100644 assets/images/maps-icon.png create mode 100644 assets/images/message-icon.png create mode 100644 assets/images/paddy.svg diff --git a/404.html b/404.html index 6daa773..e3b4968 100644 --- a/404.html +++ b/404.html @@ -3,26 +3,12 @@ permalink: /404 layout: default --- - -
-
- Butter App Feature Logo -

404

-

Page not found :(

-

The requested page could not be found.

+
+
+

404

+
+

Page not found :(

+
diff --git a/_includes/header.html b/_includes/header.html index 9ed0015..bc092d0 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,4 +1,4 @@ -
+
@@ -14,4 +14,8 @@
-
+
+ Paddy, the Butter Box Mascot +
Welcome to the Butter Box
+
+
\ 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/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 0000000000000000000000000000000000000000..e24e203868f81e5c7dc94987411ba5d11d9e394b GIT binary patch literal 1751 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 KelF{r5}E+G+(zU8 literal 0 HcmV?d00001 diff --git a/assets/images/maps-icon.png b/assets/images/maps-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..ccff57475dbac0b990c85f2e82ba255ae767eb8a GIT binary patch literal 2346 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 XV!N^0*_~>o^8dYyqdT?Ao|*hN0j!dj literal 0 HcmV?d00001 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/index.html b/index.html index fb13e42..f4342c7 100644 --- a/index.html +++ b/index.html @@ -4,84 +4,25 @@ layout: default {% assign page_data = site.data.home %} -

-
-
- {% t page_logo_alt %} -

{% t butter_box_title %}

+
+
+
+ Explore Icon + Explore
-
-

{% t apps_subtitle %}

-

{% t apps_text %}

- -
- -
- {% t fdroid_button_text %}
- {% t fdroid_button_subtext %} -
-
- - - -
-

{% t apps_expanded_text %}

-
- {% t app_tiles_image_alt %} -
-
+
+ Message Icon + Message Board
- {% if site.data.deployment.show_chat %} -
-
-
-

{% t chat_subtitle %}

-

{% t chat_text %}

- {% t chat_button_text %} -
-
- {% t chat_image_alt %} -
-
- -
- {% t chat_secondary_cta %} -
- +
+ App Store Icon + App store
- {% endif %} - {% if site.data.deployment.show_ipfs %} -
-
-
- {% t ipfs_image_alt %} -
-
-

{% t ipfs_subtitle %}

-

{% t ipfs_text %}

- {% t ipfs_button_text %} -
-
-
- {% endif %} - - -
+
-{% include modal.html %} +{% include modal.html %} \ No newline at end of file