hexo-theme-volantis 5.8.0 → 6.0.0

package/scripts/tags/friends.js

@@ -7,19 +7,19 @@
 
 'use strict';
 
-hexo.extend.tag.register('friends', function(args) {
+hexo.extend.tag.register('friends', function (args) {
   args = hexo.args.map(args, ['only', 'not', 'repo', 'api']);
   if (args.only) {
-    if(/::/g.test(args.only)){
+    if (/::/g.test(args.only)) {
       args.only = args.only.split('::');
-    }else{
+    } else {
       args.only = args.only.split(',');
     }
   }
   if (args.not) {
-    if(/::/g.test(args.not)){
+    if (/::/g.test(args.not)) {
       args.not = args.not.split('::');
-    }else{
+    } else {
       args.not = args.not.split(',');
     }
   }
@@ -39,10 +39,10 @@ hexo.extend.tag.register('friends', function(args) {
   function groupHeader(group) {
     var header = '<div class="group-header">';
     if (group.title) {
-      header += hexo.render.renderSync({text: group.title, engine: 'markdown'}).split('\n').join('');
+      header += hexo.render.renderSync({ text: group.title, engine: 'markdown' }).split('\n').join('');
     }
     if (group.description) {
-      header += hexo.render.renderSync({text: group.description, engine: 'markdown'}).split('\n').join('');
+      header += hexo.render.renderSync({ text: group.description, engine: 'markdown' }).split('\n').join('');
     }
     header += '</div>';
     return header;
@@ -72,7 +72,7 @@ hexo.extend.tag.register('friends', function(args) {
         if (group.repo) {
           el += '<div class="friendsjs-wrap"';
           el += ' id="friends-api"';
-          el += ' api="' + (group.api || 'https://issues-api.vercel.app') + '/v1/' + group.repo + '"';
+          el += ' api="' + (group.api || 'https://issues-api.xaoxuu.com') + '/v1/' + group.repo + '"';
           el += '>';
           el += '<div class="loading-wrap"><svg class="loading" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709"><path d="M832 512c0-176-144-320-320-320V128c211.2 0 384 172.8 384 384h-64zM192 512c0 176 144 320 320 320v64C300.8 896 128 723.2 128 512h64z" p-id="2710"></path></svg><p></p></div>';
           el += '<div class="group-body"></div>';

package/scripts/tags/ghcard.js

@@ -6,11 +6,11 @@
 
 // {% ghcard volantis-x %}
 // {% ghcard volantis-x/hexo-theme-volantis %}
-hexo.extend.tag.register('ghcard', function(args) {
-  if(/::/g.test(args)){
+hexo.extend.tag.register('ghcard', function (args) {
+  if (/::/g.test(args)) {
     args = args.join(' ').split('::');
   }
-  else{
+  else {
     args = args.join(' ').split(',');
   }
   const path = args[0].trim();
@@ -20,10 +20,10 @@ hexo.extend.tag.register('ghcard', function(args) {
   if (path.includes('/')) {
     // is repo
     const ps = path.split('/');
-    url += 'https://github-readme-stats.vercel.app/api/pin/?username=' + ps[0] + '&repo=' + ps[1];
+    url += 'https://github-readme-stats.xaoxuu.com/api/pin/?username=' + ps[0] + '&repo=' + ps[1];
   } else {
     // is user
-    url += 'https://github-readme-stats.vercel.app/api/?username=' + path;
+    url += 'https://github-readme-stats.xaoxuu.com/api/?username=' + path;
   }
   if (args.length > 1) {
     for (let i = 1; i < args.length; i++) {
@@ -39,11 +39,11 @@ hexo.extend.tag.register('ghcard', function(args) {
   return card;
 });
 
-hexo.extend.tag.register('ghcardgroup', function(args, content) {
+hexo.extend.tag.register('ghcardgroup', function (args, content) {
   let ret = '';
   // wrap
   ret += '<div class="ghcard-group">';
   ret += content;
   ret += '</div>';
   return ret;
-}, {ends: true});
+}, { ends: true });

package/scripts/tags/image.js

@@ -11,11 +11,11 @@
 // {% image url, bg=#eee %}
 // {% image url, alt=haha, width=400px %}
 // {% image url, alt=haha, width=400px, bg=#eee %}
-hexo.extend.tag.register('image', function(args) {
-  if(/::/g.test(args)){
+hexo.extend.tag.register('image', function (args) {
+  if (/::/g.test(args)) {
     args = args.join(' ').split('::');
   }
-  else{
+  else {
     args = args.join(' ').split(',');
   }
   const url = args[0].trim();
@@ -74,11 +74,11 @@ hexo.extend.tag.register('image', function(args) {
 
 // {% inlineimage url %}
 // {% inlineimage url, height=22px %}
-hexo.extend.tag.register('inlineimage', function(args) {
-  if(/::/g.test(args)){
+hexo.extend.tag.register('inlineimage', function (args) {
+  if (/::/g.test(args)) {
     args = args.join(' ').split('::');
   }
-  else{
+  else {
     args = args.join(' ').split(',');
   }
   const url = args[0].trim();

package/scripts/tags/inline-labels.js

@@ -1,21 +1,21 @@
 'use strict';
 
 
-hexo.extend.tag.register('u', function(args) {
+hexo.extend.tag.register('u', function (args) {
   return `<u>${args.join(' ')}</u>`;
 });
-hexo.extend.tag.register('emp', function(args) {
+hexo.extend.tag.register('emp', function (args) {
   return `<emp>${args.join(' ')}</emp>`;
 });
-hexo.extend.tag.register('wavy', function(args) {
+hexo.extend.tag.register('wavy', function (args) {
   return `<wavy>${args.join(' ')}</wavy>`;
 });
-hexo.extend.tag.register('del', function(args) {
+hexo.extend.tag.register('del', function (args) {
   return `<del>${args.join(' ')}</del>`;
 });
-hexo.extend.tag.register('kbd', function(args) {
+hexo.extend.tag.register('kbd', function (args) {
   return `<kbd>${args.join(' ')}</kbd>`;
 });
-hexo.extend.tag.register('psw', function(args) {
+hexo.extend.tag.register('psw', function (args) {
   return `<psw>${args.join(' ')}</psw>`;
 });

package/scripts/tags/link.js

@@ -2,11 +2,11 @@
 
 // {% link title, url %}
 // {% link title, url, img %}
-hexo.extend.tag.register('link', function(args) {
-  if(/::/g.test(args)){
+hexo.extend.tag.register('link', function (args) {
+  if (/::/g.test(args)) {
     args = args.join(' ').split('::');
   }
-  else{
+  else {
     args = args.join(' ').split(',');
   }
   let text = '';
@@ -36,10 +36,10 @@ hexo.extend.tag.register('link', function(args) {
   return result;
 });
 
-hexo.extend.tag.register('linkgroup', function(args, content) {
+hexo.extend.tag.register('linkgroup', function (args, content) {
   let ret = '';
   ret += '<div class="link-group">';
   ret += content;
   ret += '</div>';
   return ret;
-}, {ends: true});
+}, { ends: true });

package/scripts/tags/md.js

@@ -1,13 +1,13 @@
 
-hexo.extend.tag.register('md', function(args) {
-  const {config} = hexo;
+hexo.extend.tag.register('md', function (args) {
+  const { config } = hexo;
   const md_path = args[0].trim();
   let md_id = "md-" + hexo.createUuid()
   let mat = `
   <div id="${md_id}" class="tag-md markdown-body"></div>
   <script>
   (()=>{
-    volantis.css("${hexo.theme.config.plugins.markdown}");
+    volantis.css("${hexo.theme.config.cdn.markdown}");
     const contentEl = document.getElementById("${md_id}");
     const loadMarkdown = (url) => {
       if (!window.fetch) {
@@ -48,7 +48,7 @@ hexo.extend.tag.register('md', function(args) {
           });
       };
     };
-    volantis.js("${hexo.theme.config.plugins.marked}").then(()=>{
+    volantis.js("${hexo.theme.config.cdn.marked}").then(()=>{
       loadMarkdown("${md_path}?t=" + new Date().getTime());
     })
   })();

package/scripts/tags/media.js

@@ -6,7 +6,7 @@ function postAudio(args) {
 }
 
 function postVideo(args) {
-  const {config} = hexo;
+  const { config } = hexo;
   const src = args[0].trim();
   // m3u8 https://github.com/volantis-x/hexo-theme-volantis/issues/606
   // 文件扩展名为 .m3u8
@@ -14,7 +14,7 @@ function postVideo(args) {
     let video_id = `video-${hexo.createUuid()}`
     return `<div clsss="video"><video id="${video_id}" controls loop="false" width="100%"></video></div>
         <script>
-          volantis.js("${hexo.theme.config.plugins.hlsjs}").then(()=>{
+          volantis.js("${hexo.theme.config.cdn.hlsjs}").then(()=>{
             var video = document.getElementById('${video_id}');
             if(Hls.isSupported()) {
               var hls = new Hls();
@@ -30,10 +30,10 @@ function postVideo(args) {
 }
 
 function postVideos(args, content) {
-  if(/::/g.test(args)){
+  if (/::/g.test(args)) {
     args = args.join(' ').split('::');
   }
-  else{
+  else {
     args = args.join(' ').split(',');
   }
   var cls = args[0];
@@ -50,4 +50,4 @@ function postVideos(args, content) {
 
 hexo.extend.tag.register('audio', postAudio);
 hexo.extend.tag.register('video', postVideo);
-hexo.extend.tag.register('videos', postVideos, {ends: true});
+hexo.extend.tag.register('videos', postVideos, { ends: true });

package/scripts/tags/note.js

@@ -6,19 +6,19 @@
 
 // {% note style, content %}
 function postNote(args) {
-  if(/::/g.test(args)){
+  if (/::/g.test(args)) {
     args = args.join(' ').split('::');
   }
-  else{
+  else {
     args = args.join(' ').split(',');
   }
   if (args.length > 1) {
     const cls = args[0].trim();
     const text = args[1].trim();
-    return `<div class="note ${cls}">${hexo.render.renderSync({text: text, engine: 'markdown'}).split('\n').join('')}</div>`;
+    return `<div class="note ${cls}">${hexo.render.renderSync({ text: text, engine: 'markdown' }).split('\n').join('')}</div>`;
   } else if (args.length > 0) {
     const text = args[0].trim();
-    return `<div class="note">${hexo.render.renderSync({text: text, engine: 'markdown'}).split('\n').join('')}</div>`;
+    return `<div class="note">${hexo.render.renderSync({ text: text, engine: 'markdown' }).split('\n').join('')}</div>`;
   }
 }
 
@@ -26,10 +26,10 @@ function postNote(args) {
 // content
 // {% endnoteblock %}
 function postNoteBlock(args, content) {
-  if(/::/g.test(args)){
+  if (/::/g.test(args)) {
     args = args.join(' ').split('::');
   }
-  else{
+  else {
     args = args.join(' ').split(',');
   }
   if (args.length < 1) {
@@ -42,7 +42,7 @@ function postNoteBlock(args, content) {
     const title = args[1].trim();
     ret += '<p><strong>' + title + '</strong></p>';
   }
-  ret += hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('');
+  ret += hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('');
   ret += '</div>';
   return ret;
 }
@@ -53,19 +53,19 @@ hexo.extend.tag.register('note', postNote);
 // {% blocknote style, title %}
 // content
 // {% endblocknote %}
-hexo.extend.tag.register('blocknote', postNoteBlock, {ends: true});
+hexo.extend.tag.register('blocknote', postNoteBlock, { ends: true });
 // 兼容 noteblock
-hexo.extend.filter.register('before_post_render', function(data) {
-  data.content = data.content.replace(/{%\s+noteblock(.*)%}/g, (p,q)=>{
+hexo.extend.filter.register('before_post_render', function (data) {
+  data.content = data.content.replace(/{%\s+noteblock(.*)%}/g, (p, q) => {
     return `{% blocknote ${q} %}`
   });
   data.content = data.content.replace(/{%\s+endnoteblock\s+%}/g, '{% endblocknote %}');
   return data;
 });
 // 兼容 noteblock 失败
-hexo.extend.tag.register('noteblock', postNoteBlockDeprecated, {ends: true});
+hexo.extend.tag.register('noteblock', postNoteBlockDeprecated, { ends: true });
 function postNoteBlockDeprecated(args, content) {
-    throw new Error(`
+  throw new Error(`
 ==================================================================================
         {% noteblock %} is deprecated. Use {% blocknote %} instead.
         see: https://github.com/volantis-x/hexo-theme-volantis/issues/712

package/scripts/tags/pandown.js

@@ -1,33 +1,33 @@
 'use strict';
 
 // {% pandown type, url, pwd, fname %}
-hexo.extend.tag.register('pandown', function(args) {
-    if(/::/g.test(args)){
-        args = args.join(' ').split('::');
-    }
-    else{
-        args = args.join(' ').split(',');
-    }
-    let type = '';
-    let url = '';
-    let pwd = '';
-    let fname = '';
-    if (args.length < 4) {
-        return;
-    } else if (args[0].trim() === 'yun') {
-        return '<p>对不起，pandown-tags不支持自定义</p><br><p>Sorry, pandown-tags does not support customization</p>'
-    } else {
-        type = args[0].trim();
-        url = args[1].trim();
-        pwd = args[2].trim();
-        fname = args[3].trim();
-    }
-    let result = '';
-    // js
-    result += '<div class="tag pandown-tags">';
-    //pandown
-    result += '<pandown type="'+type+'" url="'+url+'" pwd="'+pwd+'" fname="'+fname+'"></pandown>'
-    //调用
-    result += '<script>volantis.js("https://unpkg.com/pandown").then(pandown)</script></div>'
-    return result;
+hexo.extend.tag.register('pandown', function (args) {
+  if (/::/g.test(args)) {
+    args = args.join(' ').split('::');
+  }
+  else {
+    args = args.join(' ').split(',');
+  }
+  let type = '';
+  let url = '';
+  let pwd = '';
+  let fname = '';
+  if (args.length < 4) {
+    return;
+  } else if (args[0].trim() === 'yun') {
+    return '<p>对不起，pandown-tags不支持自定义</p><br><p>Sorry, pandown-tags does not support customization</p>'
+  } else {
+    type = args[0].trim();
+    url = args[1].trim();
+    pwd = args[2].trim();
+    fname = args[3].trim();
+  }
+  let result = '';
+  // js
+  result += '<div class="tag pandown-tags">';
+  //pandown
+  result += '<pandown type="' + type + '" url="' + url + '" pwd="' + pwd + '" fname="' + fname + '"></pandown>'
+  //调用
+  result += '<script>volantis.js("https://unpkg.com/pandown").then(pandown)</script></div>'
+  return result;
 });

package/scripts/tags/site.js

@@ -7,7 +7,7 @@
 
 'use strict';
 
-hexo.extend.tag.register('sites', function(args) {
+hexo.extend.tag.register('sites', function (args) {
   args = hexo.args.map(args, ['only', 'not', 'repo', 'api']);
   if (args.only) {
     args.only = args.only.split(',');
@@ -31,10 +31,10 @@ hexo.extend.tag.register('sites', function(args) {
   function groupHeader(group) {
     var header = '<div class="group-header">';
     if (group.title) {
-      header += hexo.render.renderSync({text: group.title, engine: 'markdown'}).split('\n').join('');
+      header += hexo.render.renderSync({ text: group.title, engine: 'markdown' }).split('\n').join('');
     }
     if (group.description) {
-      header += hexo.render.renderSync({text: group.description, engine: 'markdown'}).split('\n').join('');
+      header += hexo.render.renderSync({ text: group.description, engine: 'markdown' }).split('\n').join('');
     }
     header += '</div>';
     return header;
@@ -68,7 +68,7 @@ hexo.extend.tag.register('sites', function(args) {
         if (group.repo) {
           el += '<div class="sitesjs-wrap"';
           el += ' id="sites-api"';
-          el += ' api="' + (group.api || 'https://issues-api.vercel.app') + '/v1/' + group.repo + '"';
+          el += ' api="' + (group.api || 'https://issues-api.xaoxuu.com') + '/v1/' + group.repo + '"';
           el += '>';
           el += '<div class="loading-wrap"><svg class="loading" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709"><path d="M832 512c0-176-144-320-320-320V128c211.2 0 384 172.8 384 384h-64zM192 512c0 176 144 320 320 320v64C300.8 896 128 723.2 128 512h64z" p-id="2710"></path></svg><p></p></div>';
           el += '<div class="group-body"></div>';

package/scripts/tags/span.js

@@ -1,10 +1,10 @@
 'use strict';
 
 function postP(args) {
-  if(/::/g.test(args)){
+  if (/::/g.test(args)) {
     args = args.join(' ').split('::');
   }
-  else{
+  else {
     args = args.join(' ').split(',');
   }
   const p0 = args[0].trim();
@@ -12,10 +12,10 @@ function postP(args) {
   return `<p class='p ${p0}'>${p1}</p>`;
 }
 function postSpan(args) {
-  if(/::/g.test(args)){
+  if (/::/g.test(args)) {
     args = args.join(' ').split('::');
   }
-  else{
+  else {
     args = args.join(' ').split(',');
   }
   const p0 = args[0].trim();

package/scripts/tags/table.js

@@ -11,9 +11,9 @@
 function postTable(args, content) {
   let ret = '';
   ret += '<div class="table">';
-  ret += hexo.render.renderSync({text: content, engine: 'markdown'});
+  ret += hexo.render.renderSync({ text: content, engine: 'markdown' });
   ret += '</div>';
   return ret;
 }
 
-hexo.extend.tag.register('table', postTable, {ends: true});
+hexo.extend.tag.register('table', postTable, { ends: true });

package/scripts/tags/tabs.js

@@ -7,10 +7,10 @@
 function postTabs(args, content) {
   var tabBlock = /<!--\s*tab (.*?)\s*-->\n([\w\W\s\S]*?)<!--\s*endtab\s*-->/g;
 
-  if(/::/g.test(args)){
+  if (/::/g.test(args)) {
     args = args.join(' ').split('::');
   }
-  else{
+  else {
     args = args.join(' ').split(',');
   }
   var tabName = args[0];
@@ -31,36 +31,36 @@ function postTabs(args, content) {
 
   for (var i = 0; i < matches.length; i += 2) {
     var tabParameters = matches[i].split('@');
-    var postContent   = matches[i + 1];
-    var tabCaption    = tabParameters[0] || '';
-    var tabIcon       = tabParameters[1] || '';
-    var tabHref       = '';
+    var postContent = matches[i + 1];
+    var tabCaption = tabParameters[0] || '';
+    var tabIcon = tabParameters[1] || '';
+    var tabHref = '';
 
 
     // 兼容aplayer插件 https://github.com/volantis-x/hexo-theme-volantis/issues/575
-    var aplayerTag=0
-    var aplayerTagReg=/\<div.*class=\"aplayer aplayer-tag-marker\"(.|\n)*\<\/script\>/g
-    if(/class="aplayer aplayer-tag-marker"/g.test(postContent)){
-      aplayerTag=aplayerTagReg.exec(postContent)[0]
-      postContent=postContent.replace(aplayerTagReg,"@aplayerTag@")
+    var aplayerTag = 0
+    var aplayerTagReg = /\<div.*class=\"aplayer aplayer-tag-marker\"(.|\n)*\<\/script\>/g
+    if (/class="aplayer aplayer-tag-marker"/g.test(postContent)) {
+      aplayerTag = aplayerTagReg.exec(postContent)[0]
+      postContent = postContent.replace(aplayerTagReg, "@aplayerTag@")
     }
 
     // 兼容 gallery 标签
-    var fancyboxTag=0
+    var fancyboxTag = 0
     var fancyboxTagReg = /\<div.*galleryFlag(.|\n)*\<\/span\>\<\/div\>\<\/div\>/g
-    if(/galleryFlag/g.test(postContent)) {
-      fancyboxTag=fancyboxTagReg.exec(postContent)[0]
-      postContent=postContent.replace(fancyboxTagReg,"@fancyboxTag@")
+    if (/galleryFlag/g.test(postContent)) {
+      fancyboxTag = fancyboxTagReg.exec(postContent)[0]
+      postContent = postContent.replace(fancyboxTagReg, "@fancyboxTag@")
     }
 
-    postContent = hexo.render.renderSync({text: postContent, engine: 'markdown'}).trim();
+    postContent = hexo.render.renderSync({ text: postContent, engine: 'markdown' }).trim();
 
-    if(aplayerTag){
-      postContent=postContent.replace(/\<pre\>\<code\>.*@aplayerTag@.*\<\/code><\/pre>/,aplayerTag)
+    if (aplayerTag) {
+      postContent = postContent.replace(/\<pre\>\<code\>.*@aplayerTag@.*\<\/code><\/pre>/, aplayerTag)
     }
 
-    if(fancyboxTag){
-      postContent=postContent.replace(/.*@fancyboxTag@.*/,fancyboxTag)
+    if (fancyboxTag) {
+      postContent = postContent.replace(/.*@fancyboxTag@.*/, fancyboxTag)
     }
 
     tabId += 1;
@@ -84,6 +84,6 @@ function postTabs(args, content) {
   return `<div class="tabs" id="tab-${tabName.toLowerCase().split(' ').join('-')}">${tabNav + tabContent}</div>`;
 }
 
-hexo.extend.tag.register('tabs', postTabs, {ends: true});
-hexo.extend.tag.register('subtabs', postTabs, {ends: true});
-hexo.extend.tag.register('subsubtabs', postTabs, {ends: true});
+hexo.extend.tag.register('tabs', postTabs, { ends: true });
+hexo.extend.tag.register('subtabs', postTabs, { ends: true });
+hexo.extend.tag.register('subsubtabs', postTabs, { ends: true });

package/scripts/tags/timeline.js

@@ -13,23 +13,23 @@ function postTimeline(args, content) {
 }
 
 function postTimenode(args, content) {
-  if(/::/g.test(args)){
+  if (/::/g.test(args)) {
     args = args.join(' ').split('::');
   }
-  else{
+  else {
     args = args.join(' ').split(',');
   }
   var time = args[0];
-  return `<div class="timenode"><div class="meta"><p>${hexo.render.renderSync({text: time, engine: 'markdown'})}</p></div><div class="body">${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}</div></div>`;
+  return `<div class="timenode"><div class="meta"><p>${hexo.render.renderSync({ text: time, engine: 'markdown' })}</p></div><div class="body">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}</div></div>`;
 }
 
 
 // {% timeline %}
 // ... timenode ...
 // {% endtimeline %}
-hexo.extend.tag.register('timeline', postTimeline, {ends: true});
+hexo.extend.tag.register('timeline', postTimeline, { ends: true });
 
 // {% timenode time %}
 // what happened
 // {% endtimenode %}
-hexo.extend.tag.register('timenode', postTimenode, {ends: true});
+hexo.extend.tag.register('timenode', postTimenode, { ends: true });

package/source/css/_first/base_first.styl

@@ -37,7 +37,7 @@ html
   font-size: $fontsize-root
   >
     if hexo-config('custom_css.scrollbar.size')
-      scrollbar(convert(hexo-config('custom_css.scrollbar.size')), convert(hexo-config('custom_css.scrollbar.border')) || 0px, convert(hexo-config('custom_css.scrollbar.background')), convert(hexo-config('custom_css.scrollbar.hover_background')))
+      scrollbar(convert(hexo-config('custom_css.scrollbar.size')), convert(hexo-config('custom_css.scrollbar.border')) || 0px)
 
 body
   background-color: var(--color-site-body)

package/source/css/_style/_layout/article.styl

@@ -371,3 +371,46 @@ article .readmore
       border-bottom: 1px solid var(--color-meta);
       &:hover
         border-bottom-color: #ff5722
+.recommended-article
+  overflow: hidden
+  .recommended-article-header
+    margin-top: $gap * 0.5
+    margin-left: $gap * 0.5
+    margin-right: 0
+  .recommended-article-group
+    display: flex
+    flex-wrap: wrap
+    overflow: hidden
+    @media screen and (max-width: $device-tablet)
+      height: 190px
+      overflow: scroll
+      &::-webkit-scrollbar
+        width: 0 !important
+      -ms-overflow-style: none
+    .recommended-article-item
+      display: flex
+      flex-wrap: wrap
+      align-content: center;
+      justify-content: center;
+      align-items: center;
+      overflow: hidden
+      width: "calc(100%/3 - %s)" % $gap
+      @media screen and (max-width: $device-tablet)
+        width: "calc(100%/2 - %s)" % $gap
+      @media screen and (max-width: $device-mobile)
+        width: "calc(100% - %s)" % $gap
+      max-height: 200px
+      margin-top: $gap * 0.5
+      margin-left: $gap * 0.5
+      margin-right: 0
+      img
+        display: flex;
+        width: 100%
+        height: 150px
+      span
+        display: block
+        text-align: justify
+        display: -webkit-box
+        -webkit-box-orient: vertical
+        -webkit-line-clamp: 1;
+        overflow: hidden

package/source/css/_style/_layout/main.styl

@@ -13,7 +13,7 @@
       text-align: center
   #s-top
     trans(0.6s)
-    z-index: 9
+    z-index: 50
     position: fixed
     width: 48px
     height: 48px