From ddb9336a606a7c5426122b2ad30eb6310eec62dd Mon Sep 17 00:00:00 2001 From: John Hess Date: Mon, 22 Aug 2022 20:18:13 -0500 Subject: [PATCH] styling updates; still needs assets/ --- _i18n/en.yml | 24 +++--- _includes/header.html | 8 -- _scss/helpers/utilities.scss | 20 +++-- _scss/helpers/variables.scss | 1 + _scss/pages/home.scss | 142 ++++++++++++++++++++++++----------- index.html | 48 +++++++----- 6 files changed, 159 insertions(+), 84 deletions(-) diff --git a/_i18n/en.yml b/_i18n/en.yml index 3173237..e29a86f 100644 --- a/_i18n/en.yml +++ b/_i18n/en.yml @@ -1,14 +1,20 @@ site_name: 'Butter' page_logo_alt: 'Butter App Feature Logo' -title: 'Life without internet made smoother.
Get access to tools that help.' -text: - show_chat: | - This Butter Box offers an Android app store and chat rooms. Download the Butter app to discover and download free, ad-free apps or to spread the love and share apps offline. Or, create a chat room which hangs on to messages while you're gone and delivers them whenever your device reconnects to the Butter Box. - dont_show_chat: | - Butter features a collection of apps to make life without the internet a little smoother. Use it to discover and download free, ad-free apps or to spread the love and share offline. -fdroid_apps_caption: Just a few of the apps available via Butter -fdroid_button_text: 'DOWNLOAD ANDROID APP' -chat_button_text: 'CREATE A CHAT ROOM' +title: 'Welcome to the Butter Box' + +apps_subtitle: 'Get Android apps' +apps_text: 'Download the Butter app to view a collection of apps that use less internet and battery.' +fdroid_apps_caption: 'Just a few of the apps available via Butter' +fdroid_button_text: 'Download Butter' +fdroid_button_subtext: 'LESS THAN 10 MB' +apps_expander_text: 'Which apps?' +apps_expanded_text: 'Butter features apps for entertainment, sharing offline, navigating, taking pictures, and more!' + +chat_subtitle: 'See what people are saying.' +chat_text: 'Check the chat for messages, videos, or files from nearby peers.' +chat_button_text: 'View Chat' +chat_secondary_cta: 'Open my own chat room' + app_tiles_image_alt: 'Butter App features collection' view_all_apps: 'View All Apps' built_on_fdroid: Built on F-Droid Free Software diff --git a/_includes/header.html b/_includes/header.html index 3769f59..9ed0015 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,14 +1,6 @@
-
    {% for lang in site.languages %} diff --git a/_scss/helpers/utilities.scss b/_scss/helpers/utilities.scss index 714b02e..272a8a2 100644 --- a/_scss/helpers/utilities.scss +++ b/_scss/helpers/utilities.scss @@ -20,12 +20,16 @@ body { font-weight: 400; } +.main-area { + max-width: 500px; + margin: 0 auto; + overflow: hidden; +} + // General container .container { width: 100%; - padding-right: 15px; - padding-left: 15px; margin-right: auto; margin-left: auto; } @@ -45,15 +49,14 @@ body { .btn-main { display: inline-block; font-weight: 600; - color: $white; text-align: center; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; - background-color: $royal-blue; - border: 1px solid $royal-blue; + background-color: $gold; + border: 1px solid $gold; padding: 1.8em 3.4em; font-size: 12px; letter-spacing: 1px; @@ -61,8 +64,9 @@ body { border-radius: 50rem; transition: all .3s ease; text-decoration: none; + width: 100%; &:hover { - background-color: lighten($royal-blue, 5%); + background-color: lighten($gold, 5%); } margin-bottom: 10px; } @@ -100,10 +104,10 @@ body { // Spacing utility classes .mb-2 { - margin-bottom: 24px; + margin-bottom: 16px; } .mt-2 { - margin-top: 24px; + margin-top: 16px; } diff --git a/_scss/helpers/variables.scss b/_scss/helpers/variables.scss index 0f55662..9b79eee 100644 --- a/_scss/helpers/variables.scss +++ b/_scss/helpers/variables.scss @@ -2,6 +2,7 @@ $white: #ffffff; $black: #000000; $dark-gray: #242424; +$light-gray: #D9D9D9; // Brand colors $gold: #FFDF3F; diff --git a/_scss/pages/home.scss b/_scss/pages/home.scss index f6c826e..11b84d7 100644 --- a/_scss/pages/home.scss +++ b/_scss/pages/home.scss @@ -11,22 +11,22 @@ body { // ------------------------- a:link { text-decoration: none; - color: white; + color: black; } a:visited { text-decoration: none; - color: white; + color: black; } a:hover { text-decoration: underline; - color: white; + color: black; } a:active { text-decoration: underline; - color: white; + color: black; } .darklink:link { @@ -49,27 +49,10 @@ a:active { display: flex; align-items: center; justify-content: space-between; - padding-top: 40px; - @media (max-width: 576px) { - flex-direction: column; - padding-top: 30px; - } - } - .header-logo { - display: flex; - align-items: center; - &-text { - margin-left: 15px; - p { - font-size: 21px; - font-weight: 700; - } - } + flex-direction: column; } .header-menu { - @media (max-width: 576px) { - margin-top: 20px; - } + margin-top: 20px; &-list { padding-left: 0; list-style: none; @@ -91,33 +74,109 @@ a:active { // Content Styles // ------------------------- .content-area { + background-color: white; + border-top-left-radius: 50vw; + border-top-right-radius: 50vw; + border-bottom-left-radius: 50vw; + border-bottom-right-radius: 50vw; + padding-bottom: Min(50vw, 250px); + &-topper { + margin-top: 175px; + height: Min(50vw, 250px); + text-align: center; + .topper-img { + position: relative; + top: -170px; + } + .content-title { + position: relative; + top: -150px; + margin-left: 15%; + margin-right: 15%; + font-size: 36px; + font-weight: 800; + @media (max-width: 500px) { + font-size: 28px; + } + } + } &-wrapper { margin-top: 30px; - min-height: calc(100vh - 202px); // take up space above the footer margin-bottom: 30px; - .content-title { - font-size: 42px; - font-weight: 800; - @media (max-width: 768px) { - font-size: 36px; + 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-bleed { + width: 35%; + img { + height: 100%; } } .content-text { - br { - @media (max-width: 768px) { - display: none; - } - } + text-align: left; + } + // Expander per: https://www.digitalocean.com/community/tutorials/css-collapsible + input[type='checkbox'] { + display:none; + } + .lbl-toggle { + display: block; + cursor: pointer; + transition: all 0.5s ease-out; + } + .lbl-toggle::before { + content: ' '; + display: inline-block; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 5px solid currentColor; + vertical-align: middle; + margin-right: .7rem; + transform: translateY(-2px); + transition: transform .5s ease-out; + } + .content-expander { + border-bottom-color: $light-gray; + border-bottom-style: solid; + border-bottom-width: 1px; + padding: 10px; + width: 100%; + text-align: left; + font-weight: 600; + font-size: 14px; + } + .toggle:checked + .lbl-toggle + .content-expanded { + max-height: 100vh; + overflow: visible; + } + .toggle:checked + .lbl-toggle::before { + transform: rotate(90deg) translateX(-3px); + } + .content-expanded { + max-height: 0px; + overflow: hidden; + transition: max-height .5s ease-in-out; + width: 100%; + margin-top: 20px; + text-align: left; + font-size: 13px; } .content-img { - margin: 55px 0 45px; - @media (max-width: 768px) { - margin: 40px 0; - } img { - display: block; - margin: 0 auto; - max-width: 70%; + margin-top: 10px; + position: relative; + left: -20vw; + width: 150%; } } } @@ -129,7 +188,6 @@ a:active { // ------------------------- .footer-area { font-family: $footer-font-family; - background-color: $shade-gold; padding: 35px 0; } diff --git a/index.html b/index.html index a1a4439..57ab898 100644 --- a/index.html +++ b/index.html @@ -6,25 +6,39 @@ layout: default
    -
    - {% t page_logo_alt %} +
    + {% t page_logo_alt %}

    {% t title %}

    -

    - {% if site.data.deployment.show_chat %} - {% t text.show_chat %} - {% else %} - {% t text.dont_show_chat %} - {% endif %} -

    -
    - {% t app_tiles_image_alt %} -

    {% t fdroid_apps_caption %}

    -
    - {% t fdroid_button_text %} - {% if site.data.deployment.show_chat %} - {% t chat_button_text %} - {% endif %}
    +
    +

    {% t apps_subtitle %}

    +

    {% t apps_text %}

    + {% t fdroid_button_text %} + + + +
    +

    {% t apps_expanded_text %}

    +
    + {% t app_tiles_image_alt %} +
    +
    +
    + {% if site.data.deployment.show_chat %} +
    +
    +
    +

    {% t chat_subtitle %}

    +

    {% t chat_text %}

    + {% t chat_button_text %} +
    +
    + {% t page_logo_alt %} +
    +
    +
    {% t chat_secondary_cta %}
     +
    + {% endif %}