This repository has been archived on 2024-07-11. You can view files and clone it, but cannot push or open issues or pull requests.
redemption/source/css/pages/_category.scss
7Wate 91bab4d153
refacotr(css): Refactor css for easy maintenance
1. Refactored CSS for robustness
2. Add dark-mode choose
3. Add sans and serif
2022-01-17 19:51:11 +08:00

103 lines
2.1 KiB
SCSS

@import "../base/variables";
// 分类
.category {
>ul {
padding: 0.625rem 0.1rem;
>.name {
font-size: 1.5rem;
font-weight: bold;
line-height: 2.2rem;
padding: 0.5rem 0;
// 浅色
color: #262626;
// 深色
@include darkmode {
color: #dbdbdb;
}
}
>li {
display: flex;
justify-content: space-between;
font-size: 0.875rem;
padding-bottom: 0.3rem;
line-height: 1.75rem;
>a {
// 浅色
color: #595959;
&:hover {
color: #59595980;
}
// 深色
@include darkmode {
color: #dbdbdb;
&:hover {
color: #dbdbdb80;
}
}
}
>span{
color:#8c8c8c;
@include darkmode{
color: #7d7d7d;
}
}
}
}
}
// 分类目录
.categories {
margin: 5rem 0;
>ul {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
align-content: center;
flex-wrap: wrap;
>li {
margin: 0.5rem 1rem;
font-size: 1rem;
>a {
// 浅色
color: #262626;
&:hover {
color: #26262680;
}
// 深色
@include darkmode {
color: #dbdbdb;
&:hover {
color: #dbdbdb80;
}
}
>span {
color: #8c8c8c;
}
}
}
.count {
display: inline-block;
position: relative;
top: -0.5rem;
right: -0.125rem;
font-size: 0.75rem;
}
}
}