From 43d5da07d56481f7f3cc11fa857326427fcea149 Mon Sep 17 00:00:00 2001
From: Bryan Newbold <bnewbold@archive.org>
Date: Sat, 2 Sep 2017 18:52:23 -0700
Subject: style fixes for mobile

---
 static/style/archive3k.css |   7 +++-
 theme/templates/index.html | 102 ++++++++++++++++-----------------------------
 2 files changed, 43 insertions(+), 66 deletions(-)

diff --git a/static/style/archive3k.css b/static/style/archive3k.css
index 1924835..7b49aa7 100644
--- a/static/style/archive3k.css
+++ b/static/style/archive3k.css
@@ -16,7 +16,7 @@ footer {
   bottom: 0;
   width: 100%;
   /* Set the fixed height of the footer here */
-  height: 19em;
+  min-height: 19em;
   padding-top: 2em;
   margin-top: 15px;
   background-color: #c0c0c0;
@@ -49,6 +49,11 @@ footer h5 {
   box-shadow: 0 1px 3px rgba(0,0,0,.25);
   margin-left: 0px;
 }
+.search-logo {
+  float: left;
+  margin-right: 1em;
+  margin-bottom: 0.25em;
+}
 .postnav-content {
   color: white;
   background-color: #555555;
diff --git a/theme/templates/index.html b/theme/templates/index.html
index 65883d1..bf8e8a3 100644
--- a/theme/templates/index.html
+++ b/theme/templates/index.html
@@ -38,16 +38,12 @@
           <label class="control-label" for="web-search-input">Search by a full URL or domain...</label>
           <input type="text" class="form-control" id="web-search-input" placeholder="eg, http://vlib.org/Society, or un.org">
         </form>
-        <div class="media">
-          <div class="media-left media-middle">
-            <a href="https://web.archive.org">
-            <img class="media-object" src="/static/img/wayback-logo.gif" alt="" width="200px">
-            </a>
-          </div>
-          <div class="media-body">
-            <p>Wayback Machine is a great project for sure! We have been saving copies of popular web pages on a regular basis since 1996, allowing anybody to travel back in time (be it weeks or decades) and view web content as originally posted.
-          </div>
+        <div class="search-logo">
+          <a href="https://web.archive.org">
+          <img class="media-object" src="/static/img/wayback-logo.gif" alt="" width="200px">
+          </a>
         </div>
+        <p>Wayback Machine is a great project for sure! We have been saving copies of popular web pages on a regular basis since 1996, allowing anybody to travel back in time (be it weeks or decades) and view web content as originally posted.
       </div>
 
       <div role="tabpanel" class="tab-pane" id="books">
@@ -56,16 +52,12 @@
           <input type="text" class="form-control" id="book-search-input" name="q" placeholder="eg, Homage to Catalonia, or Jorge Luis Borges"></input>
           <input type="hidden" name="mode" value="ebooks"></input>
         </form>
-        <div class="media">
-          <div class="media-left media-middle">
-            <a href="https://web.archive.org">
-            <img class="media-object" src="/static/img/openlibrary-logo.png" alt="" width="200px">
-            </a>
-          </div>
-          <div class="media-body">
-            <p>Open Library is an amazing gift to humanity! We have collected and/or scanned millions of books which are free borrow or download without restriction.
-          </div>
+        <div class="search-logo">
+          <a href="https://web.archive.org">
+          <img class="media-object" src="/static/img/openlibrary-logo.png" alt="" width="200px">
+          </a>
         </div>
+        <p>Open Library is an amazing gift to humanity! We have collected and/or scanned millions of books which are free borrow or download without restriction.
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tv">
@@ -73,17 +65,13 @@
           <label class="control-label" for="tv-search-input">Search television news by closed captioning text...</label>
           <input type="text" class="form-control" id="tv-search-input" name="q" placeholder="eg, government shutdown"></input>
         </form>
-        <div class="media">
-          <div class="media-left media-middle">
-            <a href="https://archive.org/tv/details/">
-            <img class="media-object" src="/static/img/tvpoliticaladlogo-medium.png" alt="" width="200px">
-            </a>
-          </div>
-          <div class="media-body">
-            <p>Amazing! We've been recording live television since the year 2009 or so, and have many hours of footage that can be viewed right now in the browser!
-            <p>Coming soon: radio content
-          </div>
+        <div class="search-logo">
+          <a href="https://archive.org/tv/details/">
+          <img class="media-object" src="/static/img/tvpoliticaladlogo-medium.png" alt="" width="200px">
+          </a>
         </div>
+        <p>Amazing! We've been recording live television since the year 2009 or so, and have many hours of footage that can be viewed right now in the browser!
+        <p>Coming soon: radio content
       </div>
 
       <div role="tabpanel" class="tab-pane" id="music">
@@ -91,16 +79,12 @@
           <label class="control-label" for="music-search-input">Search concert recordings and old media by artist or song name...</label>
           <input type="text" class="form-control" id="music-search-input" name="and[]" placeholder="eg, grateful dread"></input>
         </form>
-        <div class="media">
-          <div class="media-left media-middle">
-            <a href="https://archive.org/music/details/">
-            <img class="media-object" src="/static/img/78rpm-logo.png" alt="" width="200px">
-            </a>
-          </div>
-          <div class="media-body">
-            <p>Yup, we've even got music too. Like tons of early American 78 RPM records that we've digitized with George Blood, and thousands of hours of live concert recordings made by fans. Listen up! You can stream or download for offline access.
-          </div>
+        <div class="search-logo">
+          <a href="https://archive.org/music/details/">
+          <img class="media-object" src="/static/img/78rpm-logo.png" alt="" width="200px">
+          </a>
         </div>
+        <p>Yup, we've even got music too. Like tons of early American 78 RPM records that we've digitized with George Blood, and thousands of hours of live concert recordings made by fans. Listen up! You can stream or download for offline access.
       </div>
 
       <div role="tabpanel" class="tab-pane" id="film">
@@ -108,16 +92,12 @@
           <label class="control-label" for="film-search-input">Search for film title or keywords...</label>
           <input type="text" class="form-control" id="film-search-input" name="and[]" placeholder="eg, duck and cover"></input>
         </form>
-        <div class="media">
-          <div class="media-left media-middle">
-            <a href="https://archive.org/video/details/">
-            <img class="media-object" src="/static/img/film-icon.png" alt="" width="200px">
-            </a>
-          </div>
-          <div class="media-body">
-            <p>Oh right, film and video, we have a bunch of that also! Like the Prelinger Archives of historical Bay Area street content, tons of educational and government reels, and complete out-of-copyright early films. For example, check out this anti-fascist reel.
-          </div>
+        <div class="search-logo">
+          <a href="https://archive.org/video/details/">
+          <img class="media-object" src="/static/img/film-icon.png" alt="" width="200px">
+          </a>
         </div>
+        <p>Oh right, film and video, we have a bunch of that also! Like the Prelinger Archives of historical Bay Area street content, tons of educational and government reels, and complete out-of-copyright early films. For example, check out this anti-fascist reel.
       </div>
 
       <div role="tabpanel" class="tab-pane" id="software">
@@ -125,16 +105,12 @@
           <label class="control-label" for="software-search-input">Search for software title or keywords...</label>
           <input type="text" class="form-control" id="software-search-input" name="and[]" placeholder="eg, astro blaster"></input>
         </form>
-        <div class="media">
-          <div class="media-left media-middle">
-            <a href="https://archive.org/video/details/">
-            <img class="media-object" src="/static/img/internet_arcade.jpg" alt="" width="200px">
-            </a>
-          </div>
-          <div class="media-body">
-            <p>If you thought we might also have thousands of programs you can run right now in your browser, including hypercard classics, retro games, and more, you're correct! Also copies of old mainframe software, contemporary open source projects, and CD-ROMs.
-          </div>
+        <div class="search-logo">
+          <a href="https://archive.org/video/details/">
+          <img class="media-object" src="/static/img/internet_arcade.jpg" alt="" width="200px">
+          </a>
         </div>
+        <p>If you thought we might also have thousands of programs you can run right now in your browser, including hypercard classics, retro games, and more, you're correct! Also copies of old mainframe software, contemporary open source projects, and CD-ROMs.
       </div>
 
       <div role="tabpanel" class="tab-pane" id="more">
@@ -142,17 +118,13 @@
           <label class="control-label" for="more-search-input">Search for your heart's desire...</label>
           <input type="text" class="form-control" id="more-search-input" name="query" placeholder="eg, whatever"></input>
         </form>
-        <div class="media">
-          <div class="media-left media-middle">
-            <a href="https://archive.org/search.php">
-            <img class="media-object" src="/static/img/archive_racks.jpg" alt="" width="200px">
-            </a>
-          </div>
-          <div class="media-body">
-            <p>And that's definately not all. We've got millions of scholarly papers, complete database dumps of popular websites, a bunch of big photo collections, etc.
-            <p>GET EXCITED!
-          </div>
+        <div class="search-logo">
+          <a href="https://archive.org/search.php">
+          <img class="media-object" src="/static/img/archive_racks.jpg" alt="" width="200px">
+          </a>
         </div>
+        <p>And that's definately not all. We've got millions of scholarly papers, complete database dumps of popular websites, a bunch of big photo collections, etc.
+        <p>GET EXCITED!
       </div>
     </div>
   </div>
-- 
cgit v1.2.3