pixel pushing

_data/deployment.yml

@@ -1,3 +1,6 @@
 # Deployment-specific variables to specify what features to surface.
 has_internet: false
-show_chat: true
+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"

_data/deployments/butterbox/deployment.yml

@@ -1,3 +1,6 @@
 # Deployment-specific variables to specify what features to surface.
 has_internet: false
-show_chat: true
+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"

_i18n/en.yml

@@ -2,7 +2,7 @@ site_name: 'Butter'
 page_logo_alt: 'Butter App Feature Logo'
 title: 'Welcome to the Butter Box'
 
-apps_subtitle: 'Get Android apps'
+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'

_scss/helpers/utilities.scss

@@ -95,14 +95,16 @@ body {
 }
 
 
+.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 {

_scss/pages/home.scss

@@ -177,15 +177,18 @@ a:active {
     .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-bottom: 20px;
+      padding: 0 10px 20px 10px;
       margin-bottom: 40px;
-      margin-top: 20px;
+      margin-top: 5px;
       text-align: left;
       font-size: 13px;
       border-bottom-color: $lighter-gray;

index.html

@@ -13,7 +13,7 @@ layout: default
     <div class="content-area-wrapper">
       <p class="content-subtitle text-black ls-40 mb-2">{% t apps_subtitle %}</p>
       <p class="content-text text-black ls-40 mb-2">{% t apps_text %}</p>
-      <a class="btn-main btn-modal btn-split" href="#" data-micromodal-trigger="product-modal">
+      <a class="btn-main btn-modal btn-slim" href="#" data-micromodal-trigger="product-modal">
         <div class="btn-split">
           <div class="btn-logo">
             <img class="btn-android" src="/assets/images/btr-android.svg">
@@ -41,13 +41,13 @@ layout: default
         <div class="left-content">
           <p class="content-subtitle text-black ls-40 mb-2">{% t chat_subtitle %}</p>
           <p class="content-text text-black ls-40 mb-2">{% t chat_text %}</p>
-          <a class="btn-main uppercase" href="/chat">{% t chat_button_text %}</a>
+          <a class="btn-main uppercase" href="/chat/#/room/%23public%3A{{site.data.deployment.chat_server}}">{% t chat_button_text %}</a>
         </div>
         <div class="right-bleed">
           <img src="/assets/images/btr-convene.png" alt="{% t page_logo_alt %}" />
         </div>
       </div>
-      <a href="/chat/"><div class="outlink content-expander">
+      <a href="/chat/#/createroom"><div class="outlink content-expander">
         <span>{% t chat_secondary_cta %}</span>
       </a>
     </div>