From 11dec7ac2db94c020d054b887f6cb983743a0ef4 Mon Sep 17 00:00:00 2001
From: "Dustin C. Hatch" <dustin@hatch.name>
Date: Sun, 20 Dec 2015 18:53:47 -0600
Subject: [PATCH] Improvements to mobile view

---
 index.html | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)
diff --git a/index.html b/index.html
index 51602a9..05ebb08 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
 <head>
   <title>Dustin C. Hatch</title>
   <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width" />
   <link rel="shortcut icon" type="image/png"
     href="//d2g89yxlcdy1r2.cloudfront.net/static/5b377b570198/static/images/favicon.png" />
   <link type="text/css" rel="stylesheet"
@@ -22,11 +23,13 @@
   }
   #logo {
     text-align: center;
+    position: relative;
+    z-index: 8;
   }
   #logo img {
-    display: none;
     height: 100%;
     width: 100%;
+    max-height: 100px;
   }
   blockquote#songquote {
     border: none !important;
@@ -72,13 +75,20 @@
   }
   @media only screen and (min-width: 640px) {
   #logo img {
-    display: inline;
     max-height: 200px;
   }
   #songquote::before {
     font-size: 400pt;
     top: -100pt;
   }
+  #songquote .quote {
+    font-size: 32pt;
+  }
+  #songquote .citation {
+    font-size: 16pt;
+  }
+  }
+  @media only screen and (min-width: 1024px) {
   #songquote .quote {
     font-size: 48pt;
   }
@@ -111,10 +121,10 @@
 
 <body>
 <section id="main" class="row">
-<div id="logo" class="large-4 columns"><img alt="D"
+<div id="logo" class="medium-4 columns"><img alt="D"
   src="//d2g89yxlcdy1r2.cloudfront.net/static/5b377b570198/static/images/D.svg" />
 </div>
-<blockquote id="songquote" class="large-8 columns">
+<blockquote id="songquote" class="medium-8 columns">
 <p class="quote">{{ quote.quote }}</p>
 <p class="citation" title="{{ quote.album }} ({{ quote.year }})">
   <span class="title">{{ quote.title }}</span>
