Add Tsu theme

This commit is contained in:
2021-06-05 03:45:20 -05:00
parent 065820fe2c
commit 3cd8cdbd9c
47 changed files with 1324 additions and 0 deletions

View File

@@ -0,0 +1,6 @@
{
"ExpandedNodes": [
""
],
"PreviewInSolutionExplorer": false
}

Binary file not shown.

Binary file not shown.

View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2020 Bacbin
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@@ -0,0 +1,13 @@
# hexo-theme-Tsu
> A light and simple theme bases on polarbear, designed by Bacbin
## Installation
```
$npm install hexo-renderer-scss --save
$git clone https://github.com/zjx137/hexo-theme-Tsu.git
```
Change config.yml`theme: Tsu` or`theme: hexo-theme-Tsu`
## ScreenShot
![Missing](https://upload-images.jianshu.io/upload_images/15435235-8f8ab55b83721bc7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
Modify the theme `config.yml` for Avator and more...

View File

@@ -0,0 +1,12 @@
menu:
Home: /
Archives: /archives
About: /about/
#If you dont want it, just comment it out
weibo: yourweibo
github: yourgithub
linkedin: yourlinkedin
email: mailto:youremail
#Put into /source
avator: avator.jpg

View File

@@ -0,0 +1,8 @@
Menu:
Home: Home
Archives: Archives
About: About
Paginator:
Prev: Prev
Next: Next

View File

@@ -0,0 +1,8 @@
Menu:
Home: 主页
Archives: 归档
About: 关于
Paginator:
Prev: 上一页
Next: 下一页

View File

@@ -0,0 +1,5 @@
<div class="copyright">
<div class="text">Powered By
<a href="https://hexo.io/">Hexo</a> | Theme <a href="https://github.com/zjx137/hexo-theme-Tsu">Tsu</a> &copy 2019
</div>
</div>

View File

@@ -0,0 +1,21 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<%
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>
<%- css('styles/main') %>

View File

@@ -0,0 +1,16 @@
<header>
<div class="main">
<div class="title">
<a href="#" class="logo"><%= config.title %></a>
</div>
<div class="site-nav">
<ul id="menu" class="menu">
<% for (name in theme.menu) { %>
<li class="menu-item text-underline">
<a href="<%- url_for(theme.menu[name]) %>"><%- __('Menu.' + name) %></a>
</li>
<% } %>
</ul>
</div>
</div>
</header>

View File

@@ -0,0 +1,36 @@
<!-- MathJax配置可通过单美元符号书写行内公式等 -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": {
preferredFont: "TeX",
availableFonts: ["STIX","TeX"],
linebreaks: { automatic:true },
EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50)
},
tex2jax: {
inlineMath: [ ["$", "$"], ["\\(","\\)"] ],
processEscapes: true,
ignoreClass: "tex2jax_ignore|dno",
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
},
TeX: {
equationNumbers: { autoNumber: "AMS" },
noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } },
Macros: { href: "{}" }
},
messageStyle: "none"
});
</script>
<!-- 给MathJax元素添加has-jax class -->
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for(i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<!-- 通过连接CDN加载MathJax的js代码 -->
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

View File

@@ -0,0 +1,46 @@
<% if (page.total>1){ %>
<nav class="page-nav">
<% if(page.prev){ %>
<a class="prev" href="<%- url_for(page.prev_link) %>">
<i class="iconfont icon-left"></i>
<span class="prev-text"><%- __('Paginator.Prev') %></span>
</a>
<% } %>
<% if(page.next){ %>
<a class="next" href="<%- url_for(page.next_link) %>">
<span class="next-text"><%- __('Paginator.Next') %></span>
<i class="iconfont icon-right"></i>
</a>
<% } %>
</nav>
<% } %>
<% if (!is_home()) { %>
<nav class="post-nav">
<% if(page.tags){ %>
<div class="page-tags">
<% page.tags.forEach(function(tag){ %>
<a href="<%- url_for(tag.path) %>"><%= tag.name%></a>
<% }) %>
</div>
<% } %>
</nav>
<% } %>
<% if (is_post()){ %>
<nav class="paginator clearfix">
<%if(page.prev){%>
<a class="prev" href="<%- url_for(page.prev.path) %>">
<i class="iconfont icon-left"></i>
<span class="prev-text"><%= page.prev.title %></span>
</a>
<% } %>
<%if(page.next){%>
<a class="next" href="<%- url_for(page.next.path) %>">
<span class="prev-text"><%= page.next.title %></span>
<i class="iconfont icon-right"></i>
</a>
<% } %>
</nav>
<%}%>

View File

@@ -0,0 +1,21 @@
<div class="posts-wrapper">
<% page.posts.each(function(post){ %>
<article class="post article-entry">
<div class="post-title">
<a class="post-title-link text-underline" href="<%- url_for(post.path) %>"><%= post.title %></a>
</div>
<p class="sub"><%- date(post.date, "MMM DD YYYY") %></p>
<div class="post-content">
<% if (post.excerpt){ %>
<%- post.excerpt %>
<p class="article-more-link">
<a href="<%- url_for(post.path) %>">阅读全文</a>
</p>
<% } else { %>
<%- post.content %>
<% } %>
</div>
</article>
<% }) %>
</div>
<%- partial('_partials/side-bar') %>

View File

@@ -0,0 +1,18 @@
<div class="side-bar">
<div class="avator" id="avator">
<div class="title">
<a href="#" class="text-underline">About Me</a>
</div>
<img src="<%= theme.avator %>" class="ava-img">
<h3 class="author"><%= config.author %></h3>
<div class="icon-list">
<a href="<%= theme.weibo %>"><i class="iconfont icon-weibo icon-item"></i></a>
<a href="<%= theme.email %>"><i class="iconfont icon-email icon-item"></i></a>
<a href="<%= theme.github %>"><i class="iconfont icon-github icon-item"></i></a>
<a href="<%= theme.linkedin %>"><i class="iconfont icon-linkedin icon-item"></i></a>
</div>
<%- partial('_partials/tags') %>
</div>
</div>

View File

@@ -0,0 +1,4 @@
<div class="tags">
<h3 class="tags-title">Tags</h3>
<%- list_tags({show_count: true, amount: 10, orderby: 'count'}) %>
</div>

View File

@@ -0,0 +1,10 @@
<% if(is_post()){%>
<div class="_toc">
<strong class="toc-title">
Contents
</strong>
<div class="toc-content">
<%- toc(page.content, {list_number: false}) %>
</div>
</div>
<%}%>

View File

@@ -0,0 +1 @@
<p>helo</p>

View File

@@ -0,0 +1,48 @@
<section class="archive">
<% if (!page.prev){ %>
<% if (page.tag){ %>
<div class="archive-title tag">
<h2 class="archive-name"><%= page.tag %></h2>
</div>
<% if(page.category)%>
<div class="archive-title category">
<h2 class="archive-name"><%= page.category %></h2>
</div>
<% } %>
<% } %>
<div class="post-archive">
<% var last; %>
<% page.posts.each(function(post){ %>
<% var year = date(post.date,"YYYY"); %>
<% if (last !== year){ %>
<% last = year; %>
<% if (last !== null){ %>
<%if(is_archive()){%>
<div class="collect-year">
<h2><%= year %></h2>
</div>
<%}%>
<% } %>
<% }; %>
<div class="collect-item">
<% if(is_archive()){%>
<div class="time"><%= date(post.date,"MM-DD")%></div>
<a href="<%- url_for(post.path) %>" class="title"><%= post.title %></a>
<%};%>
<% if(!is_archive()) {%>
<div class="time"><%= date(post.date,"YYYY-MM-DD")%></div>
<a href="<%- url_for(post.path) %>" class="title"><%= post.title %></a>
<%};%>
</div>
<% }) %>
</div>
</section>
<%- partial('_partials/paginator') %>

View File

@@ -0,0 +1,4 @@
<section class="posts clearfix">
<%- partial('_partials/posts') %>
</section>
<%- partial('_partials/paginator') %>

View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<%- partial('_partials/head') %>
</head>
<body>
<div class="container">
<%- partial('_partials/header') %>
<main class="main">
<%- body %>
</main>
<%- partial('_partials/footer') %>
</div>
<div class="back-to-top" id="back-to-top">
<i class="iconfont icon-up"></i>
</div>
</body>
<%- js('js/jquery-3.3.1.min.js')%>
<%- js('js/back-to-top.js') %>
<%- js('js/scroll.js') %>
<%- partial('_partials/mathjax') %>
</html>

View File

@@ -0,0 +1,15 @@
<section class="posts clearfix">
<div class="post-wrapper">
<article class="post article-entry">
<div class="post-title">
<%= page.title %>
</div>
<p class="sub"><%- date(page.date, "MMM DD YYYY") %></p>
<div class="post-content">
<%- page.content %>
</div>
</article>
</div>
<%- partial('_partials/toc') %>
</section>
<%- partial('_partials/paginator') %>

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

View File

@@ -0,0 +1,25 @@
$(function(){
//当滚动条的位置处于距顶部100像素以下时跳转链接出现否则消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#back-to-top").fadeIn(1500);
}
else
{
$("#back-to-top").fadeOut(1500);
}
});
//当点击跳转链接后,回到页面顶部位置
$("#back-to-top").click(function(){
//$('body,html').animate({scrollTop:0},1000);
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, 1000);
return false;
}
$('body').animate({ scrollTop: 0 }, 1000);
return false;
});
});
});

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,109 @@
$(function(){
var SPACING = 20;
var $toc = $('._toc');
var $ava = $('#avator');
if($toc.length){
var minScrollTop = $toc.offset().top - SPACING;
var tocState = {
start: {
'position':'absolute',
'top':minScrollTop
},
process: {
'position':'fixed',
'top':SPACING
}
}
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop < minScrollTop){
$toc.css(tocState.start);
}
else{
$toc.css(tocState.process);
}
})
}
if($ava.length) {
let minScrollTop = $ava.offset().top - 30;
let avaState = {
start: {
'position':'absolute',
'top':minScrollTop
},
process: {
'position':'fixed',
'top':SPACING
}
}
$(window).scroll(function(){
let scrollTop = $(window).scrollTop();
if(scrollTop < minScrollTop) {
$ava.css(avaState.start);
}
else {
$ava.css(avaState.process);
}
})
}
});
$(window).resize(function(){
var $toc = $('._toc');
var minwidth = 1480;
var $avator = $('#avator');
var $postswrapper = $('.posts-wrapper');
if($(window).width()<1480){
$toc.css("display","none");
}
else {
$toc.css("display","block");
}
if($(window).width()<950){
$avator.css("display","none");
$postswrapper.css("width","100%");
}
else {
$avator.css("display","block");
$postswrapper.css("width","73%");
}
});
$(function(){
var $toc = $('._toc');
var minwidth = 1480;
var $avator = $('#avator');
var $postswrapper = $('.posts-wrapper');
if($(window).width<1480){
$toc.css("display","none");
}
if($(window).width()<950){
$avator.css("display","none");
$postswrapper.css("width","100%");
}
});
$(function(){
var HEADERFIX = 30;
var $toclink = $('.toc-link'),
$headerlink = $('.headerlink');
$(window).scroll(function(){
var headerlinkTop = $.map($headerlink,function(link){
return $(link).offset().top;
});
var scrollTop = $(window).scrollTop();
for(var i=0;i<$toclink.length;i++){
var isLast = i+1 === $toclink.length,
currentTop = headerlinkTop[i] - HEADERFIX,
nextTop = isLast ? Infinity : headerlinkTop[i+1]- HEADERFIX;
if(currentTop < scrollTop && scrollTop <= nextTop){
$($toclink[i]).addClass('active');
}
else{
$($toclink[i]).removeClass('active');
}
}
});
});

View File

@@ -0,0 +1,63 @@
// Config
support-for-ie = false
vendor-prefixes = webkit moz ms official
// Colors
color-default = #555
color-grey = #999
color-border = #ddd
color-link = #258fb8
color-background = #eee
color-sidebar-text = #777
color-widget-background = #ddd
color-widget-border = #ccc
color-footer-background = #262a30
color-mobile-nav-background = #191919
color-twitter = #00aced
color-facebook = #3b5998
color-pinterest = #cb2027
color-google = #dd4b39
// Fonts
font-sans = -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif
font-serif = Georgia, "Times New Roman", serif
font-mono = Consolas, Monaco, Menlo, Consolas, monospace
font-icon = FontAwesome
font-icon-path = "fonts/fontawesome-webfont"
font-icon-version = "4.0.3"
font-size = 13px
line-height = 1.6em
line-height-title = 1.1em
// Header
logo-size = 40px
subtitle-size = 16px
banner-height = 300px
banner-url = "images/banner.jpg"
// Layout
block-margin = 50px
article-padding = 20px
mobile-nav-width = 280px
main-column = 9
sidebar-column = 3
if sidebar and sidebar isnt bottom
_sidebar-column = sidebar-column
else
_sidebar-column = 0
// Grids
column-width = 80px
gutter-width = 20px
columns = main-column + _sidebar-column
// Media queries
mq-mobile = "screen and (max-width: 479px)"
mq-tablet = "screen and (min-width: 480px) and (max-width: 767px)"
mq-normal = "screen and (min-width: 768px)"

View File

@@ -0,0 +1,45 @@
.archive {
margin: 1em auto;
padding: 30px 50px;
border-bottom: 1px solid #eee;
.post-archive {
list-style: none;
padding: 0;
.collect-year {
font-size: 20px;
.post-date {
display: inline-block;
margin-right: 10px;
color: #BABABA;
}
.post-title {
color: #368CCB;
text-decoration: none;
}
}
.collect-item {
border-left: 1px solid #cacaca;
margin-left: 2px
.time{
font-size: 15px;
color: #cacaca;
margin-left: 25px;}
.title{
color: #34495e;
margin-left: 25px;
&:hover{
color: #1E90FF;}
}
&:hover {
transition: .2s ease-out;
transform: translateX(5px);
border-left: 2px solid #5d88ab;}
}
}}

View File

@@ -0,0 +1,13 @@
.back-to-top {
position: fixed;
right: 20px;
bottom: 20px;
transition-property: transform;
transition-timing-function: ease-out;
transition-duration: 0.3s;
z-index: 10;
&:hover {
transform: translateY(-5px);
}
}

View File

@@ -0,0 +1,124 @@
code, pre {
padding: 7px;
font-size: $code-font-size;
font-family: $code-font-family;
background: $code-background;
}
code {
padding: 3px 5px;
color: $code-color;
}
.highlight {
margin: 1em 0;
overflow-x: auto;
box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
table {
position: relative;
width: 100.1%
&::after {
position: absolute;
top: 0;
right: 0;
left: 0;
padding: 2px 7px;
font-size: $code-font-size;
font-weight: bold;
color: $gray;
background: $code-background;
content: 'Code';
}
}
// @each $sign, $text in $code-type-list {
// &.#{$sign} > ::after {
// content: $text;
// }
// }
.code {
pre {
margin: 0;
padding: 30px 10px 10px;
}
}
.gutter {
width: 10px;
color: $gray;
pre {
margin: 0;
padding: 30px 7px 10px;
}
}
.line {
// Fix code block null line height and
// Synchronous gutter and code line highly.
height: $code-font-size;
}
table, tr, td {
margin: 0;
padding: 0;
width: 100%;
border-collapse: collapse;
}
.code {
.comment,
.quote {
color: map-get($code-highlight-color, comment);
}
.keyword,
.selector-tag,
.addition {
color: map-get($code-highlight-color, keyword);
}
.number,
.string,
.meta .meta-string,
.literal,
.doctag,
.regexp {
color: map-get($code-highlight-color, number);
}
.title,
.section,
.name,
.selector-id,
.selector-class {
color: map-get($code-highlight-color, title);
}
.attribute,
.attr,
.variable,
.template-variable,
.class .title,
.type {
color: map-get($code-highlight-color, attribute);
}
.symbol,
.bullet,
.subst,
.meta,
.meta .keyword,
.selector-attr,
.selector-pseudo,
.link {
color: map-get($code-highlight-color, symbol);
}
.built_in,
.deletion {
color: map-get($code-highlight-color, built_in);
}
}
}

View File

@@ -0,0 +1,56 @@
.post-content {
a:hover {
background-color: #C0C0C0
border-radius: 3px
}
vertical-align: middle;
@for $i from 1 through 6 {
h#{$i} {
font-size: 1.3em;
font-weight: 400;
margin-top: 1.2em;
}
}
h1 {
font-size: 2.0em;
}
.header-link {
}
blockquote {
padding-left: 10px;
border-left: 2px solid #6a7c8e;
background-color: #F8F8F8;
}
img {
display: inline-block;
max-width: 100%;
height: auto;
vertical-align: middle;
position: relative;
}
> table {
max-width: 100%;
margin: 10px 0;
border-spacing: 0;
th, td {
padding: 5px 15px;
border: 1px double $content-table-border-color;
text-align: left;
}
}
ul {
list-style-type: disc;
position: relative;
left: 30px;
margin: 12px;
}
ol {
position: relative;
left: 30px;
margin: 12px;
}
}

View File

@@ -0,0 +1,11 @@
.copyright {
color: #8a8a8a;
text-align: center;
margin: 40px auto 20px;
max-width: 980px;
.text {
text-align: center;
font-size: 14px;
}
}

View File

@@ -0,0 +1,49 @@
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@font-face
{
font-family: "myFirstFont";
src: url('/fonts/Montserrat-Light.otf');
//url('Sansation_Light.eot'); /* IE9+ */
}
header {
display: block
box-shadow: 0 0 3px rgba(0,0,0,0.1)
height: 65px
margin-top: -5px
line-height: 65px
font-family: 'Montserrat Light'
.title {
float: left;
position: relative;
font-size: 26px;
font-family: "myFirstFont";
}
.site-nav {
float: right;
margin-right: -12px;
.menu{
display: block;
font-family: "myFirstFont";
position: relative;
font-family: "myFirstFont";
padding-left: 0;
padding-right: 0px;
.menu-item {
display: inline-block;
margin-right: 15px;
font-size: 16px;
}}}
}
header:before, header:after {
content: " ";
display: table;
}
header:after {
clear: both;
}
@media only screen and (max-width: 520px) {
.title {
display: none
}
}

View File

@@ -0,0 +1,162 @@
// https://github.com/chriskempson/tomorrow-theme
highlight-background = #2d2d2d
highlight-current-line = #393939
highlight-selection = #515151
highlight-foreground = #555
highlight-comment = #999999
highlight-red = #f2777a
highlight-orange = #f99157
highlight-yellow = #ffcc66
highlight-green = #16982B
highlight-aqua = #66cccc
highlight-blue = #6699cc
highlight-purple = #cc99cc
code-font-size = 14px
code-background = #34495e
code-color = #6a7c8e
code, pre {
padding: 7px;
font-size: code-font-size;
font-family: Consolas;
background: #f0f0f0;
}
code {
padding: 3px 5px;
border-radius: 4px;
color: code-color;
}
.highlight {
margin: 1em 0;
border-radius: 5px;
overflow-x: auto;
box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
position: relative;
table {
position: relative;
max-width: none;
&::after {
position: absolute;
top: 0;
right: 0;
left: 0;
padding: 2px 7px;
font-size: code-font-size;
font-weight: bold;
color: #fefefe;
background: #34495e;
content: 'Code';
}
}
figcaption {
position: absolute;
top: 0;
width: 100%;
padding: 2px 7px;
font-size: code-font-size;
font-weight: bold;
color:gray,;
background: code-background;
z-index: 20;
overflow-x: hidden;
box-sizing: border-box;
color: white;
& > a {
position: absolute;
right: 0;
display: inline-box;
margin-right: 7px;
font-weight: 400;
&:hover {
text-decoration: none;
border: 0;
}
}
}
.code {
pre {
margin: 0;
padding: 40px 10px 10px;
}
}
.code {
pre {
margin: 0;
padding: 40px 10px 10px;
}
}
.gutter {
width: 10px;
color: $gray;
pre {
margin: 0;
padding: 40px 7px 10px;
}
}
.line {
// Fix code block null line height and
// Synchronous gutter and code line highly.
height: round(code-font-size * 1.5);
}
table, tr, td {
margin: 0;
padding: 0;
width: 100.1%;
border-collapse: collapse;
}
}
pre
.comment
.title
color: highlight-comment
.variable
.attribute
.tag
.regexp
.ruby .constant
.xml .tag .title
.xml .pi
.xml .doctype
.html .doctype
.css .id
.css .class
.css .pseudo
color: highlight-red
.number
.preprocessor
.built_in
.literal
.params
.constant
color: highlight-orange
.class
.ruby .class .title
.css .rules .attribute
color: highlight-green
.string
.value
.inheritance
.header
.ruby .symbol
.xml .cdata
color: highlight-green
.css .hexcolor
color: highlight-aqua
.function
.python .decorator
.python .title
.ruby .function .title
.ruby .title .keyword
.perl .sub
.javascript .title
.coffeescript .title
color: highlight-blue
.keyword
.javascript .function
color: highlight-purple

View File

@@ -0,0 +1,82 @@
@font-face {
font-family: 'iconfont'; /* project id 96542 */
src: url('//at.alicdn.com/t/font_8gx15cdpiaz41jor.eot');
src: url('//at.alicdn.com/t/font_8gx15cdpiaz41jor.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_8gx15cdpiaz41jor.woff') format('woff'),
url('//at.alicdn.com/t/font_8gx15cdpiaz41jor.ttf') format('truetype'),
url('//at.alicdn.com/t/font_8gx15cdpiaz41jor.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
cursor: pointer;
}
.icon-linkedin:before {
content: "\e60d";
position: relative;
top: -2px;
}
.icon-twitter:before {
content: "\e600";
}
.icon-weibo:before {
content: "\e602";
}
.icon-stack-overflow:before {
content: "\e603";
font-size: .85em;
position: relative;
top: -4px;
}
.icon-email:before {
content: "\e605";
position: relative;
top: -2px;
}
.icon-facebook:before {
content: "\e601";
font-size: .95em;
position: relative;
top: -2px;
}
.icon-github:before {
content: "\e606";
position: relative;
top: -3px;
}
.icon-rss:before {
content: "\e604";
}
.icon-google:before {
content: "\e609";
}
.icon-zhihu:before {
content: "\e607";
font-size: .9em;
position: relative;
top: -2px;
}
.icon-heart:before {
content: "\e608";
}
.icon-right:before {
content: "\e60a";
}
.icon-left:before {
content: "\e60b";
}
.icon-up:before {
content: "\e60c";
}
.icon-search:before {
content: "\e60e";
}
.icon-close:before {
content: "\e60f";
}

View File

@@ -0,0 +1,88 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.main {
margin: 5px auto
max-width: 1040px
width: 90%
padding: 0 40px
border-radius: 5px
box-shadow: 0 1px 3px rgba(0,0,0,0.2)
}
a {
text-decoration: none;
color: #5d88ab;
}
*::selection{
color white
background-color: #34495e;
}
.mjx-chtml
white-space: normal !important
ul {
list-style: none;
}
body {
color: #34495e;
line-height: 2.4;
font-family: "Open Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Jhenghei", sans-serif;
font-weight: normal;;
}
.text-underline {
display: inline;
text-align: center;
position: relative;
}
.text-underline::after {
position: absolute;
left: 0;
top: 92%;
content: "";
background-color: #5f84a9;
width: 97%;
transform: scale(0);
-webkit-transform: scale(0);
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.text-underline:hover::after {
height: 2px;
-webkit-transform: scale(1);
transform: scale(1);
}
.img_bot {
position: fixed;
width: 20%;
height: 60%;
bottom: 0px;
right: -2px;}
.mjx-chtml {
line-height: 1px;
white-space: normal;
}
input[type="checkbox"] {
width: 20px
height: 15px
}
@import "header"
@import "posts"
@import "highlight"
@import "_variables"
@import "archive"
@import "paginator"
@import "iconfont"
@import "footer"
@import "content"
@import "back-to-top"
@import "toc"
@import "sidebar"
@import "tags"

View File

@@ -0,0 +1,22 @@
.page-nav, .paginator {
padding-bottom: 10px;
.next {
margin-right: 16px;
float: right;
&:hover {
transition: .2s ease-out;
transform: translateX(5px);}
}
.prev {
margin-left: 16px;
float: left;
&:hover {
transition: .2s ease-out;
transform: translateX(-5px);}
}
}
.post-nav {
padding: 15px 18px
a::before {
content: '#'
}}

View File

@@ -0,0 +1,39 @@
.posts-wrapper {
margin-top: 20px;
border-radius: 8px;
float: left;
width: 73%;
.post {
padding: 30px 0px;
border-bottom: 1px solid #eee;
}}
.post-title {
font-size: 38px;
color: #555555;
font-family: 'Montserrat';
}
.sub {
color: #aaa;
margin-bottom: 0px;}
.clearfix {
zoom 1
&:after{
display block
clear both
content ""
visibility hidden
height 0}}
.post-wrapper {
margin-top: 20px
.post {
padding: 30px 20px;
border-bottom: 1px solid #eee;
}
}

View File

@@ -0,0 +1,48 @@
.side-bar {
a {
color: #808080
}
float: left
.title {
color: grey
font-family: Montserrat;
margin: 15px 0
}
.avator {
position: absolute
top: 150px
margin-left: 54px
border-top: 1px solid #eee
.ava-img{
max-width: 200px;
max-height: 200px;
border-radius: 3px;
}
.author {
margin: 2px 0;
color: #808080
font-size: 25px}
.icon-list {
display: flex
justify-content: flex-start
border-top: 1px solid #eee
.icon-item {
width: 10px
height: 10px
margin: 4px 25px 4px 2px}
}
}
}
@media only screen and (max-width: 750px) {
#avator {
display: none; }
.posts-wrapper {
width: 100%; }
._toc {
display: none;}
._toc {
display: none;}
}

View File

@@ -0,0 +1,16 @@
.tags {
h3 {
color: grey
border-bottom: 1px solid #eee
}
.tag-list
{
.tag-list-count {
vertical-align: super
font-size: 0.6em
opacity: .6
top: -0.5em}
}
}

View File

@@ -0,0 +1,34 @@
._toc {
position: absolute
top: 203px
width: 200px
margin-left: 1040px
border-left: 1px solid #eee
padding-left: 9px
.toc-title {
&:before {
font-family: "FontAwesome"
content: "\f02c"
margin-right: 0.5em}}
.toc-content {
li {
list-style: none
white-space: nowrap
.toc-link {
white-space: pre-wrap
}
}
}
}
.active {
background: #e5e9ef
display: block
width: 180px
margin-left: -10px
padding-left: 10px
line-height: 25px
border-left: 3px solid #34495e
box-shadow: 1px 1px 1px #ddd
}