modified: CSS 抽离出变量，优化 CSS 写法
This commit is contained in:
XPoet
parent
5e22aa8b8e
commit
a5ee7e027e
56
_config.yml
56
_config.yml
|
|
@ -25,59 +25,3 @@ valine:
|
||||||
notify: false # mail notifier , https://github.com/xCss/Valine/wiki
|
notify: false # mail notifier , https://github.com/xCss/Valine/wiki
|
||||||
verify: false # Verification code
|
verify: false # Verification code
|
||||||
placeholder: 评论一下再走吧~
|
placeholder: 评论一下再走吧~
|
||||||
|
|
||||||
|
|
||||||
# ---------------------------------------------------------------
|
|
||||||
# Font Settings
|
|
||||||
# - Find fonts on Google Fonts (https://www.google.com/fonts)
|
|
||||||
# - All fonts set here will have the following styles:
|
|
||||||
# light, light italic, normal, normal italic, bold, bold italic
|
|
||||||
# - Be aware that setting too much fonts will cause site running slowly
|
|
||||||
# - Introduce in 5.0.1
|
|
||||||
# ---------------------------------------------------------------
|
|
||||||
# CAUTION! Safari Version 10.1.2 bug: https://github.com/iissnan/hexo-theme-next/issues/1844
|
|
||||||
# To avoid space between header and sidebar in Pisces / Gemini themes recommended to use Web Safe fonts for `global` (and `logo`):
|
|
||||||
# Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS | Trebuchet MS
|
|
||||||
# ---------------------------------------------------------------
|
|
||||||
font:
|
|
||||||
enable: false
|
|
||||||
|
|
||||||
# Uri of fonts host. E.g. //fonts.googleapis.com (Default).
|
|
||||||
host:
|
|
||||||
|
|
||||||
# Font options:
|
|
||||||
# `external: true` will load this font family from `host` above.
|
|
||||||
# `family: Times New Roman`. Without any quotes.
|
|
||||||
# `size: xx`. Use `px` as unit.
|
|
||||||
|
|
||||||
# Global font settings used on <body> element.
|
|
||||||
global:
|
|
||||||
external: true
|
|
||||||
family: Lato
|
|
||||||
size:
|
|
||||||
|
|
||||||
# Font settings for Headlines (h1, h2, h3, h4, h5, h6).
|
|
||||||
# Fallback to `global` font settings.
|
|
||||||
headings:
|
|
||||||
external: true
|
|
||||||
family:
|
|
||||||
size:
|
|
||||||
|
|
||||||
# Font settings for posts.
|
|
||||||
# Fallback to `global` font settings.
|
|
||||||
posts:
|
|
||||||
external: true
|
|
||||||
family:
|
|
||||||
|
|
||||||
# Font settings for Logo.
|
|
||||||
# Fallback to `global` font settings.
|
|
||||||
logo:
|
|
||||||
external: true
|
|
||||||
family:
|
|
||||||
size:
|
|
||||||
|
|
||||||
# Font settings for <code> and code blocks.
|
|
||||||
codes:
|
|
||||||
external: true
|
|
||||||
family: Source Code Pro
|
|
||||||
size: 14
|
|
||||||
|
|
|
||||||
|
|
@ -3,27 +3,28 @@
|
||||||
<!-- 文章内容详情页面 -->
|
<!-- 文章内容详情页面 -->
|
||||||
<div class="article-container">
|
<div class="article-container">
|
||||||
<div class="article-title">
|
<div class="article-title">
|
||||||
<h3><a><%= page.title %></a></h3>
|
<h3><a class="article-title-hover-animation"><%= page.title %></a></h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="article-meta-info">
|
<div class="meta-info">
|
||||||
<%- partial('common/article-meta-info', {articleData: page, index: true}) %>
|
<%- partial('common/article-meta-info', {articleObject: page, index: true}) %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="article-content">
|
<div class="article-content">
|
||||||
<%- page.content %>
|
<%- page.content %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="article-nav">
|
<div class="article-nav">
|
||||||
<% if (page.prev) { %>
|
<% if (page.prev) { %>
|
||||||
<div class="article-prev">
|
<div class="article-prev">
|
||||||
<a class="prev btn" rel="prev" role="navigation"
|
<a class="prev btn" rel="prev"
|
||||||
href="<%= url_for(page.prev.path) %>"><i class="fa fa-chevron-left"></i> <%= page.prev.title %>
|
href="<%= url_for(page.prev.path) %>"><i class="fa fa-chevron-left"></i> <%= page.prev.title %>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if (page.next) { %>
|
<% if (page.next) { %>
|
||||||
<div class="article-next">
|
<div class="article-next">
|
||||||
<a class="next btn" rel="next" role="navigation"
|
<a class="next btn" rel="next"
|
||||||
href="<%= url_for(page.next.path) %>"><%= page.next.title %> <i class="fa fa-chevron-right"></i>
|
href="<%= url_for(page.next.path) %>"><%= page.next.title %> <i class="fa fa-chevron-right"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,9 @@
|
||||||
-->
|
-->
|
||||||
<% if (is_category()) { %>
|
<% if (is_category()) { %>
|
||||||
<div class="category-container">
|
<div class="category-container">
|
||||||
<div class="category-name"><%- __('category') %>：<%= page.category %> [共<%= page.posts.length %>篇]</div>
|
<div class="category-name">
|
||||||
|
<i class="fa fa-bookmark"></i> <%- __('category') %>：<%= page.category %> [<%= page.posts.length %>]
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<%- partial('archive-post') %>
|
<%- partial('archive-post') %>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
@ -1,15 +1,16 @@
|
||||||
<div class="article-meta-info">
|
<div class="article-meta-info">
|
||||||
|
|
||||||
<!-- date -->
|
<!-- date -->
|
||||||
<span class="article-date article-meta-item">
|
<span class="article-date article-meta-item">
|
||||||
<i class="fa fa-calendar-o"></i> <%= date(articleData.date, 'YYYY-MM-DD HH:mm:ss') %>
|
<i class="fa fa-calendar-o"></i> <%= date(articleObject.date, 'YYYY-MM-DD HH:mm:ss') %>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<!-- categories -->
|
<!-- categories -->
|
||||||
<% if (articleData.categories.length) { %>
|
<% if (articleObject.categories.length) { %>
|
||||||
<span class="article-categories article-meta-item">
|
<span class="article-categories article-meta-item">
|
||||||
<i class="fa fa-bookmark"></i>
|
<i class="fa fa-bookmark"></i>
|
||||||
<ul>
|
<ul>
|
||||||
<% articleData.categories.forEach((category, i) => { %>
|
<% articleObject.categories.forEach((category, i) => { %>
|
||||||
<li>
|
<li>
|
||||||
<%= i === 0 ? '' : '| ' %><a href="<%- url_for(category.path) %>"><%= category.name %></a>
|
<%= i === 0 ? '' : '| ' %><a href="<%- url_for(category.path) %>"><%= category.name %></a>
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -19,11 +20,11 @@
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
<!-- tags -->
|
<!-- tags -->
|
||||||
<% if (articleData.tags.length) { %>
|
<% if (articleObject.tags.length) { %>
|
||||||
<span class="article-tags article-meta-item">
|
<span class="article-tags article-meta-item">
|
||||||
<i class="fa fa-tags"></i>
|
<i class="fa fa-tags"></i>
|
||||||
<ul>
|
<ul>
|
||||||
<% articleData.tags.forEach((tag, i) => { %>
|
<% articleObject.tags.forEach((tag, i) => { %>
|
||||||
<li>
|
<li>
|
||||||
<%= i === 0 ? '' : '| ' %><a href="<%- url_for(tag.path) %>"><%= tag.name %></a>
|
<%= i === 0 ? '' : '| ' %><a href="<%- url_for(tag.path) %>"><%= tag.name %></a>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<header>
|
|
||||||
<h2 class="site-title">
|
|
||||||
网站标题：<%= config.title %>
|
|
||||||
</h2>
|
|
||||||
<h3 class="site-description">
|
|
||||||
网站描述：<%= config.description %>
|
|
||||||
</h3>
|
|
||||||
<nav class="site-nav" role="navigation">
|
|
||||||
<ul class="menu-list">
|
|
||||||
<% for (let i in theme.menu) { %>
|
|
||||||
<li class="menu-item">
|
|
||||||
<a href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
|
|
||||||
</li>
|
|
||||||
<% } %>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
@ -1,8 +1,13 @@
|
||||||
<nav class="nav" role="navigation">
|
<nav class="nav">
|
||||||
|
<div class="fold-left-side">
|
||||||
|
<i class="fa fa-bars"></i>
|
||||||
|
</div>
|
||||||
|
<div></div>
|
||||||
<ul class="menu-list">
|
<ul class="menu-list">
|
||||||
<% for (let i in theme.menu) { %>
|
<% for (let i in theme.menu) { %>
|
||||||
<li class="menu-item">
|
<li class="menu-item">
|
||||||
<a class="<%- is_current(theme.menu[i]) ? 'current':'' %>" href="<%- url_for(theme.menu[i]) %>"><%= __(i.toLowerCase()) %></a>
|
<a class="<%- is_current(theme.menu[i]) ? 'current' : '' %>"
|
||||||
|
href="<%- url_for(theme.menu[i]) %>"><%= __(i.toLowerCase()) %></a>
|
||||||
</li>
|
</li>
|
||||||
<% } %>
|
<% } %>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,16 @@
|
||||||
<% if(theme.valine.enable && theme.valine.appid && theme.valine.appkey) { %>
|
<% if(theme.valine.enable && theme.valine.appid && theme.valine.appkey) { %>
|
||||||
<script src='https://unpkg.com/valine@1.3.10/dist/Valine.min.js'></script>
|
<div class="valine-container">
|
||||||
<div id="valine"></div>
|
<script src='https://unpkg.com/valine@1.3.10/dist/Valine.min.js'></script>
|
||||||
<script>
|
<div id="valine"></div>
|
||||||
new Valine({
|
<script>
|
||||||
el: '#valine',
|
new Valine({
|
||||||
appId: '<%= theme.valine.appid %>',
|
el: '#valine',
|
||||||
appKey: '<%= theme.valine.appkey %>',
|
appId: '<%= theme.valine.appid %>',
|
||||||
notify: '<%= theme.valine.notify %>',
|
appKey: '<%= theme.valine.appkey %>',
|
||||||
verify: '<%= theme.valine.verify %>',
|
notify: '<%= theme.valine.notify %>',
|
||||||
placeholder: '<%= theme.valine.placeholder %>'
|
verify: '<%= theme.valine.verify %>',
|
||||||
})
|
placeholder: '<%= theme.valine.placeholder %>'
|
||||||
</script>
|
})
|
||||||
<% } %>
|
</script>
|
||||||
|
</div>
|
||||||
|
<% } %>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<li class="article-post-item">
|
<li class="article-post-item">
|
||||||
<div class="article-post-title">
|
<div class="article-post-title">
|
||||||
<h3>
|
<h3>
|
||||||
<a href="<%- url_for(post.path) %>"><%= post.title %></a>
|
<a class="article-title-hover-animation" href="<%- url_for(post.path) %>"><%= post.title %></a>
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="article-meta-info-container">
|
<div class="article-meta-info-container">
|
||||||
<%- partial('common/article-meta-info', {articleData: post, index: true}) %>
|
<%- partial('common/article-meta-info', {articleObject: post, index: true}) %>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
|
|
@ -25,15 +25,13 @@
|
||||||
<div class="paginator">
|
<div class="paginator">
|
||||||
<% if (page.prev) { %>
|
<% if (page.prev) { %>
|
||||||
<a class="prev btn"
|
<a class="prev btn"
|
||||||
href="<%- url_for(page.prev == 1 ? '':'/page/' + page.prev) %>"
|
href="<%- url_for(page.prev == 1 ? '' : '/page/' + page.prev) %>"
|
||||||
role="navigation"
|
|
||||||
><%- __('prev') %></a>
|
><%- __('prev') %></a>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
<% if (page.next) { %>
|
<% if (page.next) { %>
|
||||||
<a class="next btn"
|
<a class="next btn"
|
||||||
href="<%- url_for('/page/' + page.next) %>"
|
href="<%- url_for('/page/' + page.next) %>"
|
||||||
role="navigation"
|
|
||||||
><%- __('next') %></a>
|
><%- __('next') %></a>
|
||||||
<% } %>
|
<% } %>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,9 @@
|
||||||
<div class="right-side-container">
|
<div class="right-side-container">
|
||||||
|
|
||||||
<div class="nav-container animated">
|
<div class="nav-container animated">
|
||||||
<%- partial('common/nav') %>
|
<%- partial('common/nav') %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="article-post-container animated">
|
<div class="article-post-container animated">
|
||||||
<% if (is_home()) { %>
|
<% if (is_home()) { %>
|
||||||
<!-- 载入首页的内容 -->
|
<!-- 载入首页的内容 -->
|
||||||
|
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
.animated {
|
|
||||||
animation-fill-mode: both;
|
|
||||||
animation-duration: 1s;
|
|
||||||
animation-name fade-in-down
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.hinge {
|
|
||||||
animation-duration: 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fade-in-down {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,113 +0,0 @@
|
||||||
html {
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
background-color: #fff;
|
|
||||||
font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
color: rgba(0, 0, 0, 0.5);
|
|
||||||
font-family: 'PingHei', 'PingFang SC', Helvetica Neue, 'Work Sans', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif;
|
|
||||||
font-size: 15px;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto 30px auto;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul, li, ol {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
list-style: none
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
line-height: 1.9em;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:link, a:visited {
|
|
||||||
opacity: 1;
|
|
||||||
transition: all .15s linear;
|
|
||||||
color: #424242;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover, a:active {
|
|
||||||
color: #4786D6;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 按钮样式
|
|
||||||
a.btn {
|
|
||||||
color: #868686;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
outline: 0;
|
|
||||||
color: rgba(0, 0, 0, 0.44);
|
|
||||||
background: rgba(0, 0, 0, 0);
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
||||||
white-space: nowrap;
|
|
||||||
font-weight: 400;
|
|
||||||
font-style: normal;
|
|
||||||
border-radius: 999em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:hover {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
outline: 0;
|
|
||||||
color: #464545;
|
|
||||||
background: rgba(0, 0, 0, 0);
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 1px solid #464545;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-weight: 400;
|
|
||||||
font-style: normal;
|
|
||||||
border-radius: 999em;
|
|
||||||
}
|
|
||||||
|
|
||||||
[role="back"] {
|
|
||||||
padding: 0.5em 1.25em;
|
|
||||||
line-height: 1.666em;
|
|
||||||
}
|
|
||||||
|
|
||||||
[role="home"] {
|
|
||||||
padding: 0.5em 1.25em;
|
|
||||||
line-height: 1.666em;
|
|
||||||
}
|
|
||||||
|
|
||||||
[role="navigation"] {
|
|
||||||
padding: 0.5em 1.25em;
|
|
||||||
line-height: 1.666em;
|
|
||||||
}
|
|
||||||
|
|
||||||
[role="tags"] {
|
|
||||||
padding: 6px 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 单行代码样式
|
|
||||||
code {
|
|
||||||
padding: 5px;
|
|
||||||
font-family: Inconsolata, monospace, sans-serif;
|
|
||||||
font-size: 0.85em;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
border: 1px solid #E3EDF3;
|
|
||||||
background: #f7f7f9;
|
|
||||||
color: #d14;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -15,12 +15,12 @@ $code-block {
|
||||||
pre, code { font-family: $code-font-family; }
|
pre, code { font-family: $code-font-family; }
|
||||||
|
|
||||||
code {
|
code {
|
||||||
padding: 2px 4px;
|
padding: 4px;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
color: $code-foreground;
|
color: $code-foreground;
|
||||||
background: $code-background;
|
background: $code-background;
|
||||||
border-radius: $code-border-radius;
|
border-radius: $code-border-radius;
|
||||||
font-size $code-font-size;
|
font-size: $code-font-size;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
|
|
|
||||||
|
|
@ -89,3 +89,11 @@ if $highlight_theme == "night bright"
|
||||||
color: lighten($highlight-background, 40%),
|
color: lighten($highlight-background, 40%),
|
||||||
bg-color: lighten($highlight-background, 16%)
|
bg-color: lighten($highlight-background, 16%)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
$code-font-size = 0.9em;
|
||||||
|
$line-height-code-block = 1.5em;
|
||||||
|
$code-foreground = #ff7600;
|
||||||
|
$code-background = #f8f8f8;
|
||||||
|
$code-border-radius = 2px;
|
||||||
|
$code-font-family = consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace;
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
.about-container {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -1,11 +1,15 @@
|
||||||
|
@require 'variables.styl'
|
||||||
|
|
||||||
|
$archive-year-font-size = 24px;
|
||||||
|
|
||||||
.archive-container {
|
.archive-container {
|
||||||
|
|
||||||
.archives-wrap {
|
.archives-wrap {
|
||||||
margin-bottom 20px
|
margin-bottom 20px
|
||||||
|
|
||||||
.archive-year {
|
.archive-year {
|
||||||
font-size: 24px;
|
font-size: $archive-year-font-size;
|
||||||
color: #666;
|
color: $article-title-color ;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -16,10 +20,10 @@
|
||||||
font-size 16px
|
font-size 16px
|
||||||
|
|
||||||
a.archive-article-title {
|
a.archive-article-title {
|
||||||
color #8f8f8f
|
color $archive-article-title-color
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #4786D6;
|
color: $a-hover-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,111 +1,29 @@
|
||||||
|
@require 'variables.styl'
|
||||||
|
|
||||||
.article-container {
|
.article-container {
|
||||||
|
|
||||||
.article-title {
|
.article-title {
|
||||||
h1 {
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 30px;
|
|
||||||
letter-spacing: 5px;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
font-size: 28px;
|
|
||||||
line-height: 1;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #5f5f5f;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 1px;
|
|
||||||
line-height: 1;
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #464646;
|
color: $article-title-color;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
color: $article-title-color;
|
||||||
letter-spacing: 1px;
|
|
||||||
color: #5f5f5f;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-meta-info {
|
.meta-info {
|
||||||
|
margin 10px 0
|
||||||
margin-top: 20px;
|
|
||||||
|
|
||||||
.meta {
|
|
||||||
max-width: 100%;
|
|
||||||
height: 25px;
|
|
||||||
color: #bbbbbb;
|
|
||||||
|
|
||||||
.info {
|
|
||||||
float: left;
|
|
||||||
font-size: 12px;
|
|
||||||
|
|
||||||
.date {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: #bbbbbb;
|
|
||||||
padding-right: 10px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #4786D6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.tags {
|
|
||||||
padding-bottom: 15px;
|
|
||||||
font-size: 13px;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
display: inline;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
li {
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 0;
|
|
||||||
padding-right: 5px;
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: rgba(0, 0, 0, 0.44);
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.article-content {
|
.article-content {
|
||||||
|
|
||||||
padding-bottom 10px
|
padding-bottom 10px
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
@require 'variables.styl'
|
||||||
|
@require 'common/animated.styl'
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: $default-font-color;
|
||||||
|
background: $background-color;
|
||||||
|
font-size: $default-font-size;
|
||||||
|
font-family: $default-font-family;
|
||||||
|
font-weight: $default-font-weight;
|
||||||
|
-webkit-font-smoothing antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul, li, ol {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
line-height: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: $a-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover, a:active {
|
||||||
|
color: $a-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 预设的按钮样式
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
color: $button-color;
|
||||||
|
border: 1px solid $button-border-color;
|
||||||
|
white-space: nowrap;
|
||||||
|
border-radius: 10em;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $button-hover-color;
|
||||||
|
border: 1px solid $button-border-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 文章标题悬浮动画
|
||||||
|
.article-title-hover-animation {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
color: $article-title-color;
|
||||||
|
border-bottom: none;
|
||||||
|
line-height: 1.3;
|
||||||
|
vertical-align: top;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: $article-title-color;
|
||||||
|
visibility: hidden;
|
||||||
|
transform: scaleX(0);
|
||||||
|
the-transition();
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover::before {
|
||||||
|
visibility: visible;
|
||||||
|
transform: scaleX(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
|
@require 'variables.styl'
|
||||||
|
|
||||||
.category-container {
|
.category-container {
|
||||||
.category-name {
|
.category-name {
|
||||||
color: #666
|
color: $article-title-color
|
||||||
font-size 20px
|
font-size 20px
|
||||||
font-weight bold
|
font-weight 600
|
||||||
margin-bottom 10px
|
margin-bottom 10px
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
.animated {
|
||||||
|
animation-fill-mode: both;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-name fade-in-down
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated.hinge {
|
||||||
|
animation-duration: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in-down {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
the-transition() {
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
transition-timing-function: ease-in-out;
|
||||||
|
transition-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
the-transition-ease-in() {
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
transition-timing-function: ease-in;
|
||||||
|
transition-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
the-transition-ease-out() {
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
transition-timing-function: ease-out;
|
||||||
|
transition-delay: 0s;
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,12 @@
|
||||||
|
@require '../variables.styl'
|
||||||
|
|
||||||
|
$article-meta-info-color = #aaa;
|
||||||
|
$article-meta-info-font-size = 12px;
|
||||||
|
|
||||||
.article-meta-info {
|
.article-meta-info {
|
||||||
color: #bbbbbb;
|
|
||||||
font-size: 12px;
|
color: $article-meta-info-color;
|
||||||
|
font-size: $article-meta-info-font-size;
|
||||||
|
|
||||||
.article-meta-item {
|
.article-meta-item {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
|
@ -14,12 +20,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
color: $article-meta-info-color;
|
||||||
color: rgba(0, 0, 0, 0.44);
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
color: $a-hover-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
.footer {
|
.footer {
|
||||||
.copyright-info {
|
.copyright-info {
|
||||||
padding 5px
|
padding 5px
|
||||||
font-size 14px
|
|
||||||
text-align center
|
text-align center
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,9 +1,11 @@
|
||||||
|
@require '../variables.styl'
|
||||||
|
|
||||||
.left-side-container {
|
.left-side-container {
|
||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
position relative
|
position relative
|
||||||
box-sizing border-box
|
box-sizing border-box
|
||||||
border-right 1px solid #f3f3f3
|
border-right 1px solid $border-color
|
||||||
|
|
||||||
|
|
||||||
.site-info-container {
|
.site-info-container {
|
||||||
|
|
|
||||||
|
|
@ -1,37 +1,40 @@
|
||||||
|
@require '../variables.styl'
|
||||||
|
|
||||||
|
$nav-font-size = 12px;
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
position relative
|
position: relative
|
||||||
width 100%
|
width: 100%
|
||||||
height 100%
|
height: 100%
|
||||||
box-sizing border-box
|
box-sizing: border-box
|
||||||
background: #fff
|
background: $background-color
|
||||||
border-bottom 1px solid #f2f2f2
|
border-bottom: 1px solid $border-color
|
||||||
font-size: 12px;
|
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
font-size: $nav-font-size;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
.fold-left-side {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
font-size 20px
|
||||||
|
left: 20px
|
||||||
|
}
|
||||||
|
|
||||||
.menu-list {
|
.menu-list {
|
||||||
position: absolute
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
|
|
||||||
.menu-item {
|
.menu-item {
|
||||||
float: left
|
float: left;
|
||||||
padding-right: 20px
|
margin-left: 20px;
|
||||||
|
|
||||||
a {
|
|
||||||
color: #6a6a6a;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #4786D6;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.current {
|
|
||||||
color: #5A5A5A;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
border-bottom: 1px solid #4a4a4a;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.current {
|
||||||
|
padding-bottom: 20px;
|
||||||
|
border-bottom: 1px solid $nav-selected-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,32 +1,32 @@
|
||||||
|
@require '../variables.styl'
|
||||||
|
|
||||||
|
$description-font-size = 16px
|
||||||
|
|
||||||
.site-info {
|
.site-info {
|
||||||
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
padding 2px
|
padding: 2px;
|
||||||
border-radius 50%
|
border-radius: 50%;
|
||||||
border 1px solid #ddd
|
border: 1px solid $border-color;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
margin 5px 0;
|
margin: 5px 0;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #464646;
|
color: $logo-title-color;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
padding 5px
|
padding 5px
|
||||||
font-size: 16px;
|
font-size: $description-font-size;
|
||||||
color: #565654;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
.valine-container {
|
||||||
|
.vcontrol {
|
||||||
|
.col-20 a {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
.txt-right {
|
||||||
|
display none
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
@require 'variables.styl'
|
||||||
|
|
||||||
.home-container {
|
.home-container {
|
||||||
|
|
||||||
.article-post-list {
|
.article-post-list {
|
||||||
|
|
@ -6,51 +8,29 @@
|
||||||
|
|
||||||
margin-bottom 30px
|
margin-bottom 30px
|
||||||
padding-bottom 20px
|
padding-bottom 20px
|
||||||
border-bottom: 1px solid #f2f2f2;
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
.article-post-title {
|
.article-post-title {
|
||||||
h1 {
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 30px;
|
|
||||||
letter-spacing: 5px;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
font-size: 28px;
|
|
||||||
line-height: 1;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #5f5f5f;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 1px;
|
|
||||||
line-height: 1;
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #464646;
|
color: $article-title-color;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
color: $article-title-color;
|
||||||
letter-spacing: 1px;
|
|
||||||
color: #5f5f5f;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-post-content {
|
.article-post-content {
|
||||||
padding 15px 0
|
padding 15px 0
|
||||||
line-height 28px
|
line-height 2em
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -78,3 +58,6 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
$left-side-width = 30%
|
@require 'variables.styl'
|
||||||
$right-side-width = 70%
|
|
||||||
|
|
||||||
.page-container {
|
.page-container {
|
||||||
position absolute
|
position absolute
|
||||||
|
|
@ -7,7 +6,7 @@ $right-side-width = 70%
|
||||||
right: 0
|
right: 0
|
||||||
top: 0
|
top: 0
|
||||||
bottom: 0
|
bottom: 0
|
||||||
background: #fff
|
background: $background-color
|
||||||
|
|
||||||
.page-left {
|
.page-left {
|
||||||
float: left
|
float: left
|
||||||
|
|
@ -20,11 +19,12 @@ $right-side-width = 70%
|
||||||
float: right
|
float: right
|
||||||
width: $right-side-width
|
width: $right-side-width
|
||||||
height: 100%
|
height: 100%
|
||||||
|
position relative
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 960px) {
|
@media screen and (max-width: 960px) {
|
||||||
.page-left {
|
.page-left {
|
||||||
display none
|
display: none
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-right {
|
.page-right {
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,21 @@
|
||||||
nav-container-height = 60px;
|
@require 'variables.styl'
|
||||||
|
|
||||||
.right-side-container {
|
.right-side-container {
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin-top: nav-container-height;
|
margin-top: $nav-height;
|
||||||
|
|
||||||
.nav-container {
|
.nav-container {
|
||||||
width 100%
|
|
||||||
height nav-container-height
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
width $right-side-width
|
||||||
|
height: $nav-height;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-post-container {
|
.article-post-container {
|
||||||
background: #fff
|
background: $background-color;
|
||||||
padding 30px
|
padding: 30px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
|
@require 'variables.styl'
|
||||||
|
|
||||||
.tag-container {
|
.tag-container {
|
||||||
.tag-name {
|
.tag-name {
|
||||||
color: #666
|
color: $article-title-color
|
||||||
font-size 20px
|
font-size 20px
|
||||||
font-weight bold
|
font-weight 600
|
||||||
margin-bottom 10px
|
margin-bottom 10px
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
// 左侧宽度占比
|
||||||
|
$left-side-width = 30%
|
||||||
|
|
||||||
|
// 右侧宽度占比
|
||||||
|
$right-side-width = 70%
|
||||||
|
|
||||||
|
// 背景颜色
|
||||||
|
$background-color = #fff
|
||||||
|
|
||||||
|
// 边框颜色
|
||||||
|
$border-color = #f2f2f2
|
||||||
|
|
||||||
|
// 网站LOGO标题颜色
|
||||||
|
$logo-title-color = #565656
|
||||||
|
|
||||||
|
// 网站LOGO描述颜色
|
||||||
|
$logo-description-color = #666
|
||||||
|
|
||||||
|
// 网站LOGO描述字体大小
|
||||||
|
$logo-description-font-size = #666
|
||||||
|
|
||||||
|
// 默认字体样式
|
||||||
|
$default-font-family = 'PingHei', 'PingFang SC', 'Microsoft YaHei'
|
||||||
|
|
||||||
|
// 默认字体大小
|
||||||
|
$default-font-size = 14px
|
||||||
|
|
||||||
|
// 默认字体行高
|
||||||
|
$default-font-line-height = 20px
|
||||||
|
|
||||||
|
// 默认字体加粗程度
|
||||||
|
$default-font-weight = 400
|
||||||
|
|
||||||
|
// 默认字体颜色
|
||||||
|
$default-font-color = #777
|
||||||
|
|
||||||
|
// 文章标题颜色
|
||||||
|
$article-title-color = #666
|
||||||
|
|
||||||
|
// 归档文章标题颜色
|
||||||
|
$archive-article-title-color = #8f8f8f
|
||||||
|
|
||||||
|
|
||||||
|
// 导航栏高度
|
||||||
|
$nav-height = 60px
|
||||||
|
|
||||||
|
// 导航项选中的颜色
|
||||||
|
$nav-selected-color = #4a4a4a
|
||||||
|
|
||||||
|
// 超链接a标签颜色
|
||||||
|
$a-color = #666
|
||||||
|
|
||||||
|
// 超链接a标签悬浮颜色
|
||||||
|
$a-hover-color = #4786d6
|
||||||
|
|
||||||
|
// 按钮颜色
|
||||||
|
$button-color = $default-font-color
|
||||||
|
|
||||||
|
// 按钮边框颜色
|
||||||
|
$button-border-color = $default-font-color
|
||||||
|
|
||||||
|
// 按钮悬浮颜色
|
||||||
|
$button-hover-color = #505050
|
||||||
|
|
||||||
|
// 按钮边框悬浮颜色
|
||||||
|
$button-border-hover-color = #505050
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
@import "libs/font-awesome.min.css"
|
@import "libs/font-awesome.min.css"
|
||||||
@import "basic.styl"
|
@import "layout/basic.styl"
|
||||||
@import "animated.styl"
|
@import "layout/common/animated.styl"
|
||||||
@import "layout/index.styl"
|
@import "layout/index.styl"
|
||||||
@import "layout/right-side.styl"
|
@import "layout/right-side.styl"
|
||||||
@import "layout/common/left-side.styl"
|
@import "layout/common/left-side.styl"
|
||||||
|
|
@ -13,5 +13,6 @@
|
||||||
@import "layout/category-post.styl"
|
@import "layout/category-post.styl"
|
||||||
@import "layout/tag-post.styl"
|
@import "layout/tag-post.styl"
|
||||||
@import "layout/common/site-info.styl"
|
@import "layout/common/site-info.styl"
|
||||||
|
@import "layout/common/valine.styl"
|
||||||
@import "highlight"
|
@import "highlight"
|
||||||
@import "variables.styl"
|
@import "layout/variables.styl"
|
||||||
|
|
|
||||||
|
|
@ -1,415 +0,0 @@
|
||||||
// =================================================
|
|
||||||
// Variables
|
|
||||||
// =================================================
|
|
||||||
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
// colors for use across theme.
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
$whitesmoke = #f5f5f5
|
|
||||||
$gainsboro = #eee
|
|
||||||
$gray-lighter = #ddd
|
|
||||||
$grey-light = #ccc
|
|
||||||
$grey = #bbb
|
|
||||||
$grey-dark = #999
|
|
||||||
$grey-dim = #666
|
|
||||||
$black-light = #555
|
|
||||||
$black-dim = #333
|
|
||||||
$black-deep = #222
|
|
||||||
$red = #ff2a2a
|
|
||||||
$blue-bright = #87daff
|
|
||||||
$blue = #0684bd
|
|
||||||
$blue-deep = #262a30
|
|
||||||
$orange = #fc6423
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Scaffolding
|
|
||||||
// Settings for some of the most global styles.
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
// Global text color on <body>
|
|
||||||
$text-color = $black-light
|
|
||||||
|
|
||||||
// Global link color.
|
|
||||||
$link-color = $black-light
|
|
||||||
$link-hover-color = $black-deep
|
|
||||||
$link-decoration-color = $grey-light
|
|
||||||
$link-decoration-hover-color = $black-deep
|
|
||||||
|
|
||||||
// Global border color.
|
|
||||||
$border-color = $grey-light
|
|
||||||
|
|
||||||
// Background color for <body>
|
|
||||||
$body-bg-color = white
|
|
||||||
|
|
||||||
// Selection
|
|
||||||
$selection-bg = $blue-deep
|
|
||||||
$selection-color = white
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Typography
|
|
||||||
// Font, line-height, and elements colors.
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
|
|
||||||
get_font_family(config) {
|
|
||||||
custom_family = hexo-config('font.' + config + '.family')
|
|
||||||
return custom_family is a 'string' ? custom_family : null
|
|
||||||
}
|
|
||||||
|
|
||||||
// Font families.
|
|
||||||
$font-family-chinese = "PingFang SC", "Microsoft YaHei"
|
|
||||||
|
|
||||||
$font-family-base = $font-family-chinese, sans-serif
|
|
||||||
$font-family-base = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global')
|
|
||||||
|
|
||||||
$font-family-logo = $font-family-base
|
|
||||||
$font-family-logo = get_font_family('logo'), $font-family-base if get_font_family('logo')
|
|
||||||
|
|
||||||
$font-family-headings = $font-family-base
|
|
||||||
$font-family-headings = get_font_family('headings'), $font-family-base if get_font_family('headings')
|
|
||||||
|
|
||||||
$font-family-posts = $font-family-base
|
|
||||||
$font-family-posts = get_font_family('posts'), $font-family-base if get_font_family('posts')
|
|
||||||
|
|
||||||
$font-family-monospace = consolas, Menlo, $font-family-chinese, monospace
|
|
||||||
$font-family-monospace = get_font_family('codes'), consolas, Menlo, $font-family-chinese, monospace if get_font_family('codes')
|
|
||||||
|
|
||||||
$font-family-icons = 'FontAwesome'
|
|
||||||
|
|
||||||
|
|
||||||
// Font Weight
|
|
||||||
$font-weight-lighter = 200
|
|
||||||
$font-weight-light = 300
|
|
||||||
$font-weight-normal = 400
|
|
||||||
$font-weight-bold = 600
|
|
||||||
$font-weight-bolder = 700
|
|
||||||
|
|
||||||
|
|
||||||
// Font size
|
|
||||||
$font-size-base = 14px
|
|
||||||
$font-size-base = unit(hexo-config('font.global.size'), px) if hexo-config('font.global.size') is a 'unit'
|
|
||||||
$font-size-small = $font-size-base - 2px
|
|
||||||
$font-size-smaller = $font-size-base - 4px
|
|
||||||
$font-size-large = $font-size-base + 2px
|
|
||||||
$font-size-larger = $font-size-base + 4px
|
|
||||||
|
|
||||||
|
|
||||||
// Headings font size
|
|
||||||
$font-size-headings-step = 2px
|
|
||||||
$font-size-headings-base = 24px
|
|
||||||
$font-size-headings-base = unit(hexo-config('font.headings.size'), px) if hexo-config('font.headings.size') is a 'unit'
|
|
||||||
$font-size-headings-small = $font-size-headings-base - $font-size-headings-step
|
|
||||||
$font-size-headings-smaller = $font-size-headings-small - $font-size-headings-step
|
|
||||||
$font-size-headings-large = $font-size-headings-base + $font-size-headings-step
|
|
||||||
$font-size-headings-larger = $font-size-headings-large + $font-size-headings-step
|
|
||||||
|
|
||||||
// Global line height
|
|
||||||
$line-height-base = 2
|
|
||||||
$line-height-code-block = 1.6 // Can't be less than 1.3
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Z-index master list
|
|
||||||
// --------------------------------------------------
|
|
||||||
$zindex-bottom = -1
|
|
||||||
$zindex-1 = 1010
|
|
||||||
$zindex-2 = 1020
|
|
||||||
$zindex-3 = 1030
|
|
||||||
$zindex-4 = 1040
|
|
||||||
$zindex-5 = 1050
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Table
|
|
||||||
// --------------------------------------------------
|
|
||||||
$table-width = 100%
|
|
||||||
$table-border-color = $gray-lighter
|
|
||||||
$table-font-size = 14px
|
|
||||||
$table-content-alignment = left
|
|
||||||
$table-content-vertical = middle
|
|
||||||
$table-th-font-weight = 700
|
|
||||||
$table-cell-padding = 8px
|
|
||||||
$table-cell-border-right-color = $gainsboro
|
|
||||||
$table-cell-border-bottom-color = $gray-lighter
|
|
||||||
$table-row-odd-bg-color = #f9f9f9
|
|
||||||
$table-row-hover-bg-color = $whitesmoke
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Code & Code Blocks
|
|
||||||
// --------------------------------------------------
|
|
||||||
$code-font-family = $font-family-monospace
|
|
||||||
$code-font-size = 13px
|
|
||||||
$code-font-size = unit(hexo-config('font.codes.size'), px) if hexo-config('font.codes.size') is a 'unit'
|
|
||||||
$code-border-radius = 3px
|
|
||||||
$code-foreground = $black-light
|
|
||||||
$code-background = $gainsboro
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Buttons
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
$btn-font-weight = normal
|
|
||||||
|
|
||||||
$btn-default-radius = 0
|
|
||||||
$btn-default-bg = $black-deep
|
|
||||||
$btn-default-color = white
|
|
||||||
$btn-default-font-size = 14px
|
|
||||||
$btn-default-border-width = 2px
|
|
||||||
$btn-default-border-color = $black-deep
|
|
||||||
$btn-default-hover-bg = white
|
|
||||||
$btn-default-hover-color = $black-deep
|
|
||||||
$btn-default-hover-border-color = $black-deep
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Pagination
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
$pagination-border = $gainsboro
|
|
||||||
|
|
||||||
$pagination-link-bg = transparent
|
|
||||||
$pagination-link-color = $link-color
|
|
||||||
$pagination-link-border = $gainsboro
|
|
||||||
|
|
||||||
$pagination-link-hover-bg = transparent
|
|
||||||
$pagination-link-hover-color = $link-color
|
|
||||||
$pagination-link-hover-border = $black-deep
|
|
||||||
|
|
||||||
$pagination-active-bg = $grey-light
|
|
||||||
$pagination-active-color = white
|
|
||||||
$pagination-active-border = $grey-light
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Layout sizes
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
$main-desktop = 960px
|
|
||||||
$main-desktop-large = 1200px
|
|
||||||
|
|
||||||
$content-desktop = 700px
|
|
||||||
$content-desktop-large = 900px
|
|
||||||
|
|
||||||
$content-desktop-padding = 40px
|
|
||||||
$content-tablet-padding = 10px
|
|
||||||
$content-mobile-padding = 8px
|
|
||||||
|
|
||||||
$sidebar-desktop = 240px
|
|
||||||
|
|
||||||
$footer-height = 50px
|
|
||||||
|
|
||||||
$gap-between-main-and-footer = 100px
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Headband
|
|
||||||
// --------------------------------------------------
|
|
||||||
$headband-height = 3px
|
|
||||||
$headband-bg = $black-deep
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Section Header
|
|
||||||
// Variables for header section elements.
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
$head-bg = transparent
|
|
||||||
|
|
||||||
// Site Meta
|
|
||||||
$site-meta-text-align = center
|
|
||||||
$brand-color = white
|
|
||||||
$brand-hover-color = white
|
|
||||||
$brand-bg = $black-deep
|
|
||||||
|
|
||||||
$logo-font-size = 20px
|
|
||||||
$logo-font-size = unit(hexo-config('font.logo.size'), px) if hexo-config('font.logo.size') is a 'unit'
|
|
||||||
|
|
||||||
$site-subtitle-color = $grey-dark
|
|
||||||
$subtitle-font-size = 13px
|
|
||||||
$subtitle-color = $grey-dark
|
|
||||||
|
|
||||||
// Menu
|
|
||||||
$menu-link-border = transparent
|
|
||||||
$menu-link-hover-border = $black-deep
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Posts Expand
|
|
||||||
// --------------------------------------------------
|
|
||||||
$posts-expand-title-font-weight = $font-weight-normal
|
|
||||||
$post-copyright = {
|
|
||||||
margin: 2em 0 0,
|
|
||||||
padding: .5em 1em,
|
|
||||||
bg: #f9f9f9,
|
|
||||||
border: {
|
|
||||||
width: 3px,
|
|
||||||
style: solid,
|
|
||||||
color: #ff1700
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Posts Collpase
|
|
||||||
// --------------------------------------------------
|
|
||||||
$posts-collapse-left = 55px
|
|
||||||
$posts-collapse-left-mobile = 5px
|
|
||||||
|
|
||||||
|
|
||||||
// Sidebar
|
|
||||||
// Variables for sidebar section elements.
|
|
||||||
// --------------------------------------------------
|
|
||||||
$sidebar-nav-color = $black-light
|
|
||||||
$sidebar-nav-hover-color = $whitesmoke
|
|
||||||
$sidebar-highlight = $blue-bright
|
|
||||||
|
|
||||||
$site-author-image-padding = 2px
|
|
||||||
$site-author-image-width = 96px
|
|
||||||
$site-author-image-height = auto
|
|
||||||
$site-author-image-border-width = 2px
|
|
||||||
$site-author-image-border-color = $black-dim
|
|
||||||
|
|
||||||
$site-author-name-margin = 5px 0 0
|
|
||||||
$site-author-name-color = $whitesmoke
|
|
||||||
$site-author-name-align = center
|
|
||||||
$site-author-name-weight = normal
|
|
||||||
|
|
||||||
$site-description-font-size = 14px
|
|
||||||
$site-description-color = $grey-dark
|
|
||||||
$site-description-margin-top = 5px
|
|
||||||
$site-description-align = center
|
|
||||||
|
|
||||||
$site-state-align = center
|
|
||||||
$site-state-item-count-font-size = 18px
|
|
||||||
$site-state-item-count-color = inherit
|
|
||||||
$site-state-item-name-font-size = 13px
|
|
||||||
$site-state-item-name-color = inherit
|
|
||||||
$site-state-item-border-color = $black-dim
|
|
||||||
|
|
||||||
$toc-link-color = $grey-dark
|
|
||||||
$toc-link-border-color = $black-light
|
|
||||||
$toc-link-hover-color = $grey-light
|
|
||||||
$toc-link-hover-border-color = $grey-light
|
|
||||||
$toc-link-active-color = $sidebar-highlight
|
|
||||||
$toc-link-active-border-color = $sidebar-highlight
|
|
||||||
$toc-link-active-current-color = $sidebar-highlight
|
|
||||||
$toc-link-active-current-border-color = $sidebar-highlight
|
|
||||||
|
|
||||||
|
|
||||||
// Components
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
// Back to top
|
|
||||||
$b2t-opacity = 1
|
|
||||||
$b2t-position-bottom = -100px
|
|
||||||
$b2t-position-bottom-on = 19px
|
|
||||||
$b2t-position-right = 30px
|
|
||||||
$b2t-font-size = 12px
|
|
||||||
$b2t-color = white
|
|
||||||
$b2t-bg-color = $black-deep
|
|
||||||
|
|
||||||
// full-image
|
|
||||||
$full-image-width = 110%
|
|
||||||
$full-image-margin-horizontal = -5%
|
|
||||||
$full-image-margin-vertical = 25px
|
|
||||||
|
|
||||||
// .post-expand .post-eof
|
|
||||||
// In Muse scheme, margin above and below the post separator
|
|
||||||
$post-eof-margin-top = 80px // or 160px for more white space
|
|
||||||
$post-eof-margin-bottom = 60px // or 120px for less white space
|
|
||||||
|
|
||||||
|
|
||||||
// Iconography
|
|
||||||
// Icons SVG Base64
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
// blockquote-center icon
|
|
||||||
$center-quote-left = '../images/quote-l.svg'
|
|
||||||
$center-quote-right = '../images/quote-r.svg'
|
|
||||||
|
|
||||||
|
|
||||||
// Note colors
|
|
||||||
// --------------------------------------------------
|
|
||||||
// Read note light_bg_offset from NexT config and set in "lbg%" to use it as string variable.
|
|
||||||
hexo-config('note.light_bg_offset') is a 'unit' ? (lbg = unit(hexo-config('note.light_bg_offset'),"%")) : (lbg = 0)
|
|
||||||
|
|
||||||
// Default
|
|
||||||
$note-default-border = #777
|
|
||||||
$note-default-bg = lighten(spin($note-default-border, 0), 94% + lbg)
|
|
||||||
$note-default-text = $note-default-border
|
|
||||||
$note-default-icon = "\f0a9"
|
|
||||||
|
|
||||||
$note-modern-default-border = #e1e1e1
|
|
||||||
$note-modern-default-bg = lighten(spin($note-modern-default-border, 10), 60% + (lbg * 4))
|
|
||||||
$note-modern-default-text = $grey-dim
|
|
||||||
$note-modern-default-hover = darken(spin($note-modern-default-text, -10), 32%)
|
|
||||||
|
|
||||||
// Primary
|
|
||||||
$note-primary-border = #6f42c1
|
|
||||||
$note-primary-bg = lighten(spin($note-primary-border, 10), 92% + lbg)
|
|
||||||
$note-primary-text = $note-primary-border
|
|
||||||
$note-primary-icon = "\f055"
|
|
||||||
|
|
||||||
$note-modern-primary-border = #e1c2ff
|
|
||||||
$note-modern-primary-bg = lighten(spin($note-modern-primary-border, 10), 40% + (lbg * 4))
|
|
||||||
$note-modern-primary-text = #6f42c1
|
|
||||||
$note-modern-primary-hover = darken(spin($note-modern-primary-text, -10), 22%)
|
|
||||||
|
|
||||||
// Info
|
|
||||||
$note-info-border = #428bca
|
|
||||||
$note-info-bg = lighten(spin($note-info-border, -10), 91% + lbg)
|
|
||||||
$note-info-text = $note-info-border
|
|
||||||
$note-info-icon = "\f05a"
|
|
||||||
|
|
||||||
$note-modern-info-border = #b3e5ef
|
|
||||||
$note-modern-info-bg = lighten(spin($note-modern-info-border, 10), 50% + (lbg * 4))
|
|
||||||
$note-modern-info-text = #31708f
|
|
||||||
$note-modern-info-hover = darken(spin($note-modern-info-text, -10), 32%)
|
|
||||||
|
|
||||||
// Success
|
|
||||||
$note-success-border = #5cb85c
|
|
||||||
$note-success-bg = lighten(spin($note-success-border, 10), 90% + lbg)
|
|
||||||
$note-success-text = $note-success-border
|
|
||||||
$note-success-icon = "\f058"
|
|
||||||
|
|
||||||
$note-modern-success-border = #d0e6be
|
|
||||||
$note-modern-success-bg = lighten(spin($note-modern-success-border, 10), 40% + (lbg * 4))
|
|
||||||
$note-modern-success-text = #3c763d
|
|
||||||
$note-modern-success-hover = darken(spin($note-modern-success-text, -10), 27%)
|
|
||||||
|
|
||||||
// Warning
|
|
||||||
$note-warning-border = #f0ad4e
|
|
||||||
$note-warning-bg = lighten(spin($note-warning-border, 10), 88% + lbg)
|
|
||||||
$note-warning-text = $note-warning-border
|
|
||||||
$note-warning-icon = "\f06a"
|
|
||||||
|
|
||||||
$note-modern-warning-border = #fae4cd
|
|
||||||
$note-modern-warning-bg = lighten(spin($note-modern-warning-border, 10), 43% + (lbg * 4))
|
|
||||||
$note-modern-warning-text = #8a6d3b
|
|
||||||
$note-modern-warning-hover = darken(spin($note-modern-warning-text, -10), 18%)
|
|
||||||
|
|
||||||
// Danger
|
|
||||||
$note-danger-border = #d9534f
|
|
||||||
$note-danger-bg = lighten(spin($note-danger-border, -10), 92% + lbg)
|
|
||||||
$note-danger-text = $note-danger-border
|
|
||||||
$note-danger-icon = "\f056"
|
|
||||||
|
|
||||||
$note-modern-danger-border = #ebcdd2
|
|
||||||
$note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + (lbg * 4))
|
|
||||||
$note-modern-danger-text = #a94442
|
|
||||||
$note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%)
|
|
||||||
|
|
||||||
|
|
||||||
// Label colors
|
|
||||||
// --------------------------------------------------
|
|
||||||
$label-default = lighten(spin($note-default-border, 0), 89% + lbg)
|
|
||||||
$label-primary = lighten(spin($note-primary-border, 10), 87% + lbg)
|
|
||||||
$label-info = lighten(spin($note-info-border, -10), 86% + lbg)
|
|
||||||
$label-success = lighten(spin($note-success-border, 10), 85% + lbg)
|
|
||||||
$label-warning = lighten(spin($note-warning-border, 10), 83% + lbg)
|
|
||||||
$label-danger = lighten(spin($note-danger-border, -10), 87% + lbg)
|
|
||||||
Loading…
Reference in New Issue