css

_config.yml

@@ -25,7 +25,7 @@ sidebar:
     # about: '[关于](/about/)'
   # Sidebar widgets
   widget_layout:
-    index: [welcome, recent] # for home/wiki/categories/tags/archives/404 pages
+    index: [welcome, recent, ghuser_mini] # for home/wiki/categories/tags/archives/404 pages
     page: [welcome, toc] # for pages using 'layout:page'
     post: [toc, repo_info] # for pages using 'layout:post'
     wiki: [toc, repo_info, wiki_more] # for pages using 'layout:wiki'
@@ -47,6 +47,13 @@ sidebar:
       layout: ghuser
       api: https://api.github.com
       username: # your github login username
+      avatar: true
+    ghuser_mini:
+      layout: ghuser
+      header: # GitHub Info
+      api: https://api.github.com
+      username: # your github login username
+      avatar: false
     # welcome
     welcome:
       layout: markdown

layout/_partial/sidebar/widgets/ghuser.ejs

@@ -23,18 +23,25 @@ function layoutDiv() {
   }
   
   el += '<div class="widget-wrap" id="github-user">';
-  el += '<div class="widget-body fs14 stellar-ghinfo-api" api="' + item.api + '/users/' + item.username + '">';
+  // header
-    el += '<div><img no-lazy class="avatar" type="img" id="avatar_url" src="' + config.avatar + '"></div>';
+  if (item.header && item.header.length > 0) {
-    // username
+    el += '<div class="widget-header cap dis-select">';
-    el += '<div class="username" type="text" id="name" href="https://github.com/' + item.username + '">';
+    el += '<span class="name">' + item.header + '</span>';
-    el += item.username;
     el += '</div>';
-    el += '<p type="text" id="bio"></p>';
+  }
+  // body
+  el += '<div class="widget-body stellar-ghinfo-api" api="' + item.api + '/users/' + item.username + '">';
+    if (item.avatar) {
+      el += '<div class="avatar" ><img no-lazy type="img" id="avatar_url" src="' + config.avatar + '"></div>';
+    }
+    // username
+    el += '<p class="username" type="text" id="name" href="https://github.com/' + item.username + '">&nbsp;</p>';
+    el += '<p class="bio" type="text" id="bio">&nbsp;</p>';
     
     el += '<div class="buttons">';
       btns.forEach((btn, i) => {
         el += '<a class="btn" href="' + btn.href + '">';
-        el += '<span class="title" type="text" id="' + btn.key + '"></span>';
+        el += '<span class="title" type="text" id="' + btn.key + '">0</span>';
         el += '<span class="desc">' + btn.desc + '</span>';
         el += '</a>';
       });

source/css/_common/base.styl

@@ -15,32 +15,9 @@ a
 // md > a
 p:not([class]), li:not([class])
   a:not([class])
-    position: relative
     margin: 0 1px
     padding: 2px
-    &:after
+    text-decoration: underline
-      content: ''
-      position: absolute
-      border-radius: 2px
-      bottom: 0
-      left: 2px
-      right: 2px
-      height: 1px
-      opacity: 0.5
-      background: $color-link
-      trans1: all
-    &:hover
-      border-bottom: none
-      color: $color-link
-      // color: darken($color-hover, 10)
-      // background: alpha($color-hover, 0.08)
-      &:after
-        height: 100%
-        opacity: 0.2
-        bottom: 0
-        left: 0
-        right: 0
-        // background-color: alpha($color-hover, 0.08)
 
 hr
   color: var(--text-meta)

source/css/_layout/md.styl

@@ -129,3 +129,32 @@ article.md img
   border-radius: $border-image
   margin: auto
   display: block
+
+article.md 
+  p:not([class]), li:not([class])
+    a:not([class])
+      position: relative
+      text-decoration: none
+      &:after
+        content: ''
+        position: absolute
+        border-radius: 2px
+        bottom: 0
+        left: 2px
+        right: 2px
+        height: 1px
+        opacity: 0.5
+        background: $color-link
+        trans1: all
+      &:hover
+        border-bottom: none
+        color: $color-link
+        // color: darken($color-hover, 10)
+        // background: alpha($color-hover, 0.08)
+        &:after
+          height: 100%
+          opacity: 0.2
+          bottom: 0
+          left: 0
+          right: 0
+          // background-color: alpha($color-hover, 0.08)

source/css/_layout/partial/paginator.styl

@@ -12,6 +12,10 @@
   &:hover
   .paginator
     text-align: center
+    &.next
+      border-left: 1px dashed var(--block-border)
+    &.prev
+      border-right: 1px dashed var(--block-border)
   .current
     font-family: $ff-code
     color: var(--text-p3)

source/css/_layout/sidebar/ghuser.styl

@@ -1,25 +1,32 @@
+.widget-wrap#github-user
+  .widget-header+.widget-body
+    margin: 0.75rem 0
 .widget-wrap#github-user .widget-body
-  display: flex
+  text-align: center
-  flex-direction: column
-  align-items: center
   background: var(--card)
   border-radius: $border-card
-  padding: 2rem 1rem 1rem
+  padding: 1rem
-  margin: 'calc(%s + 1.25rem)' % var(--gap-p) 0
 
 .widget-wrap#github-user .widget-body .avatar
   display: block
   border-radius: 100%
-  margin: auto
+  margin: 1rem auto 1.25rem auto
-  max-width: 80%
+  max-width: 75%
+  overflow: hidden
+  img 
+    display: block
   @media screen and (max-width: $device-tablet)
     max-width: 50%
 
 .widget-wrap#github-user .widget-body .username
   font-weight: 900
   font-size: $fs-h2
-  margin-top: 1.5rem
   color: var(--text-p0)
+  margin: 0.5rem 0
+
+.widget-wrap#github-user .widget-body .bio
+  font-size: $fs-13
+  margin: 0.5rem 0
 
 .widget-wrap#github-user .widget-body .follow 
   font-weight: 500
@@ -36,14 +43,14 @@
   justify-content: center
   trans1: background
   svg
-    margin-right: 4px
+    margin-right: 6px
   &:hover
     background: $color-hover
 
   
 
 .widget-wrap#github-user .widget-body .buttons
-  margin: 0.75rem 0
+  margin: 1rem 0
   align-self: stretch
   display: grid
   grid-gap: 2px

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

@@ -1,6 +1,9 @@
+article.md.content>.tag-plugin.about:first-child
+  margin-top: 0
+
 .tag-plugin.about
   background: var(--block)
-  border-radius: $border-block
+  border-radius: $border-card
   padding: 3rem 2rem 2rem
   .about-header
     display flex

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

@@ -100,11 +100,13 @@
   display: flex
   flex-wrap: wrap
   justify-content: space-between
-  align-items: center
+  align-items: stretch
   position: sticky
   position: -webkit-sticky
   bottom: -0.5rem
   background: var(--card)
+  .key, .value  
+    line-height: 1
   &:empty
     display: none
   .label:first-child
@@ -113,45 +115,50 @@
     margin-right: 0
   
 
-
-
 .tag-plugin.timeline.stellar-timeline-api .body .footer .labels
   display: flex
   flex-wrap: wrap
   font-size: $fs-12
+  line-height: 1.8
+  align-items: stretch
 
 .tag-plugin.timeline.stellar-timeline-api .body .footer .reactions
   display: flex
+  align-items: stretch
   flex-wrap: wrap
   font-size: $fs-13
+  line-height: 1.8
   .reaction 
-    border: 1px dashed var(--block-border)
+    border: 1px dashed var(--block)
+    display: flex
+    align-items: center
 
 
 .tag-plugin.timeline.stellar-timeline-api .body .footer .label 
-  color: white
+  border-width: 1px
-  text-shadow: 0 0 2px rgba(0, 0, 0, 0.3)
+  border-style: solid
+  display: flex 
+  align-items: center
 
 .tag-plugin.timeline.stellar-timeline-api .body .footer a.comments 
-  border-radius: 64px
+  display: flex
-  border: 1px solid var(--block-border)
+  align-items: center
+  border-radius: 4px
   padding: 0 0.5rem
-  color: inherit
+  color: white
   trans1: all
+  margin-left: 2px
+  background: $color-theme
   .key
     margin-right: 4px
   &:hover
-    background: $color-theme
+    background: $color-hover
-    border: 1px solid $color-theme
-    color: var(--card)
-    background: var(--text-p1)
-    border: 1px solid var(--text-p1)
 
 
 .tag-plugin.timeline.stellar-timeline-api .body .footer .label,
 .tag-plugin.timeline.stellar-timeline-api .body .footer .reaction
-  margin: 0 0.25rem
+  margin: 0 2px
-  border-radius: 64px
+  border-radius: 4px
   padding: 0 0.5rem
   .key
     margin-right: 4px

source/js/plugins/timeline.js

@@ -67,7 +67,7 @@ const StellarTimeline = {
           var cell = '<div class="timenode" index="' + i + '">';
           cell += '<div class="header">';
           let date = new Date(item.created_at);
-          cell += '<p>' + date + '</p>';
+          cell += '<p>' + date.toString().replace(/\sGMT([^.]*)/i, "") + '</p>';
           cell += '</div>';
           cell += '<div class="body">';
           cell += '<p class="title">' + item.title + '</p>';
@@ -75,8 +75,8 @@ const StellarTimeline = {
           cell += '<div class="footer">';
           cell += '<div class="labels">';
           item.labels.forEach((label, i) => {
-            cell += '<div class="label ' + label.name + '" style="background:#' + label.color + '">';
+            cell += '<div class="label ' + label.name + '" style="background:#' + label.color + '12;border-color:#' + label.color + '22">';
-            cell += label.name;
+            cell += '<span>' + label.name + '</span>';
             cell += '</div>';
           });
           cell += '</div>';