hexo-theme-solitude 1.1.3 → 1.2.1

package/source/css/_page/homeTop.styl

@@ -0,0 +1,1035 @@
+a 
+	&.bber-reply 
+		cursor pointer
+
+#home_top
+	max-width: 1400px
+	margin: .5rem auto auto
+	padding: 0 1.5rem
+
+	@media screen and (max-width:768px)
+		padding: 0
+		margin-top: 0
+
+.recent-top-post-group
+	border-radius: 12px
+	overflow: hidden
+	overflow-x: auto
+	width: 100%
+	margin-bottom: 0
+	-webkit-user-select: none
+
+	@media screen and (min-width: 1300px)
+		.recent-post-top .recent-post-item
+			margin-right: 0
+			margin-bottom: .5rem
+
+		.recent-post-top
+			overflow-x: visible
+
+		overflow: visible
+
+	@media screen and (max-width: 768px)
+		border-radius: 0
+		background: var(--sco-background)
+
+		.recent-post-top-text
+			display: none !important
+
+		.recent-post-top .recent-post-item .post_cover img
+			border-radius: 8px 8px 0 0 !important
+
+	@media screen and (max-width: 768px)
+		a.categoryButton i
+			display: none
+
+		.recent-post-top .categoryGroup
+			min-width: 130px !important
+			margin-bottom: .5rem
+			margin-left: 1rem
+			max-height: 164px
+			overflow: hidden
+			position: relative
+
+.recent-post-top
+	display: flex
+	flex-direction: row
+	flex-wrap: nowrap
+	width: 100%
+	overflow-x: scroll
+
+	&::-webkit-scrollbar
+		display: none
+
+	.recent-post-item
+		display: flex
+		width: 200px
+		flex-direction: column
+		align-items: flex-start
+		margin-left: .5rem
+		background: var(--sco-card-bg)
+		border-radius: 12px
+		overflow: hidden
+		min-width: 200px
+		height: 164px
+		max-height: 164px
+		border: var(--style-border-always)
+		transition: .3s
+		position: relative
+		box-shadow: var(--sco-shadow-border)
+
+		@media screen and (max-width: 768px)
+			border-radius: 8px
+			box-shadow: none
+			clip-path: inset(0 0 0 0 round 8px)
+
+			&:last-child
+				margin-right: 1rem
+
+	span.recent-post-top-text
+		position: absolute
+		top: 0
+		left: -40px
+		display: flex
+		z-index: 1
+		background: var(--sco-theme)
+		color: var(--sco-white)
+		padding: 2px 8px
+		font-size: .6rem
+		border-radius: 12px 0 12px 0
+		transition: .3s
+		cursor: pointer
+
+	.recent-post-item:hover .recent-post-top-text
+		left: 0
+
+	.recent-post-item .post_cover a
+		height: 100px
+		overflow: hidden
+		display: flex
+
+	.recent-post-item .post_cover img
+		object-fit: cover
+		width: 100%
+		background: var(--sco-secondbg)
+		border-radius: 12px 12px 0 0
+
+	.recent-post-item:hover .post_cover img
+		transform: scale(1)
+
+	.recent-post-item .post_cover
+		-webkit-mask-image: -webkit-radial-gradient(center, #fff, #000)
+
+	.recent-post-item .recent-post-info
+		padding: .3rem .5rem .3rem .5rem !important
+		transition: .3s
+
+	.recent-post-item:hover .recent-post-info a
+		color: var(--sco-fontcolor)
+
+		@media screen and (max-width: 1300px)
+			.recent-post-item:hover .recent-post-info a
+				color: var(--sco-theme)
+				transition: .3s
+
+	.recent-post-item .recent-post-info .article-title
+		-webkit-line-clamp: 2
+		overflow: hidden
+		display: -webkit-box
+		-webkit-box-orient: vertical
+		line-height: 1.5
+		justify-content: center
+		align-items: flex-end
+		align-content: center
+		font-weight: 700
+		font-size: .8rem !important
+		padding: 0 !important
+
+.recent-post-top .categoryGroup
+	display: flex
+	flex-direction: column
+	justify-content: space-between
+	min-width: 200px
+
+.categoryGroup .categoryItem:nth-child(3)
+	display: none
+
+@media screen and (min-width: 1200px)
+	.recent-post-top .categoryGroup
+		flex-direction: row
+		height: 24%
+		animation: slide-in .6s .2s backwards
+
+	.categoryItem
+		width: calc(100% / 3 - .33rem)
+		height: 100% !important
+		margin-right: .5rem
+
+	.categoryItem:last-child
+		margin-right: 0
+
+	.categoryItem:hover
+		width: 50%
+
+	.categoryGroup .categoryItem:nth-child(3)
+		display: flex
+
+a.categoryButton.bikan
+	background: linear-gradient(to right, #358bff, #15c6ff)
+	background-size: 200%
+
+a.categoryButton.remen
+	background: linear-gradient(to right, #f65, #ffbf37)
+	background-size: 200%
+
+a.categoryButton.shiyong
+	background: linear-gradient(to right, #18e7ae, #1eebeb)
+	background-size: 200%
+
+[data-theme=dark] a.categoryButton.bikan
+	background: linear-gradient(to right, #0653b8, #2fcbff)
+	background-size: 200%
+
+[data-theme=dark] a.categoryButton.remen
+	background: linear-gradient(to right, #e22a16, #da980c)
+	background-size: 200%
+
+[data-theme=dark] a.categoryButton.shiyong
+	background: linear-gradient(to right, #099e74, #0ea4a4)
+	background-size: 200%
+
+a.categoryButton:hover
+	background-position: 100% 0
+
+.category-in-bar
+	display: flex
+	white-space: nowrap
+	align-items: center
+
+.category-in-bar-tips
+	margin-right: 1rem
+
+.category-bar-items
+	white-space: nowrap
+	overflow-x: scroll
+	overflow-y: hidden
+	display: flex
+	border-radius: 8px
+	align-items: center
+	height: 30px
+
+.category-in-bar .category-in-bar-tips
+	margin-bottom: 0
+
+.category-in-bar #category-bar
+	margin-bottom: 0
+
+.category-bar-items::-webkit-scrollbar
+	display: none
+
+.category-bar-item a
+	padding: .1rem .5rem
+	margin-right: 6px
+	font-weight: 700
+	border-radius: 8px
+	display: flex
+	align-items: center
+	height: 30px
+
+.category-bar-item:hover a
+	background: var(--sco-theme)
+	color: var(--sco-white)
+
+.category-bar-item.select
+	order -1
+
+.category-bar-item.select a
+	background: var(--sco-theme)
+	color: var(--sco-white)
+	border-radius: 8px
+
+#category a.category-bar-item.select a
+	display: none
+
+@media screen and (max-width: 768px)
+	.category-bar-item.select a
+		border-radius: 8px
+
+	.category-bar-item a
+		border-radius: 8px
+
+	.category-in-bar
+		position: -webkit-sticky
+		position: sticky
+		top: 60px
+		background: var(--sco-background)
+		z-index: 1002
+
+.category-bar-next
+	margin-left: 16px
+	cursor: pointer
+	height: 22px
+	display: flex
+
+.category-bar-next:hover
+	color: var(--sco-lighttext)
+
+.category-bar-more
+	margin-left: 14px
+	font-weight: 700
+
+.category-bar-more:hover
+	color: var(--sco-lighttext)
+
+@media screen and (max-width: 768px)
+	#recent-posts .recent-post-item
+		margin 1.5rem 0
+		border-radius 12px
+		margin-top 0.5rem
+		border var(--style-border-always)
+		box-shadow var(--heo-shadow-border)
+		display block
+		position relative
+		clip-path inset(0 0 0 0 round 12px)
+
+	#recent-posts .recent-post-item .post_cover
+		width: 100%
+		height: 230px
+		border-radius: 5px 8px 0 0
+		-webkit-box-ordinal-group: 1 !important
+		order: 1 !important
+
+	#recent-posts .recent-post-item .recent-post-info
+		-webkit-box-ordinal-group: 2 !important
+		order: 2 !important
+
+	#recent-posts .recent-post-item .recent-post-info.no-cover
+		padding: 1.5rem 1rem
+
+	#recent-posts .recent-post-item .recent-post-info .article-title
+		font-size: 1.43em
+
+	#recent-posts .recent-post-item .recent-post-info .content
+		height: auto
+
+.recent-post-item .recent-post-info .recent-post-info-top
+	position: relative
+	transition: .3s
+	padding: 0 32px
+	width: 100%
+
+.recent-post-item .recent-post-info .recent-post-info-top .article-title
+	line-height: 30px
+	margin-top: 0
+	font-weight: 700
+	color: var(--sco-fontcolor)
+	margin-bottom: 0
+	width: 100%
+	transition: .3s
+	font-size: 1rem
+	-webkit-line-clamp: 2
+	display: -webkit-box
+	overflow: hidden
+	-webkit-box-orient: vertical
+
+.recent-post-item .recent-post-info .recent-post-info-top .original
+	display: flex
+	color: var(--sco-secondtext)
+	font-size: .5rem
+	position: relative
+	margin-right: 8px
+
+.recent-post-item .recent-post-info .recent-post-info-top .lastestpost
+	display: none
+	margin-right: 8px
+
+.recent-post-item .recent-post-info .recent-post-info-top a.unvisited-post
+	display: flex
+	color: var(--sco-secondtext)
+	font-size: .5rem
+	position: relative
+
+.recent-post-item .recent-post-info .recent-post-info-top a.unvisited-post:visited
+	color: var(--sco-card-bg)
+
+@media screen and (max-width: 768px)
+	.recent-post-info-top-tips
+		display: none
+
+@media screen and (min-width: 1300px)
+	#recent-posts > .recent-post-item:nth-child(2) .lastestpost
+		display: flex
+		color: var(--sco-secondtext)
+		font-size: .5rem
+		position: relative
+
+	.recent-post-item .recent-post-info .recent-post-info-top .article-title
+		font-size: 20px
+		-webkit-line-clamp: 2
+
+	.recent-post-item:hover .recent-post-info .recent-post-info-top .article-title
+		-webkit-line-clamp: 2
+
+	#recent-posts > .recent-post-item .post_cover
+		transition: 1s !important
+		height: 225px
+		width: 100%
+
+	.recent-post-item.post-card-large .recent-post-info .recent-post-info-top .content
+		opacity: 0 !important
+		-webkit-line-clamp: 2 !important
+
+	.recent-post-item.post-card-large:hover .recent-post-info .recent-post-info-top .content
+		opacity: 1 !important
+
+.recent-post-item .recent-post-info .recent-post-info-top .content
+	opacity: 0
+	transition: .3s
+	display: -webkit-box
+	overflow: hidden
+	-webkit-box-orient: vertical
+	-webkit-line-clamp: 2
+	line-height: 1.4
+	color: var(--sco-secondtext)
+	margin-top: .5rem
+
+@media screen and (max-width: 1300px)
+	.recent-post-item:hover .recent-post-info .recent-post-info-top .content
+		display: none
+
+@media screen and (min-width: 1300px)
+	.recent-post-item:hover .recent-post-info .recent-post-info-top .content
+		display: none
+
+@media screen and (min-width: 768px)
+	.recent-post-item.post-card-large .recent-post-info .recent-post-info-top .content
+		opacity: 1
+		-webkit-line-clamp: 4
+
+	.recent-post-item.post-card-large:hover .recent-post-info .recent-post-info-top .content
+		-webkit-line-clamp: 6
+
+@media screen and (max-width: 768px)
+	.recent-post-item .recent-post-info .recent-post-info-top
+		padding: 0 20px
+
+	.recent-post-item .recent-post-info .recent-post-info-top .content
+		opacity: 1
+		-webkit-line-clamp: 3
+		display: none
+
+	#recent-posts .recent-post-item .recent-post-info .article-title
+		font-size: 19px
+
+#recent-post-top .recent-post-item .post_cover
+	width: 100%
+
+@media screen and (max-width: 768px)
+	#recent-posts .recent-post-item:hover
+		border: none
+		box-shadow: none
+
+@media screen and (max-width: 1300px)
+	#recent-posts > .recent-post-item .left_radius, #recent-posts > .recent-post-item .right_radius
+		width: 75%
+		display: flex
+		height: 200px
+
+	#recent-posts > .recent-post-item:hover .post_cover img.post_bg
+		transform: scale(1.03)
+		transition: .3s ease-in-out
+		filter: brightness(.85)
+
+	@media screen and (min-width: 1200px)
+		#recent-posts>.recent-post-item:hover .post_cover img.post_bg
+			transform:scale(1.03)
+			transition: .3s ease-in-out
+			filter: brightness(.85)
+
+	#recent-posts > .recent-post-item.post-card-large:hover .post_cover img.post_bg
+		transform: scale(1.03)
+
+	#recent-posts > .recent-post-item .post_cover img.post_bg
+		min-width: 100%
+		-webkit-backface-visibility: hidden
+		-webkit-transform-style: preserve-3d
+		transition: .3s ease-in-out
+		min-height: 100%
+		user-select: none
+
+	#recent-posts > .recent-post-item:hover > .recent-post-info
+		transition: all .3s
+		position: relative
+
+	#recent-posts > .recent-post-item > .recent-post-info
+		transition: all .3s
+
+@media screen and (min-width: 1300px)
+	#recent-posts > .recent-post-item .left_radius, #recent-posts > .recent-post-item .right_radius
+		width: 100%
+		display: flex
+
+@media screen and (min-width: 1300px)
+	#recent-posts > .recent-post-item
+		flex-direction: column
+
+	#recent-posts > .recent-post-item:not(:first-child)
+		width: calc(100% / 2 - .5rem)
+		margin-top: .25rem
+		margin-bottom: .75rem
+		box-shadow: var(--sco-shadow-border)
+
+	#category #recent-posts .recent-post-item,#tag #recent-posts .recent-post-item
+		position: relative
+		overflow: hidden
+		animation: slide-in .6s .4s backwards
+		will-change: transform
+		width: calc(100% / 2 - .5rem)
+		margin-top: .25rem
+		margin-bottom: .75rem
+		box-shadow: var(--sco-shadow-border)
+
+	#category-bar
+		margin-bottom: .75rem
+		box-shadow: var(--sco-shadow-border)
+		animation: slide-in .6s .3s backwards
+
+	#category #category-bar
+		animation: none
+
+	#recent-posts
+		display: flex
+		flex-wrap: wrap
+		justify-content: space-between
+		align-items: flex-start
+		align-content: flex-start
+		-webkit-user-select: none
+
+@media screen and (min-width: 1200px)
+	#category #recent-posts .recent-post-item,#tag #recent-posts .recent-post-item
+		animation:slide-in .6s .4s backwards
+
+	#category-bar
+		animation: slide-in .6s .3s backwards
+
+@media screen and (max-width: 768px)
+
+	#recent-posts > .recent-post-item:not(:first-child)
+		border-radius: 12px
+		margin: .5rem 1rem 1.5rem
+		border: var(--style-border-always)
+		box-shadow: var(--sco-shadow-border)
+		display: block
+		position: relative
+		clip-path: inset(0 0 0 0 round 12px)
+
+	#category #recent-posts,#tag #recent-posts
+		padding: 0
+
+	#recent-posts .recent-post-item .post_cover
+		border-radius: 0 !important
+		width: 100%
+
+	a.article-meta__categories
+		left: 12px !important
+		top: 12px !important
+		border-radius: 4px !important
+		padding: 2px 9px !important
+		font-size: 12px
+
+@media screen and (min-width: 1300px)
+	.topGroup .recent-post-item:nth-child(7)
+		display: none
+
+@media screen and (max-width: 768px)
+	#sidebar-menus > div.author-avatar
+		display: none
+
+	#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap
+		bottom: .5rem !important
+
+	#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap time
+		display: absolute
+		right: 0
+
+	#web_bg
+		background: 0 0 !important
+
+	#recent-posts > .recent-post-item .post_cover img.post_bg
+		border-radius: 12px 12px 0 0 !important
+
+	#recent-posts > .recent-post-item .post_cover img.post_bg:hover
+		transform: scale(1)
+
+	#recent-posts > .recent-post-item:hover img.post_bg
+		transform: scale(1)
+
+	.recent-post-top .recent-post-item:hover .post_cover img
+		transform: scale(1)
+
+	#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap, #recent-posts > .recent-post-item > .recent-post-info > .article-title, #recent-posts > .recent-post-item > .recent-post-info > .content
+		padding: 0 20px !important
+
+@media screen and (min-width: 768px)
+	#recent-posts > .recent-post-item > .recent-post-info > .article-title
+		top: 40px
+
+	#recent-posts > .recent-post-item:hover > .recent-post-info > .article-title
+		top: 20px
+
+	#recent-posts > .recent-post-item.post-card-large:hover > .recent-post-info > .article-title
+		top: 30px
+
+	#recent-posts .recent-post-item:hover .recent-post-info .article-title
+		color: var(--sco-theme)
+
+@media screen and (max-width: 768px)
+	#recent-posts .recent-post-item .recent-post-info
+		height: 7rem
+
+@media screen and (min-width: 1300px)
+	#recent-posts > .recent-post-item:hover > .recent-post-info > .article-meta-wrap
+		bottom: 30px
+
+	#recent-posts > .recent-post-item.post-card-large:hover > .recent-post-info > .article-meta-wrap
+		bottom: 30px
+
+	#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap
+		bottom: 30px
+
+@media screen and (min-width: 768px)
+	#recent-posts > .recent-post-item > .recent-post-info > .content
+		opacity: 0
+		top: 120px
+
+	#recent-posts > .recent-post-item:hover > .recent-post-info > .content
+		opacity: 1
+		top: 90px
+
+	@media screen and (max-width: 1300px)
+		#recent-posts > .post-card-large > .recent-post-info > .content
+			opacity: 1 !important
+
+		#recent-posts > .post-card-large:hover > .recent-post-info > .content
+			top: 110px
+
+		#recent-posts > .post-card-large > .recent-post-info > .content
+			-webkit-line-clamp: 3 !important
+
+		#recent-posts > .post-card-large:hover > .recent-post-info > .content
+			-webkit-line-clamp: 5 !important
+
+		#recent-posts > .post-card-large
+			height: 20em !important
+
+@media screen and (max-width: 768px)
+	#recent-posts > .recent-post-item > .recent-post-info > .content
+		top: 5rem
+
+.recent-post-item span.tags-punctuation
+	margin-right: 0
+	font-size: 13px
+
+	&:hover
+		color var(--sco-theme)
+
+// category bar
+div#categoryList
+	display: flex
+	width: 100%
+	justify-content: space-between
+
+.categoryItem
+	overflow: hidden
+	transform: scale(1)
+	transition: all .8s cubic-bezier(.65, .15, .37, 1.19)
+	height: 48%
+	border-radius: 12px
+
+a.categoryButton
+	height: 100%
+	width: 100%
+	background: var(--sco-card-bg)
+	border-radius: 12px
+	display: inline-block
+	text-align: left
+	line-height: 4em
+	font-weight: 700
+	font-size: .9rem
+	color: var(--sco-white)
+	transition: all .8s cubic-bezier(.39, .575, .565, 1)
+	transform: scale(1)
+	overflow: hidden
+	font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei
+
+a.categoryButton i
+	transform: scale(1) rotate(15deg)
+
+@media screen and (max-width: 768px)
+	a.categoryButton
+		border-radius: 8px
+
+	.categoryItem
+		border-radius: 0
+		height: 47%
+		box-shadow: none !important
+
+a.categoryButton:after
+	top: 50px
+	width: 1rem
+	left: 21px
+	height: 2px
+	background: var(--sco-white)
+	content: ""
+	border-radius: 1px
+	position: absolute
+
+.categoryButtonText
+	padding-left: 21px
+
+a.categoryButton i
+	font-size: 5rem
+	opacity: .2
+	position: absolute
+	right: 0
+	top: 20%
+	transition: .3s
+	width: 100px
+	text-align: center
+	filter: blur(2px)
+
+.topGroup
+	display: flex
+
+#bannerGroup
+	display: flex
+
+div#banners
+	display: none
+
+.topGroup .todayCard
+	display: none
+
+@media screen and (min-width: 1200px)
+	.topGroup
+		display: flex
+		flex-direction: row
+		flex-wrap: wrap
+		justify-content: flex-end
+		height: calc(328px + .5rem)
+		align-content: space-between
+		width: calc(600px + 1.5rem)
+		position: relative
+		animation: slide-in .6s .1s backwards
+
+		.todayCard
+			position: absolute
+			width: calc(600px + 1rem)
+			height: 100%
+			z-index: 1
+			top: 0
+			left: 0
+			background: var(--sco-card-bg)
+			border-radius: 12px
+			margin-left: .5rem
+			overflow: hidden
+			transition: .3s
+			display: flex
+			cursor: pointer
+			pointer-events: all
+
+			&::after
+				position: absolute
+				content: ''
+				width: 100%
+				height: 100%
+				top: 0
+				left: 0
+
+			&.hide
+				opacity: 0
+				pointer-events: none
+
+			.todayCard-info
+				position: absolute
+				bottom: 2rem
+				left: 2rem
+				z-index: 2
+				color: var(--sco-white)
+				max-width: 60%
+				transition: .3s
+
+				.todayCard-tips
+					opacity: .8
+					font-size: .6rem
+
+				.todayCard-title
+					font-size: 28px
+					font-weight: 700
+					line-height: 36px
+
+			.todayCard-cover
+				position: absolute
+				min-width: 100%
+				min-height: 100%
+				top: 0
+				left: 0
+				background-size: cover
+				z-index: -1
+				transition: .3s
+
+			.banner-button-group
+				position: absolute
+				right: 2rem
+				bottom: 2rem
+				display: flex
+				transition: .3s
+
+			.banner-button
+				background: var(--sco-white-op)
+				border-radius: 20px
+				color: var(--sco-white)
+				display: flex
+				align-items: center
+				z-index: 1
+				transition: .3s
+				cursor: pointer
+				backdrop-filter: saturate(180%) blur(20px)
+				-webkit-backdrop-filter: blur(20px)
+				transform: translateZ(0)
+				height: 40px
+				width: 118px
+				justify-content: center
+
+				i
+					margin-right: 8px
+					font-size: 22px
+
+				&:hover
+					background: var(--sco-theme)
+					color: var(--sco-white)
+
+			&.hide
+				.todayCard-info
+					bottom: 1rem
+					opacity: 0
+
+				.todayCard-cover
+					transform: scale(1.2)
+
+				.banner-button-group
+					bottom: 1rem
+
+	div#bannerGroup
+		width: calc(100% - 600px - 2rem)
+		margin-right: .5rem
+		height: calc(328px + .5rem)
+		display: flex
+		flex-direction: column
+		justify-content: space-between
+
+	div#banners
+		display: flex
+		width: 100%
+		height: 76%
+		background: var(--sco-card-bg)
+		margin-bottom: .5rem
+		border: var(--style-border)
+		border-radius: 12px
+		overflow: hidden
+		position: relative
+		box-shadow: var(--sco-shadow-border)
+		flex-direction: column
+		transition: .3s
+		will-change: transform
+		animation: slide-in .6s .1s backwards
+
+		&:hover
+			box-shadow: var(--sco-shadow-main)
+
+		&.flink
+			margin-bottom: .5rem
+
+		.banner-button-group
+			position: absolute
+			right: 2rem
+			top: 2rem
+			display: flex
+
+		.banner-button
+			padding: 8px 12px
+			background: var(--sco-fontcolor)
+			border-radius: 12px
+			color: var(--sco-card-bg)
+			display: flex
+			align-items: center
+			z-index: 1
+			transition: .3s
+			cursor: pointer
+			box-shadow: var(--sco-shadow-black)
+
+			&.secondary
+				background: var(--sco-secondbg)
+				border: var(--style-border-always)
+				color: var(--sco-lighttext)
+				margin-right: 1rem
+				box-shadow: var(--sco-shadow-border)
+
+			&:hover
+				background: var(--sco-theme)
+				color: var(--sco-white)
+
+			i
+				margin-right: 8px
+				font-size: 1rem
+
+		.banners-title
+			top: 2rem
+			left: 1.5rem
+			position: absolute
+			display: flex
+			flex-direction: column
+
+			&-big
+				font-size: 36px
+				line-height: 1
+				font-weight: 700
+				margin-bottom: 8px
+
+			&-small
+				font-size: 12px
+				line-height: 1
+				color: var(--sco-secondtext)
+				margin-top: 8px
+				margin-bottom: .5rem
+
+		#banner-hover
+			position: absolute
+			width: 100%
+			height: 100%
+			top: 0
+			left: 0
+			background: var(--sco-theme)
+			color: var(--sco-white)
+			padding-left: .5rem
+			display: flex
+			flex-direction: column
+			justify-content: center
+			opacity: 0
+			transition: cubic-bezier(.71, .15, .16, 1.15) .6s
+
+			i
+				font-size: 80px
+				opacity: .4
+
+		&:hover
+			#banner-hover
+				opacity: 1
+				padding-left: 2rem
+				background: var(--sco-theme-op-deep)
+				backdrop-filter: blur(15px)
+				-webkit-backdrop-filter: blur(15px)
+				transform: translateZ(0)
+				-webkit-backface-visibility: hidden
+				-webkit-transform-style: preserve-3d
+				transition: .3s
+				background-size: 200%
+				cursor: pointer
+
+		.flink
+			.banners-title
+				top: 1.5rem
+
+		.bannerText
+			font-size: 4rem
+			line-height: 4rem
+			font-weight: 700
+
+		.banner-righticon
+			font-size: 4rem
+			opacity: .6
+
+.tags-group-icon
+	width: 120px
+	height: 120px
+	border-radius: 30px
+	display: flex
+	align-items: center
+	justify-content: center
+	color: #fff
+	font-size: 66px
+	font-weight: 700
+	box-shadow: var(--sco-shadow-blackdeep)
+
+	img
+		width: 60%
+
+.tags-group-all
+	display: flex
+	transform: rotate(-30deg)
+
+	&.nowrapMove
+		transform: rotate(0)
+		padding-bottom: 2rem
+
+.tags-group-wrapper
+	margin-top: 5rem
+	display: flex
+	flex-wrap: nowrap
+	animation: rowup 60s linear infinite
+
+	.nowrapMove &
+		margin-top: 7rem
+		animation: rowup 120s linear infinite
+
+.tags-group-icon-pair
+	margin-left: 1rem
+	user-select: none
+
+	.tags-group-icon:nth-child(even)
+		margin-top: 1rem
+		transform: translate(-60px)
+
+	a img
+		border-radius: 50% !important
+
+.nowrapMove
+	.tags-group-icon
+		border-radius: 50%
+
+		img
+			min-width: 100%
+			min-height: 100%
+			border-radius: 50%
+			object-fit: cover
+
+#categoryList
+	> div:nth-child(1) > a::before
+		height: 24px
+		width: 44px
+		content: ""
+		background-size: 38px 24px
+		position: absolute
+		top: 0
+		left: 0
+
+	> a:nth-child(0) > i
+		padding-right: 8px
+
+.categoryItem:hover i
+	opacity: .8
+	transition: .8s
+	transition-delay: .15s
+	transform: scale(1.03) rotate(0)
+	font-size: 2.5rem
+	filter: blur(0)
+
+	@media screen and (min-width: 1300px)
+		transform: scale(1.03) rotate(0)
+
+.cate-button-text
+	box-shadow: var(--sco-shadow-black)
+
+@media screen and (max-width: 768px)
+	div#categoryList
+		display: none