From 1599df108116ca573208e4117ace405fdb8be2be Mon Sep 17 00:00:00 2001 From: SkyArrow Date: Wed, 25 Jan 2012 01:20:05 +0800 Subject: responsive layout --- sass/base/_layout.scss | 15 +++++++++++ sass/parts/_archive.scss | 31 +++++++++++++++++++++- sass/parts/_article.scss | 15 +++++++++++ sass/parts/_footer.scss | 4 +-- sass/parts/_header.scss | 53 +++++++++++++++++++++++++++++++++++--- sass/parts/_post.scss | 17 ++++++++++++ sass/parts/_syntax.scss | 1 - source/_includes/head.html | 2 ++ source/_includes/header.html | 20 ++++++++------- source/javascripts/twitter.js | 60 ++++++++++++++++++++++--------------------- 10 files changed, 173 insertions(+), 45 deletions(-) diff --git a/sass/base/_layout.scss b/sass/base/_layout.scss index 1d11880..24c67d8 100644 --- a/sass/base/_layout.scss +++ b/sass/base/_layout.scss @@ -62,4 +62,19 @@ a{ .inner{ width: $max-width; margin: 0 auto; +} + +@media screen and (max-width: 1030px){ + body{ + margin: 0 30px; + } + .inner{ + width: 100%; + } +} + +@media screen and (max-width: 600px){ + body{ + font-size: 13px; + } } \ No newline at end of file diff --git a/sass/parts/_archive.scss b/sass/parts/_archive.scss index ad96dc2..037e92a 100644 --- a/sass/parts/_archive.scss +++ b/sass/parts/_archive.scss @@ -20,7 +20,6 @@ section.archive{ } h1.archive-title{ font-size: 25px; - font-weight: 300; line-height: 35px; width: 200px; position: absolute; @@ -37,8 +36,13 @@ section.archive{ } article.archive{ margin-left: 200px; + h1{ + margin-bottom: 0; + } .meta{ color: $font-meta; + line-height: 2; + margin-top: 15px; span{ margin-right: 30px; padding-left: 30px; @@ -62,4 +66,29 @@ section.archive{ } } } +} + +@media screen and (max-width: 600px){ + section.archive{ + h1.archive-title{ + position: relative; + width: 100%; + & + article.archive{ + border-top: none; + h1{ + padding-top: 15px; + } + } + } + article.archive{ + margin-left: 0; + padding: 15px 0; + h1{ + font-size: 20px; + } + .meta{ + display: none; + } + } + } } \ No newline at end of file diff --git a/sass/parts/_article.scss b/sass/parts/_article.scss index 4423eee..c5c7719 100644 --- a/sass/parts/_article.scss +++ b/sass/parts/_article.scss @@ -99,4 +99,19 @@ article{ .share{ padding: 15px 0; @include border-shadow(); +} + +@media screen and (max-width: 800px){ + article{ + padding-bottom: 15px; + } +} + +@media screen and (max-width: 600px){ + article{ + padding: 15px 0; + h1.title{ + font-size: 20px; + } + } } \ No newline at end of file diff --git a/sass/parts/_footer.scss b/sass/parts/_footer.scss index b713b8e..2df695f 100644 --- a/sass/parts/_footer.scss +++ b/sass/parts/_footer.scss @@ -1,6 +1,6 @@ footer{ - padding: 30px 0; + padding: 15px 0; border-top: 1px solid $light-shadow; text-align: center; - font-size: 13px; + font-size: 12px; } \ No newline at end of file diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss index 739372e..a11ff44 100644 --- a/sass/parts/_header.scss +++ b/sass/parts/_header.scss @@ -17,10 +17,8 @@ header{ nav{ margin-left: 30px; >ul{ - list-style: none; - padding-right: 30px; >li{ - float: left; + display: inline-block; margin-left: 50px; position: relative; &:hover{ @@ -142,4 +140,53 @@ header{ } } } +} + +@media screen and (max-width: 1030px){ + header{ + height: auto; + position: relative; + padding-bottom: 10px; + h1{ + float: none !important; + } + nav{ + margin-left: 0; + margin-top: 15px; + float: none !important; + >ul{ + >li{ + margin-left: 0; + margin-right: 50px; + &:last-of-type{ + margin-right: 0; + } + } + ul{ + top: 40px; + } + } + } + >.right{ + position: absolute; + top: 30px; + right: 0; + } + } +} + +@media screen and (max-width: 600px){ + header{ + .social{ + display: none; + } + .search{ + input[type="text"]{ + width: 60px; + &:focus, &:active{ + width: 100px; + } + } + } + } } \ No newline at end of file diff --git a/sass/parts/_post.scss b/sass/parts/_post.scss index b27b4c7..aeaa52a 100644 --- a/sass/parts/_post.scss +++ b/sass/parts/_post.scss @@ -29,4 +29,21 @@ background: image-url('comments.png') 0 center no-repeat; } } +} + +@media screen and (max-width: 800px){ + .post{ + h1.title, .entry{ + margin-left: 0; + } + .meta{ + margin-top: 15px; + position: static; + width: auto; + .date, .tags, .comments{ + display: inline-block; + margin-right: 30px; + } + } + } } \ No newline at end of file diff --git a/sass/parts/_syntax.scss b/sass/parts/_syntax.scss index f3e493a..efdc01f 100644 --- a/sass/parts/_syntax.scss +++ b/sass/parts/_syntax.scss @@ -58,7 +58,6 @@ figure.code{ } td.code{ padding-left: 15px; - font-size: 13px; overflow-x: auto; } /* Style */ diff --git a/source/_includes/head.html b/source/_includes/head.html index 3b7a605..1265151 100644 --- a/source/_includes/head.html +++ b/source/_includes/head.html @@ -8,10 +8,12 @@ {% capture description %}{% if page.description %}{{ page.description }}{% else %}{{ content | raw_content }}{% endif %}{% endcapture %} {% if page.keywords %}{% endif %} + + {% include custom/head.html %} diff --git a/source/_includes/header.html b/source/_includes/header.html index b6752aa..ac544be 100644 --- a/source/_includes/header.html +++ b/source/_includes/header.html @@ -1,13 +1,15 @@

{{ site.title }}

-
- - -
-
- Facebook - Google+ - Twitter - RSS +
+
+ + +
+
{% include custom/header.html %} \ No newline at end of file diff --git a/source/javascripts/twitter.js b/source/javascripts/twitter.js index 5a7b9d5..92fb7b1 100644 --- a/source/javascripts/twitter.js +++ b/source/javascripts/twitter.js @@ -50,39 +50,41 @@ } } - banner.show(); + if ($(window).width() > 600){ + banner.show(); - $.getJSON('http://twitter.com/status/user_timeline/tommy351.json?count=10&callback=?', function(json){ - var length = json.length, - fragment = document.createDocumentFragment(), - counts = 0, - timeout; + $.getJSON('http://twitter.com/status/user_timeline/tommy351.json?count=10&callback=?', function(json){ + var length = json.length, + fragment = document.createDocumentFragment(), + counts = 0, + timeout; - for (var i=0; i'+relativeDate(json[i].created_at)+''; - fragment.appendChild(item); - } + for (var i=0; i'+relativeDate(json[i].created_at)+''; + fragment.appendChild(item); + } - var play = function(){ - timeout = setTimeout(function(){ - feed.animate({top: '-='+30}, speed, function(){ - $(this).append($(this).children().eq(counts).clone()); - counts++; - play(); - }); - }, interval); - } + var play = function(){ + timeout = setTimeout(function(){ + feed.animate({top: '-='+30}, speed, function(){ + $(this).append($(this).children().eq(counts).clone()); + counts++; + play(); + }); + }, interval); + } - var pause = function(){ - clearTimeout(timeout); - } + var pause = function(){ + clearTimeout(timeout); + } - banner.on('mouseenter', pause).on('mouseleave', play) - .children('.loading').hide().end() - .children('.container').show() - .children('.feed').append(fragment); + banner.on('mouseenter', pause).on('mouseleave', play) + .children('.loading').hide().end() + .children('.container').show() + .children('.feed').append(fragment); - play(); - }); + play(); + }); + } })(jQuery); \ No newline at end of file -- cgit v1.1-2-g2b99