Fix post list spacing and nav on tablet

phhorrein · Jul 10, 2015 · 364e225 · 364e225
1 parent f60ed4b
commit 364e225
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 31 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -2,7 +2,7 @@
   <div class="mt2 wrap">
     <div class="measure">
       <a href="{{ site.url }}" class="site-title">{{ site.title }}</a>
-      <nav class="site-nav right">
+      <nav class="site-nav">
         {% include navigation.html %}
       </nav>
       <div class="clearfix"></div>

diff --git a/_sass/_header.scss b/_sass/_header.scss
@@ -4,7 +4,7 @@
 }
 
 .site-header nav a {
-  font-size: 1rem;
+  font-size: $h6;
   color: #666;
 }
 
@@ -31,3 +31,22 @@
 .posts .post a:hover .post-summary {
   opacity: 0.88;
 }
+
+.site-header {
+  text-align: center;
+}
+
+.site-header .site-title {
+  float: center;
+}
+
+.site-header .site-nav {
+  text-align: center;
+  margin-top: 0.666em;
+  margin-bottom: 1.333em;
+}
+
+.social-icons .left, .social-icons .right {
+  text-align: center;
+  float: none;
+}
diff --git a/_sass/_media-queries.scss b/_sass/_media-queries.scss
@@ -5,38 +5,16 @@
   }
 }
 
-@media screen and (min-width: $viewport-medium) {
-  .site-header .site-title {
-    float: left;
-  }
-}
-
-// TODO FIX ME TO BE MOBILE FIRST
-@media screen and (max-width: $viewport-medium) {
-  blockquote {
-    margin-left: 1rem;
-    margin-right: 0;
-    padding: 0.5em;
-  }
-
+@media screen and (min-width: $viewport-small) {
   .site-header {
-    text-align: center;
+    text-align: left;
   }
 
   .site-header .site-title {
-    float: center;
-  }
-
-  .site-header .site-nav {
-    width: 100%;
     float: left;
-    text-align: center;
-    margin-top: 0.666em;
-    margin-bottom: 1.333em;
   }
 
-  .social-icons .left, .social-icons .right {
-    text-align: center;
-    float: none;
+  .site-header .site-nav {
+    float: right;
   }
 }
diff --git a/_sass/_posts.scss b/_sass/_posts.scss
@@ -5,7 +5,6 @@
 
 .posts .post {
   margin-bottom: 0.75em;
-  padding-bottom: .375em;
   border-bottom: thin solid #f3f3f3;
 }
 

diff --git a/index.html b/index.html
@@ -6,9 +6,9 @@
 
   <div class="posts">
     {% for post in paginator.posts %}
-      <div class="post">
+      <div class="post py3">
         <p class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</p>
-        <a href="{{ post.url | prepend: site.baseurl }}" class="post-link"><h3 class="h2 post-title">{{ post.title }}</h3></a>
+        <a href="{{ post.url | prepend: site.baseurl }}" class="post-link"><h3 class="h1 post-title">{{ post.title }}</h3></a>
         <p class="post-summary">
           {% if post.summary %}
             {{ post.summary }}