link boxes, [conditionally] hide them, use localizable strings, raise modal to z index 3

_i18n/en.yml

@@ -20,6 +20,12 @@ modal:
     You will need to enable downloads from unknown sources to install this app on your Android phone.
 
 butter_box_title: 'Welcome to the Butter Box'
+explore: 'Explore'
+message_board: "Message Board"
+app_store: 'App Store'
+offline_maps: 'Offline Maps'
+
+# Some of these are disused.
 apps_subtitle: 'Get Android Apps.'
 apps_text: 'Download the Butter app to view a collection of apps that use less internet and battery.'
 fdroid_button_subtext: 'LESS THAN 10 MB'

_includes/header.html

@@ -16,6 +16,6 @@
   </div>
   <div class="header-content">
     <img src="/assets/images/paddy.svg" alt="Paddy, the Butter Box Mascot" class="header-image" />
-    <div class="header-title">Welcome to the Butter Box</div>
+    <div class="header-title">{% t butter_box_title %}</div>
   </div>
 </header>

_scss/libs/micromodal.scss

@@ -2,6 +2,7 @@
 // Modal Styles
 // -------------------------
 .modal__overlay {
+  z-index: 3;
   position: fixed;
   top: 0;
   left: 0;

assets/js/main.js

@@ -39,6 +39,7 @@ const usbButter = document.querySelector('#usb-butter');
 if (usbButter) {
   fetch('/usb-butter')
     .then(response => {
+      console.log(response);
       if (response.status === 200) {
         usbButter.style.display = 'inherit';
       }

index.html

@@ -6,21 +6,29 @@ layout: default
 
 <div class="container">
   <div class="content">
-    <div class="card">
-        <img src="/assets/images/explore-icon.png" alt="Explore Icon" class="card-icon-big">
-        Explore
-    </div>
-    <div class="card">
+    <!-- Defaults to display: none; revealed via JS depending on USB insertion. -->
+    <a href="/usb-butter/" id="usb-butter" style="display: none;">
+      <div class="card">
+          <img src="/assets/images/explore-icon.png" alt="Explore Icon" class="card-icon-big">
+          {% t explore %}
+      </div>
+    </a>
+    <a href="/chat/#/room/%23public%3A{{site.data.deployment.chat_server}}">
+      <div class="card">
         <img src="/assets/images/message-icon.png" alt="Message Icon" class="card-icon">
-        Message Board
-    </div>
-    <div class="card">
-        <img src="/assets/images/appstore-icon.png" alt="App Store Icon" class="card-icon">
-        App store
-    </div>
-    <div class="card">
+        {% t message_board %}
+      </div>
+    </a>
+    <a class="btn-modal" href="#" data-micromodal-trigger="product-modal">
+      <div class="card">
+          <img src="/assets/images/appstore-icon.png" alt="App Store Icon" class="card-icon">
+          {% t app_store %}
+      </div>
+    </a>
+    <!-- Hidden until we have a design ready to implement. -->
+    <div class="card" style="display: none;"> 
         <img src="/assets/images/maps-icon.png" alt="Maps Icon" class="card-icon">
-        Offline maps
+        {% t offline_maps %}
     </div>
   </div>
 </div>

simulated-usb-butter.html

@@ -0,0 +1 @@
+<!-- This simulates a drive being plugged in.  CI moves this into place as /usb-butter.  You can too. -->