diff --git a/_data/deployments/butterbox/deployment.yml b/_data/deployments/butterbox/deployment.yml index 328e313..bc07ea9 100644 --- a/_data/deployments/butterbox/deployment.yml +++ b/_data/deployments/butterbox/deployment.yml @@ -1,3 +1,6 @@ # Deployment-specific variables to specify what features to surface. has_internet: false -show_chat: true \ No newline at end of file +show_chat: true +# The standard dnsmasq config includes butterbox.lan even when a non-EN language +# is selected so this should work even when the user-visible domain is different. +chat_server: "butterbox.lan" \ No newline at end of file diff --git a/_data/home.yml b/_data/home.yml index ad33fe3..4aa694e 100644 --- a/_data/home.yml +++ b/_data/home.yml @@ -1,8 +1,8 @@ # This file is sitewide, for all languages. # To specify per-language data, use the _i18n folder's yml files. -page_logo: '/assets/images/butter-logo-feature-large.svg' -app_tiles_image: '/assets/images/butter-collection-features-offline-essentials.svg' +page_logo: '/assets/images/btr-logo.svg' +app_tiles_image: '/assets/images/btr-apps.png' modal: butter_app_logo: '/assets/images/butter-app-icon-large.svg' 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..3319ac9 100644 --- a/_scss/helpers/utilities.scss +++ b/_scss/helpers/utilities.scss @@ -20,12 +20,17 @@ body { font-weight: 400; } +.main-area { + min-width: 375px; + 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 +50,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,21 +65,48 @@ body { border-radius: 50rem; transition: all .3s ease; text-decoration: none; + width: fit-content; &:hover { - background-color: lighten($royal-blue, 5%); + background-color: lighten($gold, 5%); } margin-bottom: 10px; + .btn-split { + display: inline-flex; + .btn-logo { + margin: auto 0px; + height: 60px; + } + .btn-text { + border-left: 1pt; + border-left-color: black; + border-left-style: solid; + text-align: left; + padding: 12px 20px; + height: fit-content; + margin: auto; + .button-main-text { + font-size: 16px; + font-weight: 500; + } + .button-sub-text { + font-size: 11px; + font-weight: 400; + } + } + } +} + + +.btn-main.btn-slim { + padding: .5em 2.5em; } // Text utility classes .content-text { font-family: $text-font-family; - font-size: 22px; + font-size: 16px; line-height: 1.5; - @media (max-width: 768px) { - font-size: 18px; - } } .caption { @@ -97,13 +128,17 @@ body { letter-spacing: .4px; } +.uppercase { + text-transform: uppercase; +} + // 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..c59d3a7 100644 --- a/_scss/helpers/variables.scss +++ b/_scss/helpers/variables.scss @@ -2,6 +2,7 @@ $white: #ffffff; $black: #000000; $dark-gray: #242424; +$light-gray: #EEE; // Brand colors $gold: #FFDF3F; diff --git a/_scss/pages/home.scss b/_scss/pages/home.scss index f6c826e..8e43371 100644 --- a/_scss/pages/home.scss +++ b/_scss/pages/home.scss @@ -3,6 +3,8 @@ // ------------------------- body { background-color: $gold; + background-image: url("/assets/images/btr-texture.png"); + background-size: 170px; min-height: 100vh; } @@ -11,22 +13,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 +51,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,36 +76,149 @@ a:active { // Content Styles // ------------------------- .content-area { - &-wrapper { - margin-top: 30px; - min-height: calc(100vh - 202px); // take up space above the footer - margin-bottom: 30px; + 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 { - font-size: 42px; + margin-top: 25px; + margin-left: 15%; + margin-right: 15%; + font-size: 36px; font-weight: 800; - @media (max-width: 768px) { - font-size: 36px; - } - } - .content-text { - br { - @media (max-width: 768px) { - display: none; - } - } - } - .content-img { - margin: 55px 0 45px; - @media (max-width: 768px) { - margin: 40px 0; - } - img { - display: block; - margin: 0 auto; - max-width: 70%; + @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-bleed { + width: 35%; + img { + width: calc(100% + 40px); + } + } + .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; + } + } + } +} + +// ------------------------- +// Button Styles +// ------------------------- + +.btn-android { + margin: 15px 15px 15px 0px; + height: 30px; + width: auto; } @@ -129,7 +227,6 @@ a:active { // ------------------------- .footer-area { font-family: $footer-font-family; - background-color: $shade-gold; padding: 35px 0; } diff --git a/assets/images/btr-android.svg b/assets/images/btr-android.svg new file mode 100644 index 0000000..6a0cfe8 --- /dev/null +++ b/assets/images/btr-android.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/images/btr-apps.png b/assets/images/btr-apps.png new file mode 100644 index 0000000..472011c Binary files /dev/null and b/assets/images/btr-apps.png differ diff --git a/assets/images/btr-carrot.svg b/assets/images/btr-carrot.svg new file mode 100644 index 0000000..327754f --- /dev/null +++ b/assets/images/btr-carrot.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/btr-convene.png b/assets/images/btr-convene.png new file mode 100644 index 0000000..92fbb59 Binary files /dev/null and b/assets/images/btr-convene.png differ diff --git a/assets/images/btr-logo.svg b/assets/images/btr-logo.svg new file mode 100644 index 0000000..f14e0be --- /dev/null +++ b/assets/images/btr-logo.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/assets/images/btr-texture.png b/assets/images/btr-texture.png new file mode 100644 index 0000000..6c72eec Binary files /dev/null and b/assets/images/btr-texture.png differ diff --git a/index.html b/index.html index 146426d..61cf693 100644 --- a/index.html +++ b/index.html @@ -6,21 +6,52 @@ layout: default
    -
    - {% t page_logo_alt %} -

    {% t title %}

    -

    - {% t main_text %} -

    -
    - {% 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 page_logo_alt %} +

    {% t butter_box_title %}

    +
    +

    {% t apps_subtitle %}

    +

    {% t apps_text %}

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

    {% 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 %}