css

scripts/tags/about.js

@@ -8,21 +8,26 @@
  */
 
 'use strict';
+const url_for = require('hexo-util').url_for.bind(hexo);
+const i18n = require('hexo-i18n');
 
 hexo.extend.tag.register('about', function(args, content) {
-  args = hexo.args.map(args, ['avatar', 'height', 'border']);
+  args = hexo.args.map(args, ['avatar', 'height', 'border', 'back']);
   var rows = hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n');
   var el = '';
   // wrapper
   el += '<div class="tag-plugin about">';
-  el += '<div class="about-header">';
+  if (args.back) {
+    el += '<a class="nav-back cap" href="' + url_for(hexo.config.root) + '">';
+    el += '<svg aria-hidden="true" viewBox="0 0 16 16" width="1rem" height="1rem" fill="currentColor"><path fill-rule="evenodd" d="M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z"></path></svg>';
+    el += '<span>Back</span>';
+    el += '</a>';
+  }
   // avatar
   var avatar_url = args.avatar;
-  if (args.avatar === undefined) {
-     avatar_url = hexo.config.avatar;
-  }
   if (avatar_url) {
-    el += '<div class="avatar">'
+    el += '<div class="about-header">';
+    el += '<div class="avatar">';
     el += '<img src="' + avatar_url + '"';
     if (args.border && args.border.length > 0) {
       el += ' style="border-radius:' + args.border + '"';
@@ -32,8 +37,8 @@ hexo.extend.tag.register('about', function(args, content) {
     }
     el += '/>';
     el += '</div>';
+    el += '</div>';
   }
-  el += '</div>';
 
   // content
   el += '<div class="about-body fs14">';

source/css/_layout/list.styl

@@ -25,7 +25,7 @@
     display: flex
     flex-wrap: wrap
     align-items: center
-    margin: .5rem 0
+    margin: 0.25rem 0
     line-height: 1.5
     span+span
       margin-left: 0.5rem
@@ -94,15 +94,21 @@
         bottom: 0
         background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0.3))
       div+div
-        margin-top: 8px
+        margin-top: 4px
-        @media screen and (max-width: $device-mobile)
-          margin-top: 4px
       .cap
         color: white
         font-size: $fs-13
       .title
         font-weight: 500
         font-size: $fs-h3
+      @media screen and (max-width: $device-mobile)
+        padding: 1rem
+        div+div
+          margin-top: 2px
+        .title
+          font-size: $fs-h4
+        .cap
+          font-size: $fs-12
   h2
     margin: .25rem 0
     font-size: $fs-h4

source/css/_layout/sidebar/ghrepo.styl

@@ -27,6 +27,7 @@
         margin: 0.75rem 0.5rem
       .grid
         font-size: $fs-13
+        margin: 0.75rem 0.5rem
         display: grid
         grid-gap: 2px
         grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 2px)

source/css/_layout/sidebar/ghuser.styl

@@ -50,6 +50,9 @@
 .widget-wrap#github-user .widget-body .menu 
   margin-bottom: 0
   background: none
+  a:hover 
+    box-shadow: none 
+    background: var(--block)
   a.active 
     box-shadow: none
     position: relative

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

@@ -2,6 +2,32 @@
   background: var(--block)
   border-radius: $border-card
   padding: 2rem
+  position: relative
+  .nav-back
+    position: absolute
+    line-height: 1
+    overflow: hidden
+    left: 1rem
+    top: 1rem
+    display: flex
+    align-items: center
+    background: var(--site-bg)
+    border-radius: 40px
+    border: 1px solid var(--block-border)
+    padding: 2px 0
+    svg,span
+      trans1 transform
+      width: 36px
+    span
+      position: absolute
+      text-align: center
+      left: 100%
+    &:hover
+      background: var(--card)
+      svg  
+        transform: translateX(-36px)
+      span
+        transform: translateX(-100%)
   .about-header
     display flex
     justify-content: center