hexo-theme-mengd
Version:
A clean and lightweight Hexo theme
192 lines (162 loc) • 4.28 kB
text/stylus
.article-info {
display: flex;
align-items: center;
margin-bottom: 1.667rem;
.avatar {
flex: 0 0 auto;
margin-right: 1rem ;
width: 3.333rem;
height: 3.333rem;
border-radius: 50% ;
}
.article-meta {
min-width: 0;
flex-grow: 1;
min-height: 43px;
.author-name {
height: 2rem;
font-size: 1.333rem;
font-weight: 500;
color: var(--main-color-text);
line-height: 2rem;
}
.article-meta-list {
display: flex;
font-size: 1.167rem;
color: #8a919f;
margin-top: 2px;
line-height: 22px;
}
time {
letter-spacing: 1px;
}
.article-meta-item-wrap {
display: flex;
}
.article-meta-item {
display: flex;
align-items: center;
margin-left: 1rem;
span {
margin-left: 4px;
}
}
}
}
.article-content {
word-break: break-word;
line-height: 1.75;
font-weight: 400;
font-size: 16px;
overflow-x: hidden;
}
.toc-wrap.sidebar-block .sidebar-body {
max-height: unset;
}
.toc-wrap {
.toc-list {
overflow-y: auto;
max-height: 70vh;
li {
list-style: none;
line-height: 30px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
.toc-child {
padding-left: 1rem;
}
}
}
.toc, .toc-list>li {
padding: 0;
}
}
.toc-btn {
--size: 2rem;
display: none;
width: var(--size);
height: var(--size);
opacity: 0.9;
padding: 0.2rem;
position: fixed;
bottom: var(--size);
right: var(--size);
border-radius: 50%;
background: var(--main-color-bg);
border: 1px solid var(--main-color-border);
.toc-btn-icon {
fill: #ff5724;
margin-top: calc(((var(--size) - 1.6rem) / 2));
margin-left: calc(((var(--size) - 1.6rem) / 2));
}
}
@media (max-width: 500px) {
.article-info .article-meta .article-meta-list {
flex-direction: column;
}
.article-info .article-meta .article-meta-item:first-child {
margin: 0;
}
}
@media (max-width: 1000px) {
.toc-btn {
display: block;
}
.toc-wrap.sidebar-block {
display: block;
z-index: 1;
width: 0;
height: 0;
margin: 0 6rem 0 -6rem;
position: fixed;
top: unset;
right: -4rem;
bottom: 6rem;
.toc-title, .sidebar-body {
opacity: 0;
visibility: hidden;
}
&:focus-within {
width: auto;
height: auto;
border: 1px solid var(--main-color-border);
}
&:focus-within .toc-title, &:focus-within .sidebar-body {
opacity: 1;
visibility: visible;
transition: opacity 0.2s ease-in;
}
}
}
.article-end {
.article-meta {
display: flex;
.article-categories {
margin-right: 2.67rem;
}
.article-categories, .article-tags {
display: flex;
font-size: 1.167rem;
line-height: 2.286;
.article-categories-name, .article-tags-name {
flex-shrink: 0;
margin-right: 8px;
font-size: 14px;
}
.article-categories-item, .article-tags-item {
display: flex;
align-items: center;
margin-right: 0.667rem;
padding: 0 1rem;
border-radius: 4px;
transition: background-color 0.15s linear;
background-color: #f2f3f5;
color: var(--main-color-text);
border-bottom: unset;
}
}
}
@import '_partial/copyright';
}
@import '_highlight/code_block';