biss/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2026-04-08 12:07:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
myw
2024-10-20 17:47:28 +08:00
parent 95ca6878f0
commit c72f8c41ec
32 changed files with 207 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
source/css/_global/function.styl
View File

@@ -44,7 +44,7 @@ addBorderRadius(x = 6, hide = false)
.postImgHover
&:hover
.cover
opacity: .7
opacity: .5
transform: scale(1.1)
.cover

9
source/css/_global/index.styl
View File

@@ -179,14 +179,11 @@ if $site-name-font
#aside-content .author-info-description
font-family: $site-name-font
.is-center
.text-center
text-align: center
.pull-left
float: left
.pull-right
float: right
.text-right
text-align: right
img
&[src=''],

7
source/css/_layout/aside.styl
View File

@@ -159,8 +159,8 @@
a
display: flex
flex-direction: row
padding: 2px 8px
margin: 2px 0
padding: 2px 8px
color: var(--font-color)
transition: all .3s
addBorderRadius()
@@ -354,11 +354,12 @@
.headline
@extend .limit-one-line
color: var(--font-color)
font-size: .95em
.length-num
margin-top: -.32em
margin-top: -.45em
color: var(--text-highlight-color)
font-size: 1.4em
font-size: 1.2em
@keyframes more-btn-move
0%,

4
source/css/_layout/head.styl
View File

@@ -146,10 +146,11 @@
position: fixed
top: -60px
z-index: 91
background: rgba(255, 255, 255, .8)
background: rgba(255, 255, 255, .7)
box-shadow: 0 5px 6px -5px alpha($grey, .6)
transition: transform .2s ease-in-out, opacity .2s ease-in-out
will-change: transform
backdrop-filter: blur(7px)
#blog-info
color: var(--font-color)
@@ -430,6 +431,7 @@
background-color: lighten($theme-color, 30%)
content: ''
transition: all .3s ease-in-out
addBorderRadius()
&:hover
&:after

90
source/css/_layout/pagination.styl
View File

@@ -8,49 +8,28 @@
background: $theme-paginator-color
color: var(--white)
.pagination-info
position: absolute
top: 50%
padding: 20px 40px
width: 100%
transform: translate(0, -50%)
.prev_info,
.next_info
@extend .limit-one-line
color: var(--white)
font-weight: 500
.next-post
.pagination-info
text-align: right
.pull-full
.full-width
width: 100% !important
.prev-post .label,
.next-post .label
color: var(--light-grey)
text-transform: uppercase
font-size: 90%
.prev-post,
.next-post
@extend .postImgHover
position: relative
display: block
overflow: hidden
.pagination-related
width: 50%
height: 150px
+maxWidth768()
width: 100%
.info-1
.info-item-2
-webkit-line-clamp: 1
.info-2
.info-item-1
-webkit-line-clamp: 2
&.pagination-post
overflow: hidden
margin-top: 40px
width: 100%
background: $dark-black
addBorderRadius()
.layout
@@ -74,4 +53,51 @@
margin-top: 30px
& > *:not(.space)
box-shadow: none
box-shadow: none
.pagination-related
position: relative
display: inline-block
overflow: hidden
background: $dark-black
vertical-align: bottom
@extend .postImgHover
&.next-post
.info
text-align: right
.info
.info-1,
.info-2
@extend .verticalCenter
padding: 20px 40px
color: var(--white)
transition: transform .3s, opacity .3s
.info-1
.info-item-1
color: var(--light-grey)
text-transform: uppercase
font-size: 90%
.info-item-2
@extend .limit-more-line
color: var(--white)
font-weight: 500
.info-2
opacity: 0
transform: translate(0, 0)
.info-item-1
@extend .limit-more-line
&:not(.no-desc):hover
.info-1
opacity: 0
transform: translate(0, -100%)
.info-2
opacity: 1
transform: translate(0, -50%)

12
source/css/_layout/post.styl
View File

@@ -19,9 +19,9 @@ beautify()
&:before
position: absolute
top: calc(50% - 7px)
left: 0
color: $title-prefix-icon-color
content: $title-prefix-icon
left: 0
line-height: 1
transition: all .2s ease-out
@extend .fontawesomeIcon
@@ -65,7 +65,7 @@ beautify()
ul > li
list-style-type: circle
hr
@extend .custom-hr
@@ -119,16 +119,16 @@ beautify()
width: fit-content
a:not(.headerlink)
position relative
z-index 10
position: relative
z-index: 10
a.headerlink
position: absolute
top: 0
right: 0
left 0
bottom: 0
width 100%
left: 0
width: 100%
height: 100%
ol,

24
source/css/_layout/relatedposts.styl
View File

@@ -8,15 +8,9 @@
& > .relatedPosts-list
& > a
position: relative
display: inline-block
overflow: hidden
margin: 3px
width: calc(33.333% - 6px)
height: 200px
background: $dark-black
vertical-align: bottom
@extend .postImgHover
addBorderRadius()
+maxWidth768()
@@ -27,15 +21,11 @@
+maxWidth600()
width: calc(100% - 4px)
.content
padding: 0 20px
@extend .verticalCenter
.info
.info-1
.info-item-2
-webkit-line-clamp: 2
.date
color: var(--light-grey)
font-size: 90%
.title
@extend .limit-more-line
color: var(--white)
-webkit-line-clamp: 2
.info-2
.info-item-1
-webkit-line-clamp: 3

1
source/css/_page/shuoshuo.styl
View File

@@ -10,6 +10,7 @@
.shuoshuo-item-header
display: flex
align-items: center
cursor: default
.shuoshuo-avatar
overflow: hidden

4
source/css/_search/algolia.styl
View File

@@ -75,11 +75,11 @@
overflow-y: overlay
margin: 0 -20px
padding: 0 22px
max-height: calc(80vh - 240px)
max-height: calc(80vh - 220px)
+maxWidth768()
max-height: none
height: calc(var(--search-height) - 265px)
height: calc(var(--search-height) - 235px)
#algolia-info
div

5
source/css/_search/index.styl
View File

@@ -19,9 +19,6 @@
height: 100%
border-radius: 0
hr
margin: 20px auto
.search-nav
margin: 0 0 14px
color: $search-color
@@ -40,7 +37,7 @@
color: $search-color
hr
margin: 20px auto
margin: 15px auto
@extend .custom-hr
#search-mask

36
source/css/_search/local-search.styl
View File

@@ -19,30 +19,16 @@
display: none
.local-search-hit-item
position: relative
padding-left: 24px
line-height: 1.7
margin-left: 24px
padding-left: 3px
line-height: 1.8
&:hover
&:before
border-color: var(--pseudo-hover)
&:before
$w = .5em
position: absolute
top: .45em
left: 0
width: w = $w
height: h = w
border: 3px solid $search-color
border-radius: w
background: transparent
content: ''
line-height: h
transition: all .2s ease-in-out
&::marker
color: $search-color
font-weight: bold
font-style: italic
a
display: block
color: var(--search-a-color)
&:hover
@@ -53,17 +39,19 @@
.search-result
margin: 0 0 8px
word-break: break-all
font-size: .9em
.search-result-list
overflow-y: overlay
margin: 0 -20px
padding: 0 22px
max-height: calc(80vh - 200px)
max-height: calc(80vh - 180px)
+maxWidth768()
max-height: calc(var(--search-height) - 220px) !important
max-height: calc(var(--search-height) - 190px) !important
.search-keyword
background: transparent
color: $search-keyword-highlight
font-weight: bold
font-weight: 600

2
source/js/main.js
View File

@@ -206,7 +206,7 @@ document.addEventListener('DOMContentLoaded', () => {
const altValue = item.title || item.alt
if (!altValue) return
const ele = document.createElement('div')
ele.className = 'img-alt is-center'
ele.className = 'img-alt text-center'
ele.textContent = altValue
item.insertAdjacentElement('afterend', ele)
})

8
source/js/search/local-search.js
View File

@@ -150,16 +150,16 @@ class LocalSearch {
url.searchParams.append('highlight', keywords.join(' '))
if (slicesOfTitle.length !== 0) {
resultItem += `<div class="local-search-hit-item"><a href="${url.href}"><span class="search-result-title">${this.highlightKeyword(title, slicesOfTitle[0])}</span>`
resultItem += `<li class="local-search-hit-item"><a href="${url.href}"><span class="search-result-title">${this.highlightKeyword(title, slicesOfTitle[0])}</span>`
} else {
resultItem += `<div class="local-search-hit-item"><a href="${url.href}"><span class="search-result-title">${title}</span>`
resultItem += `<li class="local-search-hit-item"><a href="${url.href}"><span class="search-result-title">${title}</span>`
}
slicesOfContent.forEach(slice => {
resultItem += `<p class="search-result">${this.highlightKeyword(content, slice)}...</p></a>`
})
resultItem += '</div>'
resultItem += '</li>'
resultItems.push({
item: resultItem,
id: resultItems.length,
@@ -281,7 +281,7 @@ window.addEventListener('load', () => {
const stats = languages.hits_stats.replace(/\$\{hits}/, resultItems.length)
container.innerHTML = `<div class="search-result-list">${resultItems.map(result => result.item).join('')}</div>`
container.innerHTML = `<ol class="search-result-list">${resultItems.map(result => result.item).join('')}</ol>`
statsItem.innerHTML = `<hr><div class="search-result-stats">${stats}</div>`
window.pjax && window.pjax.refresh(container)
}