added viewport scaling

6 files changed, 46 insertions, 39 deletions

diff --git a/media/css/base.css b/media/css/base.css
index 8361bca..5319c03 100644
--- a/media/css/base.css
+++ b/media/css/base.css
@@ -1 +1 @@
-ol,ul,li,dl{list-style:none;margin:0;padding:0;border:0;outline:0;background:transparent}blockquote,q{quotes:none}:focus{outline:0}header,section,footer,aside,article,nav{display:block;text-align:left}html{height:100%;max-width:22.188em}body{font:normal 100% Hoefler Text, Georgia, Times New Roman, Times, serif;color:#201a11;margin:0 auto;min-height:100%;position:relative;padding:0;max-width:20.938em;background:#fff url("../img/988px-9col-92w-20gut.png") 217px 0 repeat-y}p{font-size:1.063em;line-height:1.5em}a{text-decoration:none;color:#201a11}a:hover{color:#b53a04}ul li{display:inline;margin:0 0.125em}.dateline,nav li,.breadcrumbs li{text-transform:uppercase;font-size:0.75em;letter-spacing:0.063em}img{border:10px #201a11 solid}#featured-image img{width:95%}h1{font:normal 1.875em Helvetica, Verdana, sans-serif;letter-spacing:0.5px;text-align:center}#archive article h1{font:normal 1.5em Helvetica, Verdana, sans-serif;letter-spacing:0.5px;text-align:center;text-transform:none}#archive h1{font-weight:700;font-size:0.75em;text-transform:uppercase;text-align:left}header{margin:0 auto 1em auto;text-align:center}nav{margin:0 auto 2em auto;text-align:center}nav:after,footer:before{content:".";display:block;height:0;clear:both;visibility:hidden}footer{margin-top:2em}footer p{font-size:0.625em;text-align:center}
+ol,ul,li,dl{list-style:none;margin:0;padding:0;border:0;outline:0;background:transparent}blockquote,q{quotes:none}:focus{outline:0}header,section,footer,aside,article,nav{display:block;text-align:left}html{height:100%}body{font:normal 100% Hoefler Text, Georgia, Times New Roman, Times, serif;color:#201a11;margin:0 auto;min-height:100%;position:relative;padding:0;max-width:19.688em;background:#fff url("../img/988px-9col-92w-20gut.png") 552px 0 repeat-y}p{font-size:1.063em;line-height:1.5em}a{text-decoration:none;color:#201a11}a:hover{color:#b53a04}ul li{display:inline;margin:0 0.125em}.dateline,nav li,.breadcrumbs li{text-transform:uppercase;font-size:0.75em;letter-spacing:0.063em}img{border:10px #201a11 solid}#featured-image img{width:94%}h1{font:normal 1.875em Helvetica, Verdana, sans-serif;letter-spacing:0.5px;text-align:center}#archive article h1{font:normal 1.5em Helvetica, Verdana, sans-serif;letter-spacing:0.5px;text-align:center;text-transform:none}#archive h1{font-weight:700;font-size:0.75em;text-transform:uppercase;text-align:left}header{margin:0 auto 1em auto;text-align:center}nav{margin:0 auto 2em auto;text-align:center}nav:after,footer:before{content:".";display:block;height:0;clear:both;visibility:hidden}footer{margin-top:2em}footer p{font-size:0.625em;text-align:center}@media (min-device-width:1024px) and (max-width:509px), (max-device-width:480px) and (orientation:portrait){body{margin:0 10px;max-width:20.938em}}.postpic,.post-image{float:left;margin:0.625em 0.625em 0.625em 0;clear:right}
diff --git a/media/sass/base.sass b/media/sass/base.sass
index 1557617..525428d 100644
--- a/media/sass/base.sass
+++ b/media/sass/base.sass
@@ -17,7 +17,7 @@
 
 html
     height: 100%
-    max-width = 22.1875em
+
 body
     font: normal 100% unquote("Hoefler Text"), Georgia, unquote("Times New Roman"), Times, serif 
     color: $brown
@@ -26,8 +26,8 @@ body
     position: relative
     padding: 0
     //max-width: 61.75em      /* 988px / 16px = 61.75em */
-    max-width = 20.9375em /* 3 cols @ 92px + 20px gutter  -- 335px / 16px = */
-    background: white url('../img/988px-9col-92w-20gut.png') 217px 0 repeat-y
+    max-width = 19.6875em /* 3 cols @ 92px + 20px gutter  -- 315px / 16px = */
+    background: white url('../img/988px-9col-92w-20gut.png') 552px 0 repeat-y
     
 
 /* ###################Typography############# */    
@@ -54,7 +54,7 @@ img
     border: 10px $brown solid
 
 #featured-image img
-    width = 95% /* 315 /  520 */
+    width = 94% /* 315 /  520 */
     
 h1
     font: normal 1.875em Helvetica, Verdana, sans-serif
@@ -92,3 +92,13 @@ footer
     p
         font-size: .625em
         text-align: center
+
+@media (min-device-width:1024px) and (max-width:509px), (max-device-width:480px) and (orientation:portrait)
+    body
+        margin: 0 10px
+        max-width = 20.9375em
+
+.postpic, .post-image
+    float: left
+    margin: .625em .625em .625em 0
+    clear: right
diff --git a/templates/archives/homepage.html b/templates/archives/homepage.html
index 6540ca6..291433c 100644
--- a/templates/archives/homepage.html
+++ b/templates/archives/homepage.html
@@ -18,8 +18,8 @@
             <div id="featured-image">
                 <a href="{{featured.get_absolute_url}}" title="{{featured.title}}"><img src="{{featured.get_image_url}}" alt="{{ featured.title }}" class="post-image" /></a>
             </div>
-            <p class="hyphenate">{{featured.dek|safe}}</p>
-            <span class="button"><a href="{{featured.get_absolute_url}}" title="{{featured.title}}">More &raquo;</a></span>            
+            <p class="hyphenate">{{featured.dek|safe}} <span class="button"><a href="{{featured.get_absolute_url}}" title="{{featured.title}}">More &raquo;</a></span> </p>
+                       
         </article>
    </section>
     {%comment%}<section id="currently">
diff --git a/templates/base.html b/templates/base.html
index 92e4427..a83f4ee 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -10,7 +10,7 @@
     <!--[if IE]>
     <script src="{{MEDIA_URL}}js/html5.js"></script>
     <![endif]-->
-    <meta name="viewport" content="initial-scale=1.0">
+    <meta name="viewport" content="width=device-width" />
     <link rel="alternate" 
           type="application/rss+xml" 
           title="RSS 2.0"
diff --git a/templates/includes/recent_entries.html b/templates/includes/recent_entries.html
index 48c0b21..edba835 100644
--- a/templates/includes/recent_entries.html
+++ b/templates/includes/recent_entries.html
@@ -1,31 +1,28 @@
 <article class="col1">
-                <h1><a href="/2010/jul/28/dinosaur-national-monument-part-one-echo-park/" title="Dinosaur National Monument, Part One: Echo Park">Dinosaur National Monument, Part One: Echo&nbsp;Park</a></h1>
-                <p class="dateline">
-                    <span class="location">Dinosaur National Monument, <a href="/writing/united-states/1/" title="travel writing from the United States">Colorado</a></span> &nbsp;
-
-                    <time datetime="2010-07-28T16:00:00">07/28/10</time>
-                    <img src="http://127.0.0.1:8000/images/post-thumbnail/2010/dinosaurv.jpg" alt="Dinosaur National Monument, Part One: Echo Park" class="post-image" />
-                </p>
-                <p class="intro hyphenate">Dinosaur National Monument was poorly named. The best parts of it are not the fossils in the quarry (which is closed for 2010 anyway) but the canyon country &mdash; some of the best, most remote canyon country you'll find in this part of the world.</p>
-                <span class="button"><a class="permalink" href="/2010/jul/28/dinosaur-national-monument-part-one-echo-park/" title="Dinosaur National Monument, Part One: Echo Park">More&nbsp;&raquo;</a></span>
-            </article><article class="col2">
-                <h1><a href="/2010/jul/25/endless-crowds-yellowstone/" title="The Endless Crowds of Yellowstone">The Endless Crowds of&nbsp;Yellowstone</a></h1>
-                <p class="dateline">
-                    <span class="location">Yellowstone National Park, <a href="/writing/united-states/1/" title="travel writing from the United States">Wyoming</a></span> &nbsp;
-
-                    <time datetime="2010-07-25T13:00:00">07/25/10</time>
-                    <img src="http://127.0.0.1:8000/images/post-thumbnail/2010/yellowstonev.jpg" alt="The Endless Crowds of Yellowstone" class="post-image" />
-                </p>
-                <p class="intro hyphenate">There is wilderness in Yellowstone, even if it's just inches from the boardwalks that transport thousands around the geothermal pools. It may not be wilderness on a grand scale &mdash; the sweeping mountain peaks or wild rivers of other parks &mdash; but in some ways that makes it more enticing. As one Ranger told me, Yellowstone isn't about the big picture, the grand scenery, it's about the tiny details within each pool. To really see Yellowstone, he said, you have to take your time, move slowly and look closely. </p>
-                <span class="button"><a class="permalink" href="/2010/jul/25/endless-crowds-yellowstone/" title="The Endless Crowds of Yellowstone">More&nbsp;&raquo;</a></span>
-            </article><article class="col1">
-                <h1><a href="/2010/jul/22/backpacking-grand-tetons/" title="Backpacking in the Grand Tetons">Backpacking in the Grand&nbsp;Tetons</a></h1>
-                <p class="dateline">
-                    <span class="location">Grand Teton National Park, <a href="/writing/united-states/1/" title="travel writing from the United States">Wyoming</a></span> &nbsp;
-
-                    <time datetime="2010-07-22T16:00:00">07/22/10</time>
-                    <img src="http://127.0.0.1:8000/images/post-thumbnail/2010/grandtetonsv.jpg" alt="Backpacking in the Grand Tetons" class="post-image" />
-                </p>
-                <p class="intro hyphenate">Hiking into the wilderness empties your mind. You fall into the silence of the mountains and you can relax in a way that's very difficult to do in the midst of civilization. The white noise that surrounds us in our everyday lives, that noise we don't even notice as it adds thin layers of stress that build up over days, weeks, years, does not seem capable of following us into the mountains. </p>
-                <span class="button"><a class="permalink" href="/2010/jul/22/backpacking-grand-tetons/" title="Backpacking in the Grand Tetons">More&nbsp;&raquo;</a></span>
-            </article>
+             <h1><a href="/2010/jul/28/dinosaur-national-monument-part-one-echo-park/" title="Dinosaur National Monument, Part One: Echo Park">Dinosaur National Monument, Part One: Echo&nbsp;Park</a></h1>
+             <p class="dateline">
+                 <span class="location">Dinosaur National Monument, <a href="/writing/united-states/1/" title="travel writing from the United States">Colorado</a></span> &nbsp;
+                 <time datetime="2010-07-28T16:00:00">07/28/10</time>
+             </p>
+             <img src="http://127.0.0.1:8000/images/post-thumbnail/2010/dinosaurv.jpg" alt="Dinosaur National Monument, Part One: Echo Park" class="post-image" />
+             <p class="hyphenate">Dinosaur National Monument was poorly named. The best parts of it are not the fossils in the quarry (which is closed for 2010 anyway) but the canyon country &mdash; some of the best, most remote canyon country you'll find in this part of the world.</p>
+             <span class="button"><a class="permalink" href="/2010/jul/28/dinosaur-national-monument-part-one-echo-park/" title="Dinosaur National Monument, Part One: Echo Park">More&nbsp;&raquo;</a></span>
+         </article><article class="col2">
+             <h1><a href="/2010/jul/25/endless-crowds-yellowstone/" title="The Endless Crowds of Yellowstone">The Endless Crowds of&nbsp;Yellowstone</a></h1>
+             <p class="dateline">
+                 <span class="location">Yellowstone National Park, <a href="/writing/united-states/1/" title="travel writing from the United States">Wyoming</a></span> &nbsp;
+                 <time datetime="2010-07-25T13:00:00">07/25/10</time>
+             </p>
+             <img src="http://127.0.0.1:8000/images/post-thumbnail/2010/yellowstonev.jpg" alt="The Endless Crowds of Yellowstone" class="post-image" />
+             <p class="hyphenate">There is wilderness in Yellowstone, even if it's just inches from the boardwalks that transport thousands around the geothermal pools. It may not be wilderness on a grand scale &mdash; the sweeping mountain peaks or wild rivers of other parks &mdash; but in some ways that makes it more enticing. As one Ranger told me, Yellowstone isn't about the big picture, the grand scenery, it's about the tiny details within each pool. To really see Yellowstone, he said, you have to take your time, move slowly and look closely. </p>
+             <span class="button"><a class="permalink" href="/2010/jul/25/endless-crowds-yellowstone/" title="The Endless Crowds of Yellowstone">More&nbsp;&raquo;</a></span>
+         </article><article class="col1">
+             <h1><a href="/2010/jul/22/backpacking-grand-tetons/" title="Backpacking in the Grand Tetons">Backpacking in the Grand&nbsp;Tetons</a></h1>
+             <p class="dateline">
+                 <span class="location">Grand Teton National Park, <a href="/writing/united-states/1/" title="travel writing from the United States">Wyoming</a></span> &nbsp;
+                 <time datetime="2010-07-22T16:00:00">07/22/10</time>
+             </p>
+             <img src="http://127.0.0.1:8000/images/post-thumbnail/2010/grandtetonsv.jpg" alt="Backpacking in the Grand Tetons" class="post-image" />
+             <p class="hyphenate">Hiking into the wilderness empties your mind. You fall into the silence of the mountains and you can relax in a way that's very difficult to do in the midst of civilization. The white noise that surrounds us in our everyday lives, that noise we don't even notice as it adds thin layers of stress that build up over days, weeks, years, does not seem capable of following us into the mountains. </p>
+             <span class="button"><a class="permalink" href="/2010/jul/22/backpacking-grand-tetons/" title="Backpacking in the Grand Tetons">More&nbsp;&raquo;</a></span>
+         </article>
diff --git a/templates/includes/recent_entries_template.html b/templates/includes/recent_entries_template.html
index a743ecf..2140cb6 100644
--- a/templates/includes/recent_entries_template.html
+++ b/templates/includes/recent_entries_template.html
@@ -3,8 +3,8 @@
              <p class="dateline">
                  <span class="location">{% if object.location.state.country.name == "United States" %}{{object.location.name|smartypants|safe}}, <a href="/writing/united-states/1/" title="travel writing from the United States">{{object.location.state.name}}</a>{%else%}{{object.location.name|smartypants|safe}}, <a href="/writing/{{object.location.state.country.slug}}/1/" title="travel writing from {{object.location.state.country.name}}">{{object.location.state.country.name}}</a>{%endif%}</span> &nbsp;
                  <time datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"m/d/y"}}</time>
-                 {%if object.thumbnail%}<img src="{{object.get_thumbnail_url}}" alt="{{ object.title }}" class="post-image" />{%endif%}
              </p>
+             {%if object.thumbnail%}<img src="{{object.get_thumbnail_url}}" alt="{{ object.title }}" class="post-image" />{%endif%}
              <p class="hyphenate">{{object.dek|safe}}</p>
              <span class="button"><a class="permalink" href="{{object.get_absolute_url}}" title="{{object.title}}">More&nbsp;&raquo;</a></span>
          </article>{% endfor %}