Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit a75257b

Browse files
kitian616kitian616
committed
feat: color variables & themes
1 parent f48cb79 commit a75257b

22 files changed

+293
-263
lines changed

‎_config.yml‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,14 @@ timezone: Asia/Shanghai
2626

2727
## Author & social ##
2828
author: Someone
29-
# email: #your Email address e.g. [email protected]
30-
# facebook_username: #your Facebook username
31-
# twitter_username: #your Twitter username
32-
github_username: kitian616 #your GitHub username
33-
# googleplus_username: #your Google+ username
34-
# weibo_username: #your Weibo username
35-
# douban_username: #your Douban username
36-
# linkedin_username: #your Linkedin username
29+
email: 1 #your Email address e.g. [email protected]
30+
facebook_username: 1 #your Facebook username
31+
twitter_username: 1 #your Twitter username
32+
github_username: 1 #your GitHub username
33+
googleplus_username: 1 #your Google+ username
34+
weibo_username: 1 #your Weibo username
35+
douban_username: 1 #your Douban username
36+
linkedin_username: 1 #your Linkedin username
3737

3838
## Comment system (Disqus) ##
3939
# disqus_shortname: #the Disqus shortname for the site

‎_includes/blog/tags.html‎

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,9 @@
1515
{% assign gap_size = 1 %}
1616
{% endif %}
1717
<div class="m-tags">
18-
{% if page.title == "All Posts"%}
19-
<button type="button" class="article-tag tag-show-all round-rect-button" onclick="tagSelect('')">
20-
Show All<div class="tag-count"> {{ site.posts | size }} </div>
21-
</button>
22-
{% endif %}
18+
<button type="button" class="article-tag tag-show-all round-rect-button" onclick="tagSelect('')">
19+
Show All<div class="tag-count"> {{ site.posts | size }} </div>
20+
</button>
2321
{% for tag in site.tags %}
2422
{% assign cur_size = tag[1].size %}
2523
{% assign m1 = min_size %}
@@ -41,15 +39,8 @@
4139
{% else %}
4240
{% assign c_index = 4 %}
4341
{% endif %}
44-
45-
{% if page.title == "All Posts"%}
46-
<button type="button" class="article-tag tag-{{ tag[0] }} tag-{{ c_index }} tag-other round-rect-button" onclick="tagSelect('{{ tag[0] }}')">
47-
{{ tag[0] | rstrip }}<div class="tag-count">{{ tag[1].size }}</div>
48-
</button>
49-
{% else %}
50-
<a class="article-tag tag-{{ tag[0] }} tag-{{ c_index }} tag-other round-rect-button" href="{{ "/all.html?tag=" | prepend: site.blog.baseurl | append: tag[0] | replace: '//', '/' }}">
51-
{{ tag[0] | rstrip}}<div class="tag-count">{{ tag[1].size }}</div>
52-
</a>
53-
{% endif %}
42+
<button type="button" class="article-tag tag-{{ tag[0] }} tag-{{ c_index }} tag-other round-rect-button" onclick="tagSelect('{{ tag[0] }}')">
43+
{{ tag[0] | rstrip }}<div class="tag-count">{{ tag[1].size }}</div>
44+
</button>
5445
{% endfor %}
5546
</div>

‎_layouts/all.html‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
---
2+
layout: blog-default
3+
title: All Posts
4+
---
5+
<div class="main">
6+
<section class="m-all">
7+
<h1 class="page-heading">All Posts</h1>
8+
<div class="tag-wrapper">
9+
{% include blog/tags.html %}
10+
</div>
11+
12+
<!--group by year: http://stackoverflow.com/questions/19086284/jekyll-liquid-templating-how-to-group-blog-posts-by-year-->
13+
<section class="year-wrapper">
14+
{% for post in site.posts %}
15+
{% assign currentdate = post.date | date: "%Y" %}
16+
{% if currentdate != date %}
17+
{% unless forloop.first %}</ul></section>{% endunless %}
18+
<section id="{{ post.date | date: "%Y" }}">
19+
<h1 class="yaer-title" id="year-{{ post.date | date: "%Y" }}">{{ currentdate }}</h1>
20+
<ul class="post-list">
21+
{% assign date = currentdate %}
22+
{% endif %}
23+
<li class="post-block {% for tag in post.tags %} tag-{{ tag }} {% endfor %}">
24+
<span class="post-date">{{ post.date | date:"%b %d" }}</span><a class="post-link" href="{{ post.url | prepend: site.base_path | replace: '//', '/' }}">{{ post.title }}</a>
25+
</li>
26+
{% if forloop.last %}</ul></section>{% endif %}
27+
{% endfor %}
28+
</section>
29+
</section>
30+
</div>
31+
32+
<script type="text/javascript">
33+
// function queryString is copied from
34+
// http://stackoverflow.com/questions/979975/how-to-get-the-value-from-url-parameter#answer-979995
35+
function queryString() {
36+
// This function is anonymous, is executed immediately and
37+
// the return value is assigned to QueryString!
38+
var query_string = {};
39+
var query = window.location.search.substring(1);
40+
var vars = query.split("&");
41+
for (var i=0;i<vars.length;i++) {
42+
var pair = vars[i].split("=");
43+
// If first entry with this name
44+
if (typeof query_string[pair[0]] === "undefined") {
45+
query_string[pair[0]] = pair[1];
46+
// If second entry with this name
47+
} else if (typeof query_string[pair[0]] === "string") {
48+
var arr = [ query_string[pair[0]], pair[1] ];
49+
query_string[pair[0]] = arr;
50+
// If third or later entry with this name
51+
} else {
52+
query_string[pair[0]].push(pair[1]);
53+
}
54+
}
55+
return query_string;
56+
}
57+
58+
function tagSelect(tag) {
59+
if (tag === undefined || tag === '') {
60+
$('.page-heading').text('All Posts');
61+
$('.article-tag.tag-show-all').focus();
62+
$('.post-block').show();
63+
} else {
64+
$('.page-heading').text('Tag: ' + tag);
65+
$('.post-block').not('.tag-' + tag).hide();
66+
$('.article-tag').filter('.tag-' + tag).focus();
67+
$('.post-block').filter('.tag-' + tag).show();
68+
}
69+
$('.year-wrapper section').each(function() {
70+
var li_all_show = false;
71+
var li_lists = $(this).find('li');
72+
for (var i = 0; i < li_lists.length; i++) {
73+
if($(li_lists[i]).css('display') !== 'none') {
74+
li_all_show = true;
75+
break;
76+
}
77+
}
78+
if (li_all_show === false) {
79+
$(this).hide();
80+
} else {
81+
$(this).show();
82+
}
83+
});
84+
tag === undefined || window.history.replaceState(null, '', '{{ "/all.html?tag=" | prepend: site.blog.baseurl }}' + tag);
85+
}
86+
87+
$(function() {
88+
var query = queryString();
89+
var tag = undefined;
90+
query.tag === undefined || (tag = decodeURI(query.tag));
91+
tagSelect(tag);
92+
});
93+
</script>

‎_layouts/home.html‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
layout: blog-default
3+
title: Blog
4+
---
5+
<div class="main">
6+
<section class="m-home">
7+
<div class="m-post-list">
8+
<!-- This loops through the paginated posts -->
9+
{% for post in paginator.posts %}
10+
<article>
11+
<h1>
12+
<a class="article-link" href="{{ post.url | prepend: site.base_path | replace: '//', '/' }}">{{ post.title }}</a>
13+
</h1>
14+
<div class="m-article-content">
15+
{{ post.excerpt }}
16+
</div>
17+
{% include blog/article-data.html %}
18+
</article>
19+
{% endfor %}
20+
</div>
21+
22+
<!-- Pagination links -->
23+
{% if paginator.total_pages > 1 %}
24+
<nav class="m-pagination">
25+
<p>{{ site.posts | size }} post articles | {{ paginator.total_pages }} pages. </p>
26+
<ul class="clearfix">
27+
{% if paginator.previous_page %}
28+
<li><a class="round-button" href="{{ paginator.previous_page_path | prepend: site.base_path | replace: '//', '/' }}">
29+
<div class="icon icon--previous">{% include icon/previous.svg %}</div>
30+
</a></li>
31+
{% else %}
32+
<li><div class="round-button inactive">
33+
<div class="icon icon--prrevious">{% include icon/previous.svg %}</div>
34+
</div></li>
35+
{% endif %}
36+
37+
{% for page in (1..paginator.total_pages) %}
38+
{% if page == paginator.page %}
39+
<li><div class="cur-page">
40+
<div class="round-button">
41+
<span>{{ page }}</span>
42+
</div>
43+
</div></li>
44+
{% elsif page == 1 %}
45+
<li><a class="round-button" href="{{ paginator.previous_page_path | prepend: site.base_path | replace: '//', '/' }}"><span>{{ page }}</span></a></li>
46+
{% else %}
47+
<li><a class="round-button" href="{{ site.paginate_path | prepend: site.base_path | replace: '//', '/' | replace: ':num', page }}"><span>{{ page }}</span></a></li>
48+
{% endif %}
49+
{% endfor %}
50+
51+
{% if paginator.next_page %}
52+
<li><a class="round-button" href="{{ paginator.next_page_path | prepend: site.base_path | replace: '//', '/' }}">
53+
<div class="icon icon--next">{% include icon/next.svg %}</div>
54+
</a></li>
55+
{% else %}
56+
<li><div class="round-button inactive">
57+
<div class="icon icon--next">{% include icon/next.svg %}</div>
58+
</div></li>
59+
{% endif %}
60+
</ul>
61+
</nav>
62+
{% endif %}
63+
</section>
64+
</div>
65+
66+
{% if site.isdebug == false %}
67+
<script src="https://cdn1.lncld.net/static/js/av-min-1.2.1.js"></script>
68+
<script>
69+
$(function() {
70+
// 初始化
71+
AV.init({
72+
appId: '{{ site.app_id }}',
73+
appKey: '{{ site.app_key }}'
74+
});
75+
$(".article-view").each(function() {
76+
var curId = this.id;
77+
var query = new AV.Query('{{ site.app_class }}');
78+
query.equalTo('key', /(.*)-(.*)/.exec(curId)[2]);
79+
query.first().then(function(result) {
80+
if (result) {
81+
$('#' + curId).text(result.attributes.views);
82+
}
83+
}, function(error) {
84+
if (error) {
85+
throw error;
86+
}
87+
});
88+
});
89+
});
90+
</script>
91+
{% endif %}

‎_sass/base/_links.scss‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,9 @@ a {
5353
text-decoration: none;
5454
}
5555

56-
.icon {
56+
svg {
57+
height: 1em;
58+
width: 1em;
5759
@include link-normal {
5860
path {
5961
fill: $text-color-3;
@@ -70,21 +72,21 @@ a {
7072
@extend %cursor-not-allowed;
7173
@include link-normal {
7274
background-color: $main-color-3;
73-
color: $text-color-3;
75+
color: rgba($text-color-3, .5);
7476
}
7577
@include link-emphasize {
7678
background-color: $main-color-3;
77-
color: $text-color-3;
79+
color: rgba($text-color-3, .5);
7880
}
79-
.icon {
81+
svg {
8082
@include link-normal {
8183
path {
82-
fill: $text-color-3;
84+
fill: rgba($text-color-3, .5);
8385
}
8486
}
8587
@include link-emphasize {
8688
path {
87-
fill: $text-color-3;
89+
fill: rgba($text-color-3, .5);
8890
}
8991
}
9092
}
@@ -114,7 +116,9 @@ a {
114116
text-decoration: none;
115117

116118
}
117-
.icon {
119+
svg {
120+
height: 1em;
121+
width: 1em;
118122
@include link-normal {
119123
path {
120124
fill: $text-color-3;

‎_sass/colors/_colors.dark.scss‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,30 @@
11
///
2-
// Colors Setting
2+
// Color Theme: Dark
3+
// Author: Tian Qi
4+
// Email: [email protected]
35
///
46

57
// main colors
68
$main-color-1: #ffbf00;
7-
$text-color-1: #fff;
9+
$text-color-1: #dedede;
810

911
$main-color-2: #ff3366;
10-
$text-color-2: #fff;
11-
12+
$text-color-2: #dedede;
1213
$main-color-3: #111;
13-
$text-color-3: #fff;
14+
$text-color-3: #dedede;
1415

1516
// background colors
16-
$background-color: #21252b;
17+
$background-color: #2e3744;
1718
// text colors
18-
$text-color-d: #ddd;
19-
$text-color: #bbb;
20-
$text-color-l: #999;
19+
$text-color-d: #eee;
20+
$text-color: #ccc;
21+
$text-color-l: #888;
2122
$text-background-color:#111;
2223

2324
// border and shadow colors
24-
$border-color: rgba(#000, .2);
25+
$border-color: #161616;
2526
$select-color: rgba($main-color-1, .5);
27+
$decorate-color: rgba(#fff, .1);
2628
$shadow-down: none;
2729

2830
// logo colors

‎_sass/colors/_colors.default.scss‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
///
2-
// Colors Setting
2+
// Color Theme: Default
3+
// Author: Tian Qi
4+
// Email: [email protected]
35
///
46

57
// main colors
@@ -16,13 +18,14 @@ $text-color-3: #666;
1618
$background-color: #fff;
1719
// text colors
1820
$text-color-d: #111;
19-
$text-color: #666;
21+
$text-color: #444;
2022
$text-color-l: #999;
2123
$text-background-color:#f2f2f2;
2224

2325
// border and shadow colors
24-
$border-color: rgba(#000, .2);
26+
$border-color: #aeaeae;
2527
$select-color: rgba($main-color-1, .5);
28+
$decorate-color: rgba(#000, .1);
2629
$shadow-down: 0 2px 10px rgba(#000, .15), 0 0 16px rgba(#000, .05);
2730

2831
// logo colors

‎_sass/colors/_colors.mint.scss‎ renamed to ‎_sass/colors/_colors.forest.scss‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
///
2-
// Colors Setting
2+
// Color Theme: Forest
3+
// Author: Tian Qi
4+
// Email: [email protected]
35
///
46

57
// main colors
6-
$main-color-1: #c77c89;
8+
$main-color-1: #bb6170;
79
$text-color-1: #fff;
810

911
$main-color-2: #537db5;
@@ -16,13 +18,14 @@ $text-color-3: #fff;
1618
$background-color: #f8fcfb;
1719
// text colors
1820
$text-color-d: #386b83;
19-
$text-color: #5395b5;
20-
$text-color-l: #7caec7;
21+
$text-color: #4a8bab;
22+
$text-color-l: #7daec7;
2123
$text-background-color:#f2f2f2;
2224

2325
// border and shadow colors
24-
$border-color: rgba(#000, .2);
26+
$border-color: #eacfd3;
2527
$select-color: rgba($main-color-1, .5);
28+
$decorate-color: rgba(#bb6170, .1);
2629
$shadow-down: 0 2px 10px rgba(#000, .15), 0 0 16px rgba(#000, .05);
2730

2831
// logo colors

0 commit comments

Comments
 (0)