From b412226168dd9f7c6636a01628773c837a47b265 Mon Sep 17 00:00:00 2001
From: Skylar Ittner <skylar@netsyms.com>
Date: Wed, 14 Jul 2021 22:15:56 -0600
Subject: [PATCH] Improve text visibility

---
 index.php | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/index.php b/index.php
index f3a8e9e..d84e5c2 100644
--- a/index.php
+++ b/index.php
@@ -128,26 +128,25 @@
             </div>
         </nav>
         <div class="container mw-100" id="page-container">
-            <div class="card mb-2 mt-2">
-
+            <div class="card mb-2 mt-2 border-secondary">
+                <div class="card-header text-dark">
+                    Locate any place on Earth with just four words.
+                    <span class="taptext">Tap</span><span class="clicktext">Click</span> the map to
+                    get the unique phrase for that spot. Type a phrase into the search box to
+                    pinpoint it on the map.
+                </div>
                 <div class="card-body">
-                    <div class="input-group mb-2 d-none d-md-flex">
+                    <div class="input-group d-none d-md-flex">
                         <input class="form-control" type="text" placeholder="FixPhrase Words" id="wordbox"/>
                         <button class="btn btn-secondary" onclick="dolookup($('#wordbox').val());">Find on Map</button>
                     </div>
-                    <div class="d-grid d-md-none gap-2 mb-2">
+                    <div class="d-grid d-md-none gap-2">
                         <input class="form-control" type="text" placeholder="FixPhrase Words" id="wordbox-mobile"/>
                         <button class="btn btn-secondary btn-block" onclick="dolookup($('#wordbox-mobile').val());">Find on Map</button>
                     </div>
-                    <div>
-                        Locate any place on Earth with just four words.
-                        <span class="taptext">Tap</span><span class="clicktext">Click</span> the map to
-                        get the unique phrase for that spot. Type a phrase into the search box to
-                        pinpoint it on the map.
-                    </div>
                 </div>
             </div>
-            <div class="card mb-2" id="mapcard">
+            <div class="card mb-2 border-secondary" id="mapcard">
                 <a name="map"></a>
                 <div class="card-body p-2">
                     <div id="mapbox" class="w-100 h-100"></div>