From 706bfbe48a14388fb8952729a2d34c9fc4166593 Mon Sep 17 00:00:00 2001 From: Mu-An Chiou Date: Tue, 24 Sep 2013 18:19:49 +0100 Subject: [PATCH] Add dat mobile view :phone: --- _assets/global.scss | 4 +++ _assets/responsive.scss | 72 ++++++++++++++++++++++++++++++++++------- _assets/style.scss | 14 ++++++-- _includes/header.html | 2 +- _layouts/post.html | 7 ++-- assets/global.css | 7 ++++ assets/responsive.css | 59 ++++++++++++++++++++++++--------- assets/style.css | 15 ++++++--- index.html | 2 +- 9 files changed, 142 insertions(+), 40 deletions(-) diff --git a/_assets/global.scss b/_assets/global.scss index dc8c236b..def1d068 100644 --- 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 index 0afad215..0e5ea676 100644 --- 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; } } + } } } \ No newline at end of file diff --git a/_assets/style.scss b/_assets/style.scss index 2dd14e5a..5eddfbc4 100644 --- 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 index 63fef7fc..a0df2a4e 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -8,4 +8,4 @@ {% endfor %} -Fork me on GitHub \ No newline at end of file +Fork me on GitHub \ No newline at end of file diff --git a/_layouts/post.html b/_layouts/post.html index 87505036..0d89c721 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -24,10 +24,9 @@

{{ page.title }}

{% if page.previous or page.next %}