xaoxuu
7 years ago
parent
dc91346625
commit
36842785fa
52 changed files with 5285 additions and 2 deletions
@ -1,2 +1,32 @@ |
||||
# hexo-theme-material-flow |
||||
demo : https://blog.xaoxuu.com |
||||
# Material Flow |
||||
|
||||
此主题由 [stkevintan/hexo-theme-material-flow](https://github.com/stkevintan/hexo-theme-material-flow) 改编。 |
||||
|
||||
demo：[https://blog.xaoxuu.com](https://blog.xaoxuu.com) |
||||
|
||||
<div> |
||||
<img width="1680" alt="screen shot 2017-10-24 at 11 51 57 am" src="https://user-images.githubusercontent.com/16400144/31924422-98c29398-b8b3-11e7-9d4c-d23ca4c11e81.png"> |
||||
</div> |
||||
|
||||
## Installation |
||||
```bash |
||||
# change to work dir |
||||
cd /your_blog_dir/ |
||||
# install dependencies |
||||
npm i -S hexo-generator-search hexo-generator-feed hexo-renderer-less hexo-autoprefixer hexo-generator-json-content |
||||
# download source |
||||
git clone https://github.com/stkevintan/hexo-theme-material-flow themes/material-flow |
||||
``` |
||||
|
||||
## Configuration |
||||
1. Change the value of `theme` to `material-flow` in `_config.yml`. |
||||
2. Put your avatar && favicon images to `source/images/`. |
||||
3. Edit `_config.yml` and `themes/material-flow/_config.yml` for your needs. |
||||
|
||||
|
||||
Here are some examples: |
||||
1. [_config.yml](https://github.com/stkevintan/hexo/blob/master/_config.yml) |
||||
2. [themes/material-flow/_config.yml](https://github.com/stkevintan/hexo/blob/master/themes/material-flow/_config.yml) |
||||
|
||||
## More |
||||
Please refer to offical doc : <https://hexo.io/docs/index.html> |
||||
|
||||
@ -0,0 +1,97 @@ |
||||
# Search |
||||
search: |
||||
enable: true |
||||
service: hexo # google/hexo/algolia/azure/baidu |
||||
# google |
||||
google_api_key: |
||||
google_engine_id: |
||||
# algolia |
||||
algolia_app_id: |
||||
algolia_api_key: |
||||
algolia_index_name: |
||||
# azure |
||||
azure_service_name: |
||||
azure_index_name: |
||||
azure_query_key: |
||||
# baidu |
||||
baidu_api_id: |
||||
|
||||
# friends link |
||||
links: |
||||
|
||||
# navigation menu |
||||
menu: |
||||
- name: blogs |
||||
slug: home |
||||
fa: rss |
||||
url: / |
||||
- name: archives |
||||
slug: archives |
||||
fa: archive |
||||
url: /archives |
||||
- name: projects |
||||
slug: projects |
||||
fa: cube |
||||
url: http://xaoxuu.com/index.html#proj |
||||
# - name: DOWNLOADS |
||||
# slug: download |
||||
# fa: download |
||||
# url: http://download.xaoxuu.com |
||||
# - name: 留言 |
||||
# slug: comments |
||||
# url: http://xaoxuu.com/index.html#disqus |
||||
- name: about |
||||
slug: about |
||||
fa: user |
||||
url: http://xaoxuu.com |
||||
# - name: 后台 |
||||
# slug: login |
||||
# fa: lock |
||||
# url: /admin |
||||
# widgets |
||||
widgets: |
||||
- about |
||||
# - links |
||||
- categories |
||||
- tagcloud |
||||
- socials |
||||
|
||||
# Less |
||||
less: |
||||
compress: true |
||||
|
||||
|
||||
|
||||
# use url, not username |
||||
social: |
||||
- slug: rss |
||||
url: /atom.xml |
||||
- slug: github |
||||
url: https://github.com/xaoxuu |
||||
- slug: instagram |
||||
url: https://www.instagram.com/xaoxuu |
||||
- slug: dribbble |
||||
url: https://www.dribbble.com/xaoxuu |
||||
- slug: google-plus |
||||
url: https://plus.google.com/u/0/105328339611794285997 |
||||
- slug: twitter |
||||
url: https://twitter.com/xaoxuu |
||||
|
||||
|
||||
|
||||
contacts: |
||||
- name: Email |
||||
badget: me@xaoxuu.com |
||||
url: mailto:me@xaoxuu.com |
||||
- name: RSS |
||||
badget: subscribe me |
||||
url: /atom.xml |
||||
- name: GitHub |
||||
badget: "@xaoxuu" |
||||
url: https://github.com/xaoxuu |
||||
- name: Instagram |
||||
badget: "@xaoxuu" |
||||
url: https://www.instagram.com/xaoxuu |
||||
- name: Twitter |
||||
badget: "@xaoxuu" |
||||
url: https://www.twitter.com/xaoxuu |
||||
@ -0,0 +1,45 @@ |
||||
<% if (is_tag()) { %> |
||||
<script> |
||||
window.subData= { title:'tag : <%= page.tag %>'} |
||||
</script> |
||||
<% } else if (is_archive()) { %> |
||||
<script> |
||||
window.subData= { title:'year : <%= page.year %><%= page.month ? '.' + page.month : '' %>'} |
||||
</script> |
||||
<% } else if (is_category()) { %> |
||||
<script> |
||||
window.subData= { title:'category : <%= page.category %>'} |
||||
</script> |
||||
<% } %> |
||||
<section class="post-list"> |
||||
<% page.posts.each(function(post){ %> |
||||
<% post.categories.each(function(item){ %> |
||||
<% if (item.name !== "worklog" || is_category()) { %> |
||||
<div class='post-wrapper'> |
||||
<%- partial('post', {post: post}) %> |
||||
</div> |
||||
<% } %> |
||||
<%})%> |
||||
<% }) %> |
||||
</section> |
||||
|
||||
<% if (page.total > 1) { %> |
||||
<nav id="page-nav"> |
||||
<% if (page.prev != 0) { %> |
||||
<a class="prev" rel="prev" href="<%= url_for(page.prev_link) %>"> |
||||
<span class="icon icon-chevron-left"></span> |
||||
<span class="text">PREVIOUS</span> |
||||
</a> |
||||
<% } %> |
||||
<% if (page.next != 0) { %> |
||||
<a class="next" rel="next" href="<%= url_for(page.next_link) %>"> |
||||
<span class="text">NEXT</span> |
||||
<span class="icon icon-chevron-right"></span> |
||||
</a> |
||||
<% } %> |
||||
</nav> |
||||
|
||||
<% } %> |
||||
<footer id="footer" class="clearfix"> |
||||
Hosted by <a href="https://pages.coding.me">Coding Pages</a> |
||||
</footer> |
||||
@ -0,0 +1,11 @@ |
||||
<% if (post.categories && post.categories.length){ %> |
||||
<% |
||||
var cats = []; |
||||
post.categories.forEach(function(cat){ |
||||
cats.push('<a href="'+url_for(cat.path)+'">' + cat.name + '</a>'); |
||||
}); |
||||
%> |
||||
<div class='cats'> |
||||
<%- cats.join(', ') %> |
||||
</div> |
||||
<% } %> |
||||
@ -0,0 +1,17 @@ |
||||
<footer id="footer" class="clearfix"> |
||||
|
||||
<div class="social-wrapper"> |
||||
<% if (theme.social) { %> |
||||
<% theme.social.forEach(function(value, key) { |
||||
if (value.url && value.slug) { %> |
||||
<a href="<%= value.url %>" class="social <%= value.slug %>" |
||||
target="_blank" rel="external"> |
||||
<i class="fa fa-<%= value.slug %>"></i> |
||||
</a> |
||||
<% } }); %> |
||||
<% } %> |
||||
</div> |
||||
<div>博客内容遵循 <a target="_blank" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">知识共享 署名 - 非商业性 - 相同方式共享 4.0 国际协议</a></div> |
||||
<div>Theme <a href="https://github.com/xaoxuu/hexo-theme-material-flow" target="_blank" class="codename">MaterialFlow</a> designed by <a href="http://blog.xaoxuu.com" target="_blank" class="codename">xaoxuu</a>.</div> |
||||
|
||||
</footer> |
||||
@ -0,0 +1,45 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
||||
<% |
||||
var title = page.title; |
||||
if (is_archive()) { |
||||
title = 'Archives'; |
||||
if (is_month()) |
||||
title += ': ' + page.year + '/' + page.month; |
||||
else if (is_year()) |
||||
title += ': ' + page.year; |
||||
} |
||||
else if (is_category()) |
||||
title = 'Category: ' + page.category; |
||||
else if (is_tag()) |
||||
title = 'Tag: ' + page.tag; |
||||
%> |
||||
<title><% if (title) { %><%= title %> | <% } %><%= config.title %></title> |
||||
<meta name="description" content="<%= config.description %>" /> |
||||
<meta name="keywords" content="<%=(config.keywords||[]).join(',') %>" /> |
||||
<meta name="HandheldFriendly" content="True" /> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<%- favicon_tag(config.favicon) %> |
||||
<%- feed_tag(config.feed.path, {title: config.title}) %> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
||||
<%- open_graph({ |
||||
twitter_id: theme.twitter, |
||||
google_plus: theme.google_plus, |
||||
fb_admins: theme.fb_admins, |
||||
fb_app_id: theme.fb_app_id}) %> |
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> |
||||
<link href="https://fonts.googleapis.com/css?family=Inconsolata|Titillium+Web" rel="stylesheet"> |
||||
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet"> |
||||
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> |
||||
<link href='//cdn.bootcss.com/node-waves/0.7.5/waves.min.css' rel='stylesheet'> |
||||
<%- css('style.css') %> |
||||
<script> |
||||
function setLoadingBarProgress(num) { |
||||
document.getElementById('loading-bar').style.width=num+"%"; |
||||
} |
||||
</script> |
||||
</head> |
||||
@ -0,0 +1,60 @@ |
||||
<header class="l_header"> |
||||
<div class='wrapper'> |
||||
<div class="nav-main container container--flex"> |
||||
<a class="logo flat-box" href='<%= url_for("/") %>' > |
||||
<!-- <i class="fa fa-home"></i> --> |
||||
<%- config.title %> |
||||
</a> |
||||
<div class='menu'> |
||||
<ul class='h-list'> |
||||
<% (theme.menu||[]).forEach(function(value){ %> |
||||
<li> |
||||
<a class='flat-box nav-<%=value.slug%>' href='<%=url_for(value.url)%>'> |
||||
<i class="fa fa-<%=value.fa%>"></i> |
||||
<%=value.name%> |
||||
</a> |
||||
</li> |
||||
<%})%> |
||||
</ul> |
||||
<div class='underline'></div> |
||||
</div> |
||||
<% if (theme.search.enable === true) { %> |
||||
<div class="m_search"> |
||||
<form name="searchform" class="form u-search-form"> |
||||
<input type="text" class="input u-search-input" placeholder="Search" /> |
||||
<span class="icon"><i class="fa fa-search"></i></span> |
||||
</form> |
||||
</div> |
||||
<% } %> |
||||
<ul class='switcher h-list'> |
||||
<% if (theme.search.enable === true) { %> |
||||
<li class='s-search'><a href='javascript:void(0)'><i class="fa fa-search flat-box"></i></span></a></li> |
||||
<% } %> |
||||
<li class='s-menu'><a href='javascript:void(0)'><i class="fa fa-navicon flat-box"></i></a></li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<div class='nav-sub container container--flex'> |
||||
<a class="logo" class="flat-box" href='javascript:void(0)'> |
||||
xaoxuu |
||||
</a> |
||||
|
||||
<ul class='switcher h-list'> |
||||
<li class='s-comment'><a href='javascript:void(0)'><i class="fa fa-comments flat-box"></i></a></li> |
||||
<li class='s-top'><a href='javascript:void(0)'><i class="fa fa-arrow-up flat-box"></i></a></li> |
||||
<li class='s-toc'><a href='javascript:void(0)'><i class="fa fa-list-ul flat-box"></i></a></li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</header> |
||||
<aside class="menu-phone"> |
||||
<nav> |
||||
<% (theme.menu||[]).forEach(function(value, key) { |
||||
if (value.url && value.slug && value.name) { %> |
||||
<a href="<%= url_for(value.url) %>" class="nav-<%= value.slug %> nav"> |
||||
<i class="fa fa-<%=value.fa%>"></i> |
||||
<%= value.name %> |
||||
</a> |
||||
<% } }); %> |
||||
</nav> |
||||
</aside> |
||||
@ -0,0 +1,4 @@ |
||||
<div id="loading-bar-wrapper"> |
||||
<div id="loading-bar"></div> |
||||
</div> |
||||
|
||||
@ -0,0 +1,37 @@ |
||||
<article class="post reveal<%= (post.title) ? "" : "no-title" %>"> |
||||
<section class="meta"> |
||||
|
||||
<h2 class="title"> |
||||
<a href="<%- url_for(post.path) %>"> |
||||
<% if(post.title){ %> |
||||
<%= post.title %> |
||||
<% } else if (post.date) { %> |
||||
<%= date(post.date, 'YYYY-MM-DD dddd') %> |
||||
<% } %> |
||||
</a> |
||||
</h2> |
||||
|
||||
<time> |
||||
<%= date(post.date, 'YYYY-MM-DD dddd') %> |
||||
</time> |
||||
<%- partial('categories',{post:post}) %> |
||||
</section> |
||||
<section class="article typo"> |
||||
<%- post.excerpt || post.content %> |
||||
<!-- <%- post.excerpt %> --> |
||||
|
||||
<% if (post.excerpt) { %> |
||||
<div class="readmore"> |
||||
<a href="<%- url_for(post.path) %>" class="flat-box">READ MORE</a> |
||||
</div> |
||||
<% } %> |
||||
|
||||
<% if (post.tags && post.tags.length) { %> |
||||
<div class="full-width auto-padding tags"> |
||||
<% post.tags.each(function(item){ %> |
||||
<a href="<%- url_for(item.path) %>"><i class="fa fa-tag"></i> <%=item.name %></a> |
||||
<%})%> |
||||
</div> |
||||
<% } %> |
||||
</section> |
||||
</article> |
||||
@ -0,0 +1,36 @@ |
||||
<% if (config.disqus_shortname){ %> |
||||
<script> |
||||
var disqus_shortname = '<%= config.disqus_shortname %>'; |
||||
<% if (page.permalink){ %> |
||||
var disqus_url = '<%= page.permalink %>'; |
||||
<% } %> |
||||
(function(){ |
||||
var dsq = document.createElement('script'); |
||||
dsq.type = 'text/javascript'; |
||||
dsq.async = true; |
||||
dsq.src = '//' + disqus_shortname + '.disqus.com/<% if (page.comments) { %>embed.js<% } else { %>count.js<% } %>'; |
||||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); |
||||
})(); |
||||
</script> |
||||
<% } %> |
||||
|
||||
<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> |
||||
<script src='//cdn.bootcss.com/node-waves/0.7.5/waves.min.js'></script> |
||||
<script src="//cdn.bootcss.com/scrollReveal.js/3.3.2/scrollreveal.min.js"></script> |
||||
<%- js('js/jquery.fitvids.js') %> |
||||
<script> |
||||
var GOOGLE_CUSTOM_SEARCH_API_KEY = "<%- theme.search.google_api_key %>"; |
||||
var GOOGLE_CUSTOM_SEARCH_ENGINE_ID = "<%- theme.search.google_engine_id %>"; |
||||
var ALGOLIA_API_KEY = "<%- theme.search.algolia_api_key %>"; |
||||
var ALGOLIA_APP_ID = "<%- theme.search.algolia_app_id %>"; |
||||
var ALGOLIA_INDEX_NAME = "<%- theme.search.algolia_index_name %>"; |
||||
var AZURE_SERVICE_NAME = "<%- theme.search.azure_service_name %>"; |
||||
var AZURE_INDEX_NAME = "<%- theme.search.azure_index_name %>"; |
||||
var AZURE_QUERY_KEY = "<%- theme.search.azure_query_key %>"; |
||||
var BAIDU_API_ID = "<%- theme.search.baidu_api_id %>"; |
||||
var SEARCH_SERVICE = "<%- theme.search.service %>"; |
||||
var ROOT = "<%- config.root %>"||"/"; |
||||
if(!ROOT.endsWith('/'))ROOT += '/'; |
||||
</script> |
||||
<%- js('js/search.js') %> |
||||
<%- js('js/app.js') %> |
||||
@ -0,0 +1,3 @@ |
||||
<% (theme.widgets||[]).forEach(function(name){ %> |
||||
<%- partial('../_widget/'+name) %> |
||||
<% }) %> |
||||
@ -0,0 +1,9 @@ |
||||
<section class='m_widget about'> |
||||
<% if(config.avatar) { %> |
||||
<img class='avatar waves-image' src='<%= url_for(config.avatar) %>' /> |
||||
<%} %> |
||||
<!-- <div class='header'><%=config.author %></div> --> |
||||
<div class='content'> |
||||
<!-- <div class='desc'><%=config.description %></div> --> |
||||
</div> |
||||
</section> |
||||
@ -0,0 +1,12 @@ |
||||
<section class='m_widget categories'> |
||||
<div class='header'>CATEGORIES</div> |
||||
<div class='content'> |
||||
<% if (site.categories.length){ %> |
||||
<ul class="entry"> |
||||
<% site.categories.sort('name').each(function(item){ %> |
||||
<li><a class="flat-box" href="<%= url_for(item.path) %>"><div class='name'><%= item.name %></div><div class='badget'><%= item.posts.length %></div></a></li> |
||||
<% }); %> |
||||
</ul> |
||||
<% } %> |
||||
</div> |
||||
</section> |
||||
@ -0,0 +1,12 @@ |
||||
<section class='m_widget links'> |
||||
<div class='header'>Links</div> |
||||
<div class='content'> |
||||
<ul class="entry"> |
||||
<% (theme.links||[]).forEach(function(item){ %> |
||||
<li><a class="flat-box" target="_blank" href="<%= url_for(item.url) %>"> |
||||
<div class='name'><%= item.name %></div> |
||||
</a></li> |
||||
<% }); %> |
||||
</ul> |
||||
</div> |
||||
</section> |
||||
@ -0,0 +1,13 @@ |
||||
<section class='m_widget socials'> |
||||
<div class='header'>CONTACTS</div> |
||||
<div class='content'> |
||||
<ul class="entry"> |
||||
<% (theme.contacts||[]).forEach(function(item){ %> |
||||
<li><a class="flat-box" target="_blank" href="<%= url_for(item.url) %>"> |
||||
<div class='name'><%= item.name %></div> |
||||
<div class='badget'><%= item.badget %></div> |
||||
</a></li> |
||||
<% }); %> |
||||
</ul> |
||||
</div> |
||||
</section> |
||||
@ -0,0 +1,14 @@ |
||||
<% if (site.tags.length){ %> |
||||
<div class="m_widget tagcloud"> |
||||
<div class="header">TAGS</div> |
||||
<div class='content'> |
||||
<%- tagcloud(site.tags, { |
||||
min_font: 14, |
||||
max_font: 24, |
||||
color: true, |
||||
start_color: '#888', |
||||
end_color: '#555', |
||||
}) %> |
||||
</div> |
||||
</div> |
||||
<% } %> |
||||
@ -0,0 +1,117 @@ |
||||
<% if (page.year || page.month) { %> |
||||
<%- partial('_partial/archive') %> |
||||
<% } else { %> |
||||
<article id="archive-page" class="post article white-box"> |
||||
<section class='meta'> |
||||
<h2 class="title"> |
||||
<a href="javascript:void(0)"> |
||||
archives |
||||
</a> |
||||
</h2> |
||||
</section> |
||||
<section class="archive"> |
||||
<% |
||||
var year = -1, postid = -1; |
||||
site.posts.sort('date', -1).each(function(post) { |
||||
post.year = date(post.date, 'YYYY'); |
||||
if (post.year && post.year !== year) { |
||||
year = post.year; |
||||
%> |
||||
<div class="archive-item archive-year mark"> |
||||
<a id="archive-year-<%= year %>" href='<%= url_for("/archives/" + year + "/") %>' > |
||||
<%= year %> |
||||
</a> |
||||
</div> |
||||
|
||||
<% } %> |
||||
|
||||
<div class="flat-box archive-item archive-post mark"> |
||||
<% post.categories.each(function(item){ %> |
||||
<a href="<%= url_for(post.path) %>"> |
||||
<time><%= date(post.date, 'MM-DD') %></time> |
||||
<span class="title"><span> |
||||
<% if (item.name == "worklog") { %> |
||||
worklog：<%= post.title %> |
||||
<% } else { %> |
||||
<% if(post.title){ %> |
||||
<%= post.title %> |
||||
<% } else if (post.date) { %> |
||||
<%= date(post.date, 'dddd') %> worklog |
||||
<% } %> |
||||
<% } %> |
||||
</span></span> |
||||
</a> |
||||
<%})%> |
||||
|
||||
</div> |
||||
<% }); %> |
||||
</section> |
||||
</article> |
||||
<!-- <article id="archive-page" class="post article white-box"> |
||||
<section class='meta'> |
||||
<h2 class="title"> |
||||
<a href="javascript:void(0)"> |
||||
worklogs |
||||
</a> |
||||
</h2> |
||||
</section> |
||||
<section class="archive"> |
||||
<% |
||||
var year = -1, postid = -1; |
||||
site.posts.sort('date', -1).each(function(post) { |
||||
post.year = date(post.date, 'YYYY'); |
||||
if (post.year && post.year !== year) { |
||||
year = post.year; |
||||
%> |
||||
<% post.categories.each(function(item){ %> |
||||
<% if (item.name == "worklog") { %> |
||||
<div class="archive-item archive-year mark"> |
||||
<a id="archive-year-<%= year %>" href='<%= url_for("/archives/" + year + "/") %>' > |
||||
<%= year %> |
||||
</a> |
||||
</div> |
||||
<% } else { %> |
||||
<% } %> |
||||
<%})%> |
||||
|
||||
<% } %> |
||||
|
||||
<div class="flat-box archive-item archive-post mark"> |
||||
<% post.categories.each(function(item){ %> |
||||
<% if (item.name == "worklog") { %> |
||||
<a href="<%= url_for(post.path) %>"> |
||||
<time><%= date(post.date, 'MM-DD') %></time> |
||||
<span class="title"><span> |
||||
<% if(post.title){ %> |
||||
<%= post.title %> |
||||
<% } else if (post.date) { %> |
||||
<%= date(post.date, 'dddd') %> worklog |
||||
<% } %> |
||||
</span></span> |
||||
</a> |
||||
<% } else { %> |
||||
<% } %> |
||||
<%})%> |
||||
</div> |
||||
<% }); %> |
||||
</section> |
||||
</article> --> |
||||
<!-- |
||||
<% if (page.total > 1) { %> |
||||
<nav id="page-nav"> |
||||
<% if (page.prev != 0) { %> |
||||
<a class="prev" rel="prev" href="<%= url_for(page.prev_link) %>"> |
||||
<span class="icon icon-chevron-left"></span> |
||||
<span class="text">Previous</span> |
||||
</a> |
||||
<% } %> |
||||
<% if (page.next != 0) { %> |
||||
<a class="next" rel="next" href="<%= url_for(page.next_link) %>"> |
||||
<span class="text">Next</span> |
||||
<span class="icon icon-chevron-right"></span> |
||||
</a> |
||||
<% } %> |
||||
</nav> |
||||
<% } %> |
||||
--> |
||||
<% } %> |
||||
@ -0,0 +1 @@ |
||||
<%- partial('_partial/archive') %> |
||||
@ -0,0 +1 @@ |
||||
<%- partial('_partial/archive') %> |
||||
@ -0,0 +1,23 @@ |
||||
<%- partial('_partial/head') %> |
||||
<body> |
||||
<%- partial('_partial/loading') %> |
||||
<script>setLoadingBarProgress(20)</script> |
||||
<%- partial('_partial/header', null, {cache: !config.relative_link}) %> |
||||
<script>setLoadingBarProgress(40);</script> |
||||
<div class="l_body"> |
||||
<div class='container clearfix'> |
||||
<div class='l_main'> |
||||
<%- body %> |
||||
</div> |
||||
<aside class='l_side'> |
||||
<%- partial('_partial/side') %> |
||||
</aside> |
||||
<script>setLoadingBarProgress(60);</script> |
||||
</div> |
||||
</div> |
||||
<%- partial('_partial/footer', null, {cache: !config.relative_link}) %> |
||||
<script>setLoadingBarProgress(80);</script> |
||||
<%- partial('_partial/scripts') %> |
||||
<script>setLoadingBarProgress(100);</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1 @@ |
||||
<%- partial('_partial/article', {post: page, index: false}) %> |
||||
@ -0,0 +1 @@ |
||||
<%- partial('_partial/article', {post: page, index: false}) %> |
||||
@ -0,0 +1 @@ |
||||
<%- partial('_partial/archive') %> |
||||
|
After Width: | Height: | Size: 229 KiB |
|
After Width: | Height: | Size: 495 KiB |
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,617 @@ |
||||
{ |
||||
"IcoMoonType": "selection", |
||||
"icons": [ |
||||
{ |
||||
"icon": { |
||||
"paths": [ |
||||
"M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z" |
||||
], |
||||
"attrs": [], |
||||
"isMulticolor": false, |
||||
"isMulticolor2": false, |
||||
"tags": [ |
||||
"close" |
||||
], |
||||
"defaultCode": 58829, |
||||
"grid": 24 |
||||
}, |
||||
"attrs": [], |
||||
"properties": { |
||||
"order": 39, |
||||
"ligatures": "clear, close", |
||||
"id": 157, |
||||
"prevSize": 24, |
||||
"code": 58829, |
||||
"name": "close" |
||||
}, |
||||
"setIdx": 1, |
||||
"setId": 6, |
||||
"iconIdx": 157 |
||||
}, |
||||
{ |
||||
"icon": { |
||||
"paths": [ |
||||
"M406 598c106 0 192-86 192-192s-86-192-192-192-192 86-192 192 86 192 192 192zM662 598l212 212-64 64-212-212v-34l-12-12c-48 42-112 66-180 66-154 0-278-122-278-276s124-278 278-278 276 124 276 278c0 68-24 132-66 180l12 12h34z" |
||||
], |
||||
"attrs": [], |
||||
"isMulticolor": false, |
||||
"isMulticolor2": false, |
||||
"tags": [ |
||||
"search" |
||||
], |
||||
"defaultCode": 59574, |
||||
"grid": 24 |
||||
}, |
||||
"attrs": [], |
||||
"properties": { |
||||
"order": 41, |
||||
"ligatures": "search", |
||||
"id": 655, |
||||
"prevSize": 24, |
||||
"code": 59574, |
||||
"name": "search2" |
||||
}, |
||||
"setIdx": 1, |
||||
"setId": 6, |
||||
"iconIdx": 655 |
||||
}, |
||||
{ |
||||
"icon": { |
||||
"paths": [ |
||||
"M231.219 386.458c22.323-22.835 53.402-24.627 80.691 0l200.090 191.846 200.090-191.846c27.29-24.627 58.419-22.835 80.589 0 22.323 22.784 20.89 61.286 0 82.688-20.787 21.402-240.384 230.502-240.384 230.502-11.11 11.418-25.702 17.152-40.294 17.152s-29.184-5.734-40.397-17.152c0 0-219.494-209.101-240.384-230.502-20.941-21.402-22.323-59.904 0-82.688z" |
||||
], |
||||
"attrs": [], |
||||
"isMulticolor": false, |
||||
"isMulticolor2": false, |
||||
"tags": [ |
||||
"chevron-down" |
||||
], |
||||
"grid": 20 |
||||
}, |
||||
"attrs": [], |
||||
"properties": { |
||||
"id": 34, |
||||
"order": 17, |
||||
"prevSize": 20, |
||||
"code": 59648, |
||||
"name": "chevron-down" |
||||
}, |
||||
"setIdx": 2, |
||||
"setId": 5, |
||||
"iconIdx": 33 |
||||
}, |
||||
{ |
||||
"icon": { |
||||
"paths": [ |
||||
"M637.542 231.219c22.835 22.323 24.627 53.402 0 80.691l-191.846 200.090 191.846 200.090c24.627 27.29 22.835 58.419 0 80.589-22.784 22.323-61.286 20.89-82.688 0-21.402-20.787-230.502-240.384-230.502-240.384-11.418-11.11-17.152-25.702-17.152-40.294s5.734-29.184 17.152-40.397c0 0 209.101-219.494 230.502-240.384 21.402-20.941 59.904-22.323 82.688 0z" |
||||
], |
||||
"attrs": [], |
||||
"isMulticolor": false, |
||||
"isMulticolor2": false, |
||||
"tags": [ |
||||
"chevron-left" |
||||
], |
||||
"grid": 20 |
||||
}, |
||||
"attrs": [], |
||||
"properties": { |
||||
"id": 35, |
||||
"order": 16, |
||||
"prevSize": 20, |
||||
"code": 59649, |
||||
"name": "chevron-left" |
||||
}, |
||||
"setIdx": 2, |
||||
"setId": 5, |
||||
"iconIdx": 34 |
||||
}, |
||||
{ |
||||
"icon": { |
||||
"paths": [ |
||||
"M469.146 231.219c21.402 20.89 230.502 240.384 230.502 240.384 11.418 11.213 17.152 25.805 17.152 40.397s-5.734 29.184-17.152 40.294c0 0-209.101 219.597-230.502 240.384-21.402 20.89-59.904 22.323-82.688 0-22.835-22.221-24.627-53.299 0-80.589l191.846-200.090-191.846-200.090c-24.627-27.29-22.835-58.419 0-80.691 22.784-22.323 61.286-20.941 82.688 0z" |
||||
], |
||||
"attrs": [], |
||||
"isMulticolor": false, |
||||
"isMulticolor2": false, |
||||
"tags": [ |
||||
"chevron-right" |
||||
], |
||||
"grid": 20 |
||||
}, |
||||
"attrs": [], |
||||
"properties": { |
||||
"id": 36, |
||||
"order": 15, |
||||
"prevSize": 20, |
||||
"code": 59650, |
||||
"name": "chevron-right" |
||||
}, |
||||
"setIdx": 2, |
||||
"setId": 5, |
||||
"iconIdx": 35 |
||||
}, |
||||
{ |
||||
"icon": { |
||||
"paths": [ |
||||
"M891.802 312.781c13.926-13.722 36.301-13.722 50.125 0s13.875 35.891 0 49.613l-404.89 400.896c-13.824 13.722-36.198 13.722-50.125 0l-404.89-400.896c-13.824-13.722-13.824-35.891 0-49.613 13.875-13.722 36.301-13.722 50.125 0l379.853 365.619 379.802-365.619z" |
||||
], |
||||
"attrs": [], |
||||
"isMulticolor": false, |
||||
"isMulticolor2": false, |
||||
"tags": [ |
||||
"chevron-thin-down" |
||||
], |
||||
"grid": 20 |
||||
}, |
||||
"attrs": [], |
||||
"properties": { |
||||
"id": 41, |
||||
"order": 18, |
||||
"prevSize": 20, |
||||
"code": 59651, |
||||
"name": "chevron-thin-down" |
||||
}, |
||||
"setIdx": 2, |
||||
"setId": 5, |
||||
"iconIdx": 40 |
||||
}, |
||||
{ |
||||
"icon": { |
||||
"paths": [ |
||||
"M711.219 891.802c13.722 13.926 13.722 36.301 0 50.125s-35.891 13.875-49.613 0l-400.896-404.89c-13.722-13.824-13.722-36.198 0-50.125l400.896-404.89c13.722-13.824 35.891-13.824 49.613 0 13.722 13.875 13.722 36.301 0 50.125l-365.619 379.853 365.619 379.802z" |
||||
], |
||||
"attrs": [], |
||||
"isMulticolor": false, |
||||
"isMulticolor2": false, |
||||
"tags": [ |
||||
"chevron-thin-left" |
||||
], |
||||
"grid": 20 |
||||
}, |
||||
"attrs": [], |
||||
"properties": { |
||||
"id": 42, |
||||
"order": 19, |
||||
"prevSize": 20, |
||||
"code": 59652, |
||||
"name": "chevron-thin-left" |
||||
}, |
||||
"setIdx": 2, |
||||
"setId": 5, |
||||
"iconIdx": 41 |
||||
}, |
||||
{ |
||||
"icon": { |
||||
"paths": [ |
||||
"M678.4 512l-365.619-379.904c-13.722-13.824-13.722-36.198 0-50.125 13.722-13.824 35.891-13.824 49.613 0l400.896 404.89c13.722 13.875 13.722 36.301 0 50.125l-400.896 404.89c-13.722 13.875-35.891 13.824-49.613 0-13.722-13.773-13.722-36.198 0-50.125l365.619-379.75z" |
||||
], |
||||
"attrs": [], |
||||
"isMulticolor": false, |
||||
"isMulticolor2": false, |
||||
"tags": [ |
||||
"chevron-thin-right" |
||||
], |
||||
"grid": 20 |
||||
}, |
||||
"attrs": [], |
||||
"properties": { |
||||
"id": 43, |
||||
"order": 20, |
||||
"prevSize": 20, |
||||
"code": 59653, |
||||
"name": "chevron-thin-right" |
||||
}, |
||||
"setIdx": 2, |
||||
"setId": 5, |
||||
"iconIdx": 42 |
||||
}, |
||||
{ |
||||
"icon": { |
||||
"paths": [ |
||||
"M132.198 711.219c-13.926 13.722-36.301 13.722-50.125 0s-13.875-35.891 0-49.613l404.89-400.896c13.824-13.722 36.198-13.722 50.125 0l404.89 400.896c13.824 13.722 13.824 35.891 0 49.613-13.875 13.722-36.301 13.722-50.074 0l-379.904-365.619-379.802 365.619z" |
||||
], |
||||
"attrs": [], |
||||
"isMulticolor": false, |
||||
"isMulticolor2": false, |
||||
"tags": [ |
||||
"chevron-thin-up" |
||||
], |
||||
"grid": 20 |
||||
}, |
||||
"attrs": [], |
||||
"properties": { |
||||
"id": 44, |
||||
"order": 21, |
||||
"prevSize": 20, |
||||
"code": 59654, |
||||
"name": "chevron-thin-up" |
||||
}, |
||||
"setIdx": 2, |
||||
"setId": 5, |
||||
"iconIdx": 43 |
||||
}, |
||||
{ |
||||
"icon": { |
||||
"paths": [ |
||||
"M792.781 637.542c-22.323 22.835-53.402 24.627-80.691 0l-200.090-191.846-200.090 191.846c-27.29 24.627-58.419 22.835-80.589 0-22.323-22.784-20.89-61.286 0-82.688 20.787-21.402 240.384-230.502 240.384-230.502 11.11-11.418 25.702-17.152 40.294-17.152s29.184 5.734 40.397 17.152c0 0 219.494 209.101 240.384 230.502 20.941 21.402 22.323 59.904 0 82.688z" |
||||
], |
||||
"attrs": [], |
||||
"isMulticolor": false, |
||||
"isMulticolor2": false, |
||||
"tags": [ |
||||
"chevron-up" |
||||
], |
||||
"grid": 20 |
||||
}, |
||||
"attrs": [], |
||||
"properties": { |
||||
"id": 45, |
||||
"order": 22, |
||||
"prevSize": 20, |
||||
"code": 59655, |
||||
"name": "chevron-up" |
||||
}, |
||||
"setIdx": 2, |
||||
"setId": 5, |
||||
"iconIdx": 44 |
||||
}, |
||||
{ |
||||
"icon": { |
||||
"paths": [ |
||||
"M80.589 270.643c24.986 13.414 371.098 199.373 384 206.285s29.594 10.189 46.387 10.189c16.794 0 33.485-3.277 46.387-10.189s359.014-192.87 384-206.285c25.037-13.466 48.691-65.843 2.765-65.843h-866.253c-45.926 0-22.272 52.378 2.714 65.843zM952.986 383.437c-28.416 14.797-378.214 197.069-395.622 206.182s-29.594 10.189-46.387 10.189-28.979-1.075-46.387-10.189-365.21-191.437-393.626-206.234c-19.968-10.445-19.763 1.792-19.763 11.213s0 373.402 0 373.402c0 21.504 28.979 51.2 51.2 51.2h819.2c22.221 0 51.2-29.696 51.2-51.2 0 0 0-363.93 0-373.35s0.205-21.658-19.814-11.213z" |
||||
], |
||||
"attrs": [], |
||||
"isMulticolor": false, |
||||
"isMulticolor2": false, |
||||
"tags": [ |
||||
"mail" |
||||
], |
||||
"grid": 20 |
||||
}, |
||||
"attrs": [], |
||||
"properties": { |
||||
"id": 219, |
||||
"order": 36, |
||||
"prevSize": 20, |
||||
"code": 59661, |
||||
"name": "mail" |
||||
}, |
||||
"setIdx": 2, |
||||
"setId": 5, |
||||
"iconIdx": 218 |
||||
}, |
||||
{ |
||||
"icon": { |
||||
"paths": [ |
||||
"M839.68 460.8h-655.36c-28.262 0-30.72 22.886-30.72 51.2s2.458 51.2 30.72 51.2h655.36c28.262 0 30.72-22.886 30.72-51.2s-2.458-51.2-30.72-51.2zM839.68 665.6h-655.36c-28.262 0-30.72 22.886-30.72 51.2s2.458 51.2 30.72 51.2h655.36c28.262 0 30.72-22.886 30.72-51.2s-2.458-51.2-30.72-51.2zM184.32 358.4h655.36c28.262 0 30.72-22.886 30.72-51.2s-2.458-51.2-30.72-51.2h-655.36c-28.262 0-30.72 22.886-30.72 51.2s2.458 51.2 30.72 51.2z" |
||||
], |
||||
"attrs": [], |
||||
"isMulticolor": false, |
||||
"isMulticolor2": false, |
||||
"tags": [ |
||||
"menu" |
||||
], |
||||
"grid": 20 |
||||
}, |
||||
"attrs": [], |
||||
"properties": { |
||||
"id": 225, |
||||
"order": 23, |
||||
"prevSize": 20, |
||||
"code": 59656, |
||||
"name": "menu" |
||||
}, |
||||
"setIdx": 2, |
||||
"setId": 5, |
||||
"iconIdx": 224 |
||||
}, |
||||
{ |
||||
"icon": { |
||||
"paths": [ |
||||
"M122.88 122.88v121.19c362.803 0 656.896 294.195 656.896 656.998h121.293c0-429.773-348.416-778.189-778.189-778.189zM122.88 365.414v121.293c228.813 0 414.362 185.498 414.362 414.413h121.242c0-295.834-239.821-535.706-535.603-535.706zM239.053 668.621c-64.205 0-116.224 52.122-116.224 116.275s52.019 116.224 116.224 116.224 116.173-52.019 116.173-116.224-51.968-116.275-116.173-116.275z" |
||||
], |
||||
"attrs": [], |
||||
"isMulticolor": false, |
||||
"isMulticolor2": false, |
||||
"tags": [ |
||||
"rss" |
||||
], |
||||
"grid": 20 |
||||
}, |
||||
"attrs": [], |
||||
"properties": { |
||||
"id": 266, |
||||
"order": 25, |
||||
"prevSize": 20, |
||||
"code": 59658, |
||||
"name": "rss" |
||||
}, |
||||
"setIdx": 2, |
||||
"setId": 5, |
||||
"iconIdx": 265 |
||||
}, |
||||
{ |
||||
"icon": { |
||||
"paths": [ |
||||
"M395.52 109.875c-52.019 38.707-65.997 99.994-63.437 132.608 3.277 39.885 11.366 91.802 11.366 91.802s-16.026 8.704-16.026 43.725c5.581 87.91 34.97 49.971 41.011 88.525 14.541 92.877 47.77 76.339 47.77 127.027 0 84.429-34.816 123.904-143.514 170.701-109.056 47.002-221.491 106.138-221.491 208.538v51.2h921.6v-51.2c0-102.4-112.486-161.536-221.594-208.486-108.698-46.797-143.411-86.221-143.411-170.701 0-50.688 33.126-34.15 47.718-127.027 6.093-38.554 35.43-0.614 41.114-88.525 0-35.021-16.077-43.725-16.077-43.725s8.090-51.917 11.315-91.802c3.328-41.83-20.378-131.123-117.76-158.515-17.050-17.408-28.57-45.107 23.859-72.909-114.688-5.376-141.363 54.63-202.445 98.765z" |
||||
], |
||||
"attrs": [], |
||||
"isMulticolor": false, |
||||
"isMulticolor2": false, |
||||
"tags": [ |
||||
"user" |
||||
], |
||||
"grid": 20 |
||||
}, |
||||
"attrs": [], |
||||
"properties": { |
||||
"id": 311, |
||||
"order": 26, |
||||
"prevSize": 20, |
||||
"code": 59659, |
||||
"name": "user" |
||||
}, |
||||
"setIdx": 2, |
||||
"setId": 5, |
||||
"iconIdx": 310 |
||||
}, |
||||
{ |
||||
"icon": { |
||||
"paths": [ |
||||
"M972.8 153.6h-921.6c-28.314 0-51.2 22.886-51.2 51.2v614.4c0 28.262 22.886 51.2 51.2 51.2h921.6c28.314 0 51.2-22.938 51.2-51.2v-614.4c0-28.262-22.886-51.2-51.2-51.2zM665.6 358.4h204.8v51.2h-204.8v-51.2zM563.2 757.914c-6.605-5.222-15.002-10.291-27.085-15.514-60.416-26.010-151.603-64.512-151.603-111.411 0-28.211 18.381-18.995 26.522-70.605 3.379-21.402 19.712-0.358 22.784-49.203 0-19.456-8.909-24.32-8.909-24.32s4.506-28.774 6.298-50.995c1.843-23.194-11.315-92.16-65.382-107.366-9.523-9.626-15.923-5.683 13.21-21.094-63.693-3.021-78.541 30.31-112.435 54.835-28.877 21.504-36.71 55.552-35.277 73.677 1.894 22.17 6.4 50.995 6.4 50.995s-8.96 4.813-8.96 24.269c3.123 48.845 19.456 27.802 22.784 49.203 8.090 51.61 26.573 42.394 26.573 70.605 0 46.899-91.187 85.402-151.603 111.411-10.394 4.506-17.869 8.858-24.115 13.312v-499.712h460.8v501.914zM921.6 563.2h-256v-51.2h256v51.2z" |
||||
], |
||||
"attrs": [], |
||||
"isMulticolor": false, |
||||
"isMulticolor2": false, |
||||
"tags": [ |
||||
"v-card" |
||||
], |
||||
"grid": 20 |
||||
}, |
||||
"attrs": [], |
||||
"properties": { |
||||
"id": 313, |
||||
"order": 24, |
||||
"prevSize": 20, |
||||
"code": 59657, |
||||
"name": "vcard" |
||||
}, |
||||
"setIdx": 2, |
||||
"setId": 5, |
||||
"iconIdx": 312 |
||||
}, |
||||
{ |
||||
"icon": { |
||||
"paths": [ |
||||
"M752.026 515.482c-14.029-4.301-23.706-7.27-16.333-26.010 15.923-40.806 17.613-75.981 0.358-101.12-32.41-47.104-121.037-44.595-222.618-1.28 0-0.102-31.898 14.182-23.757-11.622 15.667-51.046 13.261-93.85-11.059-118.528-55.091-56.218-201.574 2.099-327.27 129.997-94.157 95.795-148.787 197.274-148.787 285.082 0 167.987 211.558 280.32 418.56 280.32 271.309 0 451.84-170.701 451.84-298.086 0-77.056-63.693-120.73-120.934-138.752zM421.683 877.005c-165.12 16.384-307.763-58.726-318.464-167.68-10.701-109.005 114.483-210.688 279.654-227.226 165.171-16.384 307.763 58.675 318.464 167.68 10.701 109.107-114.483 210.842-279.654 227.226zM1021.44 378.726c-0.051-169.574-137.523-306.995-307.2-306.995-19.814 0-35.789 15.974-35.789 35.789s15.974 35.789 35.789 35.789c130.099 0 235.571 105.523 235.571 235.622 0 19.814 16.026 35.789 35.84 35.789s35.789-16.026 35.789-35.84v-0.154zM879.053 373.504c-16.333-79.974-79.411-143.002-159.386-159.386-19.354-3.994-38.298 8.499-42.291 27.904-3.942 19.302 8.499 38.298 27.904 42.291 52.019 10.598 92.979 51.61 103.629 103.578 3.994 19.405 22.938 31.795 42.291 27.904 19.302-3.994 31.846-22.989 27.853-42.291zM336.998 588.902c-66.56 13.414-111.462 69.222-100.301 124.621 11.162 55.501 74.086 89.6 140.646 76.186 66.509-13.414 111.411-69.222 100.301-124.621-11.162-55.398-74.189-89.6-140.646-76.186z" |
||||
], |
||||
"attrs": [], |
||||
"isMulticolor": false, |
||||
"isMulticolor2": false, |
||||
"tags": [ |
||||
"sina-weibo" |
||||
], |
||||
"grid": 20 |
||||
}, |
||||
"attrs": [], |
||||
"properties": { |
||||
"id": 340, |
||||
"order": 27, |
||||
"prevSize": 20, |
||||
"code": 59662, |
||||
"name": "sina-weibo" |
||||
}, |
||||
"setIdx": 2, |
||||
"setId": 5, |
||||
"iconIdx": 339 |
||||
}, |
||||
{ |
||||
"icon": { |
||||
"paths": [ |
||||
"M870.4 51.2h-716.8c-56.32 0-102.4 46.080-102.4 102.4v716.8c0 56.371 46.080 102.4 102.4 102.4h358.4v-358.4h-102.4v-126.72h102.4v-104.96c0-110.797 62.054-188.621 192.819-188.621l92.314 0.102v133.376h-61.286c-50.893 0-70.246 38.195-70.246 73.626v86.528h131.482l-29.082 126.669h-102.4v358.4h204.8c56.32 0 102.4-46.029 102.4-102.4v-716.8c0-56.32-46.080-102.4-102.4-102.4z" |
||||
], |
||||
"attrs": [], |
||||
"isMulticolor": false, |
||||
"isMulticolor2": false, |
||||
"tags": [ |
||||
"facebook" |
||||
], |
||||
"grid": 20 |
||||
}, |
||||
"attrs": [], |
||||
"properties": { |
||||
"id": 360, |
||||
"order": 33, |
||||
"prevSize": 20, |
||||
"code": 59663, |
||||
"name": "facebook" |
||||
}, |
||||
"setIdx": 2, |
||||
"setId": 5, |
||||
"iconIdx": 359 |
||||
}, |
||||
{ |
||||
"icon": { |
||||
"paths": [ |
||||
"M674.816 579.021c-36.762 0-66.56 41.318-66.56 92.109 0 50.893 29.798 92.211 66.56 92.211s66.56-41.318 66.56-92.211c-0.051-50.79-29.798-92.109-66.56-92.109zM906.547 339.251c7.629-18.688 7.936-124.877-32.512-226.611 0 0-92.723 10.189-233.011 106.496-29.44-8.192-79.258-12.186-128.973-12.186-49.818 0-99.584 3.994-129.024 12.186-140.339-96.307-233.062-106.496-233.062-106.496-40.397 101.734-39.987 207.923-32.461 226.611-47.514 51.61-76.544 113.613-76.544 198.195 0 367.923 305.306 373.811 382.31 373.811 17.51 0 52.122 0.102 88.781 0.102 36.608 0 71.27-0.102 88.678-0.102 77.107 0 382.31-5.888 382.31-373.811 0-84.582-28.979-146.586-76.493-198.195zM513.434 866.048h-2.867c-193.075 0-343.501-22.989-343.501-210.688 0-45.005 15.872-86.682 53.606-121.293 62.822-57.702 169.216-27.187 289.894-27.187 0.512 0 1.024 0 1.485 0 0.512 0 0.922 0 1.382 0 120.678 0 227.123-30.515 289.997 27.187 37.632 34.611 53.504 76.288 53.504 121.293 0 187.699-150.374 210.688-343.501 210.688zM349.235 579.021c-36.762 0-66.56 41.318-66.56 92.109 0 50.893 29.798 92.211 66.56 92.211 36.813 0 66.611-41.318 66.611-92.211 0-50.79-29.798-92.109-66.611-92.109z" |
||||
], |
||||
"attrs": [], |
||||
"isMulticolor": false, |
||||
"isMulticolor2": false, |
||||
"tags": [ |
||||
"github" |
||||
], |
||||
"grid": 20 |
||||
}, |
||||
"attrs": [], |
||||
"properties": { |
||||
"id": 364, |
||||
"order": 32, |
||||
"prevSize": 20, |
||||
"code": 59664, |
||||
"name": "github" |
||||
}, |
||||
"setIdx": 2, |
||||
"setId": 5, |
||||
"iconIdx": 363 |
||||
}, |
||||
{ |
||||
"icon": { |
||||
"paths": [ |
||||
"M101.837 286.157c0 76.493 25.549 131.686 75.878 164.096 41.267 26.624 89.088 30.618 113.971 30.618 6.042 0 10.906-0.307 14.285-0.512 0 0-7.885 51.405 30.208 102.195h-1.741c-65.997 0-281.242 13.773-281.242 190.822 0 180.019 197.683 189.184 237.363 189.184 3.123 0 4.966-0.102 4.966-0.102 0.41 0 3.226 0.102 8.090 0.102 25.446 0 91.238-3.174 152.32-32.922 79.258-38.4 119.45-105.421 119.45-198.912 0-90.317-61.235-144.077-105.933-183.398-27.29-24.013-50.893-44.698-50.893-64.819 0-20.48 17.254-35.891 39.014-55.398 35.277-31.488 68.557-76.39 68.557-161.28 0-74.598-9.677-124.723-69.325-156.518 6.195-3.174 28.211-5.478 39.066-7.014 32.307-4.403 79.565-9.421 79.565-35.789v-5.069h-235.469c-2.355 0.102-238.131 8.806-238.131 224.717zM481.946 747.622c4.506 71.987-57.088 125.082-149.606 131.789-93.952 6.912-171.264-35.379-175.77-107.315-2.202-34.611 13.005-68.403 42.752-95.386 30.157-27.29 71.578-44.186 116.634-47.514 5.325-0.307 10.598-0.614 15.872-0.614 86.989 0.051 145.869 51.149 150.118 119.040zM420.454 236.851c23.091 81.306-11.776 166.195-67.379 181.914-6.4 1.792-12.954 2.662-19.661 2.662-50.893 0-101.325-51.507-120.064-122.522-10.445-39.731-9.574-74.65 2.406-108.134 11.725-33.024 32.922-55.194 59.546-62.72 6.4-1.792 13.005-2.714 19.712-2.714 61.44 0 100.966 25.498 125.44 111.514zM819.2 409.6v-153.6h-102.4v153.6h-153.6v102.4h153.6v153.6h102.4v-153.6h153.6v-102.4h-153.6z" |
||||
], |
||||
"attrs": [], |
||||
"isMulticolor": false, |
||||
"isMulticolor2": false, |
||||
"tags": [ |
||||
"google+" |
||||
], |
||||
"grid": 20 |
||||
}, |
||||
"attrs": [], |
||||
"properties": { |
||||
"id": 366, |
||||
"order": 28, |
||||
"prevSize": 20, |
||||
"code": 59665, |
||||
"name": "google" |
||||
}, |
||||
"setIdx": 2, |
||||
"setId": 5, |
||||
"iconIdx": 365 |
||||
}, |
||||
{ |
||||
"icon": { |
||||
"paths": [ |
||||
"M870.4 51.2h-716.8c-56.32 0-102.4 46.080-102.4 102.4v716.8c0 56.371 46.080 102.4 102.4 102.4h716.8c56.32 0 102.4-46.029 102.4-102.4v-716.8c0-56.32-46.080-102.4-102.4-102.4zM511.181 794.778c156.621 0 283.546-127.027 283.546-283.597 0-17.306-2.202-33.997-5.274-50.381h80.947v369.459c0 19.558-15.872 35.328-35.482 35.328h-645.837c-19.61-0-35.482-15.77-35.482-35.328v-369.459h79.309c-3.123 16.384-5.325 33.075-5.325 50.381 0 156.621 127.027 283.597 283.597 283.597zM333.978 511.181c0-97.894 79.36-177.203 177.254-177.203 97.843 0 177.254 79.309 177.254 177.203s-79.411 177.254-177.254 177.254c-97.946 0-177.254-79.36-177.254-177.254zM834.918 307.2h-82.688c-19.558 0-35.43-15.974-35.43-35.43v-82.79c0-19.558 15.872-35.379 35.379-35.379h82.688c19.661 0 35.533 15.821 35.533 35.379v82.739c0 19.507-15.872 35.482-35.482 35.482z" |
||||
], |
||||
"attrs": [], |
||||
"isMulticolor": false, |
||||
"isMulticolor2": false, |
||||
"tags": [ |
||||
"instagram" |
||||
], |
||||
"grid": 20 |
||||
}, |
||||
"attrs": [], |
||||
"properties": { |
||||
"id": 368, |
||||
"order": 29, |
||||
"prevSize": 20, |
||||
"code": 59666, |
||||
"name": "instagram" |
||||
}, |
||||
"setIdx": 2, |
||||
"setId": 5, |
||||
"iconIdx": 367 |
||||
}, |
||||
{ |
||||
"icon": { |
||||
"paths": [ |
||||
"M441.19 677.222c-26.931 141.005-59.75 276.173-157.082 346.778-30.003-213.094 44.083-373.094 78.541-542.976-58.726-98.816 7.066-297.574 130.816-248.576 152.32 60.211-131.891 367.206 58.88 405.606 199.219 39.987 280.525-345.6 156.979-470.989-178.432-181.146-519.475-4.25-477.491 255.078 10.189 63.386 75.674 82.586 26.163 170.086-114.227-25.293-148.326-115.405-143.923-235.52 7.066-196.608 176.589-334.182 346.675-353.28 215.091-24.115 416.973 79.002 444.877 281.293 31.386 228.403-97.075 475.802-327.117 457.984-62.362-4.864-88.474-35.789-137.318-65.485z" |
||||
], |
||||
"attrs": [], |
||||
"isMulticolor": false, |
||||
"isMulticolor2": false, |
||||
"tags": [ |
||||
"pinterest" |
||||
], |
||||
"grid": 20 |
||||
}, |
||||
"attrs": [], |
||||
"properties": { |
||||
"id": 374, |
||||
"order": 31, |
||||
"prevSize": 20, |
||||
"code": 59667, |
||||
"name": "pinterest" |
||||
}, |
||||
"setIdx": 2, |
||||
"setId": 5, |
||||
"iconIdx": 373 |
||||
}, |
||||
{ |
||||
"icon": { |
||||
"paths": [ |
||||
"M798.72 931.635c-39.782 18.995-75.776 32.307-107.981 39.987-32.256 7.578-67.123 11.418-104.602 11.418-42.547 0-80.179-5.478-112.896-16.282-32.717-10.906-60.57-26.419-83.712-46.49-23.091-20.224-39.117-41.574-48.026-64.205-8.909-22.682-13.363-55.603-13.363-98.611v-330.496h-102.861v-133.325c36.557-11.981 67.891-29.184 93.952-51.712 26.112-22.426 47.002-49.408 62.822-80.896 15.77-31.386 26.573-71.475 32.563-120.064h132.352v238.182h220.877v147.814h-220.877v241.613c0 54.579 2.867 89.702 8.602 105.216 5.683 15.514 16.333 27.904 31.846 37.12 20.634 12.493 44.186 18.79 70.707 18.79 47.104 0 94.003-15.514 140.595-46.49v148.429z" |
||||
], |
||||
"attrs": [], |
||||
"isMulticolor": false, |
||||
"isMulticolor2": false, |
||||
"tags": [ |
||||
"tumblr" |
||||
], |
||||
"grid": 20 |
||||
}, |
||||
"attrs": [], |
||||
"properties": { |
||||
"id": 379, |
||||
"order": 34, |
||||
"prevSize": 20, |
||||
"code": 59668, |
||||
"name": "tumblr" |
||||
}, |
||||
"setIdx": 2, |
||||
"setId": 5, |
||||
"iconIdx": 378 |
||||
}, |
||||
{ |
||||
"icon": { |
||||
"paths": [ |
||||
"M886.579 319.795c0.41 8.294 0.563 16.691 0.563 24.986 0 255.488-194.406 549.99-549.888 549.99-109.21 0-210.739-32-296.294-86.886 15.155 1.792 30.515 2.714 46.080 2.714 90.624 0 173.926-30.925 240.026-82.688-84.531-1.587-155.955-57.395-180.531-134.195 11.776 2.202 23.91 3.379 36.352 3.379 17.664 0 34.765-2.304 50.944-6.707-88.422-17.818-155.034-95.898-155.034-189.594 0-0.819 0-1.587 0-2.406 26.061 14.49 55.91 23.194 87.552 24.218-51.866-34.714-86.016-93.798-86.016-160.922 0-35.379 9.523-68.608 26.214-97.178 95.283 116.992 237.773 193.894 398.387 201.984-3.277-14.182-4.966-28.877-4.966-44.083 0-106.701 86.477-193.178 193.229-193.178 55.603 0 105.83 23.398 141.107 60.979 43.981-8.704 85.35-24.781 122.726-46.899-14.438 45.107-45.107 82.995-84.992 106.906 39.117-4.71 76.288-15.002 111.002-30.413-25.907 38.81-58.675 72.806-96.461 99.994z" |
||||
], |
||||
"attrs": [], |
||||
"isMulticolor": false, |
||||
"isMulticolor2": false, |
||||
"tags": [ |
||||
"twitter" |
||||
], |
||||
"grid": 20 |
||||
}, |
||||
"attrs": [], |
||||
"properties": { |
||||
"id": 381, |
||||
"order": 30, |
||||
"prevSize": 20, |
||||
"code": 59669, |
||||
"name": "twitter" |
||||
}, |
||||
"setIdx": 2, |
||||
"setId": 5, |
||||
"iconIdx": 380 |
||||
} |
||||
], |
||||
"height": 1024, |
||||
"metadata": { |
||||
"name": "icomoon" |
||||
}, |
||||
"preferences": { |
||||
"showGlyphs": true, |
||||
"showQuickUse": true, |
||||
"showQuickUse2": true, |
||||
"showSVGs": true, |
||||
"fontPref": { |
||||
"prefix": "icon-", |
||||
"metadata": { |
||||
"fontFamily": "icomoon" |
||||
}, |
||||
"metrics": { |
||||
"emSize": 1024, |
||||
"baseline": 6.25, |
||||
"whitespace": 50 |
||||
}, |
||||
"embed": false |
||||
}, |
||||
"imagePref": { |
||||
"prefix": "icon-", |
||||
"png": true, |
||||
"useClassSelector": true, |
||||
"color": 0, |
||||
"bgColor": 16777215, |
||||
"classSelector": ".icon" |
||||
}, |
||||
"historySize": 100, |
||||
"showCodes": true, |
||||
"gridSize": 16 |
||||
} |
||||
} |
||||
@ -0,0 +1,257 @@ |
||||
/* eslint-disable */ |
||||
var customSearch; |
||||
(function ($) { |
||||
|
||||
"use strict"; |
||||
const scrollCorrection = 70; // (header height = 50px) + (gap = 20px)
|
||||
function scrolltoElement(elem, correction) { |
||||
correction = correction || scrollCorrection; |
||||
const $elem = elem.href ? $(elem.getAttribute('href')) : $(elem); |
||||
$('html, body').animate({ 'scrollTop': $elem.offset().top - correction }, 400); |
||||
}; |
||||
|
||||
function setHeader() { |
||||
if (!window.subData) return; |
||||
const $wrapper = $('header .wrapper'); |
||||
const $comment = $('.s-comment', $wrapper); |
||||
const $toc = $('.s-toc', $wrapper); |
||||
const $top = $('.s-top', $wrapper); |
||||
|
||||
$wrapper.find('.nav-sub .logo').text(window.subData.title); |
||||
let pos = document.body.scrollTop; |
||||
$(document, window).scroll(() => { |
||||
const scrollTop = $(window).scrollTop(); |
||||
const del = scrollTop - pos; |
||||
if (del >= 20) { |
||||
pos = scrollTop; |
||||
$wrapper.addClass('sub'); |
||||
} else if (del <= -20) { |
||||
pos = scrollTop; |
||||
$wrapper.removeClass('sub'); |
||||
} |
||||
}); |
||||
// bind events to every btn
|
||||
const $commentTarget = $('#comments'); |
||||
if ($commentTarget.length) { |
||||
$comment.click(e => { e.preventDefault(); e.stopPropagation(); scrolltoElement($commentTarget); }); |
||||
} else $comment.remove(); |
||||
|
||||
const $tocTarget = $('.toc-wrapper'); |
||||
if ($tocTarget.length && $tocTarget.children().length) { |
||||
$toc.click((e) => { e.stopPropagation(); $tocTarget.toggleClass('active'); }); |
||||
} else $toc.remove(); |
||||
|
||||
$top.click(()=>scrolltoElement(document.body)); |
||||
|
||||
} |
||||
function setHeaderMenu() { |
||||
var $headerMenu = $('header .menu'); |
||||
var $underline = $headerMenu.find('.underline'); |
||||
function setUnderline($item, transition) { |
||||
$item = $item || $headerMenu.find('li a.active');//get instant
|
||||
transition = transition === undefined ? true : !!transition; |
||||
if (!transition) $underline.addClass('disable-trans'); |
||||
if ($item && $item.length) { |
||||
$item.addClass('active').siblings().removeClass('active'); |
||||
$underline.css({ |
||||
left: $item.position().left, |
||||
width: $item.innerWidth() |
||||
}); |
||||
} else { |
||||
$underline.css({ |
||||
left: 0, |
||||
width: 0 |
||||
}); |
||||
} |
||||
if (!transition) { |
||||
setTimeout(function () { $underline.removeClass('disable-trans') }, 0);//get into the queue.
|
||||
} |
||||
} |
||||
$headerMenu.on('mouseenter', 'li', function (e) { |
||||
setUnderline($(e.currentTarget)); |
||||
}); |
||||
$headerMenu.on('mouseout', function () { |
||||
setUnderline(); |
||||
}); |
||||
//set current active nav
|
||||
var $active_link = null; |
||||
if (location.pathname === '/' || location.pathname.startsWith('/page/')) { |
||||
$active_link = $('.nav-home', $headerMenu); |
||||
} else { |
||||
var name = location.pathname.match(/\/(.*?)\//); |
||||
if (name.length > 1) { |
||||
$active_link = $('.nav-' + name[1], $headerMenu); |
||||
} |
||||
} |
||||
setUnderline($active_link, false); |
||||
} |
||||
function setHeaderMenuPhone() { |
||||
var $switcher = $('.l_header .switcher .s-menu'); |
||||
$switcher.click(function (e) { |
||||
e.stopPropagation(); |
||||
$('body').toggleClass('z_menu-open'); |
||||
$switcher.toggleClass('active'); |
||||
}); |
||||
$(document).click(function (e) { |
||||
$('body').removeClass('z_menu-open'); |
||||
$switcher.removeClass('active'); |
||||
}); |
||||
} |
||||
function setHeaderSearch() { |
||||
var $switcher = $('.l_header .switcher .s-search'); |
||||
var $header = $('.l_header'); |
||||
var $search = $('.l_header .m_search'); |
||||
if ($switcher.length === 0) return; |
||||
$switcher.click(function (e) { |
||||
e.stopPropagation(); |
||||
$header.toggleClass('z_search-open'); |
||||
$search.find('input').focus(); |
||||
}); |
||||
$(document).click(function (e) { |
||||
$header.removeClass('z_search-open'); |
||||
}); |
||||
$search.click(function (e) { |
||||
e.stopPropagation(); |
||||
}) |
||||
} |
||||
function setWaves() { |
||||
Waves.attach('.flat-btn', ['waves-button']); |
||||
Waves.attach('.float-btn', ['waves-button', 'waves-float']); |
||||
Waves.attach('.float-btn-light', ['waves-button', 'waves-float', 'waves-light']); |
||||
Waves.attach('.flat-box', ['waves-block']); |
||||
Waves.attach('.float-box', ['waves-block', 'waves-float']); |
||||
Waves.attach('.waves-image'); |
||||
Waves.init(); |
||||
} |
||||
function setScrollReveal() { |
||||
const $reveal = $('.reveal'); |
||||
if ($reveal.length === 0) return; |
||||
const sr = ScrollReveal({ distance: 0 }); |
||||
sr.reveal('.reveal'); |
||||
} |
||||
function setTocToggle() { |
||||
const $toc = $('.toc-wrapper'); |
||||
if ($toc.length === 0) return; |
||||
$toc.click((e) => { e.stopPropagation(); $toc.addClass('active'); }); |
||||
$(document).click(() => $toc.removeClass('active')); |
||||
|
||||
$toc.on('click', 'a', (e) => { |
||||
e.preventDefault(); |
||||
e.stopPropagation(); |
||||
scrolltoElement(e.target.tagName.toLowerCase === 'a' ? e.target : e.target.parentElement); |
||||
}); |
||||
|
||||
const liElements = Array.from($toc.find('li a')); |
||||
//function animate above will convert float to int.
|
||||
const getAnchor = () => liElements.map(elem => Math.floor($(elem.getAttribute('href')).offset().top - scrollCorrection)); |
||||
|
||||
let anchor = getAnchor(); |
||||
const scrollListener = () => { |
||||
const scrollTop = $('html').scrollTop() || $('body').scrollTop(); |
||||
if (!anchor) return; |
||||
//binary search.
|
||||
let l = 0, r = anchor.length - 1, mid; |
||||
while (l < r) { |
||||
mid = (l + r + 1) >> 1; |
||||
if (anchor[mid] === scrollTop) l = r = mid; |
||||
else if (anchor[mid] < scrollTop) l = mid; |
||||
else r = mid - 1; |
||||
} |
||||
$(liElements).removeClass('active').eq(l).addClass('active'); |
||||
} |
||||
$(window) |
||||
.resize(() => { |
||||
anchor = getAnchor(); |
||||
scrollListener(); |
||||
}) |
||||
.scroll(() => { |
||||
scrollListener() |
||||
}); |
||||
scrollListener(); |
||||
} |
||||
|
||||
// function getPicture() {
|
||||
// const $banner = $('.banner');
|
||||
// if ($banner.length === 0) return;
|
||||
// const url = ROOT + 'js/lovewallpaper.json';
|
||||
// $.get(url).done(res => {
|
||||
// if (res.data.length > 0) {
|
||||
// const index = Math.floor(Math.random() * res.data.length);
|
||||
// $banner.css('background-image', 'url(' + res.data[index].big + ')');
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
// function getHitokoto() {
|
||||
// const $hitokoto = $('#hitokoto');
|
||||
// if($hitokoto.length === 0) return;
|
||||
// const url = 'http://api.hitokoto.us/rand?length=80&encode=jsc&fun=handlerHitokoto';
|
||||
// $('body').append('<script src="%s"></script>'.replace('%s',url));
|
||||
// window.handlerHitokoto = (data) => {
|
||||
// $hitokoto
|
||||
// .css('color','transparent')
|
||||
// .text(data.hitokoto)
|
||||
// if(data.source) $hitokoto.append('<cite> —— %s</cite>'.replace('%s',data.source));
|
||||
// else if(data.author) $hitokoto.append('<cite> —— %s</cite>'.replace('%s',data.author));
|
||||
// $hitokoto.css('color','white');
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
$(function () { |
||||
//set header
|
||||
setHeader(); |
||||
setHeaderMenu(); |
||||
setHeaderMenuPhone(); |
||||
setHeaderSearch(); |
||||
setWaves(); |
||||
setScrollReveal(); |
||||
setTocToggle(); |
||||
// getHitokoto();
|
||||
// getPicture();
|
||||
|
||||
|
||||
$(".article .video-container").fitVids(); |
||||
|
||||
setTimeout(function () { |
||||
$('#loading-bar-wrapper').fadeOut(500); |
||||
}, 300); |
||||
|
||||
if (SEARCH_SERVICE === 'google') { |
||||
customSearch = new GoogleCustomSearch({ |
||||
apiKey: GOOGLE_CUSTOM_SEARCH_API_KEY, |
||||
engineId: GOOGLE_CUSTOM_SEARCH_ENGINE_ID, |
||||
imagePath: "/images/" |
||||
}); |
||||
} |
||||
else if (SEARCH_SERVICE === 'algolia') { |
||||
customSearch = new AlgoliaSearch({ |
||||
apiKey: ALGOLIA_API_KEY, |
||||
appId: ALGOLIA_APP_ID, |
||||
indexName: ALGOLIA_INDEX_NAME, |
||||
imagePath: "/images/" |
||||
}); |
||||
} |
||||
else if (SEARCH_SERVICE === 'hexo') { |
||||
customSearch = new HexoSearch({ |
||||
imagePath: "/images/" |
||||
}); |
||||
} |
||||
else if (SEARCH_SERVICE === 'azure') { |
||||
customSearch = new AzureSearch({ |
||||
serviceName: AZURE_SERVICE_NAME, |
||||
indexName: AZURE_INDEX_NAME, |
||||
queryKey: AZURE_QUERY_KEY, |
||||
imagePath: "/images/" |
||||
}); |
||||
} |
||||
else if (SEARCH_SERVICE === 'baidu') { |
||||
customSearch = new BaiduSearch({ |
||||
apiId: BAIDU_API_ID, |
||||
imagePath: "/images/" |
||||
}); |
||||
} |
||||
|
||||
}); |
||||
|
||||
})(jQuery); |
||||
@ -0,0 +1,87 @@ |
||||
/*jshint browser:true */ |
||||
/*! |
||||
* FitVids 1.1 |
||||
* |
||||
* Copyright 2013, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com
|
||||
* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
|
||||
* Released under the WTFPL license - http://sam.zoy.org/wtfpl/
|
||||
* |
||||
*/ |
||||
|
||||
;(function( $ ){ |
||||
|
||||
'use strict'; |
||||
|
||||
$.fn.fitVids = function( options ) { |
||||
var settings = { |
||||
customSelector: null, |
||||
ignore: null |
||||
}; |
||||
|
||||
if(!document.getElementById('fit-vids-style')) { |
||||
// appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
|
||||
var head = document.head || document.getElementsByTagName('head')[0]; |
||||
var css = '.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}'; |
||||
var div = document.createElement("div"); |
||||
div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>'; |
||||
head.appendChild(div.childNodes[1]); |
||||
} |
||||
|
||||
if ( options ) { |
||||
$.extend( settings, options ); |
||||
} |
||||
|
||||
return this.each(function(){ |
||||
var selectors = [ |
||||
'iframe[src*="player.vimeo.com"]', |
||||
'iframe[src*="youtube.com"]', |
||||
'iframe[src*="youtube-nocookie.com"]', |
||||
'iframe[src*="kickstarter.com"][src*="video.html"]', |
||||
'object', |
||||
'embed' |
||||
]; |
||||
|
||||
if (settings.customSelector) { |
||||
selectors.push(settings.customSelector); |
||||
} |
||||
|
||||
var ignoreList = '.fitvidsignore'; |
||||
|
||||
if(settings.ignore) { |
||||
ignoreList = ignoreList + ', ' + settings.ignore; |
||||
} |
||||
|
||||
var $allVideos = $(this).find(selectors.join(',')); |
||||
$allVideos = $allVideos.not('object object'); // SwfObj conflict patch
|
||||
$allVideos = $allVideos.not(ignoreList); // Disable FitVids on this video.
|
||||
|
||||
$allVideos.each(function(){ |
||||
var $this = $(this); |
||||
if($this.parents(ignoreList).length > 0) { |
||||
return; // Disable FitVids on this video.
|
||||
} |
||||
if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; } |
||||
if ((!$this.css('height') && !$this.css('width')) && (isNaN($this.attr('height')) || isNaN($this.attr('width')))) |
||||
{ |
||||
$this.attr('height', 9); |
||||
$this.attr('width', 16); |
||||
} |
||||
var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(), |
||||
width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(), |
||||
aspectRatio = height / width; |
||||
if(!$this.attr('name')){ |
||||
var videoName = 'fitvid' + $.fn.fitVids._count; |
||||
$this.attr('name', videoName); |
||||
$.fn.fitVids._count++; |
||||
} |
||||
$this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+'%'); |
||||
$this.removeAttr('height').removeAttr('width'); |
||||
}); |
||||
}); |
||||
}; |
||||
|
||||
// Internal counter for unique video names.
|
||||
$.fn.fitVids._count = 0; |
||||
|
||||
// Works with either jQuery or Zepto
|
||||
})( window.jQuery || window.Zepto ); |
||||
@ -0,0 +1,781 @@ |
||||
/* eslint-disable */ |
||||
var SearchService = ""; |
||||
|
||||
(function($) { |
||||
/** |
||||
* A super class of common logics for all search services |
||||
* @param options : (object) |
||||
*/ |
||||
SearchService = function(options) { |
||||
var self = this; |
||||
|
||||
self.config = $.extend({ |
||||
per_page: 10, |
||||
selectors: { |
||||
body: "body", |
||||
form: ".u-search-form", |
||||
input: ".u-search-input", |
||||
container: "#u-search", |
||||
modal: "#u-search .modal", |
||||
modal_body: "#u-search .modal-body", |
||||
modal_footer: "#u-search .modal-footer", |
||||
modal_overlay: "#u-search .modal-overlay", |
||||
modal_results: "#u-search .modal-results", |
||||
modal_metadata: "#u-search .modal-metadata", |
||||
modal_error: "#u-search .modal-error", |
||||
modal_loading_bar: "#u-search .modal-loading-bar", |
||||
modal_ajax_content: "#u-search .modal-ajax-content", |
||||
modal_logo: '#u-search .modal-footer .logo', |
||||
btn_close: "#u-search .btn-close", |
||||
btn_next: "#u-search .btn-next", |
||||
btn_prev: "#u-search .btn-prev" |
||||
}, |
||||
brands: { |
||||
'google': {logo: 'google.svg', url: 'https://cse.google.com'}, |
||||
'algolia': {logo: 'algolia.svg', url: 'https://www.algolia.com'}, |
||||
'hexo': {logo: '', url: ''}, |
||||
'azure': {logo: 'azure.svg', url: 'https://azure.microsoft.com/en-us/services/search/'}, |
||||
'baidu': {logo: 'baidu.svg', url: 'http://zn.baidu.com/cse/home/index'} |
||||
}, |
||||
imagePath: ROOT + "img/" |
||||
}, options); |
||||
|
||||
self.dom = {}; |
||||
self.percentLoaded = 0; |
||||
self.open = false; |
||||
self.queryText = ""; |
||||
self.nav = { |
||||
next: -1, |
||||
prev: -1, |
||||
total: 0, |
||||
current: 1 |
||||
}; |
||||
|
||||
self.parseSelectors = function() { |
||||
for (var key in self.config.selectors) { |
||||
self.dom[key] = $(self.config.selectors[key]); |
||||
} |
||||
}; |
||||
|
||||
self.beforeQuery = function() { |
||||
if (!self.open) { |
||||
self.dom.container.fadeIn(); |
||||
self.dom.body.addClass('modal-active'); |
||||
} |
||||
self.dom.input.each(function(index,elem) { |
||||
$(elem).val(self.queryText); |
||||
}); |
||||
document.activeElement.blur(); |
||||
self.dom.modal_error.hide(); |
||||
self.dom.modal_ajax_content.removeClass('loaded'); |
||||
self.startLoading(); |
||||
}; |
||||
|
||||
self.afterQuery = function() { |
||||
self.dom.modal_body.scrollTop(0); |
||||
self.dom.modal_ajax_content.addClass('loaded'); |
||||
self.stopLoading(); |
||||
}; |
||||
|
||||
/** |
||||
* Perform a complete serach operation including UI updates and query |
||||
* @param startIndex {int} start index or page number |
||||
*/ |
||||
self.search = function(startIndex, callback) { |
||||
self.beforeQuery(); |
||||
if (self.search instanceof Function) { |
||||
self.query(self.queryText, startIndex, function() { |
||||
self.afterQuery(); |
||||
}); |
||||
} |
||||
else { |
||||
console.log("query() does not exist."); |
||||
self.onQueryError(self.queryText, ''); |
||||
self.afterQuery(); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* Query error handler |
||||
* @param queryText: (string) |
||||
* @param status: (string) |
||||
*/ |
||||
self.onQueryError = function(queryText, status) { |
||||
var errMsg = ""; |
||||
if (status === "success") errMsg = "No result found for \"" +queryText+ "\"."; |
||||
else if (status === "timeout") errMsg = "Unfortunate timeout."; |
||||
else errMsg = "Mysterious failure."; |
||||
self.dom.modal_results.html(""); |
||||
self.dom.modal_error.html(errMsg); |
||||
self.dom.modal_error.show(); |
||||
}; |
||||
|
||||
self.nextPage = function() { |
||||
if (self.nav.next !== -1) { |
||||
self.search(self.nav.next); |
||||
} |
||||
}; |
||||
|
||||
self.prevPage = function() { |
||||
if (self.nav.prev !== -1) { |
||||
self.search(self.nav.prev); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* Generate html for one result |
||||
* @param url : (string) url |
||||
* @param title : (string) title |
||||
* @param digest : (string) digest |
||||
*/ |
||||
self.buildResult = function(url, title, digest) { |
||||
var html = ""; |
||||
html = "<li>"; |
||||
html += "<a class='result' href='" +url+ "'>"; |
||||
html += "<span class='title'>" +title+ "</span>"; |
||||
html += "<span class='digest'>" +digest+ "</span>"; |
||||
html += "<span class='icon icon-chevron-thin-right'></span>"; |
||||
html += "</a>"; |
||||
html += "</li>"; |
||||
return html; |
||||
}; |
||||
|
||||
/** |
||||
* Close the modal, resume body scrolling |
||||
* no param |
||||
*/ |
||||
self.close = function() { |
||||
self.open = false; |
||||
self.dom.container.fadeOut(); |
||||
self.dom.body.removeClass('modal-active'); |
||||
}; |
||||
|
||||
/** |
||||
* Searchform submit event handler |
||||
* @param queryText : (string) the query text |
||||
*/ |
||||
self.onSubmit = function(event) { |
||||
event.preventDefault(); |
||||
self.queryText = $(this).find('.u-search-input').val(); |
||||
if (self.queryText) { |
||||
self.search(1); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* Start loading bar animation |
||||
* no param |
||||
*/ |
||||
self.startLoading = function() { |
||||
self.dom.modal_loading_bar.show(); |
||||
self.loadingTimer = setInterval(function() {
|
||||
self.percentLoaded = Math.min(self.percentLoaded+5,95); |
||||
self.dom.modal_loading_bar.css('width', self.percentLoaded+'%'); |
||||
}, 100); |
||||
}; |
||||
|
||||
/** |
||||
* Stop loading bar animation |
||||
* no param |
||||
*/ |
||||
self.stopLoading = function() { |
||||
clearInterval(self.loadingTimer); |
||||
self.dom.modal_loading_bar.css('width', '100%'); |
||||
self.dom.modal_loading_bar.fadeOut(); |
||||
setTimeout(function() { |
||||
self.percentLoaded = 0; |
||||
self.dom.modal_loading_bar.css('width', '0%'); |
||||
}, 300); |
||||
}; |
||||
|
||||
/** |
||||
* Add service branding |
||||
* @param service {String} service name |
||||
*/ |
||||
self.addLogo = function(service) { |
||||
var html = ""; |
||||
if (self.config.brands[service] && self.config.brands[service].logo) { |
||||
html += "<a href='" +self.config.brands[service].url+ "' class='" +service+ "'>"; |
||||
html += '<img src="' +self.config.imagePath+self.config.brands[service].logo+ '" />'; |
||||
html += "</a>"; |
||||
self.dom.modal_logo.html(html); |
||||
} |
||||
}; |
||||
|
||||
self.destroy = function() { |
||||
self.dom.form.each(function(index,elem) { |
||||
$(elem).off('submit'); |
||||
}); |
||||
self.dom.modal_overlay.off('click'); |
||||
self.dom.btn_close.off('click'); |
||||
self.dom.btn_next.off('click'); |
||||
self.dom.btn_prev.off('click'); |
||||
self.dom.container.remove(); |
||||
}; |
||||
|
||||
/** |
||||
* Load template and register event handlers |
||||
* no param |
||||
*/ |
||||
self.init = function() { |
||||
$('body').append(template); |
||||
self.parseSelectors(); |
||||
self.dom.modal_footer.show(); |
||||
self.dom.form.each(function(index,elem) { |
||||
$(elem).on('submit', self.onSubmit); |
||||
}); |
||||
self.dom.modal_overlay.on('click', self.close); |
||||
self.dom.btn_close.on('click', self.close); |
||||
self.dom.btn_next.on('click', self.nextPage); |
||||
self.dom.btn_prev.on('click', self.prevPage); |
||||
}; |
||||
|
||||
self.init(); |
||||
}; |
||||
|
||||
var template = '<div id="u-search"><div class="modal"> <header class="modal-header" class="clearfix"><form id="u-search-modal-form" class="u-search-form" name="uSearchModalForm"> <input type="text" id="u-search-modal-input" class="u-search-input" /> <button type="submit" id="u-search-modal-btn-submit" class="u-search-btn-submit"> <span class="icon icon-search"></span> </button></form> <a class="btn-close"> <span class="icon icon-close"></span> </a><div class="modal-loading"><div class="modal-loading-bar"></div></div> </header> <main class="modal-body"><ul class="modal-results modal-ajax-content"></ul> </main> <footer class="modal-footer clearfix"><div class="modal-metadata modal-ajax-content"> <strong class="range"></strong> of <strong class="total"></strong></div><div class="modal-error"></div> <div class="logo"></div> <a class="nav btn-next modal-ajax-content"> <span class="text">NEXT</span> <span class="icon icon-chevron-right"></span> </a> <a class="nav btn-prev modal-ajax-content"> <span class="icon icon-chevron-left"></span> <span class="text">PREV</span> </a> </footer></div><div class="modal-overlay"></div></div>'; |
||||
})(jQuery); |
||||
|
||||
var AlgoliaSearch; |
||||
|
||||
(function($) { |
||||
'use strict'; |
||||
|
||||
/** |
||||
* Search by Algolia Search |
||||
* @param options : (object) |
||||
*/ |
||||
AlgoliaSearch = function(options) { |
||||
SearchService.apply(this, arguments); |
||||
var self = this; |
||||
var endpoint = "https://" +self.config.appId+ "-dsn.algolia.net/1/indexes/" +self.config.indexName; |
||||
self.addLogo('algolia'); |
||||
|
||||
/** |
||||
* Generate result list html |
||||
* @param data : (array) result items |
||||
*/ |
||||
self.buildResultList = function(data) { |
||||
var html = ""; |
||||
$.each(data, function(index, row) { |
||||
var url = row.permalink || row.path || ""; |
||||
if (!row.permalink && row.path) { |
||||
url = ROOT + url; |
||||
} |
||||
var title = row.title; |
||||
var digest = row._highlightResult.excerptStrip.value || ""; |
||||
html += self.buildResult(url, title, digest); |
||||
}); |
||||
return html; |
||||
}; |
||||
|
||||
/** |
||||
* Generate metadata after a successful query |
||||
* @param data : (object) the raw search response data |
||||
*/ |
||||
self.buildMetadata = function(data) { |
||||
self.nav.current = data.page * data.hitsPerPage + 1; |
||||
self.nav.currentCount = data.hits.length; |
||||
self.nav.total = parseInt(data.nbHits); |
||||
self.dom.modal_metadata.children('.total').html(self.nav.total); |
||||
self.dom.modal_metadata.children('.range').html(self.nav.current + "-" + (self.nav.current+self.nav.currentCount-1)); |
||||
if (self.nav.total > 0) { |
||||
self.dom.modal_metadata.show(); |
||||
} |
||||
else { |
||||
self.dom.modal_metadata.hide(); |
||||
} |
||||
|
||||
if (data.page < data.nbPages-1) { |
||||
self.nav.next = (data.page+1)+1; |
||||
self.dom.btn_next.show(); |
||||
} |
||||
else { |
||||
self.nav.next = -1; |
||||
self.dom.btn_next.hide(); |
||||
} |
||||
if (data.page > 0) { |
||||
self.nav.prev = (data.page+1)-1; |
||||
self.dom.btn_prev.show(); |
||||
} |
||||
else { |
||||
self.nav.prev = -1; |
||||
self.dom.btn_prev.hide(); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* Send a GET request |
||||
* @param queryText : (string) the query text |
||||
* @param page : (int) the current page (start from 1) |
||||
* @param callback : (function) |
||||
*/ |
||||
self.query = function(queryText, page, callback) { |
||||
$.get(endpoint, { |
||||
query: queryText, |
||||
page: page-1, |
||||
hitsPerPage: self.config.per_page, |
||||
"x-algolia-application-id": self.config.appId, |
||||
"x-algolia-api-key": self.config.apiKey |
||||
}, function(data, status) { |
||||
if (status === 'success' && data.hits && data.hits.length > 0) { |
||||
var results = self.buildResultList(data.hits);
|
||||
self.dom.modal_results.html(results); |
||||
} |
||||
else { |
||||
self.onQueryError(queryText, status); |
||||
} |
||||
self.buildMetadata(data); |
||||
if (callback) { |
||||
callback(data); |
||||
} |
||||
}); |
||||
}; |
||||
|
||||
return self; |
||||
}; |
||||
|
||||
})(jQuery); |
||||
var AzureSearch; |
||||
|
||||
(function($) { |
||||
'use strict'; |
||||
|
||||
/** |
||||
* Search by Azure Search API |
||||
* @param options : (object) |
||||
*/ |
||||
AzureSearch = function(options) { |
||||
SearchService.apply(this, arguments); |
||||
var self = this; |
||||
var endpoint = "https://" +self.config.serviceName+ ".search.windows.net/indexes/" +self.config.indexName+ "/docs?api-version=2015-02-28"; |
||||
self.nav.current = 1; |
||||
self.addLogo('azure'); |
||||
|
||||
/** |
||||
* Generate result list html |
||||
* @param data : (array) result items |
||||
*/ |
||||
self.buildResultList = function(data) { |
||||
var html = ""; |
||||
$.each(data, function(index, row) { |
||||
var url = row.permalink || row.path || ""; |
||||
if (!row.permalink && row.path) { |
||||
url = "/" + url; |
||||
} |
||||
var title = row.title; |
||||
var digest = row.excerpt || ""; |
||||
html += self.buildResult(url, title, digest); |
||||
}); |
||||
return html; |
||||
}; |
||||
|
||||
/** |
||||
* Generate metadata after a successful query |
||||
* @param data : (object) the raw response data |
||||
* @param startIndex : (int) requested start index of current query |
||||
*/ |
||||
self.buildMetadata = function(data, startIndex) { |
||||
self.nav.current = startIndex; |
||||
self.nav.currentCount = data.value.length; |
||||
self.nav.total = parseInt(data['@odata.count']); |
||||
self.dom.modal_metadata.children('.total').html(self.nav.total); |
||||
self.dom.modal_metadata.children('.range').html(self.nav.current + "-" + (self.nav.current+self.nav.currentCount-1)); |
||||
if (self.nav.total > 0) { |
||||
self.dom.modal_metadata.show(); |
||||
} |
||||
else { |
||||
self.dom.modal_metadata.hide(); |
||||
} |
||||
|
||||
if (self.nav.current+self.nav.currentCount <= self.nav.total) { |
||||
self.nav.next = self.nav.current+self.nav.currentCount; |
||||
self.dom.btn_next.show(); |
||||
} |
||||
else { |
||||
self.nav.next = -1; |
||||
self.dom.btn_next.hide(); |
||||
} |
||||
if (self.nav.current > 1) { |
||||
self.nav.prev = self.nav.current-self.config.per_page; |
||||
self.dom.btn_prev.show(); |
||||
} |
||||
else { |
||||
self.nav.prev = -1; |
||||
self.dom.btn_prev.hide(); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* Send a GET request |
||||
* @param queryText : (string) the query text |
||||
* @param page : (int) the current page (start from 1) |
||||
* @param callback : (function) |
||||
*/ |
||||
self.query = function(queryText, startIndex, callback) { |
||||
$.ajax({ |
||||
url: endpoint, |
||||
headers: { |
||||
"Accept": "application/json", |
||||
"api-key": self.config.queryKey |
||||
}, |
||||
data: { |
||||
search: queryText, |
||||
$orderby: "date desc", |
||||
$skip: startIndex-1, |
||||
$top: self.config.per_page, |
||||
$count: true |
||||
}, |
||||
type: "GET", |
||||
success: function(data, status) { |
||||
if (status === 'success' && data.value && data.value.length > 0) { |
||||
var results = self.buildResultList(data.value); |
||||
self.dom.modal_results.html(results); |
||||
} |
||||
else { |
||||
self.onQueryError(queryText, status); |
||||
} |
||||
self.buildMetadata(data, startIndex); |
||||
if (callback) { |
||||
callback(data); |
||||
} |
||||
} |
||||
}); |
||||
}; |
||||
|
||||
return self; |
||||
}; |
||||
|
||||
})(jQuery); |
||||
var BaiduSearch; |
||||
|
||||
(function($) { |
||||
'use strict'; |
||||
|
||||
/** |
||||
* TODO |
||||
* Search by Baidu Search API |
||||
* @param options : (object) |
||||
*/ |
||||
BaiduSearch = function(options) { |
||||
SearchService.apply(this, arguments); |
||||
var self = this; |
||||
var endpoint = ""; |
||||
self.addLogo('baidu'); |
||||
|
||||
/** |
||||
* Generate result list html |
||||
* @param data : (array) result items |
||||
*/ |
||||
self.buildResultList = function(data, queryText) { |
||||
var results = [], |
||||
html = ""; |
||||
$.each(data, function(index, post) { |
||||
if (self.contentSearch(post, queryText)) |
||||
html += self.buildResult(post.linkUrl, post.title, post.abstract); |
||||
}); |
||||
return html; |
||||
}; |
||||
|
||||
/** |
||||
* Generate metadata after a successful query |
||||
* @param data : (object) the raw google custom search response data |
||||
*/ |
||||
self.buildMetadata = function(data) { |
||||
|
||||
}; |
||||
|
||||
self.loadScript = function() { |
||||
self.dom.input.each(function(index,elem) { |
||||
$(elem).attr('disabled', true); |
||||
}); |
||||
var script = "<script src='http://zhannei.baidu.com/api/customsearch/apiaccept?sid=" +self.config.apiId+ "&v=2.0&callback=customSearch.initBaidu' type='text/javascript' charset='utf-8'></script>"; |
||||
self.dom.body.append(script); |
||||
}; |
||||
|
||||
self.initBaidu = function() { |
||||
self.cse = new BCse.Search(self.config.apiId); |
||||
//self.cse.setPageNum(self.config.per_page);
|
||||
self.dom.input.each(function(index,elem) { |
||||
$(elem).attr('disabled', false); |
||||
}); |
||||
}; |
||||
|
||||
/** |
||||
* Get search results |
||||
* @param queryText {String} |
||||
* @param page {Integer} |
||||
* @param callback {Function} |
||||
*/ |
||||
self.query = function(queryText, page, callback) { |
||||
self.cse.getResult(queryText, function(data) { |
||||
console.log("Searching: " + queryText); |
||||
console.log(data); |
||||
self.cse.getError(function(data) { |
||||
console.log(data); |
||||
}); |
||||
if (data.length > 0) { |
||||
self.buildResultList(data, queryText); |
||||
self.cse.getSearchInfo(queryText, function(data) { |
||||
console.log(data); |
||||
self.buildMetadata(data); |
||||
}); |
||||
} |
||||
else { |
||||
self.nav.total = 0; |
||||
self.nav.next = -1; |
||||
self.nav.prev = -1; |
||||
self.dom.modal_metadata.hide(); |
||||
self.dom.btn_next.hide(); |
||||
self.dom.btn_prev.hide(); |
||||
self.onQueryError(queryText, "success"); |
||||
} |
||||
if (callback instanceof Function) { |
||||
callback(); |
||||
} |
||||
}); |
||||
}; |
||||
|
||||
self.loadScript(); |
||||
|
||||
return self; |
||||
}; |
||||
|
||||
})(jQuery); |
||||
var GoogleCustomSearch = ""; |
||||
|
||||
(function($) { |
||||
'use strict'; |
||||
|
||||
/** |
||||
* Search by Google Custom Search Engine JSON API |
||||
* @param options : (object) |
||||
*/ |
||||
GoogleCustomSearch = function(options) { |
||||
SearchService.apply(this, arguments); |
||||
var self = this; |
||||
var endpoint = "https://www.googleapis.com/customsearch/v1"; |
||||
self.addLogo('google'); |
||||
|
||||
/** |
||||
* Generate result list html |
||||
* @param data : (array) result items |
||||
*/ |
||||
self.buildResultList = function(data) { |
||||
var html = ""; |
||||
$.each(data, function(index, row) { |
||||
var url = row.link; |
||||
var title = row.title; |
||||
var digest = (row.htmlSnippet || "").replace('<br>',''); |
||||
html += self.buildResult(url, title, digest); |
||||
}); |
||||
return html; |
||||
}; |
||||
|
||||
/** |
||||
* Generate metadata after a successful query |
||||
* @param data : (object) the raw google custom search response data |
||||
*/ |
||||
self.buildMetadata = function(data) { |
||||
if (data.queries && data.queries.request && data.queries.request[0].totalResults !== '0') { |
||||
self.nav.current = data.queries.request[0].startIndex; |
||||
self.nav.currentCount = data.queries.request[0].count; |
||||
self.nav.total = parseInt(data.queries.request[0].totalResults); |
||||
self.dom.modal_metadata.children('.total').html(self.nav.total); |
||||
self.dom.modal_metadata.children('.range').html(self.nav.current + "-" + (self.nav.current+self.nav.currentCount-1)); |
||||
self.dom.modal_metadata.show(); |
||||
} |
||||
else { |
||||
self.dom.modal_metadata.hide(); |
||||
} |
||||
if (data.queries && data.queries.nextPage) { |
||||
self.nav.next = data.queries.nextPage[0].startIndex; |
||||
self.dom.btn_next.show(); |
||||
} |
||||
else { |
||||
self.nav.next = -1; |
||||
self.dom.btn_next.hide(); |
||||
} |
||||
if (data.queries && data.queries.previousPage) { |
||||
self.nav.prev = data.queries.previousPage[0].startIndex; |
||||
self.dom.btn_prev.show(); |
||||
} |
||||
else { |
||||
self.nav.prev = -1; |
||||
self.dom.btn_prev.hide(); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* Send a GET request |
||||
* @param queryText : (string) the query text |
||||
* @param startIndex : (int) the index of first item (start from 1) |
||||
* @param callback : (function) |
||||
*/ |
||||
self.query = function(queryText, startIndex, callback) { |
||||
$.get(endpoint, { |
||||
key: self.config.apiKey, |
||||
cx: self.config.engineId, |
||||
q: queryText, |
||||
start: startIndex, |
||||
num: self.config.per_page |
||||
}, function(data, status) { |
||||
if (status === 'success' && data.items && data.items.length > 0) { |
||||
var results = self.buildResultList(data.items);
|
||||
self.dom.modal_results.html(results);
|
||||
} |
||||
else { |
||||
self.onQueryError(queryText, status); |
||||
} |
||||
self.buildMetadata(data); |
||||
if (callback) { |
||||
callback(); |
||||
} |
||||
}); |
||||
}; |
||||
|
||||
return self; |
||||
}; |
||||
})(jQuery); |
||||
var HexoSearch; |
||||
|
||||
(function($) { |
||||
'use strict'; |
||||
|
||||
/** |
||||
* Search by Hexo generator json content |
||||
* @param options : (object) |
||||
*/ |
||||
HexoSearch = function(options) { |
||||
SearchService.apply(this, arguments); |
||||
var self = this; |
||||
self.config.endpoint = ROOT + ((options||{}).endpoint || "content.json"); |
||||
self.config.endpoint = self.config.endpoint.replace("//","/"); //make sure the url is correct
|
||||
self.cache = ""; |
||||
|
||||
/** |
||||
* Search queryText in title and content of a post |
||||
* Credit to: http://hahack.com/codes/local-search-engine-for-hexo/
|
||||
* @param post : the post object |
||||
* @param queryText : the search query |
||||
*/ |
||||
self.contentSearch = function(post, queryText) { |
||||
var post_title = post.title.trim().toLowerCase(), |
||||
post_content = post.text.trim().toLowerCase(), |
||||
keywords = queryText.trim().toLowerCase().split(" "), |
||||
foundMatch = false, |
||||
index_title = -1, |
||||
index_content = -1, |
||||
first_occur = -1; |
||||
if (post_title !== '' && post_content !== '') { |
||||
$.each(keywords, function(index, word) { |
||||
index_title = post_title.indexOf(word); |
||||
index_content = post_content.indexOf(word); |
||||
if (index_title < 0 && index_content < 0) { |
||||
foundMatch = false; |
||||
} |
||||
else { |
||||
foundMatch = true; |
||||
if (index_content < 0) { |
||||
index_content = 0; |
||||
} |
||||
if (index === 0) { |
||||
first_occur = index_content; |
||||
} |
||||
} |
||||
if (foundMatch) { |
||||
post_content = post.text.trim(); |
||||
var start = 0, end = 0; |
||||
if (first_occur >= 0) { |
||||
start = Math.max(first_occur-30, 0); |
||||
end = (start === 0) ? Math.min(200, post_content.length) : Math.min(first_occur+170, post_content.length); |
||||
var match_content = post_content.substring(start, end); |
||||
keywords.forEach(function(keyword) { |
||||
var regS = new RegExp(keyword, "gi"); |
||||
match_content = match_content.replace(regS, "<b>"+keyword+"</b>"); |
||||
}); |
||||
post.digest = match_content; |
||||
} |
||||
else { |
||||
end = Math.min(200, post_content.length); |
||||
post.digest = post_content.trim().substring(0, end); |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
return foundMatch; |
||||
}; |
||||
|
||||
/** |
||||
* Generate result list html |
||||
* @param data : (array) result items |
||||
*/ |
||||
self.buildResultList = function(data, queryText) { |
||||
var results = [], |
||||
html = ""; |
||||
$.each(data, function(index, post) { |
||||
if (self.contentSearch(post, queryText)) |
||||
html += self.buildResult(post.permalink, post.title, post.digest); |
||||
}); |
||||
return html; |
||||
}; |
||||
|
||||
/** |
||||
* Generate metadata after a successful query |
||||
* @param data : (object) the raw google custom search response data |
||||
*/ |
||||
self.buildMetadata = function(data) { |
||||
self.dom.modal_footer.hide(); |
||||
}; |
||||
|
||||
/** |
||||
* Send a GET request |
||||
* @param queryText : (string) the query text |
||||
* @param startIndex : (int) the index of first item (start from 1) |
||||
* @param callback : (function) |
||||
*/ |
||||
self.query = function(queryText, startIndex, callback) { |
||||
if (!self.cache) { |
||||
$.get(self.config.endpoint, { |
||||
key: self.config.apiKey, |
||||
cx: self.config.engineId, |
||||
q: queryText, |
||||
start: startIndex, |
||||
num: self.config.per_page |
||||
}, function(data, status) { |
||||
if (status !== 'success' ||
|
||||
!data ||
|
||||
(!data.posts && !data.pages) ||
|
||||
(data.posts.length < 1 && data.pages.length < 1) |
||||
) { |
||||
self.onQueryError(queryText, status); |
||||
} |
||||
else { |
||||
self.cache = data; |
||||
var results = "";
|
||||
results += self.buildResultList(data.pages, queryText); |
||||
results += self.buildResultList(data.posts, queryText); |
||||
self.dom.modal_results.html(results); |
||||
} |
||||
self.buildMetadata(data); |
||||
if (callback) { |
||||
callback(data); |
||||
} |
||||
}); |
||||
} |
||||
else { |
||||
var results = "";
|
||||
results += self.buildResultList(self.cache.pages, queryText); |
||||
results += self.buildResultList(self.cache.posts, queryText); |
||||
self.dom.modal_results.html(results); |
||||
self.buildMetadata(self.cache); |
||||
if (callback) { |
||||
callback(self.cache); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
return self; |
||||
}; |
||||
|
||||
})(jQuery); |
||||
@ -0,0 +1,40 @@ |
||||
#archive-page { |
||||
margin-bottom: @gap * 2; |
||||
.archive { |
||||
position: relative; |
||||
.archive-year { |
||||
font-size: @base-font-size; |
||||
margin: 1em 0; |
||||
a { |
||||
color: @text-color; |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
.archive-post { |
||||
a { |
||||
width: 100%; |
||||
display: inline-flex; |
||||
flex-flow: row nowrap; |
||||
justify-content: flex-start; |
||||
align-items: flex-start; |
||||
text-decoration: none; |
||||
} |
||||
time { |
||||
color: @text-color; |
||||
flex: none; |
||||
font-size: @small-font-size; |
||||
// padding-right: 10px; |
||||
padding: .5em .5em .5em 3em; |
||||
@media (max-width: @on-phone) { |
||||
padding: .5em .5em .5em 0; |
||||
} |
||||
} |
||||
.title { |
||||
flex: auto; |
||||
padding: .5em; |
||||
font-size: @small-font-size; |
||||
color: fade(@text-color,80%); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,387 @@ |
||||
.article { |
||||
color: @text-color; |
||||
font-size: @base-font-size; |
||||
line-height: @base-line-height; |
||||
word-break: break-all; |
||||
word-wrap: break-word; |
||||
em { |
||||
position: relative; |
||||
&:before { |
||||
position: absolute; |
||||
top: 0.65em; |
||||
left: 0; |
||||
width: 100%; |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・"; |
||||
} |
||||
} |
||||
img { |
||||
position: relative; |
||||
display: block; |
||||
margin: 0 auto; |
||||
background: white; |
||||
.enable-trans(); |
||||
@media (max-width: @on-phone) { |
||||
box-shadow: none; |
||||
} |
||||
} |
||||
hr { |
||||
border: 0; |
||||
border-bottom: 1px solid #ddd; |
||||
} |
||||
p.small-img, |
||||
div.small-img { |
||||
img { |
||||
width: auto; |
||||
max-width: 100%; |
||||
margin: 0; |
||||
box-shadow: none; |
||||
} |
||||
} |
||||
p { |
||||
// margin: 20px 0px; |
||||
margin-top: .5em; |
||||
margin-bottom: 1em; |
||||
} |
||||
ul, |
||||
ol { |
||||
font-size: @base-font-size * .95; |
||||
list-style: initial; |
||||
padding-left: 10px; |
||||
margin-left: 10px; |
||||
margin-bottom: 1em; |
||||
} |
||||
ul { |
||||
& > li{ |
||||
list-style: initial; |
||||
} |
||||
} |
||||
ol { |
||||
& > li{ |
||||
margin-left: 10px; |
||||
list-style: decimal; |
||||
} |
||||
} |
||||
a { |
||||
color: darken(@accent-color, 2%); |
||||
.enable-trans(); |
||||
&:hover { |
||||
color: darken(@accent-color, 20%); |
||||
text-decoration: underline; |
||||
} |
||||
&:active { |
||||
color: darken(@accent-color, 50%); |
||||
} |
||||
} |
||||
h1, |
||||
h2, |
||||
h3, |
||||
h4, |
||||
h5, |
||||
h6 { |
||||
position: relative; |
||||
font-family: @base-font-family; |
||||
font-weight: normal; |
||||
margin-top: .5em; |
||||
&.title { |
||||
left: 0; |
||||
&:before { |
||||
content: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
h1, h2 { |
||||
margin-top: 1.5em; |
||||
margin-bottom: .5em; |
||||
color: @text-color-theme; |
||||
} |
||||
h1, h2, h3 { |
||||
|
||||
} |
||||
h1 { |
||||
font-size: @font-size-h1; |
||||
} |
||||
h2 { |
||||
font-size: @font-size-h2; |
||||
} |
||||
h3 { |
||||
// font-weight: bold; |
||||
font-size: @font-size-h3; |
||||
color: darken(@text-color, 20%); |
||||
} |
||||
h4 { |
||||
font-weight: bold; |
||||
font-size: @font-size-h4; |
||||
} |
||||
h5 { |
||||
font-weight: bold; |
||||
color: fade(@text-color, 60%); |
||||
font-size: @font-size-h5; |
||||
} |
||||
h6 { |
||||
color: fade(@text-color, 60%); |
||||
font-size: @font-size-h6; |
||||
} |
||||
|
||||
figure { |
||||
figcaption { |
||||
span { |
||||
display: inline-block; |
||||
margin-right: 5px; |
||||
} |
||||
} |
||||
} |
||||
blockquote { |
||||
position: relative; |
||||
width: 100%; |
||||
font-size: @small-font-size; |
||||
background: @qoute-background-color; |
||||
margin: 1em 0; |
||||
padding: 1.5em 1.5em .5em 1.5em; |
||||
border-left: 4px solid @primary-color; |
||||
border-top-right-radius: 8px; |
||||
border-bottom-right-radius: 8px; |
||||
footer { |
||||
strong { |
||||
margin-right: 7px; |
||||
} |
||||
} |
||||
} |
||||
pre { |
||||
display: block; |
||||
-moz-box-sizing: border-box; |
||||
box-sizing: border-box; |
||||
font-family: @code-font-family; |
||||
} |
||||
code { |
||||
font-family: @code-font-family; |
||||
color: darken(@text-color-theme, 15%); |
||||
padding: 2px 4px 0px 4px; |
||||
margin: 0px 2px; |
||||
border-radius: 2px; |
||||
font-size: @base-font-size * .8; |
||||
background: fade(@primary-color, 12%); |
||||
@media(max-width: @on-phone){ |
||||
font-size: @base-font-size * .8 * .95; |
||||
} |
||||
} |
||||
.readmore { |
||||
// display: none; // howtodesign? |
||||
font-family: @title-font-family; |
||||
font-size: .8em; |
||||
letter-spacing: .1em; |
||||
margin-top: @gap; |
||||
a { |
||||
text-decoration: none; |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
line-height: 2rem; |
||||
background-color: fade(@primary-color, 90%); |
||||
padding: .2em 2.4em; |
||||
color: @text-color-inside-theme; |
||||
border-radius: 3px; |
||||
.enable-trans(); |
||||
&:hover { |
||||
background: darken(@primary-color, 10%); |
||||
} |
||||
&:active { |
||||
background: lighten(@primary-color, 20%); |
||||
} |
||||
} |
||||
|
||||
} |
||||
.tags { |
||||
position: relative; |
||||
padding-top: @gap/2; |
||||
padding-bottom: @gap/2; |
||||
font-size: @small-font-size; |
||||
line-height: @base-line-height; |
||||
margin-top: @gap; |
||||
background: darken(white, 4%); |
||||
&.article-tags { |
||||
background: transparent; |
||||
} |
||||
word-spacing: @gap; |
||||
a { |
||||
position: relative; |
||||
display: inline-block; |
||||
word-spacing: 0; |
||||
// letter-spacing: .1em; |
||||
// &+a{ |
||||
// margin-left: @gap/2; |
||||
// } |
||||
.enable-trans(); |
||||
color: @grey-color; |
||||
&:hover { |
||||
color: @accent-color; |
||||
background: transparent; |
||||
} |
||||
&::before { |
||||
// content: "#"; |
||||
} |
||||
} |
||||
} |
||||
table:not('.highlight table') { |
||||
width: 100%; |
||||
td, |
||||
th { |
||||
padding: 12px 24px |
||||
} |
||||
tr { |
||||
border-bottom: 1px solid #ddd; |
||||
} |
||||
&>thead>th { |
||||
border-bottom-width: 2px; |
||||
} |
||||
} |
||||
@media (max-width: @on-phone) { |
||||
h1 { |
||||
font-size: @font-size-h1 * .9; |
||||
} |
||||
h2 { |
||||
font-size: @font-size-h2 * .9; |
||||
} |
||||
h3 { |
||||
font-size: @font-size-h3 * .9; |
||||
} |
||||
h4 { |
||||
font-size: @font-size-h4 * .9; |
||||
} |
||||
h5 { |
||||
font-size: @font-size-h5 * .9; |
||||
} |
||||
h6 { |
||||
font-size: @font-size-h6 * .9; |
||||
} |
||||
p { |
||||
font-size: @base-font-size * .95; |
||||
} |
||||
ul, |
||||
ol { |
||||
font-size: @base-font-size * .95 * .95; |
||||
} |
||||
figure { |
||||
font-size: 13px; |
||||
line-height: 1.6em; |
||||
} |
||||
} |
||||
} |
||||
/* Tomorrow Night Eighties Theme */ |
||||
/* Original theme - https://github.com/chriskempson/tomorrow-theme */ |
||||
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ |
||||
.tomorrow-comment, pre .comment, pre .title { |
||||
color: #999999; |
||||
} |
||||
|
||||
.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo { |
||||
color: #f2777a; |
||||
} |
||||
|
||||
.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant { |
||||
color: #f99157; |
||||
} |
||||
|
||||
.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute { |
||||
color: #ffcc66; |
||||
} |
||||
|
||||
.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata { |
||||
color: #99cc99; |
||||
} |
||||
|
||||
.tomorrow-aqua, pre .css .hexcolor { |
||||
color: #66cccc; |
||||
} |
||||
|
||||
.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title { |
||||
color: #6699cc; |
||||
} |
||||
|
||||
.tomorrow-purple, pre .keyword, pre .javascript .function { |
||||
color: #cc99cc; |
||||
} |
||||
|
||||
.highlight { |
||||
width: 100%; |
||||
margin-top: 1em; |
||||
margin-bottom: 1.2em; |
||||
overflow: auto; |
||||
display: block; |
||||
// background: #2d2d2d; |
||||
// background: fade(@material-blue, 8%); |
||||
background: @qoute-background-color; |
||||
// color: #cccccc; |
||||
font-size: @small-font-size * .95; |
||||
font-family:@code-font-family; |
||||
line-height: @base-line-height; |
||||
// border: 1px solid #ccc; |
||||
padding: 1.5em 0; |
||||
border-radius: 8px; |
||||
.gutter{ |
||||
color: #999999; |
||||
padding-right: 20px; |
||||
text-align: right; |
||||
} |
||||
.code{ |
||||
vertical-align: top; |
||||
} |
||||
&::-webkit-scrollbar { |
||||
height: 6px; |
||||
width: 6px; |
||||
border-radius: 6px; |
||||
} |
||||
// /* Track */ |
||||
|
||||
&::-webkit-scrollbar-track-piece { |
||||
background: transparent; |
||||
} |
||||
|
||||
|
||||
/* Handle */ |
||||
|
||||
&::-webkit-scrollbar-thumb { |
||||
background: #ddd; |
||||
cursor: pointer; |
||||
.enable-trans(); |
||||
&:hover { |
||||
background: darken(#ddd, 15%); |
||||
} |
||||
} |
||||
|
||||
|
||||
} |
||||
|
||||
.article { |
||||
@media (max-width: @on-phone) { |
||||
.highlight { |
||||
font-size: @small-font-size * .95 * .95; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.art-item-footer{ |
||||
height: 40px; |
||||
line-height: @base-line-height; |
||||
font-size: @small-font-size; |
||||
.art-item-left,.art-item-right{ |
||||
width:50%; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
} |
||||
.art-item-left{ |
||||
float: left; |
||||
text-align: left; |
||||
} |
||||
.art-item-right{ |
||||
float: right; |
||||
text-align: right; |
||||
} |
||||
@media (max-width: @on-phone) { |
||||
font-size: @small-font-size * .95 * .95; |
||||
} |
||||
} |
||||
@ -0,0 +1,361 @@ |
||||
/* Basic Settings */ |
||||
|
||||
* { |
||||
box-sizing: border-box; |
||||
outline: none; |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
|
||||
/* My Base */ |
||||
|
||||
html { |
||||
width: 100%; |
||||
height: 100%; |
||||
padding-top: @header-height; |
||||
font-family: @base-font-family; |
||||
font-size: @base-font-size; |
||||
line-height: 1.5rem; |
||||
color: @text-color; |
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
||||
-webkit-text-size-adjust: 100%; |
||||
-ms-text-size-adjust: 100%; |
||||
text-rendering: optimizelegibility; |
||||
} |
||||
|
||||
body { |
||||
background-color: @background-color; |
||||
&.modal-active { |
||||
overflow: hidden; |
||||
@media (max-width: @modal-threshold) { |
||||
position: fixed; |
||||
top: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
} |
||||
} |
||||
&.z_menu-open { |
||||
.menu-phone { |
||||
transform: translate3d(-10px, 0, 0); |
||||
} |
||||
} |
||||
} |
||||
|
||||
// //reset ::-webkit-scrollbar |
||||
|
||||
// /* Let's get this party started */ |
||||
|
||||
// ::-webkit-scrollbar { |
||||
// width: 8px; |
||||
// height: 8px; |
||||
// } |
||||
|
||||
|
||||
// /* Track */ |
||||
|
||||
// ::-webkit-scrollbar-track-piece { |
||||
// background: transparent; |
||||
// } |
||||
|
||||
|
||||
// /* Handle */ |
||||
|
||||
// ::-webkit-scrollbar-thumb { |
||||
// background: #c1c1c1; |
||||
// cursor: pointer; |
||||
// .enable-trans(); |
||||
// &:hover { |
||||
// background: darken(#c1c1c1, 10%); |
||||
// } |
||||
// } |
||||
|
||||
.z-depth-nav { |
||||
box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.24), 0 3px 6px 0px rgba(0, 0, 0, 0.1); |
||||
} |
||||
.z-depth-nav-raised { |
||||
// box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.12), 0 4px 8px 0px rgba(0, 0, 0, 0.12), 0 8px 16px 0px rgba(0, 0, 0, 0.1); |
||||
box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 8px 16px 0px rgba(0, 0, 0, 0.12), 0 16px 32px 0px rgba(0, 0, 0, 0.12); |
||||
} |
||||
|
||||
.z-depth-main { |
||||
// box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.08); |
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); |
||||
} |
||||
|
||||
.z-depth-main-raised { |
||||
box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 8px 16px 0px rgba(0, 0, 0, 0.12), 0 16px 32px 0px rgba(0, 0, 0, 0.12); |
||||
} |
||||
|
||||
.z-depth-0 { |
||||
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.07); |
||||
} |
||||
|
||||
.z-depth-1 { |
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.1); |
||||
} |
||||
|
||||
.z-depth-1-half { |
||||
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.4), 0 0px 8px 0px rgba(0, 0, 0, 0.2); |
||||
} |
||||
|
||||
.z-depth-2 { |
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1); |
||||
} |
||||
|
||||
.z-depth-3 { |
||||
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.12), 0 8px 25px 0 rgba(0, 0, 0, 0.1); |
||||
} |
||||
|
||||
.z-depth-4 { |
||||
box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.11), 0 12px 22px 0 rgba(0, 0, 0, 0.11); |
||||
} |
||||
|
||||
.z-depth-5 { |
||||
box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.1), 0 20px 33px 0 rgba(0, 0, 0, 0.11); |
||||
} |
||||
.z-depth-0 { |
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.08); |
||||
} |
||||
|
||||
.hoverable { |
||||
.enable-trans(); |
||||
box-shadow: 0; |
||||
} |
||||
|
||||
.hoverable:hover { |
||||
.enable-trans(); |
||||
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); |
||||
} |
||||
|
||||
::-moz-selection { |
||||
background: fade(lighten(@material-ax-blue, 5%), 25%); |
||||
// color: @black; |
||||
} |
||||
|
||||
::selection { |
||||
background: fade(lighten(@material-ax-blue, 5%), 25%); |
||||
// color: @black; |
||||
} |
||||
|
||||
h1, |
||||
h2, |
||||
h3, |
||||
h4, |
||||
h5, |
||||
h6 { |
||||
-webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; |
||||
-moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; |
||||
-o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; |
||||
text-rendering: geometricPrecision; |
||||
margin: 0 0 0.4em 0; |
||||
} |
||||
|
||||
h1 { |
||||
font-size: @font-size-h1; |
||||
} |
||||
|
||||
h2 { |
||||
font-size: @font-size-h2; |
||||
} |
||||
|
||||
h3 { |
||||
font-size: @font-size-h3; |
||||
} |
||||
|
||||
h4 { |
||||
font-size: @font-size-h4; |
||||
} |
||||
|
||||
h5 { |
||||
font-size: @font-size-h5; |
||||
} |
||||
|
||||
h6 { |
||||
font-size: @font-size-h6; |
||||
} |
||||
|
||||
a { |
||||
color: @black; |
||||
cursor: pointer; |
||||
text-decoration: none; |
||||
.enable-trans(); |
||||
&:hover { |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
|
||||
pre { |
||||
tab-size: 2; |
||||
-moz-tab-size: 2; |
||||
-o-tab-size: 2; |
||||
-webkit-tab-size: 2; |
||||
} |
||||
|
||||
img { |
||||
max-width: 100%; |
||||
} |
||||
|
||||
|
||||
/** |
||||
* Util |
||||
*/ |
||||
|
||||
.clearfix { |
||||
zoom: 1; |
||||
&:before, |
||||
&:after { |
||||
content: " "; // 1 |
||||
display: table; // 2 |
||||
} |
||||
&:after { |
||||
clear: both; |
||||
} |
||||
} |
||||
|
||||
.hidden { |
||||
text-indent: -9999px; |
||||
visibility: hidden; |
||||
display: none; |
||||
} |
||||
|
||||
.inner { |
||||
position: relative; |
||||
width: 80%; |
||||
max-width: 710px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.vertical { |
||||
display: table-cell; |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
.right { |
||||
float: right; |
||||
} |
||||
|
||||
.left { |
||||
float: left; |
||||
} |
||||
|
||||
.disable-trans { |
||||
-moz-transition: none !important; |
||||
-webkit-transition: none !important; |
||||
-o-transition: color 0 ease-in !important; |
||||
transition: none !important; |
||||
} |
||||
|
||||
.dark-btn { |
||||
display: inline-block; |
||||
background: rgba(0, 0, 0, 0.3); |
||||
border: 1px solid black; |
||||
padding: 0px 15px; |
||||
font-size: 13px; |
||||
font-family: @base-font-family; |
||||
text-align: center; |
||||
color: lighten(#8f8f8f, 20%); |
||||
&:hover { |
||||
color: lighten(#8f8f8f, 40%); |
||||
// background-color: @brand-color; |
||||
} |
||||
.icon { |
||||
margin-right: 5px; |
||||
font-size: 16px; |
||||
vertical-align: middle; |
||||
line-height: 44px; |
||||
} |
||||
.text { |
||||
vertical-align: middle; |
||||
line-height: 44px; |
||||
} |
||||
} |
||||
|
||||
.txt-ellipsis { |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
|
||||
ul, |
||||
ol { |
||||
padding-left: 0; |
||||
} |
||||
|
||||
li { |
||||
list-style: none; |
||||
} |
||||
|
||||
.mark { |
||||
position: relative; |
||||
a { |
||||
display: inline-block; |
||||
padding: 0 8px; |
||||
color: @black; |
||||
border-left: 3px solid transparent; |
||||
background: transparent; |
||||
.enable-trans(); |
||||
&:hover { |
||||
border-left-color: @primary-color; |
||||
background: lighten(@background-color, 2%); |
||||
} |
||||
} |
||||
} |
||||
|
||||
ul.h-list { |
||||
display: flex; |
||||
align-items: center; |
||||
&>li { |
||||
flex: none; |
||||
} |
||||
} |
||||
|
||||
|
||||
/** |
||||
* Loading bar |
||||
*/ |
||||
|
||||
#loading-bar-wrapper { |
||||
position: absolute; |
||||
width: 100%; |
||||
top: 0; |
||||
left: 0; |
||||
overflow: visible; |
||||
z-index: 99999; |
||||
} |
||||
|
||||
#loading-bar { |
||||
position: relative; |
||||
width: 0; |
||||
height: 2px; |
||||
background-color: fade(@white, 60%); |
||||
.enable-trans(); |
||||
} |
||||
|
||||
.container { |
||||
position: relative; |
||||
width: 100%; |
||||
max-width: @container-width; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.container--flex { |
||||
display: flex; |
||||
flex-wrap: nowrap; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
|
||||
.l_body { |
||||
position: relative; |
||||
padding: 2 * @gap 0 @gap; |
||||
@media(max-width: @on-phone) { |
||||
// padding: @gap @gap/2 @gap/2; |
||||
border-radius: 0; |
||||
} |
||||
} |
||||
|
||||
.reveal { |
||||
visibility: hidden; |
||||
} |
||||
@ -0,0 +1,137 @@ |
||||
// Font families |
||||
@fallback-font-family: Monaco, Menlo, 'Ubuntu', Helvetica, "Hiragino Sans GB", "Hiragino Sans GB W3", Source Han Sans CN Regular, WenQuanYi Micro Hei, "Microsoft YaHei", Arial, sans-serif; |
||||
@base-font-family: 'Ubuntu', Monaco, Menlo, 'Titillium Web', @fallback-font-family; |
||||
@code-font-family: Monaco, Menlo, 'Ubuntu', "Roboto Mono",Consolas, monospace, sans-serif, @fallback-font-family; |
||||
@title-font-family: 'Ubuntu', Monaco, Menlo, "Roboto Mono",Consolas, monospace, sans-serif, @fallback-font-family; |
||||
// Font configuration |
||||
@base-font-size: 16px; |
||||
@small-font-size: @base-font-size * 0.875; |
||||
@base-line-height: 1.7; |
||||
|
||||
|
||||
@font-size-h1: @base-font-size * 1.5; |
||||
@font-size-h2: @base-font-size * 1.4; |
||||
@font-size-h3: @base-font-size * 1.2; |
||||
@font-size-h4: @base-font-size * 1; |
||||
@font-size-h5: @base-font-size * 1; |
||||
@font-size-h6: @small-font-size; |
||||
|
||||
|
||||
// Spacing |
||||
@spacing-unit: 30px; |
||||
@gap: 20px; |
||||
|
||||
// Material color scheme |
||||
@material-red: #f44336; |
||||
@material-pink: #E91E63; |
||||
@material-purple: #9c27b0; |
||||
@material-deep-purple: #673ab7; |
||||
@material-indigo: #3f51b5; |
||||
@material-light-blue: #4BA7EE; |
||||
@material-blue: #2196f3; |
||||
@material-deep-blue: #3367d6; |
||||
@material-teal: #009688; |
||||
@material-green: #4caf50; |
||||
@material-light-green: #8bc34a; |
||||
@material-orange: #ff9800; |
||||
@material-deep-orange: #ff5722; |
||||
@material-brown: #795548; |
||||
@material-blue-grey: #607d8b; |
||||
@material-grey: #9e9e9e; |
||||
@material-light-grey:#e0e0e0; |
||||
@material-yellow: #FCEC60; |
||||
@material-amber: #F6C344; |
||||
|
||||
@material-ax-red: #F05153; |
||||
@material-ax-blue: #2CA3FF; |
||||
|
||||
// Social Networks Brand color |
||||
@github-color: #467cc2; |
||||
@twitter-color: #55acee; |
||||
@facebook-color: #3765a3; |
||||
@google-color: #db4437; |
||||
@pinterest-color: #bc1725; |
||||
@dribbble-color: #ed699c; |
||||
@weibo-color: #f8712a; |
||||
@tumblr-color: #35465c; |
||||
@instagram-color: #3f729b; |
||||
@linkedin-color: #0077B5; |
||||
@behance-color: #1769FF; |
||||
@tixora-color: #33475A; |
||||
|
||||
// Colors |
||||
// 基本不变的黑白灰 |
||||
@black: #444444; |
||||
@grey-color: #828282; |
||||
@white: #ffffff; |
||||
@dark: #555555; |
||||
@text-color: fade(@black, 85%); |
||||
@background-color: #EFEFEF; |
||||
|
||||
// 主题色 |
||||
@primary-color: @material-ax-blue; |
||||
// 强调色 -- 按钮的高亮颜色 |
||||
@accent-color: @material-deep-orange; |
||||
|
||||
|
||||
// 变种 |
||||
// 主题色的文本（主题色加深） |
||||
@text-color-theme: darken(@primary-color, 10%); |
||||
// 在主题色中显示的文本（白或深灰） |
||||
// @text-color-inside-theme: @text-color; |
||||
@text-color-inside-theme: white; |
||||
|
||||
// 引用部分和代码块的背景色 |
||||
@qoute-background-color: fade(@background-color, 80%); |
||||
|
||||
|
||||
// Responsive limits |
||||
@modal-threshold: 680px; |
||||
@on-phone: 820px; |
||||
@on-laptop: 990px; |
||||
@on-desktop: 1200px; |
||||
|
||||
@item-height: 36px; |
||||
|
||||
//container |
||||
@container-width: 1200px; |
||||
//neader |
||||
@header-height: 54px; |
||||
@header-logo-font-size: 1.3em; |
||||
@header-switcher-font-size: 1.3em; |
||||
@header-font-size: 1em; |
||||
|
||||
@banner-height: 300px; |
||||
|
||||
@border-radius-width: 8px; |
||||
|
||||
//side |
||||
@side-width: 250px; |
||||
@tog-width: 200px; |
||||
//search |
||||
@search-height: 36px; |
||||
@search-width: 250px; |
||||
|
||||
//post |
||||
@post-max-width: 980px; |
||||
//article |
||||
@article-title-size: @font-size-h1 * 1.2; |
||||
@article-title-size-phone: @font-size-h2; |
||||
|
||||
//transition |
||||
.enable-trans(@time: 0.2s){ |
||||
transition: all @time ease; |
||||
-moz-transition: all @time ease; |
||||
-webkit-transition: all @time ease; |
||||
-o-transition: all @time ease; |
||||
} |
||||
// .set-placeholder({ |
||||
// color: @white; |
||||
// font-weight: 300; |
||||
// }) |
||||
.set-placeholder(@rules){ |
||||
&::-webkit-input-placeholder {@rules();} |
||||
&:-moz-placeholder {@rules();} |
||||
&::-moz-placeholder {@rules();} |
||||
&:-ms-input-placeholder {@rules();} |
||||
} |
||||
@ -0,0 +1,109 @@ |
||||
@font-face { |
||||
font-family: 'icomoon'; |
||||
src: url('fonts/icomoon.eot?7jyvbf'); |
||||
src: url('fonts/icomoon.eot?7jyvbf#iefix') format('embedded-opentype'), |
||||
url('fonts/icomoon.ttf?7jyvbf') format('truetype'), |
||||
url('fonts/icomoon.woff?7jyvbf') format('woff'), |
||||
url('fonts/icomoon.svg?7jyvbf#icomoon') format('svg'); |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
} |
||||
|
||||
[class^="icon-"], [class*=" icon-"] { |
||||
/* use !important to prevent issues with browser extensions that change fonts */ |
||||
font-family: 'icomoon' !important; |
||||
speak: none; |
||||
font-style: normal; |
||||
font-weight: normal; |
||||
font-variant: normal; |
||||
text-transform: none; |
||||
line-height: 1; |
||||
|
||||
/* Better Font Rendering =========== */ |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
.icon-arrow_upward:before { |
||||
content: "\e5d8"; |
||||
} |
||||
.icon-chat_bubble_outline:before { |
||||
content: "\e0cb"; |
||||
} |
||||
.icon-format_list_bulleted:before { |
||||
content: "\e241"; |
||||
} |
||||
.icon-format_list_numbered:before { |
||||
content: "\e242"; |
||||
} |
||||
|
||||
.icon-close:before { |
||||
content: "\e5cd"; |
||||
} |
||||
.icon-search:before { |
||||
content: "\e8b6"; |
||||
} |
||||
.icon-chevron-down:before { |
||||
content: "\e900"; |
||||
} |
||||
.icon-chevron-left:before { |
||||
content: "\e901"; |
||||
} |
||||
.icon-chevron-right:before { |
||||
content: "\e902"; |
||||
} |
||||
.icon-chevron-thin-down:before { |
||||
content: "\e903"; |
||||
} |
||||
.icon-chevron-thin-left:before { |
||||
content: "\e904"; |
||||
} |
||||
.icon-chevron-thin-right:before { |
||||
content: "\e905"; |
||||
} |
||||
.icon-chevron-thin-up:before { |
||||
content: "\e906"; |
||||
} |
||||
.icon-chevron-up:before { |
||||
content: "\e907"; |
||||
} |
||||
.icon-mail:before { |
||||
content: "\e90d"; |
||||
} |
||||
.icon-menu:before { |
||||
content: "\e908"; |
||||
} |
||||
.icon-rss:before { |
||||
content: "\e90a"; |
||||
} |
||||
.icon-user:before { |
||||
content: "\e90b"; |
||||
} |
||||
.icon-vcard:before { |
||||
content: "\e909"; |
||||
} |
||||
.icon-sina-weibo:before { |
||||
content: "\e90e"; |
||||
} |
||||
.icon-facebook:before { |
||||
content: "\e90f"; |
||||
} |
||||
.icon-github:before { |
||||
content: "\e910"; |
||||
} |
||||
.icon-google:before { |
||||
content: "\e911"; |
||||
} |
||||
.icon-instagram:before { |
||||
content: "\e912"; |
||||
} |
||||
.icon-pinterest:before { |
||||
content: "\e913"; |
||||
} |
||||
.icon-tumblr:before { |
||||
content: "\e914"; |
||||
} |
||||
.icon-twitter:before { |
||||
content: "\e915"; |
||||
} |
||||
|
||||
@ -0,0 +1,48 @@ |
||||
#footer { |
||||
position: relative; |
||||
padding: 40px 10px; |
||||
width: 100%; |
||||
color: fade(@text-color, 80%); |
||||
margin: 0px auto; |
||||
font-size: @small-font-size; |
||||
overflow: hidden; |
||||
text-align: center; |
||||
font-family: @title-font-family; |
||||
.codename { |
||||
color: @material-light-green; |
||||
} |
||||
.social-wrapper { |
||||
padding-top: 20px; |
||||
} |
||||
a { |
||||
color: fade(@text-color,80%); |
||||
&:hover { |
||||
// background: fade(@accent-color, 10%); |
||||
color: @accent-color; |
||||
} |
||||
&.social { |
||||
position: relative; |
||||
display: inline-block; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
margin: 0px 5px; |
||||
|
||||
&:hover { |
||||
background: transparent; |
||||
color: @accent-color; |
||||
} |
||||
// &.github:hover { |
||||
// color: @github-color; |
||||
// } |
||||
// &.google:hover { |
||||
// color: @google-color; |
||||
// } |
||||
// &.twitter:hover { |
||||
// color: @twitter-color; |
||||
// } |
||||
// &.weibo:hover { |
||||
// color: @weibo-color; |
||||
// } |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,213 @@ |
||||
.l_header { |
||||
position:fixed; |
||||
z-index: 9999; |
||||
top:0; |
||||
left:0; |
||||
width:100%; |
||||
font-size: @header-font-size; |
||||
line-height: @header-height; |
||||
// letter-spacing: .08em; |
||||
height: @header-height; |
||||
overflow: hidden; |
||||
font-family: @title-font-family; |
||||
.wrapper{ |
||||
.enable-trans(); |
||||
} |
||||
.wrapper.sub{ |
||||
transform: translateY(-@header-height); |
||||
} |
||||
.nav--main,.nav-sub{ |
||||
height: @header-height; |
||||
} |
||||
background: @primary-color; |
||||
// padding: 0 @gap; |
||||
&, a{ |
||||
.txt-ellipsis; |
||||
color: @text-color-inside-theme; |
||||
} |
||||
&:extend(.z-depth-nav); |
||||
.enable-trans(); |
||||
&:hover { |
||||
&:extend(.z-depth-nav-raised); |
||||
} |
||||
&:active { |
||||
|
||||
} |
||||
.logo { |
||||
// flex: none; |
||||
padding: 0 @gap; |
||||
// padding: 0; |
||||
font-size: @header-logo-font-size; |
||||
@media(max-width: @on-phone){ |
||||
flex: auto; |
||||
font-size: @header-logo-font-size * .95; |
||||
} |
||||
} |
||||
.menu{ |
||||
position:relative; |
||||
flex: 1 0 auto; |
||||
height: @header-height; |
||||
.enable-trans(); |
||||
margin:0 28px; |
||||
ul > li > a{ |
||||
.enable-trans(); |
||||
display: block; |
||||
font-size: @header-font-size * .95; |
||||
color: fade(@text-color-inside-theme,60%); |
||||
padding: 0 @gap / 2; |
||||
&:hover,&.active{ |
||||
color: @text-color-inside-theme; |
||||
} |
||||
} |
||||
@media(max-width: @on-laptop){ |
||||
font-size: @header-font-size * .95; |
||||
} |
||||
@media(max-width: @on-phone){ |
||||
display:none; |
||||
} |
||||
|
||||
.underline{ |
||||
.enable-trans(); |
||||
position: absolute; |
||||
background: @text-color-inside-theme; |
||||
left: 0; |
||||
bottom: 0; |
||||
width: 0; |
||||
height: 2px; |
||||
} |
||||
} |
||||
.switcher{ |
||||
padding: 0 @gap; |
||||
display: none; |
||||
font-size: @header-switcher-font-size; |
||||
& > li{ |
||||
margin-left: @gap; |
||||
.enable-trans(); |
||||
svg{ |
||||
margin-top:16px; |
||||
} |
||||
} |
||||
// & > li.s-menu.active { |
||||
// transform: rotate(90deg); |
||||
// } |
||||
@media(max-width: @on-phone){ |
||||
display: flex; |
||||
} |
||||
} |
||||
.nav-sub .switcher{ |
||||
display: flex; |
||||
} |
||||
|
||||
@media (max-width: @on-phone) { |
||||
font-size: @header-font-size * .9; |
||||
.m_search{ |
||||
width:0; |
||||
overflow: hidden; |
||||
position: absolute; |
||||
.enable-trans(); |
||||
right: 10px; |
||||
top:(@header-height - @search-height)/2; |
||||
} |
||||
&.z_search-open{ |
||||
.logo,.switcher{ |
||||
opacity:0; |
||||
} |
||||
.m_search{ |
||||
width: 50%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.m_search { |
||||
position: relative; |
||||
height: @search-height; |
||||
width: @search-width; |
||||
line-height: @search-height; |
||||
vertical-align: middle; |
||||
.form { |
||||
position: relative; |
||||
display: block; |
||||
width: 100%; |
||||
} |
||||
.icon,.input{ |
||||
.enable-trans(.1s); |
||||
} |
||||
.icon { |
||||
position: absolute; |
||||
display:block; |
||||
height: @search-height; |
||||
width: @search-height; |
||||
line-height: @search-height; |
||||
top: 0; |
||||
left: @gap/2; |
||||
} |
||||
.input { |
||||
display:block; |
||||
font-size: 14px; |
||||
line-height: @search-height - 10px; |
||||
margin: 0; |
||||
width: 100%; |
||||
color: @text-color-inside-theme; |
||||
padding: 5px 10px 5px 40px; |
||||
height: @search-height; |
||||
line-height: @search-height; |
||||
font-family: @base-font-family; |
||||
border: none; |
||||
border-radius: 3px; |
||||
background:fade(@text-color-inside-theme,15%); |
||||
box-sizing: border-box; |
||||
-webkit-appearance: none; |
||||
box-shadow: none; |
||||
&:hover{ |
||||
background: fade(white,35%); |
||||
} |
||||
&:focus { |
||||
color:@black; |
||||
background: white; |
||||
.set-placeholder({color: @black}); |
||||
} |
||||
&:focus ~ .icon{ |
||||
color: @black; |
||||
} |
||||
.set-placeholder({color: @text-color-inside-theme}); |
||||
} |
||||
|
||||
} |
||||
|
||||
.menu-phone{ |
||||
position: fixed; |
||||
top: @header-height + @gap; |
||||
right: 0; |
||||
width: 180px; |
||||
z-index:9999 + 1; |
||||
padding: @gap/2 0px; |
||||
line-height: 2 * @gap; |
||||
background: white; |
||||
// border: 1px solid #e6e7e6; |
||||
border-right: 0; |
||||
&:extend(.z-depth-main); |
||||
border-radius: @border-radius-width; |
||||
transform: translate3d(180px, -0, 0); |
||||
.enable-trans(); |
||||
&:hover { |
||||
&:extend(.z-depth-main-raised); |
||||
} |
||||
&:active { |
||||
// box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); |
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); |
||||
} |
||||
nav { |
||||
.nav { |
||||
position: relative; |
||||
display: block; |
||||
color: @black; |
||||
font-size: 0.8125em; |
||||
padding: 2px 20px; |
||||
border-left: 0px solid @primary-color; |
||||
&:hover { |
||||
background: darken(white, 4%); |
||||
border-left: 3px solid @primary-color; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,183 @@ |
||||
.l_main { |
||||
width: 100%; |
||||
padding-right: @side-width + @gap; |
||||
float: left; |
||||
.post-list { |
||||
position: relative; |
||||
margin: 0px auto; |
||||
// columns: 400px; |
||||
column-gap: 0; |
||||
margin: -@gap /2; |
||||
@media(max-width: @on-phone) { |
||||
margin: 0; |
||||
} |
||||
} |
||||
#comments { |
||||
position: relative; |
||||
padding-top: 1.5*@gap; |
||||
background: white; |
||||
@media(max-width: @on-phone) { |
||||
padding-top: @gap; |
||||
} |
||||
} |
||||
.post-wrapper{ |
||||
// for firefox |
||||
column-break-inside: avoid; |
||||
break-inside: avoid-column; |
||||
} |
||||
.mobile-post() { |
||||
.post { |
||||
padding: 1.5 * @gap @gap; |
||||
.meta { |
||||
margin-bottom: @gap; |
||||
.title { |
||||
font-size: @article-title-size-phone; |
||||
} |
||||
} |
||||
.full-width { |
||||
margin-left: -@gap; |
||||
margin-right: -@gap; |
||||
padding-left: @gap; |
||||
padding-right: @gap; |
||||
width:~"calc(100% + 2 * @{gap})" |
||||
} |
||||
.auto-padding { |
||||
padding-left: @gap; |
||||
padding-right: @gap; |
||||
border-bottom-left-radius: @border-radius-width; |
||||
border-bottom-right-radius: @border-radius-width; |
||||
} |
||||
img, |
||||
.highlight { |
||||
margin-left: -@gap; |
||||
margin-right: -@gap; |
||||
width:~"calc(100% + 2 * @{gap})"; |
||||
max-width: none; |
||||
// @media(max-width:@on-phone) { |
||||
// padding-left: @gap; |
||||
// padding-right: @gap; |
||||
// } |
||||
} |
||||
.highlight{ |
||||
margin-left: 0*@gap; |
||||
margin-right: 0*@gap; |
||||
padding-left: @gap; |
||||
padding-right: @gap; |
||||
width:~"calc(100% - 0 * @{gap})"; |
||||
} |
||||
@media(max-width:@on-phone) { |
||||
.highlight { |
||||
margin-left: 0*@gap; |
||||
margin-right: 0*@gap; |
||||
padding-left: @gap; |
||||
padding-right: @gap; |
||||
width:~"calc(100% - 0 * @{gap})"; |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
} |
||||
.post-wrapper { |
||||
padding: @gap / 2; |
||||
.mobile-post(); |
||||
.tags { |
||||
margin-bottom: -1.5*@gap; |
||||
} |
||||
@media(max-width:@on-phone) { |
||||
padding-left: 0; |
||||
padding-right: 0; |
||||
} |
||||
} |
||||
.post { |
||||
position: relative; |
||||
margin: 0 auto; |
||||
padding: 2 * @gap 1.5*@gap; |
||||
//max-width: 768px; |
||||
background: white; |
||||
border-radius: @border-radius-width; |
||||
@media(max-width: @on-phone) { |
||||
border-radius: 0; |
||||
} |
||||
&:extend(.z-depth-main); |
||||
.enable-trans(); |
||||
&:hover { |
||||
&:extend(.z-depth-main-raised); |
||||
} |
||||
&:active { |
||||
// box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); |
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); |
||||
} |
||||
.meta { |
||||
margin-bottom: 2*@gap; |
||||
.title { |
||||
left: 0; |
||||
font-size: @article-title-size; |
||||
@media(max-width: @on-phone) { |
||||
font-size: @article-title-size-phone; |
||||
} |
||||
&:before { |
||||
// content: "#"; |
||||
} |
||||
a { |
||||
display: inline; |
||||
line-height: @base-line-height; |
||||
font-weight: normal; |
||||
color: @text-color; |
||||
text-decoration: none; |
||||
font-size: @article-title-size; |
||||
@media(max-width: @on-phone) { |
||||
font-size: @article-title-size-phone; |
||||
} |
||||
&:hover { |
||||
color: @accent-color; |
||||
} |
||||
} |
||||
} |
||||
time, |
||||
.cats { |
||||
display: inline-block; |
||||
font-size: @small-font-size * .95; |
||||
|
||||
} |
||||
.cats { |
||||
&:before { |
||||
display: inline-block; |
||||
margin: 0 5px; |
||||
@border-width: 8px; |
||||
content: ''; |
||||
border-top: @border-width/2 solid transparent; |
||||
border-bottom: @border-width/2 solid transparent; |
||||
border-left: @border-width solid darken(@text-color-theme, 0%); |
||||
} |
||||
a { |
||||
font-weight: bold; |
||||
color: darken(@text-color-theme, 0%); |
||||
} |
||||
|
||||
} |
||||
time { |
||||
color: lighten(@grey-color, 20%); |
||||
} |
||||
} |
||||
.full-width,.highlight{ |
||||
// margin-left: -1.5* @gap; |
||||
// margin-right: -1.5* @gap; |
||||
// padding-left: 1.5* @gap; |
||||
// padding-right: 1.5* @gap; |
||||
// width:~"calc(100% + 3 * @{gap})"; |
||||
margin-left: 0*@gap; |
||||
margin-right: 0*@gap; |
||||
padding-left: @gap; |
||||
padding-right: @gap; |
||||
width:~"calc(100% - 0 * @{gap})"; |
||||
} |
||||
img { |
||||
max-width: 100%; |
||||
} |
||||
} |
||||
@media(max-width:@on-phone) { |
||||
padding-right: 0; |
||||
.mobile-post(); |
||||
} |
||||
} |
||||
@ -0,0 +1,427 @@ |
||||
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ |
||||
|
||||
/** |
||||
* 1. Set default font family to sans-serif. |
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling |
||||
* user zoom. |
||||
*/ |
||||
|
||||
html { |
||||
font-family: sans-serif; /* 1 */ |
||||
-ms-text-size-adjust: 100%; /* 2 */ |
||||
-webkit-text-size-adjust: 100%; /* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* Remove default margin. |
||||
*/ |
||||
|
||||
body { |
||||
margin: 0; |
||||
} |
||||
|
||||
/* HTML5 display definitions |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Correct `block` display not defined for any HTML5 element in IE 8/9. |
||||
* Correct `block` display not defined for `details` or `summary` in IE 10/11 |
||||
* and Firefox. |
||||
* Correct `block` display not defined for `main` in IE 11. |
||||
*/ |
||||
|
||||
article, |
||||
aside, |
||||
details, |
||||
figcaption, |
||||
figure, |
||||
footer, |
||||
header, |
||||
hgroup, |
||||
main, |
||||
menu, |
||||
nav, |
||||
section, |
||||
summary { |
||||
display: block; |
||||
} |
||||
|
||||
/** |
||||
* 1. Correct `inline-block` display not defined in IE 8/9. |
||||
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. |
||||
*/ |
||||
|
||||
audio, |
||||
canvas, |
||||
progress, |
||||
video { |
||||
display: inline-block; /* 1 */ |
||||
vertical-align: baseline; /* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* Prevent modern browsers from displaying `audio` without controls. |
||||
* Remove excess height in iOS 5 devices. |
||||
*/ |
||||
|
||||
audio:not([controls]) { |
||||
display: none; |
||||
height: 0; |
||||
} |
||||
|
||||
/** |
||||
* Address `[hidden]` styling not present in IE 8/9/10. |
||||
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. |
||||
*/ |
||||
|
||||
[hidden], |
||||
template { |
||||
display: none; |
||||
} |
||||
|
||||
/* Links |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Remove the gray background color from active links in IE 10. |
||||
*/ |
||||
|
||||
a { |
||||
background-color: transparent; |
||||
} |
||||
|
||||
/** |
||||
* Improve readability when focused and also mouse hovered in all browsers. |
||||
*/ |
||||
|
||||
a:active, |
||||
a:hover { |
||||
outline: 0; |
||||
} |
||||
|
||||
/* Text-level semantics |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Address styling not present in IE 8/9/10/11, Safari, and Chrome. |
||||
*/ |
||||
|
||||
abbr[title] { |
||||
border-bottom: 1px dotted; |
||||
} |
||||
|
||||
/** |
||||
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome. |
||||
*/ |
||||
|
||||
b, |
||||
strong { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
/** |
||||
* Address styling not present in Safari and Chrome. |
||||
*/ |
||||
|
||||
dfn { |
||||
font-style: italic; |
||||
} |
||||
|
||||
/** |
||||
* Address variable `h1` font-size and margin within `section` and `article` |
||||
* contexts in Firefox 4+, Safari, and Chrome. |
||||
*/ |
||||
|
||||
h1 { |
||||
font-size: 2em; |
||||
margin: 0.67em 0; |
||||
} |
||||
|
||||
/** |
||||
* Address styling not present in IE 8/9. |
||||
*/ |
||||
|
||||
mark { |
||||
background: #ff0; |
||||
color: #000; |
||||
} |
||||
|
||||
/** |
||||
* Address inconsistent and variable font size in all browsers. |
||||
*/ |
||||
|
||||
small { |
||||
font-size: 80%; |
||||
} |
||||
|
||||
/** |
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers. |
||||
*/ |
||||
|
||||
sub, |
||||
sup { |
||||
font-size: 75%; |
||||
line-height: 0; |
||||
position: relative; |
||||
vertical-align: baseline; |
||||
} |
||||
|
||||
sup { |
||||
top: -0.5em; |
||||
} |
||||
|
||||
sub { |
||||
bottom: -0.25em; |
||||
} |
||||
|
||||
/* Embedded content |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Remove border when inside `a` element in IE 8/9/10. |
||||
*/ |
||||
|
||||
img { |
||||
border: 0; |
||||
} |
||||
|
||||
/** |
||||
* Correct overflow not hidden in IE 9/10/11. |
||||
*/ |
||||
|
||||
svg:not(:root) { |
||||
overflow: hidden; |
||||
} |
||||
|
||||
/* Grouping content |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Address margin not present in IE 8/9 and Safari. |
||||
*/ |
||||
|
||||
figure { |
||||
margin: 1em 40px; |
||||
} |
||||
|
||||
/** |
||||
* Address differences between Firefox and other browsers. |
||||
*/ |
||||
|
||||
hr { |
||||
-moz-box-sizing: content-box; |
||||
box-sizing: content-box; |
||||
height: 0; |
||||
} |
||||
|
||||
/** |
||||
* Contain overflow in all browsers. |
||||
*/ |
||||
|
||||
pre { |
||||
overflow: auto; |
||||
} |
||||
|
||||
/** |
||||
* Address odd `em`-unit font size rendering in all browsers. |
||||
*/ |
||||
|
||||
code, |
||||
kbd, |
||||
pre, |
||||
samp { |
||||
font-family: monospace, monospace; |
||||
font-size: 1em; |
||||
} |
||||
|
||||
/* Forms |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Known limitation: by default, Chrome and Safari on OS X allow very limited |
||||
* styling of `select`, unless a `border` property is set. |
||||
*/ |
||||
|
||||
/** |
||||
* 1. Correct color not being inherited. |
||||
* Known issue: affects color of disabled elements. |
||||
* 2. Correct font properties not being inherited. |
||||
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome. |
||||
*/ |
||||
|
||||
button, |
||||
input, |
||||
optgroup, |
||||
select, |
||||
textarea { |
||||
color: inherit; /* 1 */ |
||||
font: inherit; /* 2 */ |
||||
margin: 0; /* 3 */ |
||||
} |
||||
|
||||
/** |
||||
* Address `overflow` set to `hidden` in IE 8/9/10/11. |
||||
*/ |
||||
|
||||
button { |
||||
overflow: visible; |
||||
} |
||||
|
||||
/** |
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`. |
||||
* All other form control elements do not inherit `text-transform` values. |
||||
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. |
||||
* Correct `select` style inheritance in Firefox. |
||||
*/ |
||||
|
||||
button, |
||||
select { |
||||
text-transform: none; |
||||
} |
||||
|
||||
/** |
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` |
||||
* and `video` controls. |
||||
* 2. Correct inability to style clickable `input` types in iOS. |
||||
* 3. Improve usability and consistency of cursor style between image-type |
||||
* `input` and others. |
||||
*/ |
||||
|
||||
button, |
||||
html input[type="button"], /* 1 */ |
||||
input[type="reset"], |
||||
input[type="submit"] { |
||||
-webkit-appearance: button; /* 2 */ |
||||
cursor: pointer; /* 3 */ |
||||
} |
||||
|
||||
/** |
||||
* Re-set default cursor for disabled elements. |
||||
*/ |
||||
|
||||
button[disabled], |
||||
html input[disabled] { |
||||
cursor: default; |
||||
} |
||||
|
||||
/** |
||||
* Remove inner padding and border in Firefox 4+. |
||||
*/ |
||||
|
||||
button::-moz-focus-inner, |
||||
input::-moz-focus-inner { |
||||
border: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
/** |
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in |
||||
* the UA stylesheet. |
||||
*/ |
||||
|
||||
input { |
||||
line-height: normal; |
||||
} |
||||
|
||||
/** |
||||
* It's recommended that you don't attempt to style these elements. |
||||
* Firefox's implementation doesn't respect box-sizing, padding, or width. |
||||
* |
||||
* 1. Address box sizing set to `content-box` in IE 8/9/10. |
||||
* 2. Remove excess padding in IE 8/9/10. |
||||
*/ |
||||
|
||||
input[type="checkbox"], |
||||
input[type="radio"] { |
||||
box-sizing: border-box; /* 1 */ |
||||
padding: 0; /* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* Fix the cursor style for Chrome's increment/decrement buttons. For certain |
||||
* `font-size` values of the `input`, it causes the cursor style of the |
||||
* decrement button to change from `default` to `text`. |
||||
*/ |
||||
|
||||
input[type="number"]::-webkit-inner-spin-button, |
||||
input[type="number"]::-webkit-outer-spin-button { |
||||
height: auto; |
||||
} |
||||
|
||||
/** |
||||
* 1. Address `appearance` set to `searchfield` in Safari and Chrome. |
||||
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome |
||||
* (include `-moz` to future-proof). |
||||
*/ |
||||
|
||||
input[type="search"] { |
||||
-webkit-appearance: textfield; /* 1 */ |
||||
-moz-box-sizing: content-box; |
||||
-webkit-box-sizing: content-box; /* 2 */ |
||||
box-sizing: content-box; |
||||
} |
||||
|
||||
/** |
||||
* Remove inner padding and search cancel button in Safari and Chrome on OS X. |
||||
* Safari (but not Chrome) clips the cancel button when the search input has |
||||
* padding (and `textfield` appearance). |
||||
*/ |
||||
|
||||
input[type="search"]::-webkit-search-cancel-button, |
||||
input[type="search"]::-webkit-search-decoration { |
||||
-webkit-appearance: none; |
||||
} |
||||
|
||||
/** |
||||
* Define consistent border, margin, and padding. |
||||
*/ |
||||
|
||||
fieldset { |
||||
border: 1px solid #c0c0c0; |
||||
margin: 0 2px; |
||||
padding: 0.35em 0.625em 0.75em; |
||||
} |
||||
|
||||
/** |
||||
* 1. Correct `color` not being inherited in IE 8/9/10/11. |
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets. |
||||
*/ |
||||
|
||||
legend { |
||||
border: 0; /* 1 */ |
||||
padding: 0; /* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* Remove default vertical scrollbar in IE 8/9/10/11. |
||||
*/ |
||||
|
||||
textarea { |
||||
overflow: auto; |
||||
} |
||||
|
||||
/** |
||||
* Don't inherit the `font-weight` (applied by a rule above). |
||||
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X. |
||||
*/ |
||||
|
||||
optgroup { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
/* Tables |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Remove most spacing between table cells. |
||||
*/ |
||||
|
||||
table { |
||||
border-collapse: collapse; |
||||
border-spacing: 0; |
||||
} |
||||
|
||||
td, |
||||
th { |
||||
padding: 0; |
||||
} |
||||
@ -0,0 +1,40 @@ |
||||
/* Pagination */ |
||||
|
||||
#page-nav { |
||||
position: relative; |
||||
width: 100%; |
||||
padding: 20px 0px; |
||||
|
||||
.page-number, |
||||
.space { |
||||
display: none; |
||||
} |
||||
.next, |
||||
.prev { |
||||
font-size: 0.8125em; |
||||
font-weight: normal; |
||||
color: lighten(@black, 40%); |
||||
border-radius: 2px; |
||||
|
||||
&:hover { |
||||
color: @black; |
||||
} |
||||
span { |
||||
line-height: 20px; |
||||
vertical-align: middle; |
||||
|
||||
&.icon { |
||||
position: relative; |
||||
top: 1px; |
||||
} |
||||
} |
||||
} |
||||
.next { |
||||
float: right; |
||||
padding: 0 7px 2px 10px; |
||||
} |
||||
.prev { |
||||
float: left; |
||||
padding: 0 10px 2px 7px; |
||||
} |
||||
} |
||||
@ -0,0 +1,308 @@ |
||||
#u-search { |
||||
display: none; |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
padding: 60px 20px; |
||||
z-index: 999999; |
||||
|
||||
@media (max-width: @modal-threshold) { |
||||
padding: 0px; |
||||
} |
||||
.modal { |
||||
position: fixed; |
||||
height: 80%; |
||||
width: 100%; |
||||
max-width: 640px; |
||||
left: 50%; |
||||
top: 0; |
||||
margin: 64px 0px 0px -320px; |
||||
background: #fff; |
||||
box-shadow: 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12); |
||||
z-index: 3; |
||||
border-radius: @border-radius-width; |
||||
@media (max-width: @modal-threshold) { |
||||
box-shadow: none; |
||||
max-width: none; |
||||
top: 0; |
||||
left: 0; |
||||
margin: 0; |
||||
height: 100%; |
||||
border-radius: 0; |
||||
} |
||||
|
||||
.modal-ajax-content { |
||||
opacity: 0; |
||||
visibility: hidden; |
||||
.enable-trans(); |
||||
|
||||
&.loaded { |
||||
opacity: 1; |
||||
visibility: visible; |
||||
} |
||||
} |
||||
.modal-header { |
||||
position: relative; |
||||
width: 100%; |
||||
height: @header-height; |
||||
background-color: @primary-color; |
||||
z-index: 3; |
||||
border-top-left-radius: @border-radius-width; |
||||
border-top-right-radius: @border-radius-width; |
||||
@media (max-width: @modal-threshold) { |
||||
padding: 0px; |
||||
border-radius: 0; |
||||
} |
||||
&:extend(.z-depth-nav); |
||||
.enable-trans(); |
||||
&:hover { |
||||
&:extend(.z-depth-nav-raised); |
||||
} |
||||
&:active { |
||||
|
||||
} |
||||
.btn-close { |
||||
display: block; |
||||
position: absolute; |
||||
width: 50px + 5px; |
||||
height: @header-height; |
||||
top: 0; |
||||
right: 0; |
||||
color: @text-color-inside-theme; |
||||
cursor: pointer; |
||||
text-align: center; |
||||
line-height: @header-height; |
||||
vertical-align: middle; |
||||
font-size: @header-switcher-font-size; |
||||
.enable-trans(); |
||||
z-index: 2; |
||||
|
||||
&:hover { |
||||
transform: rotate(90deg); |
||||
} |
||||
} |
||||
.modal-loading { |
||||
position: absolute; |
||||
bottom: -2px; |
||||
left: 0px; |
||||
width: 100%; |
||||
height: 2px; |
||||
background: transparent; |
||||
z-index: 1; |
||||
|
||||
.modal-loading-bar { |
||||
display: block; |
||||
position: relative; |
||||
width: 0%; |
||||
height: 100%; |
||||
background: fade(@white, 70%); |
||||
.enable-trans(); |
||||
} |
||||
} |
||||
#u-search-modal-form { |
||||
position: relative; |
||||
width: 100%; |
||||
height: 100%; |
||||
z-index: 2; |
||||
|
||||
#u-search-modal-input { |
||||
width: 100%; |
||||
padding: 0px 50px; |
||||
height: @header-height; |
||||
font-size: @base-font-size; |
||||
line-height: @base-line-height; |
||||
vertical-align: middle; |
||||
color: @text-color-inside-theme; |
||||
border: none; |
||||
background: transparent; |
||||
.enable-trans(); |
||||
font-weight: thin; |
||||
appearance: none; |
||||
box-shadow: none; |
||||
|
||||
&:focus { |
||||
border-top-left-radius: @border-radius-width; |
||||
border-top-right-radius: @border-radius-width; |
||||
} |
||||
} |
||||
} |
||||
#u-search-modal-btn-submit { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
padding-left: 5px; |
||||
padding-top: 2px; |
||||
background: transparent; |
||||
border: none; |
||||
width: 50px; |
||||
height: @header-height; |
||||
vertical-align: middle; |
||||
font-size: @header-switcher-font-size; |
||||
color: @text-color-inside-theme; |
||||
z-index: 2; |
||||
} |
||||
} |
||||
.modal-footer { |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 50px; |
||||
padding: 0px 15px; |
||||
background: #fff; |
||||
border-top: 1px solid lighten(@black,60%); |
||||
|
||||
.logo { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
text-align: center; |
||||
z-index: 0; |
||||
|
||||
a { |
||||
display: inline-block; |
||||
} |
||||
&.google img { |
||||
height: 24px; |
||||
margin-top: 13px; |
||||
} |
||||
&.baidu img { |
||||
height: 22px; |
||||
margin-top: 14px; |
||||
} |
||||
img { |
||||
position: relative; |
||||
display: inline-block; |
||||
width: auto; |
||||
height: 18px; |
||||
margin-top: 16px; |
||||
} |
||||
} |
||||
.modal-error { |
||||
position: relative; |
||||
float: left; |
||||
vertical-align: middle; |
||||
line-height: 50px; |
||||
font-size: 13px; |
||||
z-index: 1; |
||||
} |
||||
.modal-metadata { |
||||
position: relative; |
||||
float: left; |
||||
vertical-align: middle; |
||||
line-height: 50px; |
||||
font-size: 13px; |
||||
z-index: 1; |
||||
} |
||||
.nav { |
||||
position: relative; |
||||
display: block; |
||||
float: right; |
||||
vertical-align: middle; |
||||
font-size: 13px; |
||||
font-weight: 500; |
||||
line-height: 50px; |
||||
color: @grey-color; |
||||
cursor: pointer; |
||||
z-index: 1; |
||||
|
||||
&:hover { |
||||
color: @black; |
||||
} |
||||
&.btn-next { |
||||
margin-left: 10px; |
||||
} |
||||
.icon { |
||||
font-size: 12px; |
||||
} |
||||
} |
||||
} |
||||
.modal-body { |
||||
position: absolute; |
||||
padding: 64px 50px 80px 50px; |
||||
width: 100%; |
||||
height: 100%; |
||||
top: 0; |
||||
left: 0; |
||||
overflow-y: scroll; |
||||
-webkit-overflow-scrolling: touch; |
||||
|
||||
@media (max-width: @modal-threshold) { |
||||
padding: 60px 20px 80px 20px; |
||||
} |
||||
.modal-results { |
||||
list-style: none; |
||||
|
||||
li { |
||||
border-bottom: 1px solid #e6e8ea; |
||||
|
||||
&:last-child { |
||||
border-bottom: none; |
||||
} |
||||
} |
||||
.result { |
||||
position: relative; |
||||
display: block; |
||||
padding: 15px 30px 15px 0px; |
||||
text-decoration: none; |
||||
|
||||
&:hover { |
||||
.digest, .icon { |
||||
// color: @black; |
||||
} |
||||
.title { |
||||
color: @text-color-theme; |
||||
} |
||||
} |
||||
.title { |
||||
display: inline-block; |
||||
max-width: 100%; |
||||
color: lighten(@text-color, 10%); |
||||
font-size: @base-font-size; |
||||
font-weight: bold; |
||||
padding: 1px; |
||||
margin-bottom: 2px; |
||||
line-height: @base-line-height; |
||||
white-space: normal; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
.digest { |
||||
display: block; |
||||
white-space: pre-wrap; |
||||
overflow: scroll; |
||||
text-overflow: ellipsis; |
||||
font-size: @small-font-size; |
||||
line-height: @base-line-height; |
||||
color: lighten(@text-color, 30%); |
||||
.enable-trans(); |
||||
em { |
||||
// font-weight: bold; |
||||
} |
||||
} |
||||
.icon { |
||||
position: absolute; |
||||
top: 50%; |
||||
right: 0; |
||||
margin-top: -4px; |
||||
font-size: 11px; |
||||
color: @grey-color; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.modal-overlay { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
background: rgba(0,0,0,0.7); |
||||
z-index: 1; |
||||
} |
||||
} |
||||
@ -0,0 +1,12 @@ |
||||
.l_side { |
||||
width: @side-width; |
||||
float: right; |
||||
margin-left: -@side-width; |
||||
@media(max-width: @on-phone) { |
||||
margin: @gap 0 0; |
||||
width: 100%; |
||||
.m_widget { |
||||
// box-shadow: 1px 0 3px fade(black, 10%); |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,62 @@ |
||||
.toc-wrapper{ |
||||
position:fixed; |
||||
top: @header-height + @gap * 2; |
||||
right: 50%; |
||||
margin-right: -@container-width/2; |
||||
border-radius: @border-radius-width; |
||||
.enable-trans(); |
||||
&:extend(.z-depth-main); |
||||
&:hover { |
||||
&:extend(.z-depth-main-raised); |
||||
} |
||||
&:active { |
||||
// box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); |
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); |
||||
} |
||||
// prevent toc is too heigh. |
||||
overflow: auto; |
||||
max-height: ~"calc(100% - @{header-height} - 2 * @{gap})"; |
||||
@media(max-width: @container-width){ |
||||
right: 0; |
||||
margin-right:0; |
||||
} |
||||
|
||||
@media(max-width: @on-phone){ |
||||
top: @header-height + @gap; |
||||
right: 0px - @side-width; |
||||
border-radius: 0; |
||||
margin-right:0; |
||||
&.active{ |
||||
transform: translateX(-@side-width - 10px); |
||||
} |
||||
} |
||||
|
||||
width: @side-width; |
||||
z-index:3; |
||||
&:extend(.z-depth-2); |
||||
padding: @gap; |
||||
background: white; |
||||
a { |
||||
color: fade(@text-color, 60%); |
||||
font-size: @small-font-size; |
||||
display: inline-block; |
||||
&:hover,&:active,&.active{ |
||||
color: darken(@text-color-theme, 00%); |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
ol{ |
||||
&.toc-child{ |
||||
padding-left: @gap; |
||||
} |
||||
li{ |
||||
list-style: none; |
||||
width: auto; |
||||
&:extend(.txt-ellipsis); |
||||
} |
||||
|
||||
} |
||||
&:empty{ |
||||
display:none; |
||||
} |
||||
} |
||||
@ -0,0 +1,40 @@ |
||||
.tog{ |
||||
position:fixed; |
||||
top: @header-height + @gap * 2; |
||||
right: ~"calc((100% - @{container-width})/2)"; |
||||
.enable-trans(); |
||||
@media(max-width: @container-width){ |
||||
right: 0; |
||||
} |
||||
@media(max-width: @on-phone){ |
||||
right: -@side-width; |
||||
&.active{ |
||||
transform: translateX(-@side-width); |
||||
} |
||||
} |
||||
width: @side-width + 6px; |
||||
z-index:3; |
||||
&:extend(.z-depth-2); |
||||
padding: @gap; |
||||
border-left: 6px solid @primary-color; |
||||
background: @text-color-inside-theme; |
||||
a { |
||||
display: inline-block; |
||||
&:hover,&:active,&.active{ |
||||
color: @accent-color; |
||||
} |
||||
} |
||||
ol{ |
||||
&.toc-child{ |
||||
padding-left: @gap; |
||||
} |
||||
li{ |
||||
list-style:none; |
||||
width: auto; |
||||
&:extend(.txt-ellipsis); |
||||
} |
||||
} |
||||
&:empty{ |
||||
display:none; |
||||
} |
||||
} |
||||
@ -0,0 +1,334 @@ |
||||
@charset "utf-8"; |
||||
.typo { |
||||
font-size:1.6rem; |
||||
@media (max-width: @on-phone) { |
||||
padding: 0px 20px; |
||||
} |
||||
} |
||||
/* 内外边距通常让各个浏览器样式的表现位置不同 */ |
||||
body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, menu, nav, section { |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */ |
||||
article, aside, details, figcaption, figure, footer, header, menu, nav, section { |
||||
display: block; |
||||
} |
||||
|
||||
/* HTML5 媒体文件跟 img 保持一致 */ |
||||
audio, canvas, video { |
||||
display: inline-block; |
||||
} |
||||
|
||||
/* 要注意表单元素并不继承父级 font 的问题 */ |
||||
body, button, input, select, textarea { |
||||
font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans; |
||||
} |
||||
|
||||
button::-moz-focus-inner, |
||||
input::-moz-focus-inner { |
||||
padding: 0; |
||||
border: 0; |
||||
} |
||||
|
||||
/* 去掉各Table cell 的边距并让其边重合 */ |
||||
table { |
||||
border-collapse: collapse; |
||||
border-spacing: 0; |
||||
} |
||||
|
||||
/* 去除默认边框 */ |
||||
fieldset, img { |
||||
border: 0; |
||||
} |
||||
|
||||
/* 块/段落引用 */ |
||||
blockquote { |
||||
position: relative; |
||||
color: #999; |
||||
font-weight: 400; |
||||
border-left: 1px solid #1abc9c; |
||||
padding-left: 1em; |
||||
margin: 1em 3em 1em 2em; |
||||
} |
||||
|
||||
@media only screen and ( max-width: 640px ) { |
||||
blockquote { |
||||
margin: 1em 0; |
||||
} |
||||
} |
||||
|
||||
/* Firefox 以外，元素没有下划线，需添加 */ |
||||
acronym, abbr { |
||||
border-bottom: 1px dotted; |
||||
font-variant: normal; |
||||
} |
||||
|
||||
/* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */ |
||||
abbr { |
||||
cursor: help; |
||||
} |
||||
|
||||
/* 一致的 del 样式 */ |
||||
del { |
||||
text-decoration: line-through; |
||||
} |
||||
|
||||
address, caption, cite, code, dfn, em, th, var { |
||||
font-style: normal; |
||||
font-weight: 400; |
||||
} |
||||
|
||||
/* 去掉列表前的标识, li 会继承，大部分网站通常用列表来很多内容，所以应该当去 */ |
||||
ul, ol { |
||||
list-style: none; |
||||
} |
||||
|
||||
/* 对齐是排版最重要的因素, 别让什么都居中 */ |
||||
caption, th { |
||||
text-align: left; |
||||
} |
||||
|
||||
q:before, q:after { |
||||
content: ''; |
||||
} |
||||
|
||||
/* 统一上标和下标 */ |
||||
sub, sup { |
||||
font-size: 75%; |
||||
line-height: 0; |
||||
position: relative; |
||||
} |
||||
|
||||
:root sub, :root sup { |
||||
vertical-align: baseline; /* for ie9 and other modern browsers */ |
||||
} |
||||
|
||||
sup { |
||||
top: -0.5em; |
||||
} |
||||
|
||||
sub { |
||||
bottom: -0.25em; |
||||
} |
||||
|
||||
/* 让链接在 hover 状态下显示下划线 */ |
||||
a { |
||||
color: #1abc9c; |
||||
} |
||||
|
||||
a:hover { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
.typo a { |
||||
border-bottom: 1px solid #1abc9c; |
||||
} |
||||
|
||||
.typo a:hover { |
||||
border-bottom-color: #555; |
||||
color: #555; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
/* 默认不显示下划线，保持页面简洁 */ |
||||
ins, a { |
||||
text-decoration: none; |
||||
} |
||||
|
||||
/* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的， |
||||
* 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号 |
||||
* 关于 <u> 标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element |
||||
* 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated |
||||
* 一篇关于 <u> 标签的很好文章：http://html5doctor.com/u-element/ |
||||
*/ |
||||
u, .typo-u { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
/* 标记，类似于手写的荧光笔的作用 */ |
||||
mark { |
||||
background: #fffdd1; |
||||
border-bottom: 1px solid #ffedce; |
||||
padding: 2px; |
||||
margin: 0 5px; |
||||
} |
||||
|
||||
/* 代码片断 */ |
||||
pre, code, pre tt { |
||||
font-family: Courier, 'Courier New', monospace; |
||||
} |
||||
|
||||
pre { |
||||
background: #f8f8f8; |
||||
border: 1px solid #ddd; |
||||
padding: 1em 1.5em; |
||||
display: block; |
||||
-webkit-overflow-scrolling: touch; |
||||
} |
||||
|
||||
/* 一致化 horizontal rule */ |
||||
hr { |
||||
border: none; |
||||
border-bottom: 1px solid #cfcfcf; |
||||
margin-bottom: 0.8em; |
||||
height: 10px; |
||||
} |
||||
|
||||
/* 底部印刷体、版本等标记 */ |
||||
small, .typo-small, |
||||
/* 图片说明 */ |
||||
figcaption { |
||||
font-size: 0.9em; |
||||
color: #888; |
||||
} |
||||
|
||||
strong, b { |
||||
font-weight: bold; |
||||
color: #000; |
||||
} |
||||
|
||||
/* 可拖动文件添加拖动手势 */ |
||||
[draggable] { |
||||
cursor: move; |
||||
} |
||||
|
||||
.clearfix:before, .clearfix:after { |
||||
content: ""; |
||||
display: table; |
||||
} |
||||
|
||||
.clearfix:after { |
||||
clear: both; |
||||
} |
||||
|
||||
.clearfix { |
||||
zoom: 1; |
||||
} |
||||
|
||||
/* 强制文本换行 */ |
||||
.textwrap, .textwrap td, .textwrap th { |
||||
word-wrap: break-word; |
||||
word-break: break-all; |
||||
} |
||||
|
||||
.textwrap-table { |
||||
table-layout: fixed; |
||||
} |
||||
|
||||
/* 提供 serif 版本的字体设置: iOS 下中文自动 fallback 到 sans-serif */ |
||||
.serif { |
||||
font-family: Palatino, Optima, Georgia, serif; |
||||
} |
||||
|
||||
/* 保证块/段落之间的空白隔行 */ |
||||
.typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr, .typo table, |
||||
.typo-p, .typo-pre, .typo-ul, .typo-ol, .typo-dl, .typo-form, .typo-hr, .typo-table, blockquote { |
||||
margin-bottom: 1.2em |
||||
} |
||||
|
||||
h1, h2, h3, h4, h5, h6 { |
||||
font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; |
||||
font-weight: 100; |
||||
color: #000; |
||||
line-height: 1.35; |
||||
} |
||||
|
||||
/* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */ |
||||
.typo h1, .typo h2, .typo h3, .typo h4, .typo h5, .typo h6, |
||||
.typo-h1, .typo-h2, .typo-h3, .typo-h4, .typo-h5, .typo-h6 { |
||||
margin-top: 1.2em; |
||||
margin-bottom: 0.6em; |
||||
line-height: 1.35; |
||||
} |
||||
|
||||
.typo h1, .typo-h1 { |
||||
font-size: 2em; |
||||
} |
||||
|
||||
.typo h2, .typo-h2 { |
||||
font-size: 1.8em; |
||||
} |
||||
|
||||
.typo h3, .typo-h3 { |
||||
font-size: 1.6em; |
||||
} |
||||
|
||||
.typo h4, .typo-h4 { |
||||
font-size: 1.4em; |
||||
} |
||||
|
||||
.typo h5, .typo h6, .typo-h5, .typo-h6 { |
||||
font-size: 1.2em; |
||||
} |
||||
|
||||
/* 在文章中，应该还原 ul 和 ol 的样式 */ |
||||
.typo ul, .typo-ul { |
||||
margin-left: 1.3em; |
||||
list-style: disc; |
||||
} |
||||
|
||||
.typo ol, .typo-ol { |
||||
list-style: decimal; |
||||
margin-left: 1.9em; |
||||
} |
||||
|
||||
.typo li ul, .typo li ol, .typo-ul ul, .typo-ul ol, .typo-ol ul, .typo-ol ol { |
||||
margin-bottom: 0.8em; |
||||
margin-left: 2em; |
||||
} |
||||
|
||||
.typo li ul, .typo-ul ul, .typo-ol ul { |
||||
list-style: circle; |
||||
} |
||||
|
||||
/* 同 ul/ol，在文章中应用 table 基本格式 */ |
||||
.typo table th, .typo table td, .typo-table th, .typo-table td, .typo table caption { |
||||
border: 1px solid #ddd; |
||||
padding: 0.5em 1em; |
||||
color: #666; |
||||
} |
||||
|
||||
.typo table th, .typo-table th { |
||||
background: #fbfbfb; |
||||
} |
||||
|
||||
.typo table thead th, .typo-table thead th { |
||||
background: #f1f1f1; |
||||
} |
||||
|
||||
.typo table caption { |
||||
border-bottom: none; |
||||
} |
||||
|
||||
/* 去除 webkit 中 input 和 textarea 的默认样式 */ |
||||
.typo-input, .typo-textarea { |
||||
-webkit-appearance: none; |
||||
border-radius: 0; |
||||
} |
||||
|
||||
.typo-em, .typo em, legend, caption { |
||||
color: #000; |
||||
font-weight: inherit; |
||||
} |
||||
|
||||
/* 着重号，只能在少量（少于100个字符）且全是全角字符的情况下使用 */ |
||||
.typo-em { |
||||
position: relative; |
||||
} |
||||
|
||||
.typo-em:after { |
||||
position: absolute; |
||||
top: 0.65em; |
||||
left: 0; |
||||
width: 100%; |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・"; |
||||
} |
||||
|
||||
/* Responsive images */ |
||||
.typo img { |
||||
max-width: 100%; |
||||
} |
||||
@ -0,0 +1,111 @@ |
||||
.m_widget{ |
||||
&:extend(.z-depth-main); |
||||
background: white; |
||||
margin-bottom: @gap; |
||||
border-radius: @border-radius-width; |
||||
@media(max-width: @on-phone) { |
||||
border-radius: 0; |
||||
} |
||||
// .header,.content{ |
||||
// padding: 0 @gap; |
||||
// } |
||||
.enable-trans(); |
||||
&:hover { |
||||
&:extend(.z-depth-main-raised); |
||||
} |
||||
&:active { |
||||
// box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); |
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); |
||||
} |
||||
.header{ |
||||
border-top-left-radius: @border-radius-width; |
||||
border-top-right-radius: @border-radius-width; |
||||
@media(max-width: @on-phone) { |
||||
border-radius: 0; |
||||
} |
||||
background-color: fade(@primary-color,90%); |
||||
color: @text-color-inside-theme; |
||||
font-size: @base-font-size; |
||||
line-height: 1.8em; |
||||
padding: 8px @gap; |
||||
// letter-spacing: .08em; |
||||
|
||||
} |
||||
.content{ |
||||
// border-top: 1px solid fade(@black,10%); |
||||
padding: @gap/2 0; |
||||
} |
||||
ul.entry > li > a{ |
||||
padding: 0 @gap; |
||||
line-height:@item-height; |
||||
height: @item-height; |
||||
font-size: @base-font-size; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-content: center; |
||||
border-left: 0px solid @primary-color; |
||||
.enable-trans(); |
||||
.name{ |
||||
flex:auto; |
||||
&:extend(.txt-ellipsis); |
||||
color: fade(@text-color,70%); |
||||
} |
||||
.badget{ |
||||
flex:none; |
||||
font-size: @small-font-size; |
||||
color: fade(@text-color, 50%); |
||||
} |
||||
&:hover{ |
||||
border-left: 3px solid @primary-color; |
||||
background:darken(white, 5%); |
||||
} |
||||
} |
||||
} |
||||
.m_widget.about{ |
||||
.waves-effect,img{ |
||||
width: 100%; |
||||
display: block; |
||||
border-radius: @border-radius-width; |
||||
} |
||||
@media(max-width: @on-phone){ |
||||
display:none; |
||||
} |
||||
.content{ |
||||
padding:0; |
||||
.desc{ |
||||
position: relative; |
||||
padding: @gap; |
||||
background:@qoute-background-color; |
||||
.enable-trans(.15s); |
||||
line-height: 1.2em; |
||||
font-style: italic; |
||||
&:before{ |
||||
// content:'#'; |
||||
position: absolute; |
||||
left:0; |
||||
top:0; |
||||
width:2px; |
||||
height:100%; |
||||
background:@primary-color; |
||||
} |
||||
&:empty{ |
||||
padding:0; |
||||
height: 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.m_widget.tagcloud{ |
||||
.content{ |
||||
padding: 10px 20px; |
||||
a{ |
||||
display:inline-block; |
||||
.enable-trans(.1s); |
||||
line-height: 1.6em; |
||||
&:hover{ |
||||
color: @accent-color !important; //to cover inline style. |
||||
text-decoration: underline |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,15 @@ |
||||
@charset "utf-8"; |
||||
@import "less/_defines.less"; |
||||
@import "less/_fonts.less"; |
||||
@import "less/_normalize.less"; |
||||
@import "less/_base.less"; |
||||
@import "less/_header.less"; |
||||
@import "less/_main.less"; |
||||
@import "less/_side.less"; |
||||
@import "less/_toc.less"; |
||||
@import "less/_widget.less"; |
||||
@import "less/_archive.less"; |
||||
@import "less/_article.less"; |
||||
@import "less/_pagination.less"; |
||||
@import "less/_search.less"; |
||||
@import "less/_footer.less"; |
||||
Loading…
Reference in new issue