hexo-theme-keep/source/css/layout/article-content.styl

137 lines
2.2 KiB
Stylus

@require 'common/variables.styl'
@require 'common/magic-theme.styl'
$avatarWidth = 46px;
.article-content-container {
ils-container(1.008, 1.002, 30px);
.article-title {
color: var(--second-text-color);
font-weight: 600;
font-size: 1.8em;
+ils-tablet() {
font-size: 1.5em;
}
+ils-mobile() {
font-size: 1.2em;
}
}
.article-header {
position: relative;
padding-left: $avatarWidth;
width: 100%;
height: $avatarWidth;
box-sizing: border-box;
.avatar {
position: absolute;
top: 0
left: 0;
width: $avatarWidth;
height: $avatarWidth;
padding: 1px;
box-sizing: border-box;
border: 1px solid var(--border-color);
border-radius: 50%;
img {
border-radius: 50%;
width: 100%;
height: 100%;
}
}
.info {
padding: 2px 0;
margin-left: 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
.author {
font-weight: 600;
font-size: 1.18em;
display: flex;
align-items: center;
.level {
margin-left: 10px;
color: #fff;
font-size: 12px;
font-weight: 500;
background: var(--selection-color);
padding: 0 4px;
border-radius: 5px;
}
}
}
}
.article-header, .article-header-meta-info {
margin-top: 16px;
+ils-tablet() {
transform: scale(0.88);
transform-origin: left top;
}
}
.article-content {
margin-top: $component-interspace;
text-align: justify;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-color);
}
.post-copyright-info {
margin-top: $component-interspace;
width: 100%;
}
.article-nav {
height: 40px;
margin-top: $component-interspace;
.article-prev {
float: left;
}
.article-next {
float: right;
}
.post-nav-item {
display: none;
+ils-tablet() {
display: inline-block;
}
}
.post-nav-title-item {
+ils-tablet() {
display: none;
}
}
}
}