xaoxuu
/
hexo-theme-stellar
mirror of https://github.com/xaoxuu/hexo-theme-stellar
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

css

This commit is contained in:
xaoxuu 2021-03-05 21:37:28 +08:00
parent d6075f27bd
commit 71bdad70c7
72 changed files with 517 additions and 562 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/css/main.css vendored
View File

File diff suppressed because one or more lines are too long

4
layout/_partial/main/article/read_next.ejs
View File

@ -41,14 +41,14 @@ function layoutDiv() {
el += '</section>';
el += '<section class="body">';
if (next) {
el += '<div class="post-title unread">';
el += '<div class="post-title h2">';
el += '<a href="' + url_for(next.path) + '">';
el += next.title || next.seo_title || next.wiki;
el += '</a>';
el += '</div>';
}
if (prev) {
el += '<div class="post-title read">';
el += '<div class="post-title fs14">';
el += '<a href="' + url_for(prev.path) + '">';
el += title_prev + __('symbol.colon');
el += prev.title || prev.seo_title || prev.wiki;

2
layout/_partial/main/article/references.ejs
View File

@ -4,7 +4,7 @@ function layoutDiv() {
return '';
}
let el = '';
el += '<div class="article-footer">';
el += '<div class="article-footer fs14">';
if (page.references && page.references.length > 0) {
el += '<section id="references">';
el += '<div class="header">';

4
layout/_partial/main/footer.ejs
View File

@ -4,7 +4,7 @@ const using = '[' + stellar_info('name') + '](' + stellar_info('tree') + ')';
const source = theme.footer.source;
function layoutDiv() {
var wrapper = '';
wrapper += '<div><hr>';
wrapper += '<footer class="page-footer fs12"><hr><div>';
if (theme.footer.license) {
wrapper += markdown(__('footer.license', theme.footer.license));
}
@ -13,7 +13,7 @@ function layoutDiv() {
} else {
wrapper += markdown(__('footer.info_not_open_source', author, using));
}
wrapper += '</div>';
wrapper += '</div></footer>';
return wrapper;
}
%>

2
layout/_partial/main/header/index.ejs
View File

@ -1,3 +1,3 @@
<% if (page.header != false) { %>
<%- partial('../../sidebar/header') %>
<%- partial('../../sidebar/header', {where: 'main'}) %>
<% } %>

2
layout/_partial/main/navbar/breadcrumb.ejs
View File

@ -1,5 +1,5 @@
<% if (page.breadcrumb != false) { %>
<div class='breadcrumb-navigation'>
<div class='bread-nav fs12'>
<% if (page.layout == 'post') { %>
<%
var firstCat = '';

2
layout/_partial/main/post_list/paginator.ejs
View File

@ -1,5 +1,5 @@
<% if (is_home() && page.total > 1) { %>
<div class='paginator-wrap'>
<div class='paginator-wrap dis-select'>
<a class='paginator prev<%- page.prev != 0 ? "" : " disable" %>' href='<%- url_for(page.prev_link) %>'>
<img src='https://7.dusays.com/2021/02/26/f049bbd4e88ec.svg'/>
</a>

4
layout/_partial/sidebar/header.ejs
View File

@ -1,7 +1,7 @@
<%
function layoutMainMenu() {
var el = '';
el += '<nav class="menu">'
el += '<nav class="menu dis-select">'
for (let id of Object.keys(theme.sidebar.menu)) {
let item = theme.sidebar.menu[id];
if (item == undefined || item.length == 0) {
@ -19,7 +19,7 @@ function layoutMainMenu() {
return el;
}
%>
<header class='header'>
<header class='header<%- where == "main" ? " mobile-only" : "" %>'>
<%- partial('logo') %>
<%- layoutMainMenu() %>
</header>

22
layout/_partial/sidebar/index.ejs
View File

@ -11,7 +11,7 @@ if (page.sidebar == undefined) {
}
function layoutFooterDiv() {
if (theme.footer.social && theme.footer.social.length > 0) {
var el = '<footer class="footer"><div class="social-wrap">';
var el = '<footer class="footer"><div class="social-wrap dis-select">';
theme.footer.social.forEach(item => {
if (item.icon && item.url) {
el += '<a class="social" href="' + url_for(item.url) + '"';
@ -31,15 +31,13 @@ function layoutFooterDiv() {
}
}
%>
<div class='wrap'>
<%- partial('header') %>
<div class='widgets'>
<% page.sidebar.forEach(function(widget){ %>
<% if (widget in theme.sidebar.widgets) { %>
<% let w = theme.sidebar.widgets[widget]; %>
<%- partial('widgets/' + w.layout, {item: w}) %>
<% } %>
<% }) %>
</div>
<%- layoutFooterDiv() %>
<%- partial('header', {where: 'sidebar'}) %>
<div class='widgets'>
<% page.sidebar.forEach(function(widget){ %>
<% if (widget in theme.sidebar.widgets) { %>
<% let w = theme.sidebar.widgets[widget]; %>
<%- partial('widgets/' + w.layout, {item: w}) %>
<% } %>
<% }) %>
</div>
<%- layoutFooterDiv() %>

4
layout/_partial/sidebar/widgets/markdown.ejs
View File

@ -1,8 +1,8 @@
<div class='widget-wrap' id='markdown'>
<div class='widget-header dis-select'>
<div class='widget-header h4 dis-select'>
<span class='name'><%- item.title %></span>
</div>
<div class='widget-body'>
<div class='widget-body fs14'>
<% (item.content||[]).forEach(function(row){ %>
<%- markdown(row) %>
<% }) %>

4
layout/_partial/sidebar/widgets/recent.ejs
View File

@ -1,5 +1,5 @@
<div class='widget-wrap' id='recent'>
<div class='widget-header dis-select'>
<div class='widget-header h4 dis-select'>
<span class='name'><%- __('meta.recent_update') %></span>
<% if (item.rss) { %>
<a class='cap-action' id='rss' title='Subscribe' href='<%- item.rss %>'>
@ -7,7 +7,7 @@
</a>
<% } %>
</div>
<div class='widget-body'>
<div class='widget-body fs14'>
<%
var arr = page.menu_id == 'wiki' ? site.pages.filter(function(p){
return p.layout == 'wiki' && p.title && p.title.length > 0;

4
layout/_partial/sidebar/widgets/toc.ejs
View File

@ -20,7 +20,7 @@ function layout_toc() {
%>
<% if (enable == true) { %>
<div class='widget-wrap' id='toc'>
<div class='widget-header dis-select'>
<div class='widget-header h4 dis-select'>
<span class='name'>
<% if (page.toc_title) { %>
<%- page.toc_title %>
@ -34,7 +34,7 @@ function layout_toc() {
<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10505"><path d="M884.526 163.323H208.881c-30.516 0-55.25 24.934-55.25 55.685s24.734 55.685 55.25 55.685h675.645c30.515 0 55.255-24.93 55.255-55.685s-24.74-55.685-55.255-55.685zM568.253 336.87a56.765 56.765 0 0 0-4.06-3.701c-0.63-0.517-1.29-0.968-1.935-1.454-0.799-0.605-1.577-1.224-2.406-1.787-0.779-0.528-1.583-0.978-2.386-1.46-0.748-0.45-1.485-0.926-2.253-1.341-0.81-0.44-1.649-0.814-2.483-1.208-0.8-0.384-1.588-0.784-2.407-1.132-0.814-0.338-1.643-0.61-2.463-0.906-0.875-0.323-1.745-0.66-2.641-0.932-0.825-0.25-1.66-0.435-2.489-0.645-0.916-0.236-1.817-0.492-2.75-0.681-0.962-0.19-1.935-0.307-2.902-0.445-0.814-0.118-1.618-0.272-2.442-0.354a55.163 55.163 0 0 0-5.438-0.276h-0.015c-0.267 0-0.528 0.036-0.794 0.036a54.856 54.856 0 0 0-39.86 16.271l-279.413 281.61c-21.576 21.75-21.576 57.006 0 78.756a54.876 54.876 0 0 0 39.07 16.312 54.835 54.835 0 0 0 39.066-16.312l186.67-188.145V898.09c0 30.75 24.74 55.685 55.256 55.685s55.255-24.934 55.255-55.685v-387.42L769.526 697.22a54.871 54.871 0 0 0 39.065 16.312 54.835 54.835 0 0 0 39.066-16.312c21.576-21.75 21.576-57.006 0-78.756L568.253 336.87z" p-id="10506"></path></svg>
</a>
</div>
<div class='widget-body <%- page.layout == "wiki" ? "wiki" : "post" %>'>
<div class='widget-body fs14 <%- page.layout == "wiki" ? "wiki" : "post" %>'>
<% if (page.layout == 'wiki' && page.wiki) { %>
<%
var wikis = [];

4
layout/_partial/sidebar/widgets/wiki_more.ejs
View File

@ -4,10 +4,10 @@
<% }).limit(1).each(function(current_group) { %>
<% if (current_group.wiki.length > 1) { %>
<div class='widget-wrap' id='related'>
<div class='widget-header dis-select'>
<div class='widget-header h4 dis-select'>
<span class='name'>更多<%- current_group.title %></span>
</div>
<div class='widget-body'>
<div class='widget-body fs14'>
<% current_group.wiki.forEach((wiki, i) => { %>
<% site.pages.filter(function (p) { %>
<% return p.wiki == wiki && p.wiki != page.wiki && p.description %>

6
layout/archive.ejs
View File

@ -17,16 +17,16 @@ if (page.menu_id == undefined) {
<% years.push(post.year); %>
<% } %>
<% }); %>
<h1 class='list-title'><%- __('page.archives', config.title, years.length, site.posts.length) %></h1>
<h1 class='list-title h4'><%- __('page.archives', config.title, years.length, site.posts.length) %></h1>
<% years.forEach((year, i) => { %>
<article class='post-card<%- scrollreveal() %>' id='archive'>
<div class='card-title'><%= year %></div>
<div class='list-title h4'><%= year %></div>
<% site.posts.sort('date', -1).filter(function (post) { %>
<% post.year = date(post.date, 'YYYY'); %>
<% return post.year == year; %>
<% }).each(function(post) { %>
<div>
<a class='post' href="<%= url_for(post.link || post.path) %>">
<a class='post fs14' href="<%= url_for(post.link || post.path) %>">
<time><%= date(post.date, 'MM-DD') %></time>
<span>
<% if (post.title) { %>

4
layout/categories.ejs
View File

@ -9,11 +9,11 @@ if (page.menu_id == undefined) {
<% page.layout = 'categories'; %>
<%- partial('_partial/main/navbar/list_post') %>
<div class='post-list'>
<h1 class='list-title'><%- __('page.categories', config.title, __('btn.blog'), site.categories.length) %></h1>
<h1 class='list-title h4'><%- __('page.categories', config.title, __('btn.blog'), site.categories.length) %></h1>
<article class='post-card<%- scrollreveal() %>' id='cats'>
<% site.categories.sort('path').each(function(category){ %>
<div>
<a class="<%= category.parent ? 'cat child' : 'cat'%>" href="<%= url_for(category.path) %>">
<a class="<%= category.parent ? 'cat child' : 'cat'%> fs14" href="<%= url_for(category.path) %>">
<span class='name'><%- category.name %></span>
<span class='badge'>(<%- category.posts.length %>)</span>
</a>

6
layout/index.ejs
View File

@ -42,7 +42,7 @@ function layout_posts(partial) {
}
})
} else {
el += '<h1 class="list-title">';
el += '<h1 class="list-title h4">';
el += __('page.filter', config.title, page.category || page.tag, page.posts.length);
el += '</h1>';
page.posts.each(function(post){
@ -66,7 +66,7 @@ function layout_wikis(partial) {
});
});
el += '<div class="post-list wiki filter">';
el += '<h1 class="list-title">' + __("page.wiki", config.title, wikis.length, page.title) + '</h1>';
el += '<h1 class="list-title h4">' + __("page.wiki", config.title, wikis.length, page.title) + '</h1>';
wikis.forEach(function(wiki) {
el += layout_post_card('wiki', wiki, partial(wiki));
});
@ -84,7 +84,7 @@ function layout_wikis(partial) {
}
}).sort('order');
el += '<div class="post-list wiki">';
el += '<h1 class="list-title">' + __("page.wiki", config.title, wikis.length, __('btn.wiki')) + '</h1>';
el += '<h1 class="list-title h4">' + __("page.wiki", config.title, wikis.length, __('btn.wiki')) + '</h1>';
wikis.forEach(function(wiki) {
el += layout_post_card('wiki', wiki, partial(wiki));
});

4
layout/layout.ejs
View File

@ -10,9 +10,7 @@
<div class='l_main<%- page.content ? "" : " list" %>'>
<%- partial('_partial/main/header/index') %>
<%- body %>
<footer class='page-footer'>
<%- partial('_partial/main/footer') %>
</footer>
<%- partial('_partial/main/footer') %>
<%- partial('_partial/menubtn') %>
</div>
</div>

6
layout/tags.ejs
View File

@ -9,12 +9,12 @@ if (page.menu_id == undefined) {
<% page.layout = 'tags'; %>
<%- partial('_partial/main/navbar/list_post') %>
<div class='post-list'>
<h1 class='list-title'><%- __('page.tags', config.title, __('btn.blog'), site.tags.length) %></h1>
<h1 class='list-title h4'><%- __('page.tags', config.title, __('btn.blog'), site.tags.length) %></h1>
<article class='post-card<%- scrollreveal() %>' id='tags'>
<% site.tags.sort('length', -1).each(function(tag){ %>
<a class='tag' href="<%= url_for(tag.path) %>">
<span class='name'><%= tag.name %></span>
<span class='badge'>x<%- tag.length %></span>
<span class='name fs14'><%= tag.name %></span>
<span class='badge fs12'>x<%- tag.length %></span>
</a>
<% }) %>
</article>

2
scripts/tags/about.js
View File

@ -35,7 +35,7 @@ hexo.extend.tag.register('about', function(args, content) {
el += '</div>';
// content
el += '<div class="about-body">';
el += '<div class="about-body fs14">';
el += rows.join('');
el += '</div>';

4
scripts/tags/link.js
View File

@ -11,7 +11,7 @@ hexo.extend.tag.register('link', function(args) {
args = hexo.args.map(args, ['img'], ['url', 'title', 'description']);
var el = '';
el += '<div class="tag-plugin tag link">';
el += '<div class="tag-plugin tag link dis-select">';
el += '<a class="link-card" title="' + args.title + '" href="' + args.url + '"';
if (args.url.includes('://')) {
el += ' target="_blank" rel="external nofollow noopener noreferrer"';
@ -19,7 +19,7 @@ hexo.extend.tag.register('link', function(args) {
el += '>';
// left
el += '<div class="left">';
el += '<span class="title">' + args.title + '</span><span class="url">' + (args.description || args.url) + '</span>';
el += '<span class="title fs14">' + args.title + '</span><span class="url fs12">' + (args.description || args.url) + '</span>';
el += '</div>';
// right

2
scripts/tags/timeline.js
View File

@ -44,7 +44,7 @@ function postTimeline(args, content) {
function postTimenode(args, content) {
args = args.join(' ').split(', ');
var header = args[0];
return `<div class="tag-plugin timenode"><div class="header"><span>${header}</span><a href="#comments"><svg class="icon comment" width="1em" height="1em" viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
return `<div class="tag-plugin timenode fs14"><div class="header"><span>${header}</span><a href="#comments"><svg class="icon comment" width="1em" height="1em" viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M2.9969419,5.71559633 C2.9969419,6.20032331 3.38989075,6.59327217 3.87461774,6.59327217 C4.35934472,6.59327217 4.75229358,6.20032331 4.75229358,5.71559633 C4.75229358,5.23086935 4.35934472,4.83792049 3.87461774,4.83792049 C3.38989075,4.83792049 2.9969419,5.23086935 2.9969419,5.71559633 L2.9969419,5.71559633 Z" id="Path"></path>
<path d="M6.76452599,5.71559633 C6.76452599,6.20032331 7.15747485,6.59327217 7.64220183,6.59327217 C8.12692882,6.59327217 8.51987768,6.20032331 8.51987768,5.71559633 C8.51987768,5.23086935 8.12692882,4.83792049 7.64220183,4.83792049 C7.15747485,4.83792049 6.76452599,5.23086935 6.76452599,5.71559633 L6.76452599,5.71559633 Z" id="Path"></path>
<path d="M10.5321101,5.71559633 C10.5321101,6.20032331 10.925059,6.59327217 11.4097859,6.59327217 C11.8945129,6.59327217 12.2874618,6.20032331 12.2874618,5.71559633 C12.2874618,5.23086935 11.8945129,4.83792049 11.4097859,4.83792049 C10.925059,4.83792049 10.5321101,5.23086935 10.5321101,5.71559633 L10.5321101,5.71559633 Z" id="Path"></path>

58
source/css/_common/base.styl Normal file
View File

@ -0,0 +1,58 @@
pre
font-family: $ff-code
font-size: $fs-code
tab-size: 4
-moz-tab-size: 4
-o-tab-size: 4
-webkit-tab-size: 4
a
text-decoration: none
color: $color-link
&:hover
color: $color-hover
hr
color: var(--text-meta)
opacity: .1
img
max-width: 100%
li
font-size: $fs-15
ul,ol
padding-left: 1.5rem
ul ul, ul ol
padding-left: 0
ol ul, ol ol
padding-left: 0
// table
table:not([class])
border-collapse: collapse
overflow: auto
display: block
margin: 1rem 0
max-width: 100%
vertical-align: text-top
font-size: $fs-14
th
background: var(--block)
td,th
padding: 0.5em 1em
border: 1px solid var(--hover-block)
line-height: 1.5
tr
word-break: keep-all
white-space:nowrap
trans()
&:hover
background: var(--block)

22
source/css/_common/button.styl Normal file
View File

@ -0,0 +1,22 @@
button
border: none
font-weight: 500
outline: none
disable-select()
cursor: pointer
a.button
font-weight: 500
line-height: 1
padding: 0.75rem 2rem
border-radius: 3px
trans1: background
font-size: $fs-15
&.theme
background: $color-theme
color: white
&:hover
background: $color-hover
a[onclick]:hover
cursor: pointer

10
source/css/_common/cap.styl Normal file
View File

@ -0,0 +1,10 @@
.cap
font-weight: 500
font-size: $fs-12
color: var(--text-p3)
&.blue
color: darken($color-md-blue, 6)
&.cyan
color: darken($color-mac-cyan, 6)
&.theme
color: darken($color-theme, 5)

2
source/css/_common/control.styl Normal file
View File

@ -0,0 +1,2 @@
.dis-select
disable-select()

12
source/css/_common/html.styl Normal file
View File

@ -0,0 +1,12 @@
*
outline: none
html
font-family: $ff-body
font-size: $fs-root
body
background: var(--site-bg)
margin: 0
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
text-rendering: optimizelegibility
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)

5
source/css/_common/image.styl Normal file
View File

@ -0,0 +1,5 @@
div.lazy.img
width: 100%
height: 100%
background-position: center
background-size: cover

12
source/css/_common/input.styl Normal file
View File

@ -0,0 +1,12 @@
input
display: block
input
background: none
border: none
input.copy-area
font-family: $ff-code
font-size: $fs-12
font-weight: 700
color: var(--text-p3)

0
source/css/_plugins/common/loading.styl → source/css/_common/loading.styl
View File

29
source/css/_common/mobile-only.styl Normal file
View File

@ -0,0 +1,29 @@
.mobile-only
display: none
@media screen and (max-width: $device-tablet)
display: block !important
.float-panel
position: sticky
right: 0
bottom: 2rem
float: right
z-index: 9
display: flex
border-radius: 2rem 0 0 2rem
padding-right: 2rem
padding: 4px
overflow: hidden
background: var(--hover-block)
.sidebar-toggle.mobile
cursor: pointer
color: var(--text-p2)
background: white
padding: 0.5rem
margin-right: 1rem
border-radius: 32px
line-height: 1
width: 2rem
height: 2rem
font-size: 13px

9
source/css/_common/span.styl Normal file
View File

@ -0,0 +1,9 @@
span.dot,span.sep
font-size: 0.9em
margin: 0 .25em
span.dot:before
content: '·'
span.sep:before
content: '/'
padding-left: 2px
padding-right: 2px

6
source/css/_common/svg.styl Normal file
View File

@ -0,0 +1,6 @@
svg.icon
width: 1em
height: 1em
vertical-align: middle
fill: currentColor
overflow: hidden

55
source/css/_common/title.styl Normal file
View File

@ -0,0 +1,55 @@
h1,.h1
font-size: $fs-h1
font-weight: 500
h2,.h2
font-size: $fs-h2
h3,.h3
font-size: $fs-h3
h4,.h4
font-size: $fs-h4
h5
font-size: $fs-h5
h6
font-size: $fs-h6
// 次级段落字号
.fs14
font-size: $fs-14
p
font-size: $fs-14 !important
li
font-size: $fs-14 !important
// 脚标字号
.fs12
font-size: $fs-12
.post-list
.list-title
color: var(--text-p3)
font-family: $ff-code
font-weight: 700
line-height: 1.2
padding-bottom: 0.5rem
>.list-title
margin: 2rem 1rem 0rem
.post-title
font-weight: 500
margin: 1rem 0
line-height: 1.2
font-size: $fs-h3
border-bottom: none
color: var(--text-p1)
trans1 color
.wiki .post-title
margin-top: 0.5rem
font-weight: 500
font-size: 1.75rem
.widgets
.post-title
margin: 0.5rem 0
line-height: 1.2
a
color: inherit
&:hover
color: $color-hover

0
source/css/_plugins/common/toast.styl → source/css/_common/toast.styl
View File

54
source/css/_custom.styl
View File

@ -1,4 +1,3 @@
@require('_defines/base')
@require('_defines/const')
// 通用主题色
@ -33,43 +32,48 @@ $c-card-dark = #333
// font-weight: normal
// font-style: normal
$ff-body = -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif
$ff-body = system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif
$ff-code = Menlo, Monaco, Consolas, "Courier New", monospace, sans-serif
$ff-logo = $ff-body
// font size
$fs-root = 16px
$fs-15 = .9375rem
$fs-14 = .875rem
$fs-13 = .8125rem
$fs-12 = .75rem
$fs-h1 = 2rem // 32px
$fs-h2 = 1.625rem // 26px
$fs-h2 = 1.5rem // 24px
$fs-h3 = 1.375rem // 22px
$fs-h4 = 1.125rem // 18px
$fs-h5 = 1rem // 16px
$fs-h6 = 1rem // 16px
$fs-h5 = $fs-15
$fs-h6 = $fs-12
$fs-p = $fs-15
$fs-code = $fs-13
$fsh2 = 1.5rem // 24px
$fs15 = .9375rem // 15px
$fs14 = .875rem // 14px
$fs13 = .8125rem // 13px
$fs-code = .8125rem // 13px
$fs12 = .75rem // 13px
$fs-footnote = .75rem // the smallest (12px)
$fsp = $fs15
// site layout
$sidebar = 280px
// max body width
$layout-max-body-width = 680px
$layout-max-body-width-2k = 720px
// gap
$gap = 16px // 必须是 px
// border radius
$border-card = 12px
$border-widget = 8px
$border-block = 4px
// 可以动态变化的属性
:root
--width-left: 280px
--width-main: 680px
--gap-l: 16px
// desktop or larger
@media screen and (min-width: $device-desktop)
--width-left: 320px
--gap-l: 32px
// desktop 2k or larger
@media screen and (min-width: $device-2k)
--width-main: 740px
// desktop 4k or larger
@media screen and (min-width: $device-4k)
--width-main: 860px
--gap-l: 64px
// shadow
$boxshadow-card = 0 1px 2px 0px rgba(0, 0, 0, 0.1)

54
source/css/_defines/base.styl
View File

@ -1,54 +0,0 @@
// 可替代 transition 使用
transition($op = all, $time = 0.28s, $ease = ease-out)
transition: $op $time $ease
-moz-transition: $op $time $ease
-webkit-transition: $op $time $ease
-o-transition: $op $time $ease
// 为1个属性设置动画
trans1($op, $time = 0.2s)
transition: $op $time ease-out
-moz-transition: $op $time ease-out
-webkit-transition: $op $time ease-out
-o-transition: $op $time ease-out
// 为2个属性设置动画
trans2($op1, $op2)
transition: $op1 0.2s ease-out, $op2 0.2s ease-out
-moz-transition: $op1 0.2s ease-out, $op2 0.2s ease-out
-webkit-transition: $op1 0.2s ease-out, $op2 0.2s ease-out
-o-transition: $op1 0.2s ease-out, $op2 0.2s ease-out
trans2pro($op1, $t1, $op2, $t2)
transition: $op1 $t1 ease-out, $op2 $t2 ease-out
-moz-transition: $op1 $t1 ease-out, $op2 $t2 ease-out
-webkit-transition: $op1 $t1 ease-out, $op2 $t2 ease-out
-o-transition: $op1 $t1 ease-out, $op2 $t2 ease-out
trans3($op1, $op2, $op3)
transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out
-moz-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out
-webkit-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out
-o-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out
txt-ellipsis()
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
placeholder(rules)
&::-webkit-input-placeholder
rules()
&:-moz-placeholder
rules()
&::-moz-placeholder
rules()
&:-ms-input-placeholder
rules()
disable-select()
-moz-user-select: none
-ms-user-select: none
-webkit-user-select: none
user-select: none

10
source/css/_defines/const.styl
View File

@ -1,8 +1,6 @@
// device defines
$device-mobile-s = 320px
$device-mobile-m = 375px
$device-mobile-l = 425px
// 用来进行设备适配，请勿修改
$device-mobile-375 = 375px
$device-mobile-425 = 425px
$device-mobile = 500px
$device-tablet = 768px
$device-laptop = 1024px
@ -10,7 +8,7 @@ $device-desktop = 1440px
$device-2k = 2048px
$device-4k = 2560px
// -------- 这些是方便开发预定义的颜色，不需要动态改变 --------
// 预定义颜色，不需要修改
$color-md-red = #f44336
$color-md-pink = #E91E63
$color-md-purple = #9c27b0

56
source/css/_defines/func.styl
View File

@ -1,4 +1,58 @@
// 可替代 transition 使用
transition($op = all, $time = 0.28s, $ease = ease-out)
transition: $op $time $ease
-moz-transition: $op $time $ease
-webkit-transition: $op $time $ease
-o-transition: $op $time $ease
// 为1个属性设置动画
trans1($op, $time = 0.2s)
transition: $op $time ease-out
-moz-transition: $op $time ease-out
-webkit-transition: $op $time ease-out
-o-transition: $op $time ease-out
// 为2个属性设置动画
trans2($op1, $op2)
transition: $op1 0.2s ease-out, $op2 0.2s ease-out
-moz-transition: $op1 0.2s ease-out, $op2 0.2s ease-out
-webkit-transition: $op1 0.2s ease-out, $op2 0.2s ease-out
-o-transition: $op1 0.2s ease-out, $op2 0.2s ease-out
trans2pro($op1, $t1, $op2, $t2)
transition: $op1 $t1 ease-out, $op2 $t2 ease-out
-moz-transition: $op1 $t1 ease-out, $op2 $t2 ease-out
-webkit-transition: $op1 $t1 ease-out, $op2 $t2 ease-out
-o-transition: $op1 $t1 ease-out, $op2 $t2 ease-out
trans3($op1, $op2, $op3)
transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out
-moz-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out
-webkit-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out
-o-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out
txt-ellipsis()
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
placeholder(rules)
&::-webkit-input-placeholder
rules()
&:-moz-placeholder
rules()
&::-moz-placeholder
rules()
&:-ms-input-placeholder
rules()
disable-select()
-moz-user-select: none
-ms-user-select: none
-webkit-user-select: none
user-select: none
scrollbar($w = 4px, $b = 2px, $c = var(--text-meta), $h = var(--text-p3))
&::-webkit-scrollbar
@ -39,7 +93,7 @@ hover-block($v, $h, $br = 4px)
background: var(--hover-block)
inside-box($fs = $fs15)
inside-box($fs = $fs-15)
p,ol,ul
margin-top: 0.5rem
margin-bottom: 0.5rem

143
source/css/_layout/base.styl
View File

@ -1,143 +0,0 @@
*
outline: none
html
font-family: $ff-body
font-size: $fs-root
body
background: var(--site-bg)
margin: 0
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
text-rendering: optimizelegibility
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
h1
font-size: $fs-h1
font-weight: 600
pre
font-family: $ff-code
font-size: $fs-code
tab-size: 4
-moz-tab-size: 4
-o-tab-size: 4
-webkit-tab-size: 4
a
text-decoration: none
color: $color-link
&:hover
color: $color-hover
a.button
font-weight: 500
line-height: 1
padding: 0.75rem 2rem
border-radius: 3px
trans1: background
font-size: $fs15
&.theme
background: $color-theme
color: white
&:hover
background: $color-hover
.cap
font-weight: 600
font-size: $fs12
color: var(--text-p3)
&.blue
color: darken($color-md-blue, 6)
&.cyan
color: darken($color-mac-cyan, 6)
&.theme
color: darken($color-theme, 5)
span.dot,span.sep
font-size: 0.9em
margin: 0 .25em
span.dot:before
content: '·'
span.sep:before
content: '/'
padding-left: 2px
padding-right: 2px
hr
color: var(--text-meta)
opacity: .1
button
border: none
font-weight: 600
outline: none
disable-select()
cursor: pointer
img
max-width: 100%
li
font-size: $fs15
svg.icon
width: 1em
height: 1em
vertical-align: middle
fill: currentColor
overflow: hidden
ul,ol
padding-left: 1.5rem
ul ul, ul ol
padding-left: 0
ol ul, ol ol
padding-left: 0
.dis-select
disable-select()
// table
table:not([class])
border-collapse: collapse
overflow: auto
display: block
margin: 1rem 0
max-width: 100%
vertical-align: text-top
th
background: var(--block)
td,th
padding: 0.5em 1em
border: 1px solid var(--hover-block)
line-height: 1.5
font-size: 90%
tr
word-break: keep-all
white-space:nowrap
trans()
&:hover
background: var(--block)
input
display: block
a[onclick]:hover
cursor: pointer
input
background: none
border: none
div.lazy.img
width: 100%
height: 100%
background-position: center
background-size: cover

42
source/css/_layout/layout.styl
View File

@ -1,14 +1,13 @@
.l_body
display: flex
margin: auto
padding: 0 $gap
padding: 0 var(--gap-l)
justify-content: center
.l_body .l_left
z-index: 8
width: $sidebar
width: var(--width-left)
flex-shrink: 0
height 100vh
position: sticky
position: -webkit-sticky
top: 0
@ -17,36 +16,7 @@
flex-shrink: 1
flex-grow: 1
width: 320px
max-width: $layout-max-body-width
@media screen and (min-width: $device-2k)
max-width: $layout-max-body-width-2k
footer
margin-top: 4rem
margin-bottom: 2rem
.float-panel
position: sticky
right: 0
bottom: 2rem
float: right
z-index: 9
display: flex
border-radius: 2rem 0 0 2rem
padding-right: 2rem
padding: 4px
overflow: hidden
background: var(--hover-block)
.sidebar-toggle.mobile
cursor: pointer
color: var(--text-p2)
background: white
padding: 0.5rem
margin-right: 1rem
border-radius: 32px
line-height: 1
width: 2rem
height: 2rem
font-size: 13px
max-width: var(--width-main)
.l_body.mobile.sidebar
.sidebar-toggle.mobile
@ -62,9 +32,7 @@
padding: 0
.l_left
position: fixed
height: 100vh
width: 280px
transform: translateX(0 - $gap - 320px)
transform: translateX(-320px)
margin: 0
left: 0
background: var(--site-bg)
@ -73,7 +41,7 @@
max-width: 100%
.l_body.mobile
.l_left
transition: transform .38s ease-out
transition: transform .5s ease-out
.l_body.mobile.sidebar
.l_left
transform: translateX(0px)

38
source/css/_layout/post_list.styl → source/css/_layout/list.styl
View File

@ -1,18 +1,6 @@
// list
.post-list
margin: 1rem
.card-title,.list-title
color: var(--text-p3)
font-family: $ff-code
line-height: 1.2
.list-title
font-weight: 500
margin: 2rem 1rem 0rem
font-size: 1.2rem
.card-title
font-weight: 600
padding-bottom: 0.5rem
font-size: 1.2rem
// card
.post-list .post-card
@ -49,16 +37,6 @@
// posts
.post-list .post-card
.post-title
font-weight: 500
margin: .5em 0
line-height: 1.2
font-size: $fs-h3
border-bottom: none
color: var(--text-p1)
trans1 color
.excerpt
font-size: $fs14
.post-cover
overflow: hidden
margin-left: -1rem
@ -66,7 +44,6 @@
margin-right: -1rem
img
object-fit: cover
disable-select()
width: 100%
border-radius: 0
height: 320px
@ -76,9 +53,9 @@
height: 320px
@media screen and (max-width: $device-mobile)
height: 280px
@media screen and (max-width: $device-mobile-l)
@media screen and (max-width: $device-mobile-425)
height: 240px
@media screen and (max-width: $device-mobile-m)
@media screen and (max-width: $device-mobile-375)
height: 200px
&:not(.lazy)
trans1: transform 1s
@ -90,9 +67,9 @@
height: 400px
@media screen and (max-width: $device-mobile)
height: 320px
@media screen and (max-width: $device-mobile-l)
@media screen and (max-width: $device-mobile-425)
height: 280px
@media screen and (max-width: $device-mobile-m)
@media screen and (max-width: $device-mobile-375)
height: 240px
.post-list .post-card.post:hover
@ -124,10 +101,3 @@
flex: 1
overflow: hidden
word-wrap: break-word
.post-title
margin-top: 0.5rem
font-weight: 500
font-size: 1.75rem
>p
margin: 0.5rem 0
font-size: $fs14

16
source/css/_layout/main.styl
View File

@ -1,8 +1,10 @@
.l_main
position: relative
padding-bottom: "calc(1 * %s)" % var(--gap-l)
@media screen and (min-width: $device-tablet)
padding-top: "calc(2 * %s)" % var(--gap-l)
header
display: none
margin: $gap * 2 $gap $gap
margin: 2rem 1rem 1rem
padding: 0.25rem
background: var(--block)
border-radius: 6px
@ -18,13 +20,3 @@
margin: -3px
a.nav-item
margin: 2px
// pc上右边顶部留白
@media screen and (min-width: $device-tablet)
.l_main
margin-top: $gap
// 移动端显示主导航栏
@media screen and (max-width: $device-tablet)
.l_main header
display: block

48
source/css/_layout/md.styl
View File

@ -1,50 +1,55 @@
article.md
max-width: 100%
padding: 1rem
overflow: hidden
color: var(--text-p1)
line-height: 1.7
article.md.excerpt
p
font-size: $fs-14
margin: 1em 0
article.md.content
position: relative
margin-bottom: $gap * 2
// titles
article.md
margin-bottom: 2rem
h1.article-title
margin-top: $gap * 0.5
margin-top: 0.5rem
line-height: 1.2
h1,h2,h3,h4,h5,h6
line-height: 1.8
color: var(--text-p0)
h2,h3,h4,h5,h6
color: var(--text-p0)
padding-top: 1em
margin-bottom: 1em
&:hover
a.headerlink:before
opacity: 1
// titles
article.md
a.headerlink:before
opacity: 0
content: '#'
position: absolute
width: 0.75em
margin-left: -0.75em
h2
margin-top: 3rem
border-bottom: 1px solid var(--block-border)
font-weight: 400
font-size: $fsh2
&:first-child
margin-top: 1rem
h3
margin-top: 3rem
margin-bottom: 0
font-weight: 400
h4,h5,h6
font-weight: 500
h2+h3
margin-top: 1rem
margin-top: 0
h3+h4
margin-top: 1rem
h5
font-size: $fs14
h6
font-size: $fs12
margin-top: 0
h4+h5
margin-top: 0
h5+h6
margin-top: 0
// a
article.md
@ -55,13 +60,14 @@ article.md
text-decoration: underline
article.md p
font-size: $fsp
font-size: $fs-p
// code
article.md code
color: $color-inlinecode
font-family: $ff-code
word-break: break-all
font-size: $fsp
font-size: $fs-p
// div
article.md>div
@ -76,10 +82,8 @@ article.md blockquote
color: var(--text-p2)
p
margin: 0.5em 0
font-size: $fs14
font-size: $fs-14
article.md ul, article.md ol
padding-left: 2rem
article.md img
border-radius: 4px

40
source/css/_layout/pages/archives.styl
View File

@ -2,14 +2,46 @@
a.post
display: inline-flex
align-items: baseline
font-size: $fs14
margin: 0.25rem 0
font-weight: 600
color: var(--text-p2)
font-weight: 500
color: var(--text-p1)
&:hover
color: $color-hover
time
font-family: $ff-code
margin-right: 1em
flex-shrink: 0;
font-weight: 700
flex-shrink: 0
opacity 0.5
.post-list .post-card#cats
a.cat
display: flex
&.child
padding-left: 2rem
font-weight: 500
padding: 0.5rem 1rem
border-radius: $border-block
color: var(--text-p1)
&:hover
background: var(--block)
color: $color-hover
.badge
opacity 0.5
margin-left: 4px
.post-list .post-card#tags
a.tag
display: inline-flex
align-items: center
margin: 0.5rem
position: relative
font-weight: 500
color: var(--text-p1)
&:hover
color: $color-hover
span
margin: 0 0.25rem
.badge
opacity 0.5
font-weight: 700

16
source/css/_layout/pages/categories.styl
View File

@ -1,16 +0,0 @@
.post-list .post-card#cats
a.cat
display: flex
font-size: $fs14
&.child
padding-left: 2rem
font-weight: 600
padding: 0.5rem 1rem
border-radius: $border-block
color: var(--text-p2)
&:hover
background: var(--block)
color: $color-hover
.badge
opacity 0.5
margin-left: 4px

2
source/css/_layout/pages/error.styl
View File

@ -11,7 +11,7 @@ article.md.error-page
p.what,p.why
margin: 0.5em
p.why
font-size: $fs13
font-size: $fs-13
a#back
margin: 2rem 0
display: inline-block

17
source/css/_layout/pages/tags.styl
View File

@ -1,17 +0,0 @@
.post-list .post-card#tags
a.tag
display: inline-flex
align-items: center
margin: 0.25rem 0.5rem
position: relative
font-weight: 500
color: var(--text-p2)
&:hover
color: $color-hover
span
margin: 0 0.25rem
.name
font-size: $fs14
.badge
opacity 0.5
font-size: $fs12

15
source/css/_layout/partial/article_footer.styl → source/css/_layout/partial/article-footer.styl
View File

@ -6,20 +6,18 @@
border: 1px solid var(--block-border)
.header
font-weight: 500
color: var(--text-p3)
margin-bottom: 0.75rem
font-size: 1.25rem
color: var(--text-p2)
font-size: $fs-h4
.body
input.copy-area
margin: 0.75rem 0
padding: 0
width: 100%
p
font-size: $fs14
color: var(--text-p2)
margin: 1em 0
margin: 0.5em 0
a
font-weight: 400
font-weight: unset
ul
margin: 0
overflow: hidden
@ -28,7 +26,6 @@
.post-title
margin: 0.5rem 0
line-height: 1.2
font-size: $fs14
word-break: break-all
section+section
margin-top: 1rem
@ -36,9 +33,9 @@
border-top: 1px solid var(--block-border)
.md .article-footer .social-wrap
grid-gap: $gap * 0.5 $gap * 1.5
grid-gap: 0.5rem 1.5rem
grid-template-columns: repeat(auto-fill, 24px)
margin: 0.5rem 0
margin: 1rem 0
a.social
padding: 0
background: none

20
source/css/_layout/partial/bread-nav.styl Normal file
View File

@ -0,0 +1,20 @@
// 面包屑导航
.bread-nav
padding: 1rem 1rem 0
margin-top: 1rem
color: var(--text-p3)
font-weight: 500
div#breadcrumb
display: flex
align-items: center
flex-direction: row
&:not([style]) a
color: $color-link
&[style] a
color: inherit
span.sep
color: var(--text-p3)
a.cap:hover
color: $color-hover
div#post-meta
margin-top: 2px

6
source/css/_layout/partial/cover.styl
View File

@ -8,14 +8,14 @@
.l_cover .cover-wrap
margin-bottom: 0
max-width: 500px
max-width: $device-mobile
.preview
margin-bottom: 2rem
img
object-fit: contain
max-height: 35vh
max-width: 100%
@media screen and (max-width: 500px)
@media screen and (max-width: $device-mobile)
max-width: 60%
.cover-title
font-weight: 700
@ -26,7 +26,7 @@
.description
margin: 1rem 0
.start-wrap
margin: $gap * 2 0
margin: 2rem 0
flex-shrink: 0
a.start
display: inline-block

3
source/css/_layout/footer.styl → source/css/_layout/partial/footer.styl
View File

@ -1,6 +1,5 @@
.page-footer
margin: $gap
font-size: $fs12
margin: 4rem 1rem 2rem
color: var(--text-p3)
p
margin: 4px 0

24
source/css/_layout/navbar.styl → source/css/_layout/partial/navbar.styl
View File

@ -18,35 +18,13 @@ nav.cap
margin-left: 0.25rem
color: var(--text-p3)
border-radius: 4px
font-weight: 600
font-weight: 500
white-space: nowrap
trans1 background
&.active, &:hover
background: var(--hover-block)
color: var(--text-p1)
// 面包屑导航
.breadcrumb-navigation
padding: $gap $gap 0
margin-top: $gap
font-size: $fs-footnote
color: var(--text-p3)
font-weight: 500
div#breadcrumb
display: flex
align-items: center
flex-direction: row
&:not([style]) a
color: $color-link
&[style] a
color: inherit
span.sep
color: var(--text-p3)
a.cap:hover
color: $color-hover
div#post-meta
margin-top: 2px
@media screen and (max-width: $device-tablet)
.nav-wrap

1
source/css/_layout/partial/paginator.styl
View File

@ -3,7 +3,6 @@
display: flex
justify-content: space-between
align-items: center
disable-select()
font-size: 1rem
font-weight: 700
background: var(--block)

9
source/css/_layout/partial/read_next.styl
View File

@ -7,13 +7,8 @@
color: inherit
&:hover
color: $color-hover
&.read
&.fs14
color: var(--text-p3)
font-size: $fs14
font-weight: 500
&.unread
&.h2
color: var(--text-p1)
font-size: 1.75rem
font-weight: 400
@media screen and (max-width: $device-mobile)
font-size: 1.5rem

9
source/css/_layout/partial/related_posts.styl
View File

@ -2,9 +2,8 @@
.related-posts
width: 100%
display: flex
margin: $gap 0
margin: 1rem 0
overflow-x: scroll
disable-select()
align-items: flex-start
scrollbar(8px, 4px)
padding-bottom: 8px
@ -42,7 +41,7 @@
.title
color: var(--text-p1)
font-weight: 500
font-size: $fs15
font-size: $fs-15
margin: 1rem 1rem 0 1rem
display: -webkit-box
-webkit-box-orient: vertical
@ -50,7 +49,7 @@
-webkit-line-clamp: 2
.excerpt
color: var(--text-p2)
font-size: $fs13
font-size: $fs-13
margin: 0.4rem 1rem 0 1rem
display: -webkit-box
-webkit-box-orient: vertical
@ -60,4 +59,4 @@
img
transform: scale(1.04)
a+a
margin-left: $gap
margin-left: 1rem

2
source/css/_layout/partial/related_wrap.styl
View File

@ -1,4 +1,4 @@
.related-wrap
padding: $gap * 2 $gap
padding: 2rem 1rem
&:empty
display: none

10
source/css/_layout/sidebar/recent.styl
View File

@ -1,10 +0,0 @@
.widgets
.post-title
margin: 0.5rem 0
line-height: 1.2
font-size: $fs14
font-weight: 500
a
color: inherit
&:hover
color: $color-hover

33
source/css/_layout/sidebar.styl → source/css/_layout/sidebar/sidebar.styl
View File

@ -1,15 +1,15 @@
.l_left .wrap
.l_left
display: flex
flex-direction: column
height: "calc(100% - 3 * %s)" % $gap
margin-top: $gap
padding: $gap
padding: var(--gap-l)
padding-top: "calc(2 * %s)" % var(--gap-l)
height: "calc(100vh - 3 * %s)" % var(--gap-l)
@media screen and (max-width: $device-tablet)
height: "calc(100% - 2 * %s)" % $gap
margin-top: 0
padding-top: "calc(1 * %s)" % var(--gap-l)
height: "calc(100% - 2 * %s)" % var(--gap-l)
.logo-wrap
margin: $gap 0
margin: 1rem 0
display: flex
align-items: center
color: var(--text-p0)
@ -43,7 +43,6 @@ nav.menu
margin-top: 0
background: var(--block)
border-radius: 6px
disable-select()
display: flex
padding: 1px
flex-wrap: wrap
@ -58,7 +57,7 @@ nav.menu
word-break: keep-all
margin: 1px
border-radius: 4px
font-size: $fs14
font-size: $fs-14
font-weight: 500
overflow: hidden
padding: 0.375rem 0.75rem
@ -72,7 +71,7 @@ nav.menu
text-align: center
.l_left .widgets
margin: $gap 0
margin: 1rem 0
overflow: scroll
flex-grow: 1
scrollbar(0, 0)
@ -81,11 +80,10 @@ nav.menu
margin: 1rem 0 2rem 0
.widget-header
display: flex
font-size: 1.25rem
color: var(--text-meta)
justify-content: space-between
align-items: center
font-weight: 600
font-weight: 500
position: sticky
position: -webkit-sticky
top: -2px
@ -106,16 +104,12 @@ nav.menu
.widget-body
margin: 0.5rem 0
font-size: $fs14
color: var(--text-p2)
p
margin-top: 0.5em
margin-bottom: 0.5em
>a
&:not([class])
font-weight: 500
&:hover
text-decoration: underline
>a:hover
text-decoration: underline
@ -126,9 +120,8 @@ nav.menu
.social-wrap
disable-select()
display: grid
grid-gap: $gap * 0.25 $gap * 0.25
grid-gap: 0.25rem 0.25rem
grid-template-columns: repeat(auto-fill, 32px)
a.social
line-height: 0

10
source/css/_layout/sidebar/toc.styl
View File

@ -8,7 +8,7 @@
.toc-item .toc-link
padding: 0.5rem 0 0.5rem 1rem
font-weight: 500
font-size: $fs13
font-size: $fs-13
color: var(--text-p2)
.toc-child .toc-item .toc-link
padding: 0.25rem 0 0.25rem 1.8rem
@ -16,7 +16,7 @@
color: var(--text-p2)
.toc-child .toc-child .toc-item .toc-link
padding-left: 2.6rem
font-size: $fs12
font-size: $fs-12
color: var(--text-p3)
.toc-child .toc-child .toc-child .toc-item .toc-link
padding-left: 3.4rem
@ -33,7 +33,7 @@
#toc .toc-item
color: var(--text-p2)
font-size: $fs12
font-size: $fs-12
padding: 0
list-style: none
&.active
@ -59,11 +59,11 @@
display: block
border-top-right-radius: 4px
border-bottom-right-radius: 4px
font-size: $fs12
font-size: $fs-12
font-weight: 500
&.active
color: var(--text-p2)
font-size: $fs14
font-size: $fs-14
&:hover
background: var(--hover-block)

4
source/css/_layout/tag-plugins/about.styl
View File

@ -12,7 +12,7 @@
>img
margin: auto 0
>p
font-size: $fs12
font-size: $fs-12
font-weight: 500
color: var(--text-p3)
padding-top: 0.75rem
@ -26,10 +26,8 @@
margin: 0 1rem
.about-body
>p
font-size: $fs14
line-height: 1.5
.tag-plugin.navbar:last-child
// margin: 0 -0.75rem -0.75rem
nav.cap
padding: 0
background: none

2
source/css/_layout/tag-plugins/checkbox.styl
View File

@ -2,7 +2,7 @@
display: flex
align-items: center
margin: 0.25em 0
font-size: $fs15
font-size: $fs-15
line-height: 1.2
input
-webkit-appearance: none

2
source/css/_layout/tag-plugins/copy.styl
View File

@ -10,7 +10,7 @@
width: 360px
&[width='max']
width: 100%
@media screen and (max-width: $device-mobile-l)
@media screen and (max-width: $device-mobile-425)
min-width: 100%
input.copy-area
display: inline-block

5
source/css/_layout/tag-plugins/folding.styl
View File

@ -3,7 +3,7 @@ details
padding: 1rem
margin: 1rem 0
border-radius: $border-block
font-size: $fs15
font-size: $fs-14
background: var(--theme-bg)
border: 1px solid var(--theme)
summary
@ -12,7 +12,6 @@ details
margin: 0 - 1rem
border-radius: $border-block
color: var(--text-p2)
font-size: $fs14
font-weight: 500
position: relative
line-height: normal
@ -49,7 +48,7 @@ details[open]
background: var(--card)
border-bottom-left-radius: $border-block
border-bottom-right-radius: $border-block
font-size: $fs15
font-size: $fs-15
inside-box()
details[codeblock]>div.body

2
source/css/_layout/tag-plugins/friends.styl
View File

@ -4,7 +4,7 @@
margin: 0 0 1rem
p
margin: 0
font-size: $fs14
font-size: $fs-14
&:first-child
font-size: 1.25rem
font-weight: 500

2
source/css/_layout/tag-plugins/image.styl
View File

@ -15,7 +15,7 @@
padding-top: 0.5rem
.image-caption
display: inline-block
font-size: $fs-footnote
font-size: $fs-12
line-height: 1.4
color: var(--text-p3)
flex-grow: 1

25
source/css/_layout/tag-plugins/link.styl
View File

@ -2,6 +2,8 @@
margin-top: 1em
margin-bottom: 1em
max-width: 360px
@media screen and (max-width: $device-mobile-375)
width: 100%
.md .link-card
margin-right: 1em
@ -13,9 +15,11 @@
min-width 280px
max-width: 100%
width: 320px
@media screen and (max-width: $device-mobile-375)
width: 100%
box-shadow: $boxshadow-card
transition: box-shadow
border-radius: 8px
border-radius: $border-widget
&:hover
box-shadow: $boxshadow-float, $boxshadow-card-float
@ -24,14 +28,14 @@
div.left,div.right
pointer-events: none
div.right
width: 3rem
height: 3rem
width: 2.5rem
height: 2.5rem
margin: 0.75rem
overflow: hidden
flex-shrink: 0
div.left
overflow: hidden
margin-left: 16px
margin-left: 1rem
span
margin: 0
display: block
@ -39,19 +43,6 @@
span.title
font-weight: 500
color: var(--text-p1)
font-size: $fs14
span.url
flex-shrink: 0
color: var(--text-p3)
font-size: $fs13
.md .link-group
display: grid
grid-template-columns: 1fr 1fr
@media screen and (max-width: $device-mobile-l * 2)
grid-template-columns: 1fr
grid-gap: $gap
.tag.link
margin: 0
.link-card
width: 100%

6
source/css/_layout/tag-plugins/note.styl
View File

@ -5,12 +5,12 @@
margin-bottom: 1rem
padding: 1rem
border-radius: $border-block
font-size: $fs15
font-size: $fs-15
background: var(--theme-bg)
border: 1px solid var(--theme)
color: var(--text-p1)
div.title
inside-box: $fs15
inside-box: $fs-15
margin-bottom: 0.5rem
div.body
inside-box: $fs14
inside-box: $fs-14

18
source/css/_layout/tag-plugins/sites.styl
View File

@ -3,7 +3,7 @@
margin: 0 0 1rem
p
margin: 0
font-size: $fs14
font-size: $fs-14
&:first-child
font-size: 1.25rem
font-weight: 500
@ -19,16 +19,16 @@
.sites-wrap .group-body
display: grid
grid-gap: $gap $gap
grid-template-columns: repeat(auto-fill, "calc((100% - 3 * %s) / 4)" % $gap)
grid-gap: 1rem 1rem
grid-template-columns: repeat(auto-fill, "calc((100% - 3 * %s) / 4)" % 1rem)
@media screen and (max-width: $device-laptop)
grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % $gap)
grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 1rem)
@media screen and (max-width: 900px)
grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % $gap)
grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 1rem)
@media screen and (max-width: $device-tablet)
grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % $gap)
grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 1rem)
@media screen and (max-width: $device-mobile)
grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % $gap)
grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 1rem)
margin-bottom: 2rem
.sites-wrap .group-body .site-card .card-link
@ -47,7 +47,7 @@
object-fit: cover
box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
.info
margin-top: $gap * 0.5
margin-top: 0.5rem
line-height: 1.2
>img
width: 28px
@ -61,7 +61,7 @@
.title
font-weight: 500
color: var(--text-p1)
font-size: $fs14
font-size: $fs-14
margin-top: 1px
display: -webkit-box
-webkit-box-orient: vertical

4
source/css/_layout/tag-plugins/timeline.styl
View File

@ -32,7 +32,6 @@
border-radius: $border-block
margin-top: 1rem
margin-bottom: 1rem
font-size: $fs14
.header
line-height: 1.2
background: var(--theme-bg)
@ -42,7 +41,6 @@
display: flex
justify-content: space-between
align-items: center
font-size: $fs14
span
font-weight: 500
color: var(--text-p1)
@ -61,8 +59,6 @@
padding: 0.5rem 1rem
p,.highlight,ol,ul
margin: 0.5rem 0
li
font-size: $fs14
.tag-plugin.timenode:hover
.header a

5
source/css/_plugins/common/input.styl
View File

@ -1,5 +0,0 @@
input.copy-area
font-family: $ff-code
font-size: $fs12
font-weight: 600
color: var(--text-p3)

3
source/css/_plugins/index.styl
View File

@ -1,6 +1,3 @@
// 通用插件
@import "common/*"
// 根据主题配置加载
if hexo-config('plugins.lazyload.enable')
@import 'lazyload'

9
source/css/main.styl
View File

@ -1,14 +1,15 @@
// 常量
@import '_defines/base'
// 无需修改的常量
@import '_defines/const'
// 自定义
// 自定义参数
@import '_custom'
// 含自定义参数的常量
// 含自定义参数的常量以及函数
@import '_defines/theme'
@import '_defines/func'
// 通用组件
@import '_common/*'
// 布局
@import '_layout/*'