💄 UI

Bubble/article.ftl

@@ -40,6 +40,7 @@
     <#include "macro-header.ftl">
     <@header type="article"></@header>
     <div class="article__top" style="background-image: url(${article.articleImg1URL})">
+        <div style="background-image: url(${article.articleImg1URL})"></div>
         <canvas id="articleTop"></canvas>
     </div>
     <div class="article">

Bubble/css/base.scss

@@ -19,7 +19,7 @@
  * skin style
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
- * @version 0.1.0.1, Jul 9, 2019
+ * @version 0.1.1.0, Jul 13, 2019
  */
 @import "../../../scss/reset";
 @import "../../../scss/usite";
@@ -662,14 +662,23 @@ a {
   &__top {
     width: 100%;
     height: 50vh;
-    background-size: cover;
-    background-position: center center;
-    max-width: 1404px;
-    filter: sepia(0.2) contrast(1.3);
     position: relative;
     z-index: 1;
+    background-position: center;
+    background-size: cover;
+
+    div {
+      max-width: 1404px;
+      background-size: cover;
+      background-position: center center;
+      filter: sepia(0.2) contrast(1.3);
+      height: 100%;
+      margin: 0 auto;
+    }
 
     canvas {
+      position: absolute;
+      top: 0;
       height: 100%;
       width: 100%;
     }
@@ -751,6 +760,7 @@ a {
   padding-left: 3px;
   right: 20px;
   max-width: 160px;
+  display: none;
 
   &::-webkit-scrollbar {
     display: none;

Bubble/js/common.js

@@ -19,7 +19,7 @@
  * @fileoverview util and every page should be used.
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
- * @version 0.1.1.0, Apr 19, 2019
+ * @version 0.1.1.0, Jul 13, 2019
  */
 
 /**
@@ -79,8 +79,6 @@ var Skin = {
       }
     }, false)
 
-    $(window).scroll()
-
     new Ribbons({
       colorSaturation: '60%',
       colorBrightness: '50%',
@@ -96,6 +94,8 @@ var Skin = {
 
     if ($('#comments').length === 1) {
       return
+    } else {
+      $(window).scroll()
     }
 
     $('.header').circleMagic({
@@ -108,7 +108,14 @@ var Skin = {
   initArticle: function () {
     page.share()
 
-    initCanvas('articleTop');
+    initCanvas('articleTop')
+
+    $('.post__toc').css({
+      left: document.querySelector('.article__content').
+        getBoundingClientRect().right + 20,
+      right: 'auto',
+      display: 'block'
+    })
 
     var $articleTocs = $('.vditor-reset [id^=b3_solo_h]')
     var $articleToc = $('.article__toc')
@@ -153,6 +160,7 @@ var Skin = {
         $articleToc.find('li:last').addClass('current')
       }
     })
+    $(window).scroll()
   },
 }
 

Bubble/js/common.min.js

@@ -1 +1 @@
-var Skin={init:function(){$("#headerDown").click(function(){$("html, body").animate({scrollTop:$(window).height()},300)}),$(window).scroll(function(e){$(".fn__progress").attr("value",parseInt($(window).scrollTop())).attr("max",parseInt($("body").outerHeight()-$(window).height())),$(window).scrollTop()>$(window).height()/2-20?($(".side__menu").addClass("side__menu--edge"),$(".side__top").removeClass("side__top--bottom")):($(".side__menu").removeClass("side__menu--edge"),$(".side__top").addClass("side__top--bottom"))}),$(".side__menu").click(function(){$(".side__main").addClass("side__main--show").show()}),$(".side__bg, .side__close").click(function(){$(".side__main").removeClass("side__main--show"),setTimeout(function(){$(".side__main").hide()},1e3)}),$(".side__top").click(function(){$(this).hasClass("side__top--bottom")?Util.goBottom():Util.goTop()});var e=0,i=$(".header__h1").text();document.addEventListener("visibilitychange",function(){e&&clearTimeout(e),e=document.hidden?setTimeout(function(){document.title="(◍´꒳`◍) - "+i},500):(document.title="(*´∇｀*) 欢迎回来！",setTimeout(function(){document.title=i},1e3))},!1),$(window).scroll(),new Ribbons({colorSaturation:"60%",colorBrightness:"50%",colorAlpha:.5,colorCycleSpeed:5,verticalPosition:"random",horizontalSpeed:200,ribbonCount:3,strokeSize:0,parallaxAmount:-.2,animateSections:!0}),1!==$("#comments").length&&$(".header").circleMagic({clearOffset:.3,color:"rgba(255,255,255, .2)",density:.2,radius:15})},initArticle:function(){page.share(),initCanvas("articleTop");var a=$(".vditor-reset [id^=b3_solo_h]"),r=$(".article__toc");r.find("a").click(function(e){var i=$(this).attr("href");return window.location.hash=i,$(window).scrollTop($(i).offset().top),e.preventDefault(),e.stopPropagation(),!1}),$(window).scroll(function(e){if(0===$(".article__toc li").length)return!1;var i=[];a.each(function(e){i.push({id:this.id,offsetTop:$(this).offset().top})});for(var o=$(window).scrollTop(),t=0,n=i.length;t<n;t++)if(o<i[t].offsetTop){r.find("li").removeClass("current");var s=0<t?t-1:0;r.find('a[href="#'+i[s].id+'"]').parent().addClass("current");break}o>=i[i.length-1].offsetTop&&(r.find("li").removeClass("current"),r.find("li:last").addClass("current"))})}};$(document).ready(function(){Skin.init()});
+var Skin={init:function(){$("#headerDown").click(function(){$("html, body").animate({scrollTop:$(window).height()},300)}),$(window).scroll(function(e){$(".fn__progress").attr("value",parseInt($(window).scrollTop())).attr("max",parseInt($("body").outerHeight()-$(window).height())),$(window).scrollTop()>$(window).height()/2-20?($(".side__menu").addClass("side__menu--edge"),$(".side__top").removeClass("side__top--bottom")):($(".side__menu").removeClass("side__menu--edge"),$(".side__top").addClass("side__top--bottom"))}),$(".side__menu").click(function(){$(".side__main").addClass("side__main--show").show()}),$(".side__bg, .side__close").click(function(){$(".side__main").removeClass("side__main--show"),setTimeout(function(){$(".side__main").hide()},1e3)}),$(".side__top").click(function(){$(this).hasClass("side__top--bottom")?Util.goBottom():Util.goTop()});var e=0,t=$(".header__h1").text();document.addEventListener("visibilitychange",function(){e&&clearTimeout(e),e=document.hidden?setTimeout(function(){document.title="(◍´꒳`◍) - "+t},500):(document.title="(*´∇｀*) 欢迎回来！",setTimeout(function(){document.title=t},1e3))},!1),new Ribbons({colorSaturation:"60%",colorBrightness:"50%",colorAlpha:.5,colorCycleSpeed:5,verticalPosition:"random",horizontalSpeed:200,ribbonCount:3,strokeSize:0,parallaxAmount:-.2,animateSections:!0}),1!==$("#comments").length&&($(window).scroll(),$(".header").circleMagic({clearOffset:.3,color:"rgba(255,255,255, .2)",density:.2,radius:15}))},initArticle:function(){page.share(),initCanvas("articleTop"),$(".post__toc").css({left:document.querySelector(".article__content").getBoundingClientRect().right+20,right:"auto",display:"block"});var r=$(".vditor-reset [id^=b3_solo_h]"),a=$(".article__toc");a.find("a").click(function(e){var t=$(this).attr("href");return window.location.hash=t,$(window).scrollTop($(t).offset().top),e.preventDefault(),e.stopPropagation(),!1}),$(window).scroll(function(e){if(0===$(".article__toc li").length)return!1;var t=[];r.each(function(e){t.push({id:this.id,offsetTop:$(this).offset().top})});for(var o=$(window).scrollTop(),i=0,n=t.length;i<n;i++)if(o<t[i].offsetTop){a.find("li").removeClass("current");var s=0<i?i-1:0;a.find('a[href="#'+t[s].id+'"]').parent().addClass("current");break}o>=t[t.length-1].offsetTop&&(a.find("li").removeClass("current"),a.find("li:last").addClass("current"))}),$(window).scroll()}};$(document).ready(function(){Skin.init()});