'
diff --git a/source/css/_layout/tag-plugins/banner.styl b/source/css/_layout/tag-plugins/banner.styl
index acb530e..d5ad30e 100644
--- a/source/css/_layout/tag-plugins/banner.styl
+++ b/source/css/_layout/tag-plugins/banner.styl
@@ -37,12 +37,12 @@
background: none
line-height: 1.5
font-size: $fs-15
- &:hover
- color: white
- background: rgba(black, 0.5)
&.active
color: white
background: rgba(white, 0.25)
+ &:hover
+ color: white
+ background: rgba(black, 0.5) !important
.back
background: none
padding: 0
diff --git a/source/css/_layout/tag-plugins/friends.styl b/source/css/_layout/tag-plugins/friends.styl
index de58fb8..018a4fb 100644
--- a/source/css/_layout/tag-plugins/friends.styl
+++ b/source/css/_layout/tag-plugins/friends.styl
@@ -1,42 +1,9 @@
-.users-wrap
- overflow: hidden
- .group-header
- margin: 0 0 1rem
- p
- margin: 0
- font-size: $fs-14
- &:first-child
- font-size: 1.25rem
- font-weight: 500
- .group-body
- width: 100%
- display: flex
- flex-wrap: wrap
- align-items: stretch
- &+.group-header
- margin-top: 2rem
- .stellar-friends-api
- display: block
-
+.users-wrap .grid-box
+ display: grid
+ grid-template-columns: repeat(auto-fill, minmax(80px, 1fr))
.users-wrap .user-card
- flex-shrink: 1
- display: flex
- align-items: stretch
- width: 12.5%
- @media screen and (max-width: 980px)
- width: 14.28%
- @media screen and (max-width: 900px)
- width: 16.66%
- @media screen and (max-width: 820px)
- width: 20%
- @media screen and (max-width: $device-mobile-max)
- width: 16.66%
- @media screen and (max-width: $device-mobile)
- width: 25%
.card-link
- margin: 0
- width: 100%
color: var(--text-p1)
font-size: 10px
font-weight: 500
@@ -50,6 +17,9 @@
overflow: hidden
position: relative
padding: 1rem 0.5rem
+ .name
+ max-width: 100%
+ txt-ellipsis()
img
object-fit: cover
display: block
diff --git a/source/css/_layout/tag-plugins/gallery.styl b/source/css/_layout/tag-plugins/gallery.styl
index 7511688..1003218 100644
--- a/source/css/_layout/tag-plugins/gallery.styl
+++ b/source/css/_layout/tag-plugins/gallery.styl
@@ -1,5 +1,5 @@
.tag-plugin.gallery
- .cell
+ .grid-cell,.flow-cell
display: block
overflow hidden
z-index 0
@@ -30,66 +30,80 @@
display: block
font-size: $fs-13
color: transparent
+ pointer-events: none
line-height: 1.2
margin: 0.5rem
trans1(color)
+ text-align: left
&:empty
display: none
-.tag-plugin.gallery[layout='grid'] .cell
- trans1(transform, 0.5s)
+.tag-plugin.gallery .grid-cell
+ img
+ trans1(transform, 0.5s)
&:hover
img
transform: scale(1.1)
// 网格布局
-.tag-plugin.gallery[layout='grid']
+.tag-plugin.gallery.grid-box
display: grid
+ &[size='xs']
+ grid-template-columns: repeat(auto-fill, minmax(80px, 1fr))
+ grid-gap: 2px
+ .grid-cell,img
+ border-radius: 2px
+ .image-caption
+ font-size: $fs-12
&[size='s']
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))
grid-gap: 2px
- .cell,img
+ .grid-cell,img
border-radius: 2px
&[size='m']
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
grid-gap: 4px
- .cell,img
+ .grid-cell,img
border-radius: 4px
&[size='l']
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
grid-gap: 8px
- .cell,img
+ .grid-cell,img
border-radius: 8px
&[size='xl'] // 2列
grid-template-columns: repeat(2, 1fr)
grid-gap: 16px
- .cell,img
+ .grid-cell,img
border-radius: 16px
&[size='mix'] // 1张大图+2张小图
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
grid-gap: 4px
- .cell,img
+ .grid-cell,img
border-radius: 4px
- .cell
+ .grid-cell
&:nth-child(3n+1)
grid-column: auto / span 2
grid-row: auto / span 2
&[ratio='square']
- .cell
+ .grid-cell
aspect-ratio: 1
- .cell
+ .grid-cell
background: var(--block)
img
width: 100%
height: 100%
+
// 瀑布流布局
-.tag-plugin.gallery[layout='flow']
+.tag-plugin.gallery.flow-box
column-count: 3
column-gap: 8px
- .cell
+ .flow-cell
border-radius: 8px
padding-bottom: 8px
+ img
+ width: 100%
+ height: 100%
.image-meta
border-radius: 8px
margin-bottom: 8px
\ No newline at end of file
diff --git a/source/css/_layout/tag-plugins/sites.styl b/source/css/_layout/tag-plugins/sites.styl
index d74c34f..f088788 100644
--- a/source/css/_layout/tag-plugins/sites.styl
+++ b/source/css/_layout/tag-plugins/sites.styl
@@ -1,46 +1,19 @@
-.sites-wrap
- .group-header
- margin: 1rem 0
- p
- margin: 0
- font-size: $fs-14
- &:first-child
- font-size: 1.25rem
- font-weight: 500
- .group-body
- width: 100%
- &+.group-header
- margin-top: 2rem
- .stellar-sites-api
- display: block
-
-.sites-wrap .group-body
+.sites-wrap .grid-box
display: grid
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
grid-gap: 1rem 1rem
- grid-template-columns: repeat(auto-fill, "calc((100% - 3 * %s) / 4)" % 1rem)
- @media screen and (max-width: $device-laptop)
- grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 1rem)
- @media screen and (max-width: 900px)
- grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 1rem)
- @media screen and (max-width: $device-mobile-max)
- grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 1rem)
- @media screen and (max-width: $device-mobile)
- grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 1rem)
+ .grid-cell
+ aspect-ratio: 1.5
-.sites-wrap .group-body .site-card .card-link
+.sites-wrap .site-card .card-link
width: 100%
display: flex
flex-direction: column
>img
- width: 100%
- height 100px
- @media screen and (max-width: $device-laptop)
- height: 120px
- @media screen and (max-width: 900px)
- height: 150px
- @media screen and (max-width: $device-tablet)
- height: 120px
object-fit: cover
+ aspect-ratio: 1.5
+ width: 100%
+ height: 100%
box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
.info
margin-top: 0.5rem
@@ -71,7 +44,7 @@
display: -webkit-box
-webkit-box-orient: vertical
overflow: hidden
- -webkit-line-clamp: 2
+ -webkit-line-clamp: 1
// transform
.sites-wrap .site-card .card-link
diff --git a/source/css/_plugins/fancybox.styl b/source/css/_plugins/fancybox.styl
index a48b7b9..38d3d81 100644
--- a/source/css/_plugins/fancybox.styl
+++ b/source/css/_plugins/fancybox.styl
@@ -1,9 +1,6 @@
img[fancybox='true']
cursor: zoom-in
-.swiper-slide
- cursor: zoom-in
-
-.tag-plugin.gallery
+.fancybox
img
cursor: zoom-in
\ No newline at end of file
diff --git a/source/css/_plugins/lazyload.styl b/source/css/_plugins/lazyload.styl
index f6481d6..f42c4de 100644
--- a/source/css/_plugins/lazyload.styl
+++ b/source/css/_plugins/lazyload.styl
@@ -14,9 +14,9 @@ if hexo-config('plugins.lazyload.transition') == 'blur'
&.loaded,&.error
filter none
-webkit-filter none
- .group-body .site-card .card-link>img
+ .site-card .card-link>img
trans-site filter
- .group-body .user-card .card-link>img
+ .user-card .card-link>img
trans-user filter
else
img.lazy
@@ -25,7 +25,7 @@ else
opacity: 0
&.loaded,&.error
opacity: 1
- .group-body .site-card .card-link>img
+ .site-card .card-link>img
trans-site opacity
- .group-body .user-card .card-link>img
+ .user-card .card-link>img
trans-user opacity
diff --git a/source/js/plugins/friends.js b/source/js/plugins/friends.js
index ef46019..3a42bde 100644
--- a/source/js/plugins/friends.js
+++ b/source/js/plugins/friends.js
@@ -47,17 +47,17 @@ const friendsjs = {
$(el).append('
');
friendsjs.requestAPI(cfg.api, function(data) {
$(el).find('.loading-wrap').remove();
- const arr = data.content || data;
- arr.forEach((item, i) => {
- var user = '
';
- $(el).find('.group-body').append(user);
- });
+ for (let item of (data.content || data)) {
+ var cell = `
`;
+ $(el).find('.grid-box').append(cell);
+ }
}, function() {
$(el).find('.loading-wrap svg').remove();
$(el).find('.loading-wrap').append('
');
diff --git a/source/js/plugins/sites.js b/source/js/plugins/sites.js
index d1e22f2..77fc169 100644
--- a/source/js/plugins/sites.js
+++ b/source/js/plugins/sites.js
@@ -47,20 +47,19 @@ const sitesjs = {
$(el).append('
');
sitesjs.requestAPI(cfg.api, function(data) {
$(el).find('.loading-wrap').remove();
- const arr = data.content;
- arr.forEach((item, i) => {
- var cell = '
';
- $(el).find('.group-body').append(cell);
- });
+ for (let item of data.content) {
+ var cell = `
`;
+ $(el).find('.grid-box').append(cell);
+ }
}, function() {
$(el).find('.loading-wrap svg').remove();
$(el).find('.loading-wrap').append('
');