Add dat mobile view ☎️

quark-bar · Sep 24, 2013 · 706bfbe · 706bfbe
1 parent 3fb1e14
commit 706bfbe
Show file tree

Hide file tree

Showing 9 changed files with 142 additions and 40 deletions.
diff --git a/_assets/global.scss b/_assets/global.scss
@@ -34,6 +34,10 @@ p { margin: 0 0 0.6em; }
 ul, ul li, ol, ol li { padding: 0; margin: 0; }
 blockquote { padding: 0; margin: 0.8em 0; font-style: italic; p:last-child { margin: 0; } small { color: #aaa; } }
 
+
+.fork-me {
+  z-index: 100; position: absolute; top: 0; right: 0; border: 0;
+}
 .posts, .posts li { list-style: none; }
 
 a {

diff --git a/_assets/responsive.scss b/_assets/responsive.scss
@@ -1,20 +1,68 @@
 @media (max-width: 480px) {
-  body {
-    padding: 0 10px;
-    #container {
-      ul.posts {
-        .datetime { float: none; display: block; width: auto; text-align: left; }
 
+  body {
+    padding: 0 0 10px;
+    .content {
+      padding: 10px;
+    }
+    .site-header {
+      margin: 0;
+      padding: 15px;
+      background-color: #202020;
+      text-align: center;
+      .site-title {
+        color: #eee;
+        margin-bottom: 0;
+        margin-right: 20px;
+        font-size: 14px;
+        display: inline-block;
+        .firstname:after {
+          content: "'s";
+          color: #aaa;
+        }
+        .lastname {
+          display: none;
+        }
+      }
+      nav { display: inline-block; } 
+      a {
+        line-height: 1em;
+        border: 0;
       }
-      #ind-instagram, #ind-linkedin { display: none; }
-      .links, .content {
-        padding: 15px;
-        section.post { 
-          margin: 0 -15px; 
-          > p, h1, h2, h3, h4, .signoff, blockquote, .highlight { padding: 0 15px; }
-          > ul, > ol { padding: 0 30px; }
+    }
+    .fork-me, .tip {
+      display: none;
+    }
+    .pagination {
+      text-align: center;
+    }
+    .post {
+      .post-link {
+        // border: 0;
+        margin-bottom: 10px;
+        &:hover {
+          // border: 0;
+          box-shadow: none;
+          .post-cover {
+            opacity: 1;
+          }
+        }
+        &.has-cover {
+          padding-right: 25px;
+          .mark {
+            top: 210px;
+          }
+        }
+        .post-cover {
+          opacity: 1;
+          position: static;
+          height: 200px;
+          margin: -25px -25px 25px;
+          width: auto;
+          border-width: 1px;
         }
       }
+
     }
   }
 }
diff --git a/_assets/style.scss b/_assets/style.scss
@@ -18,7 +18,7 @@ b, strong, h1, h2, h3, h4, h5 {
   font-weight: 700;
 }
 
-hr { border: 0; border-bottom: 1px solid #efefef; border-top: 1px solid #efefef; margin: 20px 0; height: 6px; }
+hr { border: 0; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; margin: 20px 0; height: 6px; }
 
 .wrapper {
   max-width: 620px;
@@ -66,7 +66,7 @@ hr { border: 0; border-bottom: 1px solid #efefef; border-top: 1px solid #efefef;
     overflow: hidden;
     position: relative;
     @include transition(.5s);
-    &.padded-right {
+    &.has-cover {
       padding-right: 185px;
     }
     .post-cover {
@@ -122,6 +122,7 @@ article {
   color: #565656;
   line-height: 1.6em;
   position: relative;
+  hr { border-color: #efefef; }
   p {
     margin: 0.6em 0;
   }
@@ -162,8 +163,15 @@ article {
 .pagination {
   margin-top: 25px;
   padding: 25px;
+  .tip {
+    padding-bottom: 20px;
+  }
+  .small-title, .tip {
+    font-size: 11px;
+    color: #888;
+  }
   h4 {
-    margin: 0 0 5px;
+    margin: 5px 0;
   }
 }
 

diff --git a/_includes/header.html b/_includes/header.html
@@ -8,4 +8,4 @@
     {% endfor %}
   </nav>
 </header>
-<a id="fork-me" href="https://github.com/muan/muan.github.com"><img width style="z-index: 100; position: absolute; top: 0; right: 0; border: 0;" src="/images/fmog.png" alt="Fork me on GitHub"></a>
+<a id="fork-me" class="fork-me" href="https://github.com/muan/muan.github.com"><img src="/images/fmog.png" alt="Fork me on GitHub"></a>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -24,18 +24,17 @@ <h2 class="post-title">{{ page.title }}</h2>
           {% if page.previous or page.next %}
           <div class="pagination">
             {% if page.previous %}
-              <p class="toned upcase small">Use ← and → to navigate between posts.</p>
-              <hr />
+              <div class="tip">Use ← and → to navigate between posts.</div>
               <a href="{{ page.previous.url }}" id="js-previous-post">
-                <span class="small toned upcase">Previous Post</span>
+                <span class="small-title">Previous Post</span>
                 <h4>{{ page.previous.title }}</h4>
                 <span class="small upcase datetime muted">{{ page.previous.date | date_to_string }}</span>
               </a>
             {% endif %}
             {% if page.next %}
               <hr />
               <a href="{{ page.next.url }}" id="js-next-post">
-                <span class="small toned upcase">Next Post</span>
+                <span class="small-title">Next Post</span>
                 <h4>{{ page.next.title }}</h4>
                 <span class="small upcase datetime muted">{{ page.next.date | date_to_string }}</span>
               </a>

diff --git a/assets/global.css b/assets/global.css
@@ -86,6 +86,13 @@ blockquote {
   blockquote small {
     color: #aaa; }
 
+.fork-me {
+  z-index: 100;
+  position: absolute;
+  top: 0;
+  right: 0;
+  border: 0; }
+
 .posts, .posts li {
   list-style: none; }
 

diff --git a/assets/responsive.css b/assets/responsive.css
@@ -1,18 +1,47 @@
 @media (max-width: 480px) {
   body {
-    padding: 0 10px; }
-    body #container ul.posts .datetime {
-      float: none;
-      display: block;
-      width: auto;
-      text-align: left; }
-    body #container #ind-instagram, body #container #ind-linkedin {
+    padding: 0 0 10px; }
+    body .content {
+      padding: 10px; }
+    body .site-header {
+      margin: 0;
+      padding: 15px;
+      background-color: #202020;
+      text-align: center; }
+      body .site-header .site-title {
+        color: #eee;
+        margin-bottom: 0;
+        margin-right: 20px;
+        font-size: 14px;
+        display: inline-block; }
+        body .site-header .site-title .firstname:after {
+          content: "'s";
+          color: #aaa; }
+        body .site-header .site-title .lastname {
+          display: none; }
+      body .site-header nav {
+        display: inline-block; }
+      body .site-header a {
+        line-height: 1em;
+        border: 0; }
+    body .fork-me, body .tip {
       display: none; }
-    body #container .links, body #container .content {
-      padding: 15px; }
-      body #container .links section.post, body #container .content section.post {
-        margin: 0 -15px; }
-        body #container .links section.post > p, body #container .links section.post h1, body #container .links section.post h2, body #container .links section.post h3, body #container .links section.post h4, body #container .links section.post .signoff, body #container .links section.post blockquote, body #container .links section.post .highlight, body #container .content section.post > p, body #container .content section.post h1, body #container .content section.post h2, body #container .content section.post h3, body #container .content section.post h4, body #container .content section.post .signoff, body #container .content section.post blockquote, body #container .content section.post .highlight {
-          padding: 0 15px; }
-        body #container .links section.post > ul, body #container .links section.post > ol, body #container .content section.post > ul, body #container .content section.post > ol {
-          padding: 0 30px; } }
+    body .pagination {
+      text-align: center; }
+    body .post .post-link {
+      margin-bottom: 10px; }
+      body .post .post-link:hover {
+        box-shadow: none; }
+        body .post .post-link:hover .post-cover {
+          opacity: 1; }
+      body .post .post-link.has-cover {
+        padding-right: 25px; }
+        body .post .post-link.has-cover .mark {
+          top: 210px; }
+      body .post .post-link .post-cover {
+        opacity: 1;
+        position: static;
+        height: 200px;
+        margin: -25px -25px 25px;
+        width: auto;
+        border-width: 1px; } }
diff --git a/assets/style.css b/assets/style.css
@@ -15,8 +15,8 @@ b, strong, h1, h2, h3, h4, h5 {
 
 hr {
   border: 0;
-  border-bottom: 1px solid #efefef;
-  border-top: 1px solid #efefef;
+  border-bottom: 1px solid #ddd;
+  border-top: 1px solid #ddd;
   margin: 20px 0;
   height: 6px; }
 
@@ -71,7 +71,7 @@ hr {
     -ms-transition: 0.5s;
     -o-transition: 0.5s;
     transition: 0.5s; }
-    .posts .post-link.padded-right {
+    .posts .post-link.has-cover {
       padding-right: 185px; }
     .posts .post-link .post-cover {
       -webkit-transition: 0.5s;
@@ -129,6 +129,8 @@ article {
   color: #565656;
   line-height: 1.6em;
   position: relative; }
+  article hr {
+    border-color: #efefef; }
   article p {
     margin: 0.6em 0; }
   article header {
@@ -161,8 +163,13 @@ article {
 .pagination {
   margin-top: 25px;
   padding: 25px; }
+  .pagination .tip {
+    padding-bottom: 20px; }
+  .pagination .small-title, .pagination .tip {
+    font-size: 11px;
+    color: #888; }
   .pagination h4 {
-    margin: 0 0 5px; }
+    margin: 5px 0; }
 
 .plain {
   background-color: transparent;

diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
 <ul class="posts">
   {% for post in site.posts %}
   <li class="post">
-    <a href="{{ post.url }}" class="post-link {% if post.cover %}padded-right{% endif %}">
+    <a href="{{ post.url }}" class="post-link {% if post.cover %}has-cover{% endif %}">
       {% if post.cover %}
         <div class="post-cover" style="background-image: url({{ post.cover }});" /></div>
       {% endif %}