style: optimize the sidebar style

This commit is contained in:
XPoet 2020-09-02 19:17:24 +08:00
parent 6920186c73
commit e4830ebb1f
5 changed files with 50 additions and 66 deletions

View File

@ -104,5 +104,4 @@ magic:
shadow: true
sidebar:
enable: false
fixed: true
position: right # values: left | right

View File

@ -10,77 +10,61 @@
.category-label {
margin-bottom: 12px;
padding-bottom: 12px;
//padding-left: 10px;
font-size: 16px;
font-weight: 600;
border-bottom: 1px solid var(--border-color);
/*&::after {
content: '';
position: absolute;
top: 20px;
left: 20px;
width: 4px;
height: 20px;
background: #333;
}
*/
}
.category-list {
li.category-list-item {
padding: 6px;
margin-bottom: 10px;
border: 1px solid var(--border-color);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.3s ease;
&:last-child {
margin-bottom: 0;
}
&:hover {
box-shadow: 0 0 5px var(--border-color);
transform: scale(1.02);
}
.number {
font-size: 12px;
background: skyblue;
border-radius: 2px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
color: var(--background-color);
}
}
}
.post-category-list {
.post-category-list-item {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
.post-category-list-link {
a.post-category-list-link {
&:hover {
font-weight: 550;
}
}
.post-category-list-count {
span.post-category-list-count {
float: right;
&::before {
content: '';
}
&::after {
content: '';
}
}
ul.post-category-list-child {
margin-left: 10px;
margin-top: 15px;
li {
&::before {
content: '· ';
}
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
}
}
}

View File

@ -25,10 +25,5 @@
}
.sidebar-other {
if (!hexo-config('magic.sidebar.fixed')) {
position: absolute;
} else {
position: fixed;
}
}
position: absolute;
}

View File

@ -187,4 +187,4 @@
.main-content {
width: 90% !important;
}
}
}

View File

@ -24,7 +24,6 @@ window.addEventListener('DOMContentLoaded', () => {
});
function activateNavByIndex(target) {
if (target.classList.contains('active-current')) return;
document.querySelectorAll('.post-toc .active').forEach(element => {
@ -86,8 +85,15 @@ window.addEventListener('DOMContentLoaded', () => {
createIntersectionObserver(document.documentElement.scrollHeight);
} else {
postTocWrap.innerHTML = '';
articleToc.style.display = 'none';
if (postTocWrap) {
postTocWrap.innerHTML = '';
postTocWrap.style.display = 'none';
}
if (articleToc) {
articleToc.style.display = 'none';
}
}