[opt] style

2024-01-30 23:48:00 +08:00 · 2024-01-30 23:48:00 +08:00 · 0cab2f1405
parent 48afb63f4c
commit 0cab2f1405
23 changed files with 198 additions and 148 deletions
--- a/_config.yml
+++ b/_config.yml
@ -470,9 +470,9 @@ style:
  darkmode: auto # auto / always / false
  smooth_scroll: false # true / false 开启时如果目录过长可能无法准确定位
  font-size:
-    root: 16px
-    body: 1rem # 16px 
-    code: 85% # 14px
+    root: 16px # 改这个会影响全局所有文字的字号
+    body: 17px # 影响正文区域的字号，如果改成 px 则不受 root 影响
+    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
--- a/layout/_partial/cover/index.ejs
+++ b/layout/_partial/cover/index.ejs
@ -3,9 +3,9 @@ function layoutCover() {
  if (page.wiki) {
    return partial('wiki_cover')
  }
-  if (page.layout === 'post') {
-    return partial('post_cover')
-  }
+  // if (page.layout === 'post') {
+  //   return partial('post_cover')
+  // }
  return ''
 }
 %>
--- a/layout/_partial/main/footer.ejs
+++ b/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) {
--- a/layout/_partial/main/navbar/article_banner.ejs
+++ b/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() %>
--- a/layout/_partial/main/navbar/article_top_area.ejs
+++ b/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: 面包屑导航
--- a/layout/_partial/main/navbar/author_banner.ejs
+++ b/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}">`
  }
--- a/layout/_partial/main/navbar/breadcrumb/blog.ejs
+++ b/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
 }
 %>
--- a/layout/_partial/main/navbar/dateinfo.ejs
+++ b/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>`
  }
--- a/layout/page.ejs
+++ b/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
  }
--- a/scripts/tags/lib/link.js
+++ b/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) {
--- a/source/css/_common/base.styl
+++ b/source/css/_common/base.styl
@ -25,7 +25,7 @@ img


 li
-  font-size: $fs-15
+  font-size: var(--fs-p)


 ul,ol
--- a/source/css/_common/cap.styl
+++ b/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
--- a/source/css/_common/html.styl
+++ b/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
--- a/source/css/_common/title.styl
+++ b/source/css/_common/title.styl
@ -16,14 +16,12 @@ h6

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

 .widgets
  .post-title
--- a/source/css/_custom.styl
+++ b/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-compact: 0.75rem
+  --gap-p: 'calc(%s + 4px)' % $fs-body // gap for paragraph
+  --gap-p-compact: 'calc(%s * 0.75)' % $fs-body
  // desktop 2k or larger
  @media screen and (min-width: $device-2k)
    --gap-l: 32px
--- a/source/css/_layout/layout.styl
+++ b/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
--- a/source/css/_layout/main.styl
+++ b/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
--- a/source/css/_layout/md.styl
+++ b/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: '#'
-    position: absolute
-    margin-left: -0.6em
+    content: ''
+    color: white
+    font-weight: 700
+    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
-  h2+h3
-    margin-top: -0.5rem
-  h3+h4
-    margin-top: -0.5rem
-  h4+h5
-    margin-top: -0.5rem
-  h5+h6
-    margin-top: -0.5rem
+
+.md-text.content:first-child .tag-plugin:first-child
+  margin-top: 0

 .md-text p
  font-size: var(--fs-p)
--- a/source/css/_layout/partial/article-banner.styl
+++ b/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
--- a/source/css/_layout/partial/bread-nav.styl
+++ b/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
-      color: var(--theme-link)
-    &[style] a
-      color: inherit
-    span.sep
-      color: var(--text-p3)
-    a.cap:hover
-      color: $color-hover
+  a
+    color: var(--text-banner)
+    padding: 4px
+    border-radius: 2px
+  span 
+    color: var(--text-banner)
+  span.sep
+    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)
-  a+a   
-    margin-top: 8px
+      opacity 1
--- a/source/css/_layout/partial/cover.styl
+++ b/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
--- a/source/css/_layout/tag-plugins/banner.styl
+++ b/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
-      font-size: 1.5rem
-      font-weight: 600
-    .avatar+.text-area
-      margin-left: 0.75rem
-    .text-area .text
-      line-height: 1.2
-      margin-top: 0.25rem
-      margin-bottom: 0.25rem
-    .avatar+.text-area .title
-      font-size: 1.2rem
-    .subtitle
-      font-size: $fs-14
+  .title
+    font-size: 1.5rem
+    font-weight: 600
+  .avatar+.text-area
+    margin-left: 0.75rem
+  .text-area .text
+    line-height: 1.2
+    margin-top: 0.25rem
+    margin-bottom: 0.25rem
+  .avatar+.text-area .title
+    font-size: 1.2rem
+  .subtitle
+    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()

-
-.tag-plugin.banner.author
-  @media screen and (min-width: $device-mobile-max)
+@media screen and (min-width: $device-mobile-max)
+  .banner.author.top
    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
--- a/source/css/_layout/tag-plugins/quot.styl
+++ b/source/css/_layout/tag-plugins/quot.styl
@ -10,8 +10,8 @@
    border-bottom: none
    font-weight: 700
    padding: 16px 24px
-    a.headerlink:before
-      content: ''
+    a.headerlink
+      display: none
    @media screen and (max-width: $device-mobile)
      padding: 12px 20px
    line-height: 1.2