css

layout/_partial/main/article/read_next.ejs

@@ -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;

layout/_partial/main/article/references.ejs

@@ -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">';

layout/_partial/main/footer.ejs

@@ -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;
 }
 %>

layout/_partial/main/header/index.ejs

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

layout/_partial/main/navbar/breadcrumb.ejs

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

layout/_partial/main/post_list/paginator.ejs

@@ -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>

layout/_partial/sidebar/header.ejs

@@ -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>

layout/_partial/sidebar/index.ejs

@@ -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', {where: 'sidebar'}) %>
-  <%- partial('header') %>
+<div class='widgets'>
-  <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() %>
 </div>
+<%- layoutFooterDiv() %>

layout/_partial/sidebar/widgets/markdown.ejs

@@ -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) %>
     <% }) %>

layout/_partial/sidebar/widgets/recent.ejs

@@ -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;

layout/_partial/sidebar/widgets/toc.ejs

@@ -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 = [];

layout/_partial/sidebar/widgets/wiki_more.ejs

@@ -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 %>

layout/archive.ejs

@@ -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) { %>

layout/categories.ejs

@@ -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>

layout/index.ejs

@@ -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));
     });

layout/layout.ejs

@@ -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/menubtn') %>
     </div>
   </div>

layout/tags.ejs

@@ -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='name fs14'><%= tag.name %></span>
-          <span class='badge'>x<%- tag.length %></span>
+          <span class='badge fs12'>x<%- tag.length %></span>
         </a>
       <% }) %>
     </article>

scripts/tags/about.js

@@ -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>';
 

scripts/tags/link.js

@@ -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

scripts/tags/timeline.js

@@ -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>

source/css/_common/base.styl

@@ -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)

source/css/_common/button.styl

@@ -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

source/css/_common/cap.styl

@@ -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)

source/css/_common/control.styl

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

source/css/_common/html.styl

@@ -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)

source/css/_common/image.styl

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

source/css/_common/input.styl

@@ -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)

source/css/_common/mobile-only.styl

@@ -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

source/css/_common/span.styl

@@ -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

source/css/_common/svg.styl

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

source/css/_common/title.styl

@@ -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

source/css/_custom.styl

@@ -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-h5   = $fs-15
-$fs-h6   = 1rem      // 16px
+$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)

source/css/_defines/base.styl

@@ -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

source/css/_defines/const.styl

@@ -1,8 +1,6 @@
-
+// 用来进行设备适配，请勿修改
-// device defines
+$device-mobile-375 = 375px
-$device-mobile-s = 320px
+$device-mobile-425 = 425px
-$device-mobile-m = 375px
-$device-mobile-l = 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

source/css/_defines/func.styl

@@ -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

source/css/_layout/base.styl

@@ -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

source/css/_layout/layout.styl

@@ -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
+  max-width: var(--width-main)
-  @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
 
 .l_body.mobile.sidebar
   .sidebar-toggle.mobile
@@ -62,9 +32,7 @@
     padding: 0
     .l_left
       position: fixed
-      height: 100vh
+      transform: translateX(-320px)
-      width: 280px
-      transform: translateX(0 - $gap - 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)

source/css/_layout/list.styl

@@ -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

source/css/_layout/main.styl

@@ -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: 2rem 1rem 1rem
-    margin: $gap * 2 $gap $gap
     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

source/css/_layout/md.styl

@@ -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
+  margin-bottom: 2rem
-
-// titles
-article.md
   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
+    margin-top: 0
-  h5
+  h4+h5
-    font-size: $fs14
+    margin-top: 0
-  h6
+  h5+h6
-    font-size: $fs12
+    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

source/css/_layout/pages/archives.styl

@@ -2,14 +2,46 @@
   a.post
     display: inline-flex
     align-items: baseline
-    font-size: $fs14
     margin: 0.25rem 0
-    font-weight: 600
+    font-weight: 500
-    color: var(--text-p2)
+    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

source/css/_layout/pages/categories.styl

@@ -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

source/css/_layout/pages/error.styl

@@ -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

source/css/_layout/pages/tags.styl

@@ -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

source/css/_layout/partial/article-footer.styl

@@ -6,20 +6,18 @@
   border: 1px solid var(--block-border)
   .header
     font-weight: 500
-    color: var(--text-p3)
+    color: var(--text-p2)
-    margin-bottom: 0.75rem
+    font-size: $fs-h4
-    font-size: 1.25rem
   .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

source/css/_layout/partial/bread-nav.styl

@@ -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

source/css/_layout/partial/cover.styl

@@ -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

source/css/_layout/partial/footer.styl

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

source/css/_layout/partial/navbar.styl

@@ -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

source/css/_layout/partial/paginator.styl

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

source/css/_layout/partial/read_next.styl

@@ -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

source/css/_layout/partial/related_posts.styl

@@ -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

source/css/_layout/partial/related_wrap.styl

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

source/css/_layout/sidebar/recent.styl

@@ -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

source/css/_layout/sidebar/sidebar.styl

@@ -1,15 +1,15 @@
-.l_left .wrap
+.l_left
   display: flex
   flex-direction: column
-  height: "calc(100% - 3 * %s)" % $gap
+  padding: var(--gap-l)
-  margin-top: $gap
+  padding-top: "calc(2 * %s)" % var(--gap-l)
-  padding: $gap
+  height: "calc(100vh - 3 * %s)" % var(--gap-l)
   @media screen and (max-width: $device-tablet)
-    height: "calc(100% - 2 * %s)" % $gap
+    padding-top: "calc(1 * %s)" % var(--gap-l)
-    margin-top: 0
+    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,15 +104,11 @@ 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
+        >a:hover
-          &:not([class])
-            font-weight: 500
-            &: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

source/css/_layout/sidebar/toc.styl

@@ -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)
 

source/css/_layout/tag-plugins/about.styl

@@ -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

source/css/_layout/tag-plugins/checkbox.styl

@@ -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

source/css/_layout/tag-plugins/copy.styl

@@ -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

source/css/_layout/tag-plugins/folding.styl

@@ -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

source/css/_layout/tag-plugins/friends.styl

@@ -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

source/css/_layout/tag-plugins/image.styl

@@ -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

source/css/_layout/tag-plugins/link.styl

@@ -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
+    width: 2.5rem
-    height: 3rem
+    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%

source/css/_layout/tag-plugins/note.styl

@@ -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

source/css/_layout/tag-plugins/sites.styl

@@ -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-gap: 1rem 1rem
-  grid-template-columns: repeat(auto-fill, "calc((100% - 3 * %s) / 4)" % $gap)
+  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

source/css/_layout/tag-plugins/timeline.styl

@@ -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

source/css/_plugins/common/input.styl

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

source/css/_plugins/index.styl

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

source/css/main.styl

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