💄 UI
This commit is contained in:
Van
parent
82ff77d95c
commit
e3ec33eb99
|
|
@ -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">
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
},
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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()});
|
||||
Loading…
Reference in New Issue