This commit is contained in:
xaoxuu 2021-03-08 00:20:51 +08:00
parent 03cbac29ed
commit d813199658
10 changed files with 64 additions and 45 deletions

View File

@ -140,7 +140,7 @@ plugins:
# https://scrollrevealjs.org/api/reveal.html
scrollreveal:
enable: true
js: https://cdn.jsdelivr.net/npm/scrollreveal@4.0.7/dist/scrollreveal.min.js
js: https://cdn.jsdelivr.net/npm/scrollreveal@4.0.9/dist/scrollreveal.min.js
distance: 8px
duration: 500 # ms
interval: 100 # ms

View File

@ -35,7 +35,7 @@ function lazyProcess(htmlContent) {
}
newClass += 'lazy';
if (value) {
return ori.replace(value, newClass);
return ori.replace('class="' + value, 'class="' + newClass);
} else {
return ori.replace('class="', 'class="' + newClass);
}

View File

@ -18,7 +18,7 @@ hexo.extend.tag.register('image', function(args) {
}
function img(src, alt, style) {
let img = '';
img += '<img class="img" src="' + src + '"';
img += '<img src="' + src + '"';
if (alt) {
img += ' alt="' + alt + '"';
}
@ -31,9 +31,9 @@ hexo.extend.tag.register('image', function(args) {
var el = '';
// wrap
el += '<div class="tag-plugin img-wrap">';
el += '<div class="tag-plugin image">';
// bg
el += '<div class="img-bg"';
el += '<div class="image-bg"';
if (args.bg || args.padding) {
el += ' style="';
if (args.bg && args.bg.length > 0) {
@ -46,20 +46,18 @@ hexo.extend.tag.register('image', function(args) {
}
el += '>';
el += img(args.src, args.alt, style);
if (args.download && args.download.length > 0) {
let href = args.download;
if (args.download == 'true') {
href = args.src;
}
el += '<a class="image-download blur" style="opacity:0" href="' + href + '"><svg class="icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3734"><path d="M561.00682908 685.55838913a111.03077546 111.03077546 0 0 1-106.8895062 0L256.23182837 487.72885783a55.96309219 55.96309219 0 0 1 79.13181253-79.18777574L450.70357448 523.88101491V181.55477937a55.96309219 55.96309219 0 0 1 111.92618438 0v344.06109173l117.07478902-117.07478901a55.96309219 55.96309219 0 0 1 79.13181252 79.18777574zM282.81429711 797.1487951h447.70473912a55.96309219 55.96309219 0 0 1 0 111.92618438H282.81429711a55.96309219 55.96309219 0 0 1 0-111.92618438z" p-id="3735"></path></svg></a>';
}
el += '</div>';
if (args.alt && args.alt.length > 0) {
el += '<div class="image-meta">';
if (args.download && args.download.length > 0) {
el += '<span class="image-caption left">' + args.alt + '</span>';
let href = args.download;
if (args.download == 'true') {
href = args.src;
}
el += '<a class="image-download" href="' + href + '"><svg class="icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3734"><path d="M561.00682908 685.55838913a111.03077546 111.03077546 0 0 1-106.8895062 0L256.23182837 487.72885783a55.96309219 55.96309219 0 0 1 79.13181253-79.18777574L450.70357448 523.88101491V181.55477937a55.96309219 55.96309219 0 0 1 111.92618438 0v344.06109173l117.07478902-117.07478901a55.96309219 55.96309219 0 0 1 79.13181252 79.18777574zM282.81429711 797.1487951h447.70473912a55.96309219 55.96309219 0 0 1 0 111.92618438H282.81429711a55.96309219 55.96309219 0 0 1 0-111.92618438z" p-id="3735"></path></svg></a>';
} else {
el += '<span class="image-caption center">' + args.alt + '</span>';
}
el += '<span class="image-caption center">' + args.alt + '</span>';
el += '</div>';
}

View File

@ -31,8 +31,8 @@ hexo.extend.tag.register('swiper', function(args, content) {
slide();
el += '</div>';
el += '<div class="swiper-pagination"></div>';
el += '<div class="swiper-button-prev"></div>';
el += '<div class="swiper-button-next"></div>';
el += '<div class="swiper-button-prev blur"></div>';
el += '<div class="swiper-button-next blur"></div>';
el += '</div>';
return el;
}, {ends: true});

View File

@ -0,0 +1,12 @@
body[theme='light']
--blur-bg: alpha(white, .5)
body[theme='dark']
--blur-bg: alpha(black, .5)
.blur
background: var(--blur-bg)
@supports ((-webkit-backdrop-filter:blur(12px)) or (backdrop-filter:blur(12px)))
background: var(--blur-bg) !important
backdrop-filter: saturate(200%) blur(12px)
-webkit-backdrop-filter: saturate(200%) blur(12px)
&:hover
background: var(--card)

View File

@ -18,7 +18,7 @@ article.md.content
color: var(--text-p0)
h2,h3,h4,h5,h6
color: var(--text-p0)
padding-top: 1em
padding-top: 1rem
margin-bottom: 1em
&:hover
a.headerlink:before
@ -36,12 +36,14 @@ article.md
border-bottom: 1px solid var(--block-border)
font-weight: 400
&:first-child
margin-top: 1rem
margin-top: 0
h3
margin-top: 3rem
font-weight: 400
h4,h5,h6
font-weight: 500
h1+h2
margin-top: 0
h2+h3
margin-top: 0
h3+h4

View File

@ -16,7 +16,7 @@
background-repeat: no-repeat;
overflow: hidden;
.md .img-wrap .frame-wrap
.md .tag-plugin.img-wrap .frame-wrap
&[focus]
height: auto

View File

@ -1,35 +1,43 @@
.img-wrap
.tag-plugin.image
margin-top: 1rem
margin-bottom: 1rem
.img-bg
.image-bg
line-height: 0
text-align: center
border-radius: 4px
img
display: inline-block
object-fit: contain
position: relative
overflow: hidden
&:hover
.image-download
opacity: 1 !important
img
display: inline-block
object-fit: contain
.image-download
position: absolute
bottom: 8px
right: 8px
font-size: 1.125rem
padding: 6px
line-height: 0
border-radius: 4px
trans3: color opacity background
color: var(--text-p1)
&:hover
background: var(--card) !important
color: $color-hover
.image-meta
display: flex
justify-content: space-between
align-items: flex-start
padding-top: 0.5rem
justify-content: center
padding: 0.5rem 0
.image-caption
display: inline-block
font-size: $fs-12
line-height: 1.4
color: var(--text-p3)
flex-grow: 1
&:empty
display: none
&.left
text-align: left
&.center
text-align: center
.image-download
margin-left: 4px
padding: 4px
line-height: 0
border-radius: 4px
trans2: color background
&:hover
background: var(--hover-block)
// &.left
// text-align: left
// &.center
// text-align: center

View File

@ -10,8 +10,10 @@ if hexo-config('plugins.lazyload.transition') == 'blur'
trans-cover filter
&:not(.loaded)
filter blur(8px)
-webkit-filter blur(8px)
&.loaded,&.error
filter none
-webkit-filter none
.group-body .site-card .card-link>img
trans-site filter
.group-body .user-card .card-link>img

View File

@ -37,12 +37,9 @@ div.swiper-slide
background: alpha(white, 0.25)
trans1 background
--swiper-theme-color: black !important
@supports (backdrop-filter: blur(20px))
background: alpha(white, 0.5)
backdrop-filter: saturate(200%) blur(20px)
&:after
font-size: 1.2rem !important
font-weight: 700 !important
&:hover
background: white
background: white !important
--swiper-theme-color: $color-hover !important