responsive homepage

_i18n/en.yml

@@ -7,6 +7,7 @@ view_all_apps: 'View All Apps'
 built_on_fdroid: Built on F-Droid Free Software
 
 butter_box_title: 'Welcome to the Butter Box'
+butter_box_subtitle: "View and download the information you want from this offline box."
 explore: 'Explore USB'
 explore_missing: 'Insert USB drive to broadcast content'
 message_board: "Message Board"

_scss/pages/home.scss

@@ -55,11 +55,13 @@ a:active {
   // center content vertically
   display: flex;
   align-items: center;
+  justify-content: center;
 
   .header-container {
     display: flex;
     align-items: center;
     width: 100%;
+    max-width: 920px;
     padding: 0 20px;
   }
 
@@ -156,7 +158,6 @@ a:active {
   text-decoration: none;
 }
 
-
 .content {
   padding: 20px;
 }
@@ -171,11 +172,36 @@ a:active {
   .card-set {
     grid-template-columns: repeat(4, 1fr); /* 4 columns for larger screens */
   }
+  .drippy {
+    display: block;
+    width: 90px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  h1.homepage-title {
+    text-align: center;
+  }
+}
+@media (max-width: 900px) {
+  .drippy {
+    display: none;
+  }
+  .homepage-subtitle {
+    display: none;
+  }
 }
 
 h1.homepage-title {
   margin: 30px 0;
 }
+.homepage-subtitle {
+  color: #9b9a98;
+  font-size: 16px;
+  font-weight: 400;
+  margin: 0 auto 50px auto;
+  max-width: 340px;
+  text-align: center;
+}
 
 .card {
   align-items: center;

index.html

@@ -6,17 +6,20 @@ layout: default
 
 <div class="container">
   <div class="content">
+    <img src="{{ site.baseurl }}/assets/images/btr-logo.svg" alt="Paddy, the Butter Box Mascot"
+      class="drippy" />
     <h1 class="homepage-title">{% t butter_box_title %}</h1>
+    <h1 class="homepage-subtitle">{% t butter_box_subtitle %}</h1>
     <!-- Defaults to display: none; revealed via JS depending on USB insertion. -->
     <div class="card-set">
+      <div id="usb-butter-placeholder" class="card">
+        {% t explore_missing %}
+      </div>
       <a href="{{ site.usb_butter_url }}" id="usb-butter" style="display: none;" data-url="{{ site.usb_butter_url }}"
         class="card">
         <img src="{{ site.baseurl }}/assets/images/explore-icon.svg" alt="Explore Icon" class="card-icon">
         {% t explore %}
       </a>
-      <div id="usb-butter-placeholder" class="card">
-        {% t explore_missing %}
-      </div>
       <a href="/chat/#/room/%23public%3A{{site.data.deployment.chat_server}}" class="card">
         <img src="{{ site.baseurl }}/assets/images/message-icon.svg" alt="Message Icon" class="card-icon">
         {% t message_board %}