6 |
22 |
25 |
26 |
27 | <% if (config.gitalk ) { %>
28 | <%- partial('_widget/gitalk') %>
29 | <% }else{ %>
30 | <%- partial('_widget/disqus') %>
31 | <% } %>
32 |
--------------------------------------------------------------------------------
/layout/_partial/calendar.ejs:
--------------------------------------------------------------------------------
1 | 7 | 8 | <%= config.author || '' %> 9 | 10 | 11 | <% if(article_edit.enable){ %> 12 | 13 | 14 | <% }else{ %> 15 | 16 | <% } %> 17 | {{moment(<%= publishTimestamp %>).fromNow()}} 18 | 19 |
20 | 21 |
2 |
84 |
85 | <%
86 | var dateFormat = 'YYYY-MM-DD';
87 | var postsArr = [];
88 | var today = moment().format('YYYY-MM-DD');
89 | var oneYearAgo = moment(today).subtract(1, 'years');
90 |
91 | site.posts.data.forEach(function(post) {
92 | if (post.date > oneYearAgo) {
93 | postsArr.push({
94 | date: post.date.format(dateFormat),
95 | title: post.title,
96 | url: post.permalink
97 | });
98 | }
99 | });
100 |
101 | postsArr.sort(function(a, b) {
102 | return new Date(a.date) - new Date(b.date);
103 | });
104 | %>
105 |
244 |
245 |
--------------------------------------------------------------------------------
/layout/_partial/footer.ejs:
--------------------------------------------------------------------------------
1 | <%
2 | config.social = config.social || {};
3 | theme.social = theme.social || {};
4 | var github = config.social.github || theme.social.github;
5 | var weibo = config.social.weibo || theme.social.weibo;
6 | var linkedin = config.social.linkedin || theme.social.linkedin;
7 | var location = config.location || theme.location;
8 | var url = config.url;
9 | var flagcounter_href = config.flagcounter_href;
10 | var flagcounter_img_src = config.flagcounter_img_src;
11 | %>
12 |
43 |
--------------------------------------------------------------------------------
/layout/_partial/head.ejs:
--------------------------------------------------------------------------------
1 | <%
2 | var tags = page.tags ? page.tags.data : '';
3 | var favicon = config.favicon || 'https://github.githubassets.com/favicon.ico';
4 | %>
5 |
6 |
7 |
8 |
9 |
11 |
3 |
72 |
73 | 4 | {{posts.length}} contributions in the last year 5 |
6 |
7 |
71 |
8 |
48 |
54 |
70 |
50 | {{svgtip.text}} on
51 | {{moment(mouseoverDate).format('MMM DD, YYYY')}}
52 |
53 | Contribution activity
74 |
75 |
83 | -
76 |
- 77 | {{post.title}} 78 | 79 | {{post.date}} 80 | 81 |
3 |
23 |
34 |
35 | 24 | 25 | <%= config.title %> 26 | <% if(page.title === "tags"){ %> 27 | /Tags 28 | <% } %> 29 | <% if(page.title === "categories"){ %> 30 | /Categories 31 | <% } %> 32 |
33 |
36 |
44 |
37 | Like
38 | Share
39 | Discussion
40 | Bookmark
41 | Smile
42 |
43 |
14 |
73 |
--------------------------------------------------------------------------------
/layout/_partial/navbar-secondary.ejs:
--------------------------------------------------------------------------------
1 | <%
2 | var isOverview = ['tags', 'archives', 'categories'].indexOf(nav_selected) === -1
3 | %>
4 |
--------------------------------------------------------------------------------
/layout/_partial/navbar.ejs:
--------------------------------------------------------------------------------
1 | <%
2 | var avatar = config.avatar || theme.avatar || 'https://octodex.github.com/images/baracktocat.jpg'
3 | %>
4 |
47 |
--------------------------------------------------------------------------------
/layout/_partial/script.ejs:
--------------------------------------------------------------------------------
1 | <%- partial('_widget/google-custom-search') %>
2 |
3 |
4 |
--------------------------------------------------------------------------------
/layout/_widget/baidutongji.ejs:
--------------------------------------------------------------------------------
1 | <% var BAIDU = config.baidutongji || theme.baidutongji; if(BAIDU){ %>
2 |
8 | <% } %>
9 |
--------------------------------------------------------------------------------
/layout/_widget/disqus.ejs:
--------------------------------------------------------------------------------
1 | <% var DISQUS = config.disqus; if(DISQUS){ %>
2 |
15 | 
16 |
41 |
42 |
17 |
37 | <%= theme.title %>
18 |
19 | -
20 | <% if(location){ %>
21 |
- 22 | 23 | <%= location %> 24 | 25 | <% }if(email){ %> 26 |
- 27 | 28 | <%= email %> 29 | 30 | <% } %> 31 |
- 32 | 33 | <%= url %> 34 | 35 |
38 | <%= theme.description %>
39 |
40 | -
43 | <% if(location){ %>
44 |
- 45 | 46 | <%= location %> 47 | 48 | <% }if(email){ %> 49 |
- 50 | 51 | <%= email %> 52 | 53 | <% } %> 54 |
- 55 | 56 | <%= url %> 57 | 58 |
3 |
4 |
5 |
6 |
19 | <% } %>
20 |
--------------------------------------------------------------------------------
/layout/_widget/gitalk.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
15 |
--------------------------------------------------------------------------------
/layout/_widget/google-analytics.ejs:
--------------------------------------------------------------------------------
1 | <% var GA = config.google_analytics || config.ga || theme.google_analytics; if(GA){ %>
2 |
10 | <% } %>
11 |
--------------------------------------------------------------------------------
/layout/_widget/google-custom-search.ejs:
--------------------------------------------------------------------------------
1 | <% var GCS = config.gcs || theme.gcs; if(GCS){ %>
2 |
14 | <% } %>
15 |
--------------------------------------------------------------------------------
/layout/archive.ejs:
--------------------------------------------------------------------------------
1 | <%
2 | var posts = page.posts.data;
3 | var nav_selected = page.path.split('/')[0];
4 | %>
5 |
6 |
7 | <%- partial('_partial/intro') %>
8 |
9 |
51 |
--------------------------------------------------------------------------------
/layout/index.ejs:
--------------------------------------------------------------------------------
1 | <%
2 | var posts = page.posts.data;
3 | var recentPosts = page.posts.data.slice(0, 6);
4 | %>
5 |
6 |
10 | <%- partial('_partial/navbar-secondary', {nav_selected: nav_selected}) %>
11 |
12 |
50 |
13 |
49 | -
14 | <% posts.forEach(function(post){
15 | var category;
16 | post.categories.forEach(function(cat, index) {
17 | if (index === 0) {
18 | category = cat
19 | }
20 | })
21 | %>
22 |
-
23 |
<%= post.title || 'Untitled' %>
24 |25 | <%= post.content 26 | .replace(/<[^>]*>/ig, ' ') 27 | .substr(0, 150) %>... 28 |
29 | 34 |35 | 36 | <% if(category){ %> 37 | <%= category.name %> 38 | <% } else { %> 39 | <%= 'Uncategorized' %> 40 | <% } %> 41 | 42 | <%= post.tags.length %> 43 | Published {{moment(<%= post.date.valueOf() %>).fromNow()}} 44 |45 |
46 | <% }) %>
47 |
7 | <%- partial('_partial/intro') %>
8 |
9 |
45 |
--------------------------------------------------------------------------------
/layout/layout.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 | <%- partial('_partial/head') %>
4 |
5 | <%- partial('_partial/navbar') %>
6 |
10 | <%- partial('_partial/navbar-secondary', {nav_selected: 0}) %>
11 |
12 |
44 |
13 |
43 | Recent post
14 |-
15 | <% recentPosts.forEach(function(post){ %>
16 |
-
17 | 18 |38 |
19 | 20 | <%= post.title || 'Untitled' %> 21 |
22 |23 | <%= post.content 24 | .replace(/<[^>]*>/ig, ' ') 25 | .substr(0, 50) %> 26 |
27 |28 | 29 | <% if(post.categories.data[0]){ %> 30 | <%= post.categories.data[0].name %> 31 | <% } else { %> 32 | <%= 'Uncategorized' %> 33 | <% } %> 34 | 35 | <%= post.tags.length %> 36 |
37 |
39 | <% }) %>
40 |
7 | <%- body %>
8 |
9 | <%- partial('_partial/footer') %>
10 | <%- partial('_partial/script') %>
11 |
12 |
13 |
--------------------------------------------------------------------------------
/layout/page.ejs:
--------------------------------------------------------------------------------
1 |
2 | <%- partial('_partial/intro') %>
3 |
4 |
--------------------------------------------------------------------------------
/layout/post.ejs:
--------------------------------------------------------------------------------
1 | <%- partial('_partial/header') %>
2 | <%- partial('_partial/article') %>
3 |
--------------------------------------------------------------------------------
/source/css/_variables.styl:
--------------------------------------------------------------------------------
1 | /* Color */
2 | $white = #FFF
3 | $black = #000
4 | $grey-dark = #24292e
5 | $grey-lighter = #f6f8fa
6 | $grey-light = #f4f4f4
7 | $grey-border = #dcddde
8 | $blue-bright = #0366d6
9 | $grey-border-light = #eaecef
10 | $grey = #c6cbd1
11 |
12 | $screen-sm = 414px
13 |
14 | /* font */
15 | $font-family-main = -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
16 | $font-family-code = "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace
17 | $border-radius = 3px
18 |
19 | $border-grey = 1px solid $grey-border
20 | $border-grey-light = 1px solid $grey-border-light
21 |
22 | border-radius(n)
23 | -webkit-border-radius n
24 | -moz-border-radius n
25 | border-radius n
--------------------------------------------------------------------------------
/source/css/base.styl:
--------------------------------------------------------------------------------
1 | *
2 | box-sizing: border-box
3 |
4 | body
5 | margin: 0
6 | padding: 0
7 | font-size: 14px
8 | line-height: 1.5
9 | color: $grey-dark
10 | font-family: $font-family-main
11 | min-width: 1020px
12 | word-wrap: break-word;
13 | @media (max-width: $screen-sm)
14 | width: 100%
15 | min-width: 100%
16 | background-color: #fafbfc
17 |
18 | a, a:link, a:visited
19 | color: $blue-bright
20 | text-decoration: none
21 |
22 | a:hover
23 | text-decoration: underline
24 |
25 | .float-right
26 | float: right !important
27 |
28 | .float-left
29 | float: left !important
30 |
31 | .clearfix
32 | &::before, &::after
33 | display: table
34 | content: ""
35 | &::after
36 | clear: both
37 |
38 | .width-full
39 | width: 100% !important
40 |
41 | .container
42 | width: 980px
43 | margin: 0 auto
44 | &::before, &::after
45 | display: table
46 | content: ""
47 | &::after
48 | clear: both
49 | @media (max-width: $screen-sm)
50 | width: 100%
51 |
52 | .container-lg
53 | max-width: 1012px
54 | padding-left: 16px
55 | padding-right: 16px
56 | margin: 24px auto 0 auto
57 | &::before, &::after
58 | display: table
59 | content: ""
60 | &::after
61 | clear: both
62 | @media (max-width: $screen-sm)
63 | padding: 0
64 | margin: 0
65 | width: 100%
66 |
67 | .list-none
68 | list-style: none
69 |
70 |
71 | .col
72 | &-3, &-9
73 | float: left
74 | &-3
75 | width: 25%
76 | &-9
77 | width: 75%
78 |
79 | .text-ellipsis
80 | overflow: hidden;
81 | text-overflow: ellipsis;
82 | white-space: nowrap
83 |
84 | .mobile-only
85 | @media (min-width: $screen-sm)
86 | display: none
87 |
88 | .desktop-only
89 | @media (max-width: $screen-sm)
90 | display: none
--------------------------------------------------------------------------------
/source/css/calendar.styl:
--------------------------------------------------------------------------------
1 | .calendar
2 | &-container
3 | @media (max-width: $screen-sm)
4 | display: none
5 | h3
6 | font-size: 16px
7 | font-weight normal
8 | margin-bottom 8px
9 | margint-top: 0
10 |
11 | &-graph
12 | padding: 5px 0 0
13 | text-align: center
14 | height: 100%
15 | position relative
16 | &-container
17 | margin-bottom: 32px
18 | padding: 8px 0
19 | border: 1px solid #d1d5da
20 | border-radius: 3px
21 |
22 | .month
23 | fill: #767676
24 | font-size: 9px
25 | .wday
26 | fill: #767676
27 | font-size: 9px
28 |
29 | &-footer
30 | padding: 0 16px 4px 16px
31 | margin: 4px 16px 0 16px
32 | font-size: 11px
33 |
34 | &-legend
35 | color: #586069
36 | float: right
37 | ul
38 | display: inline-block
39 | list-style: none
40 | padding: 0
41 | margin: 0
42 | li
43 | float: left
44 | width: 10px
45 | height: 10px
46 |
47 | .contribution-list
48 | ul
49 | list-style: none
50 | padding: 0
51 |
52 | .svg-tip
53 | width: 200px // so that tooltip can get a stable absolute position
54 | position: absolute
55 | z-index: 999
56 | padding: 10px
57 | color: #bbb
58 | text-align: center
59 | background: rgba(0, 0, 0, 0.8)
60 | border-radius: 3px
61 | font-size: 11px
62 | white-space: nowrap
63 | strong
64 | color: #dfe2e5
65 |
66 | .svg-tip:after
67 | position: absolute
68 | bottom: -10px
69 | left: 50%
70 | width: 5px
71 | height: 5px
72 | box-sizing: border-box
73 | margin: 0 0 0 -5px
74 | content: " "
75 | border: 5px solid transparent
76 | border-top-color: rgba(0, 0, 0, 0.8)
77 |
78 | .day:hover,
79 | .day.active
80 | stroke-width: 1px
81 | stroke: #000
82 | shape-rendering: crispEdges
83 |
--------------------------------------------------------------------------------
/source/css/code.styl:
--------------------------------------------------------------------------------
1 | figure.highlight
2 | margin: 0 0 16px 0
3 | padding: 16px
4 | font-size: 16px
5 | line-height: 1.45
6 | background-color: $grey-lighter
7 | border-radius: 3px
8 | word-wrap: normal
9 |
10 | pre
11 | margin: 0
12 | font-size: 85%
13 |
14 | .line
15 | height: 20px
16 | font-szie: 100%
17 | word-break: normal
18 |
19 | .gutter
20 | display: none
21 |
22 | pre
23 | margin-top: 0;
24 | margin-bottom: 0;
25 | font-style: normal;
26 | font-variant-ligatures: normal;
27 | font-variant-caps: normal;
28 | font-variant-numeric: normal;
29 | font-weight: normal;
30 | font-stretch: normal;
31 | font-size: 12px;
32 | line-height: normal;
33 | font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
34 | @media (max-width: $screen-sm)
35 | font-family: Consolas, "Liberation Mono", Courier, monospace
36 |
37 | .highlight
38 | display: block
39 | background: white
40 | padding: 0.5em
41 | color: #333333
42 | overflow-x: auto
43 |
44 | .comment, .meta
45 | color: #969896
46 |
47 | .string, .variable, .template-variable, .strong, .emphasis, .quote
48 | color: #df5000
49 |
50 | .keyword, .selector-tag, .type
51 | color: #a71d5d
52 |
53 | .literal, .symbol, .bullet, .attribute
54 | color: #0086b3
55 |
56 | .section, .name
57 | color: #63a35c
58 |
59 | .tag
60 | color: #333333
61 |
62 | .title, .attr, .selector-id, .selector-class, .selector-attr, .selector-pseudo
63 | color: #795da3
64 |
65 | .addition
66 | color: #55a532
67 | background-color: #eaffea
68 |
69 | .deletion
70 | color: #bd2c00
71 | background-color: #ffecec
72 |
73 | .link
74 | text-decoration: underline
--------------------------------------------------------------------------------
/source/css/footer.styl:
--------------------------------------------------------------------------------
1 | .footer
2 | position: relative;
3 | padding-top: 40px;
4 | padding-bottom: 40px;
5 | margin-top: 40px;
6 | font-size: 12px;
7 | line-height: 1.5;
8 | color: #586069;
9 | border-top: 1px solid #eaecef
10 | @media (max-width: $screen-sm)
11 | padding: 15px
12 | color: #959da5
13 | text-align: center
14 | &-social-link
15 | margin: 0 0 0 -10px
16 | padding: 0
17 | list-style: none
18 | float: left
19 | @media (max-width: $screen-sm)
20 | float: none
21 | li
22 | display: inline-block
23 | line-height: 16px
24 | margin-left: 10px
25 |
26 | &-theme-info
27 | float: right
28 | @media (max-width: $screen-sm)
29 | float: none
30 |
31 | &-logo
32 | position: absolute
33 | top: 30px
34 | left: 50%
35 | margin-left: -12px
36 | font-size: 24px
37 | color: #c6cbd1
38 | font-size: 28px
39 | &:link, &:visited
40 | color: #c6cbd1
41 | &:hover
42 | color: #959da5
43 | @media (max-width: $screen-sm)
44 | margin: 0
45 | display: block
46 | position: relative
47 | top: 0
48 | left: 0
49 | font-size: 37px
50 | &-pageview
51 | text-align: center
52 | margin-top: 20px
53 | overflow: hidden
54 | img{
55 | display: inline-block
56 | /* crop img to hide flag counter logo */
57 | margin-bottom: -25px
58 | }
59 |
--------------------------------------------------------------------------------
/source/css/header.styl:
--------------------------------------------------------------------------------
1 | .header
2 | &-wrapper
3 | background: #fafbfc
4 | position: relative
5 | padding-top: 20px
6 | margin-bottom: 20px
7 | border-bottom: 1px solid #e1e4e8
8 | &-site-detail
9 | margin-bottom 20px
10 |
11 | &-title
12 | position: relative
13 | float: left
14 | max-width: 635px
15 | padding-left: 18px
16 | font-size: 18px
17 | line-height: 26px
18 | color: #586069
19 | margin: 0 0 0 -18px
20 |
21 | &-toolbar
22 | margin: 0 -11px 0 0
23 | float: right
24 | list-style: none
25 | padding: 0
26 | li
27 | float: left
28 | margin: 0 10px 0 0
29 | font-size: 11px
30 | color: #24292e
31 | list-style-type: none
32 | a
33 | line-height: 20px
34 | color: #24292e
35 | position: relative
36 | display: inline-block
37 | padding: 3px 10px
38 | font-size: 12px
39 | font-weight: 600
40 | white-space: nowrap
41 | vertical-align: middle
42 | cursor: pointer
43 |
44 | border: 1px solid rgba(27, 31, 35, 0.2)
45 | &:hover
46 | text-decoration: none
47 |
48 | &-left
49 | margin-right: -5px
50 | background-color: #eff3f6
51 | background-image: -webkit-linear-gradient(270deg, #fafbfc 0%, #eff3f6 90%)
52 | background-image: linear-gradient(-180deg, #fafbfc 0%, #eff3f6 90%)
53 | background-repeat: repeat-x
54 | background-position: -1px -1px
55 | background-size: 110% 110%
56 | border-radius(3px 0 0 3px)
57 | &:hover
58 | background-color: #e6ebf1
59 | background-image: -webkit-linear-gradient(270deg, #f0f3f6 0%, #e6ebf1 90%)
60 | background-image: linear-gradient(-180deg, #f0f3f6 0%, #e6ebf1 90%)
61 | background-position: 0 -0.5em
62 | border-color: rgba(27, 31, 35, 0.35)
63 |
64 | &-right
65 | font-weight: 600
66 | line-height: 20px
67 | background-color: $white
68 | border-left: 0
69 | border-radius(0 3px 3px 0)
70 | &:hover
71 | color: $blue-bright
72 | &-tab
73 | float: left
74 | padding: 7px 15px 8px
75 | color: #586069
76 | white-space: nowrap
77 | cursor: default
78 | border-top: 3px solid transparent
79 | &:hover
80 | color: #24292e
81 | &-selected
82 | color: #24292e
83 | border-top: 3px solid #e36209
84 | border-left: 1px solid #e1e4e8
85 | border-right: 1px solid #e1e4e8
86 | background-color: $white
87 | border-radius(3px 3px 0 0)
88 | &-wrapper
89 | position relative
90 | top: 1px
91 | margin-top: -5px
--------------------------------------------------------------------------------
/source/css/main.css:
--------------------------------------------------------------------------------
1 | html, body, form {
2 | padding: 0;
3 | margin: 0;
4 | }
5 |
6 | body {
7 | font-family: "Microsoft Yahei", 微软雅黑, Helvetica, arial, sans-serif;
8 | font-size: 62.5%;
9 | line-height: 1.4;
10 | color: #333;
11 | width: 100%;
12 | }
13 |
14 | img {
15 | max-width: 100%;
16 | }
17 |
18 | main {
19 |
20 | }
21 |
22 | header {
23 | height: 30px;
24 | position: relative;
25 | padding: 5px 0 15px 0;
26 | margin-bottom: 10px;
27 | }
28 |
29 | .header-btn {
30 | display: inline-block;
31 | position: absolute;
32 | right: 0;
33 | line-height: 30px;
34 | }
35 |
36 | header h2 {
37 | display: inline-block;
38 | padding: 0;
39 | margin: 0;
40 | font-size: 25px;
41 | line-height: 30px;
42 | }
43 |
44 | nav a,
45 | nav a:link,
46 | nav a:visited {
47 | color: #333;
48 | text-decoration: none;
49 | }
50 |
51 | .container {
52 | margin-left: auto;
53 | margin-right: auto;
54 | width: 1000px;
55 | }
56 |
57 | .left {
58 | float: left;
59 | }
60 |
61 | nav {
62 | padding: 8px 0;
63 | background-color: #f5f5f5;
64 | border-bottom: 1px solid #e5e5e5;
65 | width: 100%;
66 | height: 27px;
67 | vertical-align: middle;
68 | margin-bottom: 20px;
69 | }
70 |
71 | nav .site-logo {
72 | font-size: 30px;
73 | margin: 0 10px;
74 | float: left;
75 | position: relative;
76 | top: -1px;
77 | }
78 |
79 | .site-search {
80 | float: left;
81 | position: relative;
82 | top: 1px;
83 | }
84 |
85 | .site-search form {
86 | position: relative;
87 | float: left;
88 | width: 320px;
89 | margin-right: 10px;
90 | }
91 |
92 | .site-search .form-control,
93 | input[type="text"] {
94 | position: relative;
95 | width: 100%;
96 | height: 20px;
97 | padding: 2px;
98 | font-size: 12px;
99 | display: block;
100 | line-height: 17px;
101 | color: #333;
102 | vertical-align: middle;
103 | background-color: #fff;
104 | border: 1px solid #ccc;
105 | border-radius: 3px;
106 | outline: none;
107 | }
108 |
109 | .scope-badge {
110 | display: inline-block;
111 | padding: 0 5px;
112 | font-size: 12px;
113 | font-weight: normal;
114 | color: #767676;
115 | background-color: #eee;
116 | border-radius: 3px;
117 | vertical-align: middle;
118 | line-height: 20px;
119 | }
120 |
121 | .site-search input {
122 | position: absolute;
123 | background: none;
124 | border: 0;
125 | box-shadow: none;
126 | height: 20px;
127 | display: inline-block;
128 | font-size: 12px;
129 | padding: 3px 5px;
130 | line-height: 16px;
131 | width: 250px;
132 | }
133 |
134 | nav ul {
135 | float: left;
136 | list-style: none;
137 | margin: 0 10px;
138 |
139 | padding: 0;
140 | }
141 |
142 | nav ul li {
143 | float: left;
144 |
145 | }
146 |
147 | nav ul li a {
148 | display: block;
149 | padding: 4px 8px;
150 | font-size: 13px;
151 | font-weight: bold;
152 | line-height: 20px;
153 | }
154 |
155 | a, a:link, a:hover, a:visited, nav a:hover {
156 | color: #4078c0;
157 | text-decoration: none;
158 | }
159 |
160 | a:hover {
161 | text-decoration: underline;
162 | }
163 |
164 | footer {
165 | padding-top: 40px;
166 | margin-bottom: 40px;
167 | position: relative;
168 | line-height: 15px;
169 | font-size: 13px;
170 | color: #767676;
171 | border-top: 1px solid #eee;
172 | }
173 |
174 | footer .site-logo {
175 | position: absolute;
176 | bottom: -5px;
177 | margin-left: -13px;
178 | left: 50%;
179 | font-size: 26px;
180 | color: #ccc;
181 | }
182 |
183 | footer a:hover.site-logo {
184 | color: #aaa;
185 | }
186 |
187 | footer .theme-info {
188 | position: absolute;
189 | right: 0;
190 | bottom: 0;
191 | font-style: italic;
192 | }
193 |
194 | footer ul {
195 | display: inline-block;
196 | margin: 0;
197 | padding: 0;
198 | list-style: none;
199 | margin-left: -10px;
200 | }
201 |
202 | footer li {
203 | float: left;
204 | display: list-item;
205 | margin: 0 10px;
206 | }
207 |
208 | .btn {
209 | margin: 0;
210 | padding: 4px 10px;
211 | border: 1px solid #d5d5d5;
212 | border-radius: 3px;
213 | font-size: 12px;
214 | font-weight: bold;
215 | background-image: linear-gradient(#fcfcfc, #eee);
216 | }
217 |
218 | .btn-group {
219 | float: left;
220 | padding-left: 10px;
221 | }
222 |
223 | .btn-group-left {
224 | margin-right: 0;
225 | border-bottom-right-radius: 0;
226 | border-top-right-radius: 0;
227 | }
228 |
229 | .btn-group-left:hover {
230 | background-image: linear-gradient(#eee, #ddd);
231 | }
232 |
233 | .btn-group-right {
234 | position: relative;
235 | left: -1px;
236 | margin-left: 0;
237 | border-bottom-left-radius: 0;
238 | border-top-left-radius: 0;
239 | background: none;
240 | border-color: #ddd;
241 | }
242 |
243 | a.btn-group-left,
244 | a.btn-group-right {
245 | cursor: pointer;
246 | color: #333;
247 | text-decoration: none;
248 | }
249 |
250 | a:hover.btn-group-right {
251 | color: #4078c0;
252 | }
253 |
254 | .clearfix {
255 | clear: both;
256 | }
257 |
258 | ul {
259 | margin: 0;
260 | padding: 0;
261 | list-style: none;
262 | }
263 |
264 | .column {
265 | float: left;
266 | padding: 0 10px;
267 | }
268 |
269 | .read-more * {
270 | overflow: hidden;
271 | text-overflow: ellipsis;
272 | white-space: nowrap;
273 | vertical-align: top;
274 | }
275 |
276 | /* about me section */
277 |
278 | .about-me {
279 | width: 230px;
280 | }
281 |
282 | img.avatar {
283 | display: block;
284 | margin: 0 auto;
285 | max-width: 100%;
286 | vertical-align: middle;
287 | border-radius: 6px;
288 | }
289 |
290 | .blog-info {
291 | margin: 5px 0 15px 0;
292 | }
293 |
294 | .blog-info-title {
295 | display: block;
296 | font-size: 24px;
297 | line-height: 30px;
298 | }
299 |
300 | .blog-info-author {
301 | display: block;
302 | width: 100%;
303 | font-size: 16px;
304 | font-weight: bold;
305 | line-height: 24px;
306 | color: #666;
307 | }
308 |
309 | .about-me ul {
310 | padding: 13px 0;
311 | margin-bottom: 2px;
312 | border-top: 1px solid #ddd;
313 | list-style: none;
314 | }
315 |
316 | .details li {
317 | padding: 2px 0;
318 | font-size: 14px;
319 | }
320 |
321 | .details li .fa {
322 | width: 25px;
323 | margin-right: 5px;
324 | color: #999;
325 | font-size: 15px;
326 | text-align: center;
327 | }
328 |
329 | /* blog status */
330 |
331 | ul.stat {
332 | padding: 10px 0;
333 | }
334 |
335 | .stat li {
336 | float: left;
337 | width: 33%;
338 | text-align: center;
339 | }
340 |
341 | .stat a:hover,
342 | .stat a:hover .stat-name {
343 | color: #4078c0;
344 | text-decoration: none;
345 | }
346 |
347 | .stat-count {
348 | font-size: 25px;
349 | font-weight: bold;
350 | }
351 |
352 | .stat-name {
353 | font-size: 12px;
354 | color: #767676;
355 | }
356 |
357 | /* social network */
358 |
359 | ul.social-network {
360 | padding: 15px 0;
361 | margin: 0 auto;
362 | }
363 |
364 | .social-network li {
365 | float: left;
366 | padding-right: 15px;
367 | font-size: 20px;
368 | }
369 |
370 | .social-network li a {
371 | color: #999;
372 | }
373 |
374 | .social-network .fa-github:hover {
375 | color: #181717;
376 | }
377 |
378 | .fa-weibo:hover {
379 | color: #E6162D;
380 | }
381 |
382 | .fa-linkedin:hover {
383 | color: #0077B5;
384 | }
385 |
386 | /* recent post section */
387 |
388 | .recent-post {
389 | width: 730px;
390 | margin-bottom: 20px;
391 | }
392 |
393 | .boxed-group {
394 | position: relative;
395 | border-radius: 3px;
396 | border: 1px solid #d8d8d8;
397 | }
398 |
399 | .boxed-group > h3 {
400 | background-color: #f5f5f5;
401 | margin: 0;
402 | padding: 7px 10px;
403 | font-size: 14px;
404 | line-height: 20px;
405 | display: block;
406 | border-bottom: 1px solid #d8d8d8;
407 | }
408 |
409 | .boxed-group h3 span {
410 | display: inline-block;
411 | position: absolute;
412 | right: 10px;
413 | font-weight: normal;
414 | font-size: 11px;
415 | color: #767676;
416 | font-style: italic;
417 | }
418 |
419 | .boxed-group h3 span i {
420 | padding-left: 10px;
421 | }
422 |
423 | .boxed-group h3 a {
424 | color: #333;
425 | }
426 |
427 | .boxed-group h3 a:hover {
428 | text-decoration: underline;
429 | }
430 |
431 | .boxed-group > ul {
432 | padding: 0;
433 | margin: 0;
434 | list-style: none;
435 | margin-top: -1px;
436 | }
437 |
438 | .boxed-group > ul li {
439 | padding: 0;
440 | display: list-item;
441 | border-top: 1px solid #d8d8d8;
442 | }
443 |
444 | .boxed-group > ul li a {
445 | position: relative;
446 | display: block;
447 | padding: 5px 30px 5px;
448 | height: 40px;
449 | font-size: 13px;
450 | }
451 |
452 | .boxed-group .icon-left {
453 | position: absolute;
454 | left: 10px;
455 | color: #767676;
456 | }
457 |
458 | .boxed-group .icon-right {
459 | position: absolute;
460 | right: 10px;
461 | top: 17px;
462 | color: #767676;
463 | }
464 |
465 | .boxed-group .subtext {
466 | display: block;
467 | max-width: 100%;
468 | font-size: 12px;
469 | color: #767676;
470 | line-height: 21px;
471 | }
472 |
473 | .post-title {
474 | display: inline-block;
475 | font-weight: bold;
476 | width: 90%;
477 | }
478 |
479 | a:hover .post-title {
480 | text-decoration: underline;
481 | }
482 |
483 | .boxed-group a:hover {
484 | text-decoration: none;
485 | }
486 |
487 | article {
488 | padding: 45px;
489 | font-size: 1.4em;
490 | line-height: 1.6;
491 | word-wrap: break-word;
492 | }
493 |
494 | article > *:first-child {
495 | margin-top: 0 !important;
496 | }
497 |
498 | article > *:last-child {
499 | margin-bottom: 0 !important;
500 | }
501 |
502 | article h1,
503 | article h2,
504 | article h3,
505 | article h4,
506 | article h5,
507 | article h6 {
508 | margin-top: 1em;
509 | margin-bottom: 16px;
510 | font-weight: bold;
511 | line-height: 1.4;
512 | }
513 |
514 | article h1 {
515 | border-bottom: 1px solid #eee;
516 | font-size: 2.25em;
517 | line-height: 1.2;
518 | padding-bottom: 0.3em;
519 | }
520 |
521 | article h2 {
522 | padding-bottom: 0.3em;
523 | font-size: 1.75em;
524 | line-height: 1.225;
525 | border-bottom: 1px solid #eee;
526 | }
527 |
528 | article h3 {
529 | font-size: 1.5em;
530 | line-height: 1.43;
531 | }
532 |
533 | article h4 {
534 | font-size: 1.25em;
535 | }
536 |
537 | article h5 {
538 | font-size: 1em;
539 | }
540 |
541 | article h6 {
542 | font-size: 1em;
543 | color: #777;
544 | }
545 |
546 | article p {
547 | margin-top: 0;
548 | margin-bottom: 16px;
549 | line-height: 1.6;
550 | }
551 |
552 | article ul,
553 | article ol {
554 | margin-top: 0;
555 | margin-bottom: 16px;
556 | padding-left: 2em;
557 | }
558 |
559 | article ul {
560 | list-style: disc;
561 | }
562 |
563 | article ul ul {
564 | list-style: circle;
565 | }
566 |
567 | article ol {
568 | list-style-type: decimal;
569 | }
570 |
571 | article li {
572 | display: list-item;
573 | text-align: -webkit-match-parent;
574 | }
575 |
576 | .boxed-group article a:hover {
577 | text-decoration: underline;
578 | }
579 |
580 | article code, article tt {
581 | padding: 0;
582 | padding-top: 0.2em;
583 | padding-bottom: 0.2em;
584 | margin: 0;
585 | font-size: 85%;
586 | background-color: rgba(0, 0, 0, 0.04);
587 | border-radius: 3px;
588 | font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
589 | }
590 |
591 | article code:before, article code:after, article tt:before, article tt:after {
592 | letter-spacing: -0.2em;
593 | content: "\00a0"
594 | }
595 |
596 | article code br, article tt br {
597 | display: none
598 | }
599 |
600 | article del code {
601 | text-decoration: inherit
602 | }
603 |
604 | article pre > code {
605 | padding: 0;
606 | margin: 0;
607 | font-size: 100%;
608 | word-break: normal;
609 | white-space: pre;
610 | background: transparent;
611 | border: 0;
612 | }
613 |
614 | article .highlight {
615 | margin-bottom: 16px
616 | }
617 |
618 | article .highlight pre, article pre {
619 | padding: 16px;
620 | overflow: auto;
621 | font-size: 12px;
622 | line-height: 1.45;
623 | background-color: #f7f7f7;
624 | border-radius: 3px;
625 | }
626 |
627 | article > table {
628 | border-collapse: collapse;
629 | margin-bottom: 16px;
630 | }
631 |
632 | article > table td,
633 | article > table th {
634 | margin: 0;
635 | padding: 5px 10px;
636 | border: 1px solid #ccc;
637 | }
638 |
639 | article blockquote {
640 | margin-left: 0;
641 | background-color: #eee;
642 | border-left: 5px solid #ccc;
643 | margin-right: 0;
644 | }
645 |
646 | article blockquote p{
647 | padding: 10px;
648 | width: 100%;
649 | }
650 | figure {
651 | padding: 0;
652 | margin: 0;
653 | }
654 |
655 | .highlight {
656 | display: block;
657 | overflow-x: auto;
658 | padding: 0.5em;
659 | color: #333;
660 | background: #f8f8f8;
661 | border-radius: 3px;
662 | }
663 |
664 | .gutter pre {
665 | color: #999;
666 | }
667 |
668 | pre {
669 | color: #525252;
670 | }
671 |
672 | pre .function .keyword,
673 | pre .constant {
674 | color: #a71d5d;
675 | }
676 |
677 | pre .keyword {
678 |
679 | color: #a71d5d;
680 | }
681 |
682 | pre .attribute {
683 | color: #795da3;
684 | }
685 |
686 | pre .number,
687 | pre .literal {
688 | color: #0086b3;
689 | }
690 |
691 | /* pre .tag,*/
692 | pre .tag .title,
693 | pre .change,
694 | pre .winutils,
695 | pre .flow,
696 | pre .lisp .title,
697 | pre .clojure .built_in,
698 | pre .nginx .title,
699 | pre .tex .special {
700 | color: #63a35c;
701 | }
702 |
703 | pre .class .title {
704 | color: #fff;
705 | }
706 |
707 | pre .symbol,
708 | pre .symbol .string,
709 | pre .value,
710 | pre .regexp {
711 | color: #42b983;
712 | }
713 |
714 | pre .title {
715 | color: #795da3;
716 | }
717 |
718 | pre .tag .value,
719 | pre .string,
720 | pre .subst,
721 | pre .haskell .type,
722 | pre .preprocessor,
723 | pre .ruby .class .parent,
724 | pre .built_in,
725 | pre .sql .aggregate,
726 | pre .django .template_tag,
727 | pre .django .variable,
728 | pre .smalltalk .class,
729 | pre .javadoc,
730 | pre .django .filter .argument,
731 | pre .smalltalk .localvars,
732 | pre .smalltalk .array,
733 | pre .attr_selector,
734 | pre .pseudo,
735 | pre .addition,
736 | pre .stream,
737 | pre .envvar,
738 | pre .apache .tag,
739 | pre .apache .cbracket,
740 | pre .tex .command,
741 | pre .prompt {
742 | color: #183691;
743 | }
744 |
745 | pre .comment,
746 | pre .java .annotation,
747 | pre .python .decorator,
748 | pre .template_comment,
749 | pre .pi,
750 | pre .doctype,
751 | pre .deletion,
752 | pre .shebang,
753 | pre .apache .sqbracket,
754 | pre .tex .formula {
755 | color: #b3b3b3;
756 | }
757 |
758 | pre .coffeescript .javascript,
759 | pre .javascript .xml,
760 | pre .tex .formula,
761 | pre .xml .javascript,
762 | pre .xml .vbscript,
763 | pre .xml .css,
764 | pre .xml .cdata {
765 | opacity: 0.5;
766 | }
767 |
768 | .archive {
769 | padding-bottom: 20px;
770 | border-bottom: 1px solid #ddd;
771 | }
772 |
773 | .tag-list-count:before,
774 | .category-list-count:before {
775 | content: ' ('
776 | }
777 |
778 | .tag-list-count:after,
779 | .category-list-count:after {
780 | content: ')'
781 | }
782 |
783 | /* calendar */
784 | .post-calendar {
785 | width: 730px;
786 | margin-bottom: 20px;
787 | float: right;
788 | font-size: 1.3em;
789 | }
790 |
791 | .month,
792 | .wday {
793 | font-size: 9px;
794 | fill: #ccc;
795 | }
796 |
797 | .day:hover,
798 | .day.active {
799 | stroke-width: 1px;
800 | stroke: #000;
801 | shape-rendering: crispEdges;
802 | }
803 |
804 | .post-calendar .boxed-group {
805 | float: right;
806 | margin-bottom: 20px;
807 | }
808 |
809 | .calendar-footer {
810 | padding: 8px 14px 13px 12px;
811 | color: #767676;
812 | font-size: 11px;
813 | }
814 |
815 | .calendar-legend {
816 | float: right;
817 | }
818 |
819 | .calendar-legend ul {
820 | display: inline-block;
821 | }
822 |
823 | .calendar-legend ul li {
824 | width: 10px;
825 | height: 10px;
826 | float: left;
827 | margin-left: 3px;
828 | }
829 |
830 | .calendar-graph {
831 | width: 100%;
832 | padding: 5px 0;
833 | }
834 |
835 | .calendar-graph svg {
836 | padding-left: 5px;
837 | }
838 |
839 | .calendar-col {
840 | float: left;
841 | border-top: 1px solid #ccc;
842 | padding: 10px 0;
843 | height: 60px;
844 | text-align: center;
845 | width: 242px;
846 | color: #767676;
847 | font-size: 11px;
848 | }
849 |
850 | .calendar-col.mid {
851 | border-left: 1px solid #ccc;
852 | border-right: 1px solid #ccc;
853 | }
854 |
855 | .calendar-col-count {
856 | font-size: 24px;
857 | font-weight: 300;
858 | line-height: 1.3em;
859 | color: #333;
860 | }
861 |
862 | .contribution-list a {
863 | font-weight: bold;
864 | }
865 |
866 | .contribution-list span {
867 | color: #999;
868 | }
869 |
870 | .contribution-list li {
871 | padding: 10px 0;
872 | border-top: 1px solid #eee;
873 | }
874 |
875 | .contribution-list li:first-child {
876 | border: none;
877 | }
878 |
879 | .svg-tip {
880 | width: 180px;
881 | position: absolute;
882 | z-index: 999;
883 | padding: 10px;
884 | color: #bbb;
885 | text-align: center;
886 | background: rgba(0, 0, 0, 0.8);
887 | border-radius: 3px;
888 | font-size: 12px;
889 | white-space: nowrap;
890 | }
891 |
892 | .svg-tip:after {
893 | position: absolute;
894 | bottom: -10px;
895 | left: 50%;
896 | width: 5px;
897 | height: 5px;
898 | box-sizing: border-box;
899 | margin: 0 0 0 -5px;
900 | content: " ";
901 | border: 5px solid transparent;
902 | border-top-color: rgba(0, 0, 0, 0.8);
903 | }
904 |
905 | .boxed-group .fa-lock {
906 | line-height: 20px;
907 | font-size: 17px;
908 | }
909 |
910 | /* hide google search box */
911 | #___gcse_0 {
912 | visibility: hidden;
913 | }
914 |
915 | .clear-search {
916 | z-index: 999;
917 | text-align: center;
918 | position: absolute;
919 | right: 2px;
920 | width: 10px;
921 | cursor: pointer;
922 | }
923 |
924 | .clear-search:hover {
925 | font-weight: bold;
926 | font-size: 15px;
927 | }
928 |
--------------------------------------------------------------------------------
/source/css/main.styl:
--------------------------------------------------------------------------------
1 | @import "./_variables"
2 | @import "./base"
3 | @import "./navbar"
4 | @import "./header"
5 | @import "./code"
6 | @import "./post"
7 | @import "./footer"
8 | @import "./calendar"
9 |
10 | .category-list-count:before {
11 | content: ' '
12 | }
13 |
14 | .category-list-count:after {
15 | content: ' '
16 | }
17 | // left bar
18 | .blog-intro
19 | width: 25%
20 | padding-right: 16px
21 | float: left
22 | @media (max-width: $screen-sm)
23 | width: 100%
24 | padding-left: 16px
25 | padding-right: 16px
26 | background-color: #fafbfc
27 | border-bottom: 1px solid #e1e4e8
28 | .avatar
29 | width: 230px
30 | @media (max-width: $screen-sm)
31 | width: 110px
32 | display: block
33 | float: left
34 | margin-right: 15px
35 | &-user
36 | @media (max-width: $screen-sm)
37 | padding-top: 15px
38 | padding-bottom: 15px
39 | .user-detail
40 | border-top: 1px solid #eee
41 | padding: 16px 0
42 | list-style: none
43 | margin: 0
44 | font-size: 14px
45 | overflow: hidden;
46 | text-overflow: ellipsis;
47 | white-space: nowrap;
48 | vertical-align: top;
49 | @media (max-width: $screen-sm)
50 | padding: 0
51 | margin-top: 7px
52 | margin-left: -2px
53 | border: none
54 | font-size: 12px
55 | line-height: 1.8
56 | li
57 | padding-top: 4px
58 | @media (max-width: $screen-sm)
59 | padding: 0
60 | i
61 | display: inline-block
62 | width: 20px
63 | text-align: center
64 |
65 | .social-media
66 | border-top: 1px solid #eee
67 | padding: 16px 0
68 | h4
69 | font-size: 16px
70 | margin: 0 0 4px 0
71 | ul
72 | padding: 0
73 | list-style: none
74 | margin: 0
75 | &-item
76 | float: left
77 | margin-right: 5px
78 | font-size: 25px
79 | width: 35px
80 | height: 35px
81 | background: #F0F0F0
82 | border-radius: 3px
83 | text-align: center
84 | a
85 | line-height: 35px
86 | .fa-github
87 | color: #24292e
88 | .fa-weibo
89 | color: #E6162D
90 | .fa-linkedin
91 | color: #0077B5
92 |
93 |
94 | .user-name
95 | padding: 16px 0
96 | @media (max-width: $screen-sm)
97 | padding: 0
98 |
99 | .blog-title
100 | font-size: 26px
101 | line-height: 30px
102 | font-weight: 600
103 | @media (max-width: $screen-sm)
104 | margin: 0
105 | font-size: 16px
106 | line-height: 1.5
107 |
108 | .blog-author
109 | font-size: 20px;
110 | font-style: normal;
111 | font-weight: 300;
112 | line-height: 24px;
113 | color: #666;
114 | @media (max-width: $screen-sm)
115 | margin: 0
116 | font-size: 12px
117 |
118 | .blog-description
119 | margin-bottom: 12px
120 | color: #6a737d
121 | font-size: 14px
122 | @media (max-width: $screen-sm)
123 | clear: both
124 | font-size: 12px
125 | margin: 8px 0 0 0
126 |
127 | .blog-detail
128 | width: 75%
129 | padding-left: 8px
130 | float: left
131 | @media (max-width: $screen-sm)
132 | width: 100%
133 | padding-left: 16px
134 | padding-right: 16px
135 | &-nav
136 | border-bottom: 1px solid #d1d5da
137 | ul
138 | list-style: none
139 | padding: 0
140 | margin: 0
141 | li
142 | float: left
143 | padding: 0
144 | height: 60px
145 | color: #586069
146 | &.selected
147 | border-bottom: 2px solid #e36209
148 | a, a:hover, a:link, a:visited
149 | color: #24292e
150 | a, a:hover, a:link, a:visited
151 | text-decoration: none
152 | color: #586069
153 | padding: 0 20px
154 | display: inline-block
155 | line-height 60px
156 |
157 | .counter
158 | background: #eee
159 | border-radius: 20px
160 | padding: 2px 5px
161 | display: inline-block
162 | font-weight:600
163 | line-height: 1
164 | font-size: 12px
165 |
166 | .right-title
167 | margin-top: 24px
168 | margin-bottom: 8px
169 | font-size: 16px
170 |
171 | .user-info
172 | padding-right: 16px
173 | &-avatar
174 | width: 230px
175 | max-height: 230px
176 | vertical-align: middle
177 | display: inline-block
178 | overflow: hidden
179 |
180 | .recent-post
181 | list-style: none
182 | padding: 0
183 | margin: 0 0 24px 0
184 | @media (max-width: $screen-sm)
185 | width: 100%
186 | border: 1px solid #d1d5da
187 | border-radius: 3px
188 | &-item
189 | border: 1px solid #d1d5da
190 | border-radius: 3px
191 | width: 354px
192 | display: flex
193 | padding: 16px
194 | margin-bottom: 16px
195 | height: 118px
196 | float: left
197 | @media (max-width: $screen-sm)
198 | width: 100%
199 | float: none
200 | border: none
201 | height: auto
202 | margin: 0
203 | padding: 14px
204 | border-top: 1px solid #d1d5da
205 |
206 | &:first-child
207 | border-top: none
208 |
209 | /* quick fix for #18 */
210 | padding: 0
211 |
212 | .clearfix
213 | width: 100%
214 | .post-title
215 | position: relative
216 | i
217 | position: absolute
218 | top: 20px
219 | left: 14px
220 | a
221 | display: block
222 | padding: 14px
223 | padding-left: 32px
224 |
225 | &:nth-child(odd)
226 | margin-right: 5px
227 | @media (max-width: $screen-sm)
228 | magrin: 0
229 | &:nth-child(even)
230 | margin-left: 5px
231 | @media (max-width: $screen-sm)
232 | margin: 0
233 |
234 | .post-title
235 | margin: 0
236 | line-height: 21px
237 | max-width: 325px
238 | @media (max-width: $screen-sm)
239 | white-space: normal
240 | i
241 | padding-right: 5px
242 |
243 | .post-description
244 | margin: 8px 0 16px 0
245 | font-size: 12px
246 | color: #586069
247 | height: 20px
248 | max-width: 325px
249 |
250 | .post-info
251 | margin: 0
252 | color: #586069
253 | font-size: 12px
254 | span
255 | margin-right: 16px
256 | a.category-link
257 | color: inherit
258 |
259 | // right bar
260 | .archive-list
261 | list-style: none
262 | padding: 0
263 | &-item
264 | padding: 24px 0
265 | border-bottom: 1px solid #e1e4e8
266 | h2
267 | margin: 0
268 | font-size: 20px
269 | font-weight: 600
270 | p
271 | font-size: 14px
272 | color: #586069
273 | margin: 6px 0 8px 0
274 | .post-info
275 | margin-top: 8px
276 | font-size: 12px
277 |
278 | .tag-list
279 | padding: 4px 0
280 | list-style: none
281 | margin: 0
282 | &-item
283 | float: left
284 | margin: 0 0.5em 0.5em 0
285 | padding: 0.3em 0.9em
286 | background: #f1f8ff
287 | border-radius: 3px
288 | color: #0366d6
289 | font-size: 12px
290 | &:hover
291 | background: #ddeeff
292 | .tag-list-count
293 | padding-left: 5px
294 | font-weight: bold
295 |
296 | // google search
297 | #google-search
298 | display: table-cell
299 | width: 100%
300 |
301 | #___gcse_0
302 | input[name="search"]
303 | background: none !important
304 | color: $white
305 | border: none
306 | min-height: 30px
307 | background: none
308 | padding: 0 8px !important
309 | vertical-align: middle
310 | outline: none
311 | color: inherit
312 | font-size: inherit
313 | text-indent: 0 !important
314 | &:focus
315 | outline-width: 0
316 |
317 | .gsc-control-cse
318 | background-color: transparent
319 | border: none
320 | padding: 0
321 |
322 | .gsc-search-button, .gsc-clear-button
323 | display: none
324 |
325 | .gsc-branding
326 | display: none !important
327 |
328 | .gsc-input
329 | padding-right: 0 !important
330 |
331 | .gsc-input-box
332 | border:none
333 | background: none
334 | &-focus
335 | box-shadow: none
336 |
337 | .gsib_a
338 | padding: 0
339 |
340 | .gsib_b
341 | display: none
342 |
343 | .disqus-container
344 | @media (max-width: $screen-sm)
345 | padding: 0 15px
346 |
--------------------------------------------------------------------------------
/source/css/navbar.styl:
--------------------------------------------------------------------------------
1 | .navbar-wrapper
2 | position: relative
3 |
4 | .navbar
5 | padding-top: 12px
6 | padding-bottom: 12px
7 | color: rgba(255, 255, 255, 0.75)
8 | background-color: #24292e
9 | &-logo
10 | color: $white !important
11 | font-size: 37.32px
12 | float: left
13 | margin: -13px 15px -15px -2px
14 | white-space: nowrap
15 | @media (max-width: $screen-sm)
16 | margin-left: 10px
17 | &-nav
18 | padding: 0
19 | margin: 0
20 | list-style: none
21 | li
22 | float: left
23 | a
24 | display: block
25 | padding: 5px 8px
26 | font-weight: 600
27 | line-height: 20px
28 | color: rgba(255, 255, 255, 0.75)
29 | &:hover
30 | color: $white
31 | text-decoration: none
32 |
33 | &-search
34 | width: 300px
35 | margin-right: 10px
36 | font-size: 13px
37 | &-form
38 | display: table
39 | color: #fff
40 | background-color: rgba(255, 255, 255, 0.125)
41 | border-radius: 3px
42 |
43 | label
44 | display: table-cell
45 | width: 1%
46 | padding: 0 8px
47 | color: rgba(255, 255, 255, 0.75)
48 | border-right: 1px solid #282e34
49 | font-size: inherit
50 | white-space: nowrap
51 | vertical-align: middle
52 | line-height: 28px
53 | &:hover
54 | background-color: rgba(255, 255, 255, 0.12)
55 | color: #fff
56 |
57 | input
58 | display: table-cell
59 | width: 100%
60 | border: none
61 | min-height: 30px
62 | background: none
63 | padding: 0 8px
64 | vertical-align: middle
65 | outline: none
66 | color: inherit
67 | font-size: inherit
68 | &:focus
69 | outline-width: 0
70 |
71 | .user-nav
72 | a
73 | padding: 5px 10px
74 | font-size: 16px
75 | margin: 0 0 -10px 0
76 | &:hover
77 | color: $white
78 |
79 | li:last-child
80 | margin-right: -10px
81 |
82 | &-logo
83 | a
84 | line-height: 20px
85 | img
86 | width: 20px
87 | height: 20px
88 | vertical-align: middle
89 | margin-top: -3px
90 |
91 | &-notification
92 | position: relative
93 |
94 | &-unread
95 | position: absolute
96 | top: 0
97 | right: 4px
98 | z-index: 2
99 | width: 14px
100 | height: 14px
101 | color: $white
102 | text-align: center
103 | background-image: linear-gradient(rgb(84, 163, 255), rgb(0, 110, 237))
104 | background-clip: padding-box
105 | border-width: 2px
106 | border-style: solid
107 | border-color: rgb(36, 41, 46)
108 | border-image: initial
109 | border-radius: 50%
110 |
--------------------------------------------------------------------------------
/source/css/post.styl:
--------------------------------------------------------------------------------
1 | .post
2 | &-container
3 | border: $border-grey
4 | border-radius: 3px
5 | margin-bottom: 30px
6 | @media (max-width: $screen-sm)
7 | border-radius: 0
8 | border-right: none
9 | border-left: none
10 | border-top: none
11 | >h3
12 | background-color: $grey-lighter
13 | margin: 0
14 | padding: 10px 10px 10px
15 | font-size: 14px
16 | line-height: 17px
17 | border-bottom: 1px solid $grey-border
18 | border-radius(3px 3px 0 0)
19 | @media (max-width: $screen-sm)
20 | padding: 15px
21 | &-date
22 | font-size: 13px
23 | line-height: 20px
24 | color: #586069
25 | font-weight: normal
26 |
27 | &-content
28 | @media (max-width: $screen-sm)
29 | padding: 15px
30 | font-size: 15px
31 | padding: 45px
32 | word-wrap: break-word
33 | font-family: $font-family-main
34 | font-size: 16px
35 | >*:first-child
36 | margin-top: 0 !important
37 | h1, h2, h3, h4, h5, h6
38 | font-weight: 600
39 | line-height: 1.25
40 | margin-top: 24px
41 | margin-bottom: 16px
42 | img
43 | max-width: 100%
44 | h1
45 | padding-bottom: 0.3em
46 | font-size: 2em
47 | border-bottom: $border-grey-light
48 | h2
49 | padding-bottom: 0.3em
50 | font-size: 1.5em
51 | border-bottom: $border-grey-light
52 | h3
53 | font-size: 1.25em
54 |
55 | p
56 | margin-top: 0
57 | margin-bottom: 16px
58 |
59 | code
60 | border-radius: 3px
61 | background-color: #f3f3f4
62 | padding-top: 0.2em
63 | padding-bottom: 0.2em
64 | font-size: 85%
65 | font-family: $font-family-code
66 | &::before, &::after
67 | letter-spacing: -0.2em
68 | content: "\00a0"
69 |
70 | blockquote
71 | padding: 0 1em
72 | color: #6a737d
73 | border-left: 0.25em solid #dfe2e5
74 | margin: 0
75 |
76 | >table
77 | display: block
78 | width: 100%
79 | overflow: auto
80 | border-spacing: 0
81 | border-collapse: collapse
82 | tr
83 | border-top: 1px solid #c6cbd1
84 | &:nth-child(2n)
85 | background-color: $grey-lighter
86 |
87 | th, td
88 | padding: 6px 13px
89 | border: 1px solid #dfe2e5
90 | th
91 | font-weight: 600
92 | kbd
93 | display: inline-block;
94 | padding: 3px 5px;
95 | font-size: 11px;
96 | line-height: 10px;
97 | color: #444d56;
98 | vertical-align: middle;
99 | background-color: #fafbfc;
100 | border: solid 1px #c6cbd1;
101 | border-bottom-color: #959da5;
102 | border-radius: 3px;
103 | box-shadow: inset 0 -1px 0 #959da5;
104 |
--------------------------------------------------------------------------------
/source/js/main.js:
--------------------------------------------------------------------------------
1 | new Vue({
2 | el: '#replica-app',
3 | data: {
4 | moment: moment
5 | }
6 | });
7 |
--------------------------------------------------------------------------------
/test/main.test.js:
--------------------------------------------------------------------------------
1 | var mocha = require('mocha');
2 | var should = require('chai').should();
3 | var moment = require('moment');
4 |
5 | describe('getLongestStreak', function() {
6 | it('should 0, when no posts', function() {
7 | var posts = [];
8 | getLongestStreak(posts).should.deep.equal({
9 | count: 0,
10 | start: null,
11 | end: null
12 | })
13 | });
14 |
15 | it('should 1, when 1 posts', function() {
16 | var date = '2015-01-12';
17 | var posts = [{date: date}];
18 | getLongestStreak(posts).should.deep.equal({
19 | count: 1,
20 | start: date,
21 | end: date
22 | })
23 | });
24 |
25 | it('should 1, when multiple post in one day', function() {
26 | var date = '2015-01-12';
27 | var posts = [{date: date}, {date: date}];
28 | getLongestStreak(posts).should.deep.equal({
29 | count: 1,
30 | start: date,
31 | end: date
32 | })
33 | });
34 |
35 | it('should 3, when 3 days streak, and one post each day', function() {
36 | var posts = [{date: '2016-03-01'}, {date: '2016-03-03'}, {date: '2016-03-04'}, {date: '2016-03-05'}, {date: '2016-03-08'}];
37 | getLongestStreak(posts).should.deep.equal({
38 | count: 3,
39 | start: '2016-03-03',
40 | end: '2016-03-05'
41 | });
42 | });
43 |
44 | it('should 2, when 2days streak, and multiple post each day', function() {
45 | var posts = [{date: '2016-03-01'}, {date: '2016-03-03'},
46 | {date: '2016-03-03'}, {date: '2016-03-04'}, {date: '2016-03-04'}];
47 | getLongestStreak(posts).should.deep.equal({
48 | count: 2,
49 | start: '2016-03-03',
50 | end: '2016-03-04'
51 | });
52 | });
53 |
54 | });
55 |
56 | describe('getLatestStreak', function() {
57 | it('should 0, when no posts', function() {
58 | var posts = [];
59 | getLongestStreak(posts).should.deep.equal({
60 | count: 0,
61 | start: null,
62 | end: null
63 | })
64 | });
65 |
66 | it('should 1, when 1 posts', function() {
67 | var date = '2015-01-12';
68 | var posts = [{date: date}];
69 | getLongestStreak(posts).should.deep.equal({
70 | count: 1,
71 | start: date,
72 | end: date
73 | })
74 | });
75 |
76 | it('should 1, when multiple post in one day', function() {
77 | var date = '2015-01-12';
78 | var posts = [{date: date}, {date: date}];
79 | getLongestStreak(posts).should.deep.equal({
80 | count: 1,
81 | start: date,
82 | end: date
83 | })
84 | });
85 |
86 | it('should 2, when 2days streak, and multiple post each day', function() {
87 | var posts = [{date: '2016-03-05'}, {date: '2016-03-07'}, {date: '2016-03-07'},
88 | {date: '2016-03-08'}, {date: '2016-03-08'}, {date: '2016-03-10'}];
89 | getLongestStreak(posts).should.deep.equal({
90 | count: 2,
91 | start: '2016-03-07',
92 | end: '2016-03-08'
93 | });
94 | });
95 |
96 | });
97 |
98 | describe('getColorByLength', function() {
99 | var colors = ['#eee', '#d6e685', '#8cc665', '#44a340', '#1e6823'];
100 | it('should #eee, when max=0', function() {
101 | getColorByLength(0, 0).should.equal(colors[0]);
102 | });
103 |
104 | it('should return correct color when max<5', function() {
105 | getColorByLength(0, 3).should.equal(colors[0]);
106 | getColorByLength(1, 3).should.equal(colors[1]);
107 | getColorByLength(2, 4).should.equal(colors[2]);
108 | getColorByLength(4, 4).should.equal(colors[4]);
109 | });
110 |
111 | it('should return correct color when max>5', function() {
112 | getColorByLength(0, 10).should.equal(colors[0]);
113 | getColorByLength(1, 10).should.equal(colors[1]);
114 | getColorByLength(2, 10).should.equal(colors[1]);
115 | getColorByLength(4, 10).should.equal(colors[2]);
116 | getColorByLength(8, 10).should.equal(colors[4]);
117 | getColorByLength(5, 6).should.equal(colors[4]);
118 | });
119 |
120 | });
121 |
122 | /**
123 | *
124 | * @param posts
125 | * @returns {*}
126 | */
127 | function getLongestStreak(posts) {
128 | if (!posts.length) return {count: 0, start: null, end: null};
129 |
130 | var endTemp = 0;
131 | var lenTemp = 1;
132 | var endIndex = 0;
133 | var lenMax = 1;
134 |
135 | for (var i = 0; i < posts.length - 1; i++) {
136 | var date0 = posts[i].date;
137 | var date1 = posts[i + 1].date;
138 | var isContinuousDates = moment(date1).diff(date0, 'days') < 2;
139 |
140 | if (isContinuousDates) {
141 | lenTemp++;
142 | endTemp = i + 1;
143 | } else {
144 | lenTemp = 1;
145 | }
146 |
147 | if (lenTemp > lenMax) {
148 | endIndex = endTemp;
149 | lenMax = lenTemp;
150 | }
151 | }
152 |
153 | var startDate = posts[endIndex - lenMax + 1].date;
154 | var endDate = posts[endIndex].date;
155 | var count = moment(endDate).diff(startDate, 'days') + 1;
156 | return {
157 | count: count,
158 | start: startDate,
159 | end: endDate
160 | }
161 | }
162 |
163 | /**
164 | * because it is static, but TODAY is dynamic, so we CANNOT get current streak directly
165 | *
166 | * @param posts sorted by date from old to new
167 | * @returns {{count: *, start: string, end: string}}
168 | */
169 | function getLatestStreak(posts) {
170 | if (!posts.length) return {count: 0, start: null, end: null};
171 | posts.reverse();
172 |
173 | var endTemp = 0;
174 | var lenTemp = 1;
175 | var endIndex = 0;
176 | var lenMax = 1;
177 |
178 | for (var i = 0; i < posts.length - 1; i++) {
179 | var date0 = posts[i].date;
180 | var date1 = posts[i + 1].date;
181 | var isContinuousDates = moment(date0).diff(date1, 'days') < 2;
182 |
183 | if (isContinuousDates) {
184 | lenTemp++;
185 | endTemp = i + 1;
186 | } else {
187 | lenTemp = 1;
188 | break;
189 | }
190 |
191 | if (lenTemp > lenMax) {
192 | endIndex = endTemp;
193 | lenMax = lenTemp;
194 | }
195 | }
196 |
197 | var endDate = posts[endIndex - lenMax + 1].date;
198 | var startDate = posts[endIndex].date;
199 | var count = moment(endDate).diff(startDate, 'days') + 1;
200 | return {
201 | count: count,
202 | start: startDate,
203 | end: endDate
204 | }
205 | }
206 |
207 | /**
208 | *
209 | * @param len
210 | * @param max
211 | * @returns {string}
212 | */
213 | function getColorByLength(len, max) {
214 | var colors = ['#eee', '#d6e685', '#8cc665', '#44a340', '#1e6823'];
215 | var colorsLen = colors.length - 1;
216 | var color = len ? colors[0] : colors[1];
217 | var interval = max / colorsLen;
218 | if (max < colorsLen) {
219 | color = colors[len];
220 | } else {
221 | color = colors[Math.ceil(len / interval)];
222 | }
223 | return color;
224 | }
225 |
--------------------------------------------------------------------------------
5 | <%- partial('_partial/navbar-secondary', {nav_selected: page.title}) %>
6 |
7 |
17 |
8 |
9 | <% if(page.title === 'tags'){ %>
10 | <%- list_tags() %>
11 | <% } %>
12 | <% if(page.title === 'categories'){ %>
13 | <%- list_categories() %>
14 | <% } %>
15 |
16 |