summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--sass/base/_layout.scss15
-rw-r--r--sass/parts/_archive.scss31
-rw-r--r--sass/parts/_article.scss15
-rw-r--r--sass/parts/_footer.scss4
-rw-r--r--sass/parts/_header.scss53
-rw-r--r--sass/parts/_post.scss17
-rw-r--r--sass/parts/_syntax.scss1
-rw-r--r--source/_includes/head.html2
-rw-r--r--source/_includes/header.html20
-rw-r--r--source/javascripts/twitter.js60
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 %}
<meta name="description" content="{{ description | strip_html | condense_spaces | truncate:150 }}">
{% if page.keywords %}<meta name="keywords" content="{{ page.keywords }}">{% endif %}
+ <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="{{ site.subscribe_rss }}" rel="alternate" title="{{site.title}}" type="application/atom+xml">
<link rel="canonical" href="{{ canonical }}">
<link href="{{ root_url }}/favicon.png" rel="icon">
+ <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link href="{{ root_url }}/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<script src="{{ root_url }}/javascripts/jquery.min.js"></script>
{% 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 @@
<h1 class="left"><a href="{{ root_url }}/">{{ site.title }}</a></h1>
<nav class="menu left">{% include navigation.html %}</nav>
-<form class="search right" action="{{ site.simple_search }}" method="get">
- <input class="left" type="text" name="q" results="0">
- <input type="hidden" name="q" value="site:{{ site.url | shorthand_url }}">
-</form>
-<div class="social right">
- <a href="http://www.facebook.com/tommy351" title="Facebook">Facebook</a>
- <a href="https://plus.google.com/105931860008509594725" title="Google+">Google+</a>
- <a href="http://twitter.com/tommy351" title="Twitter">Twitter</a>
- <a href="{{ site.subscribe_rss }}" title="RSS">RSS</a>
+<div class="right">
+ <form class="search right" action="{{ site.simple_search }}" method="get">
+ <input class="left" type="text" name="q" results="0">
+ <input type="hidden" name="q" value="site:{{ site.url | shorthand_url }}">
+ </form>
+ <div class="social right">
+ <a href="http://www.facebook.com/tommy351" title="Facebook">Facebook</a>
+ <a href="https://plus.google.com/105931860008509594725" title="Google+">Google+</a>
+ <a href="http://twitter.com/tommy351" title="Twitter">Twitter</a>
+ <a href="{{ site.subscribe_rss }}" title="RSS">RSS</a>
+ </div>
</div>
{% 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<length; i++){
- var item = document.createElement('li');
- item.innerHTML = linkify(json[i].text) + '<small>'+relativeDate(json[i].created_at)+'</small>';
- fragment.appendChild(item);
- }
+ for (var i=0; i<length; i++){
+ var item = document.createElement('li');
+ item.innerHTML = linkify(json[i].text) + '<small>'+relativeDate(json[i].created_at)+'</small>';
+ 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
generated by cgit v1.1-2-g2b99 at 2024-11-21 23:16:28 +0100