[opt] layout

_config.yml

@@ -63,13 +63,13 @@ site_tree:
   # 主页配置
   home:
     leftbar: welcome, recent
-    rightbar: timeline
+    rightbar: # timeline
   # 博客列表页配置
   index_blog:
     base_dir: blog # 只影响自动生成的页面路径
     menu_id: post # 未在 front-matter 中指定 menu_id 时，layout 为 post 的页面默认使用这里配置的 menu_id
     leftbar: welcome, recent # for categories/tags/archives
-    rightbar: timeline
+    rightbar: 
     nav_tabs:  # 近期发布 分类 标签 专栏 归档 and ...
       # '朋友文章': /friends/rss/
   # 博客专栏列表页配置
@@ -81,7 +81,7 @@ site_tree:
     base_dir: wiki # 只影响自动生成的页面路径
     menu_id: wiki # 未在 front-matter 中指定 menu_id 时，layout 为 wiki 的页面默认使用这里配置的 menu_id
     leftbar: ghissues, related, recent # for wiki
-    rightbar: timeline
+    rightbar: 
     nav_tabs:
       # 'more': https://github.com/xaoxuu
   # -- 内容类页面 -- #
@@ -113,7 +113,7 @@ site_tree:
   # 其它自定义页面配置 layout: page
   page:
     leftbar: recent
-    rightbar: toc, timeline
+    rightbar: toc
 
 
 

_data/icons.yml

@@ -30,6 +30,8 @@ default:category: <svg style="margin-bottom:1px" xmlns="http://www.w3.org/2000/s
 
 # 编辑本文
 default:edit: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M11.943 1.25H13.5a.75.75 0 0 1 0 1.5H12c-2.378 0-4.086.002-5.386.176c-1.279.172-2.05.5-2.62 1.069c-.569.57-.896 1.34-1.068 2.619c-.174 1.3-.176 3.008-.176 5.386s.002 4.086.176 5.386c.172 1.279.5 2.05 1.069 2.62c.57.569 1.34.896 2.619 1.068c1.3.174 3.008.176 5.386.176s4.086-.002 5.386-.176c1.279-.172 2.05-.5 2.62-1.069c.569-.57.896-1.34 1.068-2.619c.174-1.3.176-3.008.176-5.386v-1.5a.75.75 0 0 1 1.5 0v1.557c0 2.309 0 4.118-.19 5.53c-.194 1.444-.6 2.584-1.494 3.479c-.895.895-2.035 1.3-3.48 1.494c-1.411.19-3.22.19-5.529.19h-.114c-2.309 0-4.118 0-5.53-.19c-1.444-.194-2.584-.6-3.479-1.494c-.895-.895-1.3-2.035-1.494-3.48c-.19-1.411-.19-3.22-.19-5.529v-.114c0-2.309 0-4.118.19-5.53c.194-1.444.6-2.584 1.494-3.479c.895-.895 2.035-1.3 3.48-1.494c1.411-.19 3.22-.19 5.529-.19m4.827 1.026a3.503 3.503 0 0 1 4.954 4.953l-6.648 6.649c-.371.37-.604.604-.863.806a5.34 5.34 0 0 1-.987.61c-.297.141-.61.245-1.107.411l-2.905.968a1.492 1.492 0 0 1-1.887-1.887l.968-2.905c.166-.498.27-.81.411-1.107c.167-.35.372-.68.61-.987c.202-.26.435-.492.806-.863zm3.893 1.06a2.003 2.003 0 0 0-2.832 0l-.376.377c.022.096.054.21.098.338c.143.413.415.957.927 1.469a3.875 3.875 0 0 0 1.807 1.025l.376-.376a2.003 2.003 0 0 0 0-2.832m-1.558 4.391a5.397 5.397 0 0 1-1.686-1.146a5.395 5.395 0 0 1-1.146-1.686L11.218 9.95c-.417.417-.58.582-.72.76a3.84 3.84 0 0 0-.437.71c-.098.203-.172.423-.359.982l-.431 1.295l1.032 1.033l1.295-.432c.56-.187.779-.261.983-.358c.251-.12.49-.267.71-.439c.177-.139.342-.302.759-.718z" clip-rule="evenodd"/></svg>
+default:upup: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2c4.714 0 7.071 0 8.535 1.464C22 4.93 22 7.286 22 12c0 4.714 0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12Z"/><path stroke-linecap="round" stroke-linejoin="round" d="m9 15.5l3-3l3 3m-6-4l3-3l3 3"/></g></svg>
+
 
 github:logo: <svg aria-hidden="true" role="img" class="color-icon-primary" viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
 github:repo: <svg aria-hidden="true" role="img" class="color-icon-primary" viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" style="user-select:none;overflow:visible"><path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path></svg>

languages/en.yml

@@ -13,6 +13,7 @@ btn:
   all_posts: All Posts
   getting_started: Getting Started
   edit: Edit This Page
+  top: Scroll to Top
 
 meta:
   recent_update: Recent Update

languages/zh-CN.yml

@@ -13,6 +13,7 @@ btn:
   all_posts: 所有文章
   getting_started: 开始使用
   edit: 编辑本文
+  top: 回到顶部
 
 meta:
   recent_update: 最近更新

languages/zh-TW.yml

@@ -13,6 +13,7 @@ btn:
   all_posts: 所有網誌
   getting_started: 開始使用
   edit: 編輯本文
+  top: 回到頂部
 
 meta:
   recent_update: 最近更新

layout/_partial/widgets/toc.ejs

@@ -38,7 +38,7 @@ function layoutToc(fallback) {
 function layoutDiv(fallback) {
   const editBtn = partial('components/edit', {map: item.edit_this_page})
   const tocBody = layoutTocBody()
-  if (tocBody.length == 0 && editBtn.length == 0) {
+  if (tocBody.trim().length == 0 && editBtn.trim().length == 0) {
     return ''
   }
   var el = ''
@@ -49,11 +49,13 @@ function layoutDiv(fallback) {
     el += tocBody
     el += `</div>`
   }
-  if (editBtn.trim().length > 0) {
   el += `<div class="widget-footer">`
   el += editBtn
+  el += `<a class="top" onclick="util.scrollTop()">`
+  el += icon('default:upup')
+  el += `<span>${__('btn.top')}</span>`
+  el += `</a>`
   el += `</div>`
-  }
   el += `</widget>`
   return el
 }

source/css/_common/device.styl

@@ -47,7 +47,7 @@
 
 // 侧边栏弹出后
 .l_body[leftbar] .float-panel, .l_body[rightbar] .float-panel
-  box-shadow: 0 0 4px -2px $color-theme, 0 0 24px -12px $color-theme
+  box-shadow: 0 0 4px -2px $color-theme, 0 0 16px -8px $color-theme, 0 0 32px -16px $color-theme
 .l_body[leftbar] .float-panel button
   background: var(--card)
 

source/css/_layout/layout.styl

@@ -11,10 +11,10 @@
   flex-shrink: 0
   position: sticky
   position: -webkit-sticky
-  top: 8px
 
+.l_body .l_left
+  top: 8px
 .l_body .l_right
-  height: 100%
   .widgets
     height: 100%
     overflow visible
@@ -25,6 +25,7 @@
     display: block !important
   .l_body
     .l_right
+      top: 8px
       position: fixed
       height: calc(100% - 8px * 2)
       transform: translateX(320px)
@@ -35,6 +36,7 @@
       z-index: 10
       background: var(--site-bg)
       overflow: auto
+      scrollbar(0, 0)
   .l_body[rightbar]
     .l_right
       transform: translateX(0px)

source/css/_layout/sidebar/sidebar.styl

@@ -5,22 +5,19 @@
   overflow: hidden
   .header
     margin: var(--gap-max) var(--gap-margin) 0
-  @media screen and (min-width: 1400px)
+  // @media screen and (min-width: $device-mobile-max)
-    margin-left: auto
+  //   >.widgets:first-child>.widget-wrapper:first-child
-    margin-right: var(--gap-max)
+  //     margin-top: calc(2 * var(--gap-max))
-  @media screen and (min-width: $device-mobile-max)
-    >.widgets:first-child>.widget-wrapper:first-child
-      margin-top: "calc(2 * %s)" % var(--gap-max)
 
 .l_right
-  margin: 0 8px 0 0
+  margin: 8px 8px 8px 0
   border-radius: $border-card-l
 @media screen and (min-width: 1400px)
   .l_left
     margin-left: auto
-    margin-right: var(--gap-max)
+    margin-right: calc(2 * var(--gap-max))
   .l_right
-    margin-left: var(--gap-margin)
+    margin-left: var(--gap-max)
     margin-right: auto
 
 .l_left

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

@@ -191,10 +191,13 @@
     padding: 0 0.5rem
     display: flex 
     align-items: center
+    border-color: var(--block-border)
     &:first-child 
       margin-left: 0
     &:last-child 
       margin-right: 0
+  a:hover
+      border-color: $color-hover
   .reaction 
     border-color: var(--block)
 

source/css/_layout/widgets/related.styl

@@ -1,7 +1,6 @@
 
 .widget-wrapper.post-card .widget-body
   max-width: 100%
-  margin: 1rem 0
   .item+.item
     margin-top: 8px
   .item

source/css/_layout/widgets/timeline.styl

@@ -1,6 +1,5 @@
 .widget-wrapper.timeline
   .widget-body
-    margin-top: 0.5rem
     overflow hidden
   .body
     a

source/css/_layout/widgets/toc.styl

@@ -1,6 +1,11 @@
 .widget-wrapper.toc
   background: var(--site-bg)
   z-index 1
+
+.l_right .widgets .widget-wrapper.toc .widget-header
+  padding-left: var(--gap-max)
+  padding-right: var(--gap-max)
+
 // 目录基本样式
 .widget-wrapper.toc .toc
   --fsp: $fsp2
@@ -15,7 +20,7 @@
     list-style: none
   a  
     padding: 4px var(--gap-max)
-    color: var(--text-p2)
+    color: var(--text-p3)
     display: block
     overflow: hidden
     text-overflow: ellipsis
@@ -49,10 +54,11 @@
   margin-top: 0
   padding: 16px 0
   .widget-body .toc
-    max-height: 75vh
+    max-height: 70vh
     @media screen and (max-width: $device-laptop)
       max-height: unset
     overflow: auto
+    scrollbar(0, 0)
 
 
 
@@ -66,14 +72,14 @@
     --fsp: $fsp2
 
 // 高亮样式
-.widget-wrapper.toc .toc a.toc-link.active
-  color: var(--text-p0)
-  &:before,&:after
-    content: ''
-
 .widget-wrapper.toc .toc a.toc-link:hover
   color: $color-theme
 
+.widget-wrapper.toc .toc a.toc-link.active
+  color: var(--text)
+  &:before,&:after
+    content: ''
+
 // 始终折叠
 .widget-wrapper.toc[collapse='true']
   .toc-item a.toc-link+ol
@@ -115,12 +121,7 @@
     grid-template-rows: 0fr
 
 // 编辑本文按钮
-.widget-wrapper.toc .widget-footer
+.widget-wrapper.toc .widget-body+.widget-footer:before 
-  margin-top: 8px
-  color: var(--text-p2)
-  position relative
-  padding-top: 8px
-  &:before 
   content: ''
   position absolute
   background: var(--block-border)
@@ -128,6 +129,11 @@
   height: 1px
   left: var(--gap-max)
   right: var(--gap-max)
+.widget-wrapper.toc .widget-footer
+  margin-top: 8px
+  color: var(--text-p2)
+  position relative
+  padding-top: 8px
   a
     display: flex
     align-items: center
@@ -142,3 +148,23 @@
       margin-right: 8px
   a:hover
     background: var(--block-hover)
+    color: var(--text)
+
+.widget-wrapper.toc+.widget-wrapper
+  padding-top: 32px
+
+@media screen and (max-width: $device-laptop)
+  .l_right
+    blur-effect()
+    .widgets
+      padding: 8px
+      .widget-wrapper.toc
+        background: var(--alpha100)
+  .widget-wrapper.toc .toc
+    a
+      color: var(--text-p2)
+  .widget-wrapper.toc .widget-footer
+    a
+      background: var(--block)
+    a+a
+      margin-top: 4px

source/css/_layout/widgets/widgets.styl

@@ -58,19 +58,21 @@
 
 .widget-wrapper
   display: block
+  padding-bottom: 32px
 
 .l_left .widgets
   margin: 0 var(--gap-margin)
   .widget-wrapper
-    margin: 32px 0
+    &:first-child
+      margin-top: 32px
 
+.l_right
+  --gap-margin: 0
 .l_right .widgets
   .widget-wrapper
-    margin-top: 8px
-    margin-bottom: 32px
     .widget-header
-      padding-left: var(--gap-max)
+      padding-left: var(--gap-padding)
-      padding-right: var(--gap-max)
+      padding-right: var(--gap-padding)
     &:not(.toc)
       margin-left: var(--gap-margin)
       margin-right: var(--gap-margin)

source/js/main.js

@@ -54,6 +54,10 @@ const util = {
       el.classList.toggle("display");
     }
   },
+
+  scrollTop: () => {
+    window.scrollTo({top: 0, behavior: "smooth"});
+  },
 }
 
 const hud = {