Skip to content

Commit

Permalink
feat: color variables & themes
Browse files Browse the repository at this point in the history
  • Loading branch information
@kitian616
kitian616 committed Oct 17, 2017
1 parent f48cb79 commit a75257b
Show file tree
Hide file tree
Showing 22 changed files with 293 additions and 263 deletions.
16 changes: 8 additions & 8 deletions _config.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,14 @@ timezone: Asia/Shanghai

## Author & social ##
author: Someone
# email: #your Email address e.g. someone@site.com
# facebook_username: #your Facebook username
# twitter_username: #your Twitter username
github_username: kitian616 #your GitHub username
# googleplus_username: #your Google+ username
# weibo_username: #your Weibo username
# douban_username: #your Douban username
# linkedin_username: #your Linkedin username
email: 1 #your Email address e.g. someone@site.com
facebook_username: 1 #your Facebook username
twitter_username: 1 #your Twitter username
github_username: 1 #your GitHub username
googleplus_username: 1 #your Google+ username
weibo_username: 1 #your Weibo username
douban_username: 1 #your Douban username
linkedin_username: 1 #your Linkedin username

## Comment system (Disqus) ##
# disqus_shortname: #the Disqus shortname for the site
Expand Down
21 changes: 6 additions & 15 deletions _includes/blog/tags.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,9 @@
{% assign gap_size = 1 %}
{% endif %}
<div class="m-tags">
{% if page.title == "All Posts"%}
<button type="button" class="article-tag tag-show-all round-rect-button" onclick="tagSelect('')">
Show All<div class="tag-count"> {{ site.posts | size }} </div>
</button>
{% endif %}
<button type="button" class="article-tag tag-show-all round-rect-button" onclick="tagSelect('')">
Show All<div class="tag-count"> {{ site.posts | size }} </div>
</button>
{% for tag in site.tags %}
{% assign cur_size = tag[1].size %}
{% assign m1 = min_size %}
Expand All @@ -41,15 +39,8 @@
{% else %}
{% assign c_index = 4 %}
{% endif %}

{% if page.title == "All Posts"%}
<button type="button" class="article-tag tag-{{ tag[0] }} tag-{{ c_index }} tag-other round-rect-button" onclick="tagSelect('{{ tag[0] }}')">
{{ tag[0] | rstrip }}<div class="tag-count">{{ tag[1].size }}</div>
</button>
{% else %}
<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: '//', '/' }}">
{{ tag[0] | rstrip}}<div class="tag-count">{{ tag[1].size }}</div>
</a>
{% endif %}
<button type="button" class="article-tag tag-{{ tag[0] }} tag-{{ c_index }} tag-other round-rect-button" onclick="tagSelect('{{ tag[0] }}')">
{{ tag[0] | rstrip }}<div class="tag-count">{{ tag[1].size }}</div>
</button>
{% endfor %}
</div>
93 changes: 93 additions & 0 deletions _layouts/all.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
---
layout: blog-default
title: All Posts
---
<div class="main">
<section class="m-all">
<h1 class="page-heading">All Posts</h1>
<div class="tag-wrapper">
{% include blog/tags.html %}
</div>

<!--group by year: http://stackoverflow.com/questions/19086284/jekyll-liquid-templating-how-to-group-blog-posts-by-year-->
<section class="year-wrapper">
{% for post in site.posts %}
{% assign currentdate = post.date | date: "%Y" %}
{% if currentdate != date %}
{% unless forloop.first %}</ul></section>{% endunless %}
<section id="{{ post.date | date: "%Y" }}">
<h1 class="yaer-title" id="year-{{ post.date | date: "%Y" }}">{{ currentdate }}</h1>
<ul class="post-list">
{% assign date = currentdate %}
{% endif %}
<li class="post-block {% for tag in post.tags %} tag-{{ tag }} {% endfor %}">
<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>
</li>
{% if forloop.last %}</ul></section>{% endif %}
{% endfor %}
</section>
</section>
</div>

<script type="text/javascript">
// function queryString is copied from
// http://stackoverflow.com/questions/979975/how-to-get-the-value-from-url-parameter#answer-979995
function queryString() {
// This function is anonymous, is executed immediately and
// the return value is assigned to QueryString!
var query_string = {};
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
// If first entry with this name
if (typeof query_string[pair[0]] === "undefined") {
query_string[pair[0]] = pair[1];
// If second entry with this name
} else if (typeof query_string[pair[0]] === "string") {
var arr = [ query_string[pair[0]], pair[1] ];
query_string[pair[0]] = arr;
// If third or later entry with this name
} else {
query_string[pair[0]].push(pair[1]);
}
}
return query_string;
}

function tagSelect(tag) {
if (tag === undefined || tag === '') {
$('.page-heading').text('All Posts');
$('.article-tag.tag-show-all').focus();
$('.post-block').show();
} else {
$('.page-heading').text('Tag: ' + tag);
$('.post-block').not('.tag-' + tag).hide();
$('.article-tag').filter('.tag-' + tag).focus();
$('.post-block').filter('.tag-' + tag).show();
}
$('.year-wrapper section').each(function() {
var li_all_show = false;
var li_lists = $(this).find('li');
for (var i = 0; i < li_lists.length; i++) {
if($(li_lists[i]).css('display') !== 'none') {
li_all_show = true;
break;
}
}
if (li_all_show === false) {
$(this).hide();
} else {
$(this).show();
}
});
tag === undefined || window.history.replaceState(null, '', '{{ "/all.html?tag=" | prepend: site.blog.baseurl }}' + tag);
}

$(function() {
var query = queryString();
var tag = undefined;
query.tag === undefined || (tag = decodeURI(query.tag));
tagSelect(tag);
});
</script>
91 changes: 91 additions & 0 deletions _layouts/home.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
---
layout: blog-default
title: Blog
---
<div class="main">
<section class="m-home">
<div class="m-post-list">
<!-- This loops through the paginated posts -->
{% for post in paginator.posts %}
<article>
<h1>
<a class="article-link" href="{{ post.url | prepend: site.base_path | replace: '//', '/' }}">{{ post.title }}</a>
</h1>
<div class="m-article-content">
{{ post.excerpt }}
</div>
{% include blog/article-data.html %}
</article>
{% endfor %}
</div>

<!-- Pagination links -->
{% if paginator.total_pages > 1 %}
<nav class="m-pagination">
<p>{{ site.posts | size }} post articles | {{ paginator.total_pages }} pages. </p>
<ul class="clearfix">
{% if paginator.previous_page %}
<li><a class="round-button" href="{{ paginator.previous_page_path | prepend: site.base_path | replace: '//', '/' }}">
<div class="icon icon--previous">{% include icon/previous.svg %}</div>
</a></li>
{% else %}
<li><div class="round-button inactive">
<div class="icon icon--prrevious">{% include icon/previous.svg %}</div>
</div></li>
{% endif %}

{% for page in (1..paginator.total_pages) %}
{% if page == paginator.page %}
<li><div class="cur-page">
<div class="round-button">
<span>{{ page }}</span>
</div>
</div></li>
{% elsif page == 1 %}
<li><a class="round-button" href="{{ paginator.previous_page_path | prepend: site.base_path | replace: '//', '/' }}"><span>{{ page }}</span></a></li>
{% else %}
<li><a class="round-button" href="{{ site.paginate_path | prepend: site.base_path | replace: '//', '/' | replace: ':num', page }}"><span>{{ page }}</span></a></li>
{% endif %}
{% endfor %}

{% if paginator.next_page %}
<li><a class="round-button" href="{{ paginator.next_page_path | prepend: site.base_path | replace: '//', '/' }}">
<div class="icon icon--next">{% include icon/next.svg %}</div>
</a></li>
{% else %}
<li><div class="round-button inactive">
<div class="icon icon--next">{% include icon/next.svg %}</div>
</div></li>
{% endif %}
</ul>
</nav>
{% endif %}
</section>
</div>

{% if site.isdebug == false %}
<script src="https://cdn1.lncld.net/static/js/av-min-1.2.1.js"></script>
<script>
$(function() {
// 初始化
AV.init({
appId: '{{ site.app_id }}',
appKey: '{{ site.app_key }}'
});
$(".article-view").each(function() {
var curId = this.id;
var query = new AV.Query('{{ site.app_class }}');
query.equalTo('key', /(.*)-(.*)/.exec(curId)[2]);
query.first().then(function(result) {
if (result) {
$('#' + curId).text(result.attributes.views);
}
}, function(error) {
if (error) {
throw error;
}
});
});
});
</script>
{% endif %}
18 changes: 11 additions & 7 deletions _sass/base/_links.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,9 @@ a {
text-decoration: none;
}

.icon {
svg {
height: 1em;
width: 1em;
@include link-normal {
path {
fill: $text-color-3;
Expand All @@ -70,21 +72,21 @@ a {
@extend %cursor-not-allowed;
@include link-normal {
background-color: $main-color-3;
color: $text-color-3;
color: rgba($text-color-3, .5);
}
@include link-emphasize {
background-color: $main-color-3;
color: $text-color-3;
color: rgba($text-color-3, .5);
}
.icon {
svg {
@include link-normal {
path {
fill: $text-color-3;
fill: rgba($text-color-3, .5);
}
}
@include link-emphasize {
path {
fill: $text-color-3;
fill: rgba($text-color-3, .5);
}
}
}
Expand Down Expand Up @@ -114,7 +116,9 @@ a {
text-decoration: none;

}
.icon {
svg {
height: 1em;
width: 1em;
@include link-normal {
path {
fill: $text-color-3;
Expand Down
22 changes: 12 additions & 10 deletions _sass/colors/_colors.dark.scss
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,30 @@
///
// Colors Setting
// Color Theme: Dark
// Author: Tian Qi
// Email: kitian616@outlook.com
///

// main colors
$main-color-1: #ffbf00;
$text-color-1: #fff;
$text-color-1: #dedede;

$main-color-2: #ff3366;
$text-color-2: #fff;

$text-color-2: #dedede;
$main-color-3: #111;
$text-color-3: #fff;
$text-color-3: #dedede;

// background colors
$background-color: #21252b;
$background-color: #2e3744;
// text colors
$text-color-d: #ddd;
$text-color: #bbb;
$text-color-l: #999;
$text-color-d: #eee;
$text-color: #ccc;
$text-color-l: #888;
$text-background-color:#111;

// border and shadow colors
$border-color: rgba(#000, .2);
$border-color: #161616;
$select-color: rgba($main-color-1, .5);
$decorate-color: rgba(#fff, .1);
$shadow-down: none;

// logo colors
Expand Down
9 changes: 6 additions & 3 deletions _sass/colors/_colors.default.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
///
// Colors Setting
// Color Theme: Default
// Author: Tian Qi
// Email: kitian616@outlook.com
///

// main colors
Expand All @@ -16,13 +18,14 @@ $text-color-3: #666;
$background-color: #fff;
// text colors
$text-color-d: #111;
$text-color: #666;
$text-color: #444;
$text-color-l: #999;
$text-background-color:#f2f2f2;

// border and shadow colors
$border-color: rgba(#000, .2);
$border-color: #aeaeae;
$select-color: rgba($main-color-1, .5);
$decorate-color: rgba(#000, .1);
$shadow-down: 0 2px 10px rgba(#000, .15), 0 0 16px rgba(#000, .05);

// logo colors
Expand Down
13 changes: 8 additions & 5 deletions _sass/colors/_colors.mint.scss → _sass/colors/_colors.forest.scss
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
///
// Colors Setting
// Color Theme: Forest
// Author: Tian Qi
// Email: kitian616@outlook.com
///

// main colors
$main-color-1: #c77c89;
$main-color-1: #bb6170;
$text-color-1: #fff;

$main-color-2: #537db5;
Expand All @@ -16,13 +18,14 @@ $text-color-3: #fff;
$background-color: #f8fcfb;
// text colors
$text-color-d: #386b83;
$text-color: #5395b5;
$text-color-l: #7caec7;
$text-color: #4a8bab;
$text-color-l: #7daec7;
$text-background-color:#f2f2f2;

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

// logo colors
Expand Down
Loading

0 comments on commit a75257b

Please sign in to comment.