[opt] style

_config.yml

@@ -470,9 +470,9 @@ style:
   darkmode: auto # auto / always / false
   smooth_scroll: false # true / false 开启时如果目录过长可能无法准确定位
   font-size:
-    root: 16px
+    root: 16px # 改这个会影响全局所有文字的字号
-    body: 1rem # 16px 
+    body: 17px # 影响正文区域的字号，如果改成 px 则不受 root 影响
-    code: 85% # 14px
+    code: 85% # 相较于其所在行的文本大小，建议用百分比
     codeblock: 0.8125rem # 13px
   font-family:
     logo: 'system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
@@ -480,6 +480,8 @@ style:
     code: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
     codeblock: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
   text-align: left
+  prefix:
+    h2: https://api.iconify.design/ci:heading-h2.svg
   border-radius:
     card: 12px
     block: 12px

layout/_partial/cover/index.ejs

@@ -3,9 +3,9 @@ function layoutCover() {
   if (page.wiki) {
     return partial('wiki_cover')
   }
-  if (page.layout === 'post') {
+  // if (page.layout === 'post') {
-    return partial('post_cover')
+  //   return partial('post_cover')
-  }
+  // }
   return ''
 }
 %>

layout/_partial/main/footer.ejs

@@ -2,7 +2,7 @@
 const content = theme.footer.content?.replace('${author.name}', (config.author || 'Anonymity'))?.replace('${theme.name}', stellar_info('name'))?.replace('${theme.version}', stellar_info('version'))?.replace('${theme.tree}', stellar_info('tree'))
 function layoutDiv() {
   var el = ''
-  el += `<footer class="page-footer${scrollreveal(' ')} fs12">`
+  el += `<footer class="page-footer${scrollreveal(' ')} footnote">`
   el += '<hr>'
   // sitemap
   if (theme.footer.sitemap && Object.keys(theme.footer.sitemap).length > 0) {

layout/_partial/main/navbar/article_banner.ejs

@@ -0,0 +1,54 @@
+<%
+
+var banner_url = page.banner || ''
+
+function layoutTitle() {
+  const title = page.h1 != null ? page.h1 : page.title
+  if (title && title.length > 0) {
+    return `<h1 class="text title"><span>${title}</span></h1>`
+  } else {
+    return ''
+  }
+}
+
+function layoutBottom() {
+  const article_title = layoutTitle()
+  if (article_title.length > 0) {
+    return `
+    <div class="bottom">
+      <div class="text-area">
+        ${article_title}
+      </div>
+    </div>
+    `
+  } else {
+    return ``
+  }
+}
+
+function layoutDiv() {
+  const top = partial('article_top_area')
+  const bottom = layoutBottom()
+  if (top.trim().length == 0 && bottom.length == 0) {
+    return ``
+  }
+  var el = ``
+  el += `<div class="article banner top">`
+  if (banner_url.length > 0) {
+    el += `<img class="bg" src="${banner_url}">`
+  }
+  var style = ``
+  if (page.poster?.color) {
+    style += ' style="--text-banner:' + page.poster?.color + '"'
+  }
+  el += `
+  <div class="content"${style}>
+    ${top}
+    ${bottom}
+  </div>
+  `
+  el += `</div>`
+  return el
+}
+%>
+<%- layoutDiv() %>

layout/_partial/main/navbar/article_top_area.ejs

@@ -5,7 +5,7 @@ function layoutDiv() {
   }
   var el = ''
   // 1.main
-  el += `<div class="bread-nav fs12">`
+  el += `<div class="top bread-nav footnote">`
   // 2.left
   el += `<div class="left">`
   // 3.left.top: 面包屑导航

layout/_partial/main/navbar/author_banner.ejs

@@ -2,7 +2,7 @@
 function layoutDiv() {
   const author = page.author
   var el = ``
-  el += `<div class="tag-plugin banner author">`
+  el += `<div class="banner author top">`
   if (author.banner) {
     el += `<img class="bg" src="${author.banner}">`
   }

layout/_partial/main/navbar/breadcrumb/blog.ejs

@@ -28,6 +28,12 @@ function layoutDiv() {
         })
     }
   }
+  const author = theme.authors ? (theme.authors[page.author] || theme.default_author) : null
+  if (author) {
+    el += `<span class="dot"></span>`
+    const link = `<a href="${url_for(author.path)}">${author.name}</a>`
+    el += `<span class="author">${link}</span>`
+  }
   return el
 }
 %>

layout/_partial/main/navbar/dateinfo.ejs

@@ -1,27 +1,21 @@
 <%
 function layoutDiv() {
   // 作者
-  const author = theme.authors ? (theme.authors[page.author] || theme.default_author) : null
   var el = ''
   el += `<div id="post-meta">`
   if (page.wiki) {
-    el += `<span class="author">${__("meta.updated") + __("symbol.colon")}</span>`
+    el += `<span class="created">${__("meta.updated") + __("symbol.colon")}</span>`
     el += `<time datetime="${date_xml(page.updated)}">${date(page.updated, config.date_format)}</time>`
     el += `</span>`
   } else {
-    if (author) {
-      const link = `<a href="${url_for(author.path)}">${author.name}</a>`
-      el += `<span class="author">${__("meta.created_author", link) + __("symbol.colon")}</span>`
-    } else {
-      el += `<span class="author">${__("meta.created") + __("symbol.colon")}</span>`
-    }
     // 发布日期
-    el += `<span class="created">`
+    el += `<span class="created">${__("meta.created") + __("symbol.colon")}</span>`
     el += `<time datetime="${date_xml(page.date)}">${date(page.date, config.date_format)}</time>`
     el += `</span>`
     // 更新日期
     el += `<span class="updated">`
-    el += `${__("symbol.comma") + __("meta.updated") + __("symbol.colon")}`
+    el += `<span class="dot"></span>`
+    el += `${__("meta.updated") + __("symbol.colon")}`
     el += `<time datetime="${date_xml(page.updated)}">${date(page.updated, config.date_format)}</time>`
     el += `</span>`
   }

layout/page.ejs

@@ -22,15 +22,6 @@ if (page.title == null) {
   }
 }
 
-function layoutTitle() {
-  const title = page.h1 != null ? page.h1 : page.title
-  if (title && title.length > 0) {
-    return `<h1 class="article-title"><span>${title}</span></h1>`
-  } else {
-    return ''
-  }
-}
-
 function articleClass() {
   var str = `md-text content${scrollreveal(' ')}`
   if (isUsingHeti) {
@@ -48,10 +39,9 @@ function layoutDiv() {
     el += partial('_partial/main/navbar/nav_tabs_blog')
   }
   if (page.h1 || page.title || (page.content && page.content.length > 0)) {
-    el += partial('_partial/main/navbar/article_top_area')
+    el += partial('_partial/main/navbar/article_banner')
   }
   el += `<article class="${articleClass()}">`
-  el += layoutTitle()
   if (page.content && page.content.length > 0) {
     el += page.content
   }

scripts/tags/lib/link.js

@@ -45,10 +45,10 @@ module.exports = ctx => function(args) {
     return '<span class="title">' + (args.title || args.url) + '</span>'
   }
   function loadDesc() {
-    return '<span class="cap desc fs12"></span>'
+    return '<span class="cap desc footnote"></span>'
   }
   function loadLink() {
-    return '<span class="cap link fs12">' + full_url_for(args.url) + '</span>'
+    return '<span class="cap link footnote">' + full_url_for(args.url) + '</span>'
   }
 
   if (args.desc) {

source/css/_common/base.styl

@@ -25,7 +25,7 @@ img
 
 
 li
-  font-size: $fs-15
+  font-size: var(--fs-p)
 
 
 ul,ol

source/css/_common/cap.styl

@@ -1,6 +1,6 @@
 .cap
   font-weight: 500
-  font-size: $fs-12
+  font-size: $fs-13
   scrollbar-width: none
   color: var(--text-p2)
   &.blue

source/css/_common/html.styl

@@ -5,7 +5,7 @@ html
   font-size: $fs-root
   -webkit-text-size-adjust: 100%
   -ms-text-size-adjust: 100%
-  scroll-padding-top: 20px
+  scroll-padding-top: 8px
   if hexo-config('style.smooth_scroll')
     scroll-behavior: smooth
 body

source/css/_common/title.styl

@@ -16,14 +16,12 @@ h6
 
 // 次级段落字号
 .fs14
-  font-size: $fs-14
+  --fs-p: $fs-14
-  p
+  font-size: var(--fs-p)
-    font-size: $fs-14 !important
+
-  li
+.footnote
-    font-size: $fs-14 !important
+  --fs-p: $fs-13
-// 脚标字号
+  font-size: var(--fs-p)
-.fs12
-  font-size: $fs-12
 
 .widgets
   .post-title

source/css/_custom.styl

@@ -65,10 +65,12 @@ $border-button = 4px
 :root
   --width-left: 288px
   --width-main: 720px
-  --fs-p: $fs-body
+  --fs-body: $fs-body
+  --fs-p: var(--fs-body)
+  --fs-p2: 'calc(%s * 0.9)' % $fs-body
   --gap-l: 16px
-  --gap-p: 1rem // gap for paragraph
+  --gap-p: 'calc(%s + 4px)' % $fs-body // gap for paragraph
-  --gap-p-compact: 0.75rem
+  --gap-p-compact: 'calc(%s * 0.75)' % $fs-body
   // desktop 2k or larger
   @media screen and (min-width: $device-2k)
     --gap-l: 32px

source/css/_layout/layout.styl

@@ -3,6 +3,7 @@
   margin: auto
   padding: 0 var(--gap-l)
   justify-content: center
+  font-size: var(--fs-p)
 
 .l_body .l_left
   z-index: 8

source/css/_layout/main.styl

@@ -6,8 +6,6 @@
     margin-right: "calc(2 * %s + %s / 2)" % (var(--gap-l) var(--width-left))
   @media screen and (min-width: $device-mobile-max)
     padding-top: 8px
-  @media screen and (max-width: $device-mobile-max)
-    padding-top: 1rem
   header
     margin: 2rem 1rem 1rem
     .logo-wrap

source/css/_layout/md.styl

@@ -1,62 +1,35 @@
+// 文本区域
 .md-text
   max-width: 100%
   padding: 1rem
-  &:first-child
-    margin-top: 0
   color: var(--text-p1)
-  line-height: 1.7
+  line-height: 1.6
   word-break: break-word
 
+// 摘要
 .md-text.excerpt
   p
     font-size: $fs-14
     margin: 1em 0
 
-h1.article-title
+// 正文区域
-  margin-top: .5em
-  margin-bottom: 1em
-  line-height: 1.2
-  color: var(--text-p0)
-
 .md-text.content
   position: relative
+  padding-top: 0
   padding-bottom: 2rem
   overflow: hidden
-  >:first-child:not(h1)
-    margin-top: 0
-  h1:not(:first-child)
-    margin-top: 1em
-  h2
-    margin-bottom: 1rem
-  h3,h4,h5,h6
-    margin-bottom: .5rem
-  h2,h3,h4,h5,h6
-    color: var(--text-p0)
-    padding-top: 1rem
-    line-height: 1.8
-    &:hover
-      a.headerlink:before
-        opacity: 1
-  blockquote, .tag-plugin
-    h2,h3,h4,h5,h6
-      margin-top: 0.25em
-      margin-bottom: 0.25em
-      padding-top: 0
 
 .l_body[text-indent] .md-text.content
-  >p:not([class])
+  >p
     text-indent: 'calc(%s * 2)' % var(--fs-p)
     text-align: convert(hexo-config('style.text-align'))
-    a
-      text-indent: 0
   h1,h2,h3,h4,h5,h6
     text-align: center
+    a.headerlink
+      display: none
   >h2:not([class])
     border-bottom: none
 
-.md-text.content:first-child
-  padding-top: 0
-
 .md-text
   ul:not(:last-child),
   ol:not(:last-child)
@@ -64,7 +37,7 @@ h1.article-title
     margin: 0
   blockquote,ul,ol
     p,ul,ol
-      font-size: $fs-14
+      font-size: var(--fs-p2)
       line-height: 1.5
       code 
         font-size: inherit
@@ -84,30 +57,40 @@ h1.article-title
 
 // titles
 .md-text.content
+  h1,h2,h3,h4,h5,h6
+    margin-bottom: var(--gap-p)
+    color: var(--text-p0)
+    line-height: 1.8
+  blockquote, .tag-plugin
+    h2,h3,h4,h5,h6
+      margin-top: 0.25em
+      margin-bottom: 0.25em
+      
+  a.headerlink 
+    background: $color-theme
+    border-radius: 2px
+    margin-right: 8px
+    trans1 background
+  a.headerlink:hover
+    background: $color-hover
   a.headerlink:before
-    opacity: 0
+    content: ''
-    content: '#'
+    color: white
-    position: absolute
+    font-weight: 700
-    margin-left: -0.6em
+    padding: 0 2px
   h2
-    margin-top: 2rem
+    margin-top: 'calc(%s + 1rem)' % var(--gap-p)
     border-bottom: 1px solid var(--block-border)
     font-weight: 400
   h3
-    margin-top: 1.5rem
+    margin-top: 'calc(%s + 0.75rem)' % var(--gap-p)
     font-weight: 400
   h4,h5,h6
+    margin-top: 'calc(%s + 0.5rem)' % var(--gap-p)
     font-weight: 500
-  h1+h2
+
-    margin-top: -0.5rem
+.md-text.content:first-child .tag-plugin:first-child
-  h2+h3
+  margin-top: 0
-    margin-top: -0.5rem
-  h3+h4
-    margin-top: -0.5rem
-  h4+h5
-    margin-top: -0.5rem
-  h5+h6
-    margin-top: -0.5rem
 
 .md-text p
   font-size: var(--fs-p)

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

@@ -0,0 +1,23 @@
+.article.banner
+  --text-banner: var(--text-p0)
+  --hover-bg: rgba(black, 0.08)
+  background: var(--block)
+  margin: 0
+  height: unset
+
+.article.banner
+  .bg+.content
+    --text-banner: white
+    --hover-bg: rgba(white, 0.2)
+    background: rgba(black, 0.1)
+
+.article.banner .content
+  .top
+    align-items: flex-start
+    margin: 1rem 'calc(1rem - 4px)'
+  .title
+    font-size: $fs-h1
+    color: var(--text-banner)
+  h1
+    line-height: 1.2
+    margin: 0

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

@@ -1,24 +1,30 @@
 // 面包屑导航
 .bread-nav
-  padding: 0.25rem 1rem 0
-  color: var(--text-p3)
   font-weight: 500
   display: flex
   justify-content: space-between
   div#breadcrumb
     display: flex
-    align-items: center
+    align-items: baseline
     flex-direction: row
-    &:not([style]) a
+  a
-      color: var(--theme-link)
+    color: var(--text-banner)
-    &[style] a
+    padding: 4px
-      color: inherit
+    border-radius: 2px
-    span.sep
+  span 
-      color: var(--text-p3)
+    color: var(--text-banner)
-    a.cap:hover
+  span.sep
-      color: $color-hover
+    opacity 0.5
+    margin: 0
+  span.dot:before
+    opacity 0.5
+    margin: 0 8px
+
+  a:hover
+    background: var(--hover-bg)
   div#post-meta
-    margin-top: 2px
+    padding: 4px
+    color: var(--text-banner)
     span.updated
       visibility: hidden
   &:hover
@@ -35,15 +41,13 @@
   a  
     display: flex
     align-items: center
-    color: var(--text-p2)
+    color: var(--text-banner)
     svg
       margin-right: 4px
     &.bold 
       font-weight: 600
-      color: var(--text-p1)
+      color: var(--text-banner)
     span 
       margin-left: 4px
     &:hover
-      color: var(--theme-link)
+      opacity 1
-  a+a   
-    margin-top: 8px

source/css/_layout/partial/cover.styl

@@ -16,6 +16,7 @@
   flex-direction: column
   justify-content: center
   align-items: center
+  font-size: var(--fs-p)
   .cover-title
     font-weight: 700
     font-size: 1.5rem
@@ -48,16 +49,6 @@
         border-radius: 2rem
 
 
-.l_cover.post .cover-wrap
-  z-index: 1
-  .article-title
-    text-align: center
-    padding: 1rem
-    margin: 1em 0 0 0
-    @media screen and (min-width: $device-2k)
-      font-size: 3rem
-
-
 .l_cover.wiki .cover-wrap
   max-width: $device-mobile
   .preview

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

@@ -1,4 +1,4 @@
-.tag-plugin.banner
+.banner
   border-radius: $border-card
   position: relative
   overflow: hidden
@@ -82,25 +82,26 @@
     padding: 1rem
     width: 100%
     box-sizing: border-box
-    .title
+  .title
-      font-size: 1.5rem
+    font-size: 1.5rem
-      font-weight: 600
+    font-weight: 600
-    .avatar+.text-area
+  .avatar+.text-area
-      margin-left: 0.75rem
+    margin-left: 0.75rem
-    .text-area .text
+  .text-area .text
-      line-height: 1.2
+    line-height: 1.2
-      margin-top: 0.25rem
+    margin-top: 0.25rem
-      margin-bottom: 0.25rem
+    margin-bottom: 0.25rem
-    .avatar+.text-area .title
+  .avatar+.text-area .title
-      font-size: 1.2rem
+    font-size: 1.2rem
-    .subtitle
+  .subtitle
-      font-size: $fs-14
+    font-size: $fs-14
   .content:only-child
     color: var(--text-p1)
   .bg+.content 
     color: white
     .avatar
       border: 2px solid white
+      margin: 0
     .bottom
       background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2))
       text-shadow: 0 0 1px rgba(0,0,0,0.12)
@@ -114,10 +115,13 @@
 .tag-plugin.banner .navbar a.active
   blur-effect()
 
-
+@media screen and (min-width: $device-mobile-max)
-.tag-plugin.banner.author
+  .banner.author.top
-  @media screen and (min-width: $device-mobile-max)
     margin-left: var(--gap-l)
     margin-right: var(--gap-l)
-  @media screen and (max-width: $device-mobile-max)
+  
-    border-radius: 0
+@media screen and (max-width: $device-mobile-max)
+  .banner.top
+    border-radius: 0
+  .md-text.content .tag-plugin.banner:first-child
+    margin-top: 1rem

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

@@ -10,8 +10,8 @@
     border-bottom: none
     font-weight: 700
     padding: 16px 24px
-    a.headerlink:before
+    a.headerlink
-      content: ''
+      display: none
     @media screen and (max-width: $device-mobile)
       padding: 12px 20px
     line-height: 1.2