hernik/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: change article menu style

Browse source
This commit is contained in:
jeffreytse 2020-07-12 16:19:42 +08:00
parent b83c3ac237
commit 50a9106b6c
2 changed files with 31 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
_includes/sidebar/article-menu.html
View file

@ -7,7 +7,7 @@
</style> </style>
<div class="post-menu"> <div class="post-menu">
<div class="post-menu-title">Contents</div> <div class="post-menu-title">TOC</div>
<div class="post-menu-content"></div> <div class="post-menu-content"></div>
</div> </div>
@ -49,7 +49,8 @@
var headerHeight = headerTop + headerHeight + 20; var headerHeight = headerTop + headerHeight + 20;
if (headingRect.top <= headerHeight) { if (headingRect.top <= headerHeight) {
var id = 'h-' + h.getAttribute('id'); var id = 'h-' + h.getAttribute('id');
var curActive = menuContent.querySelector('a[href="#' + id + '"]'); var a = menuContent.querySelector('a[href="#' + id + '"]');
var curActive = a.parentNode;
if (curActive) { if (curActive) {
curActive.classList.add('active'); curActive.classList.add('active');
} }

42
_sass/misc/article-menu.scss
View file

@ -7,40 +7,54 @@
max-width: 250px; max-width: 250px;
.post-menu-title { .post-menu-title {
font-size: $base-font-size * 1.35; font-size: $base-font-size * 1.5;
margin-bottom: 6px; margin-bottom: 14px;
font-weight: 600; font-weight: 600;
color: #4e4e4e; color: #222;
&:before {
content: '\f02e';
margin-right: 5px;
font-size: $base-font-size * 1.15;
}
} }
.post-menu-content { .post-menu-content {
ul { ul {
border-left: 1px solid #e9ecef;
$indent: $base-font-size / 4;
$active-bgcolor: #ecebec;
@for $i from 2 to 7 { @for $i from 2 to 7 {
.h-h#{$i} { .h-h#{$i} {
padding-left: ($i - 2) * $base-font-size * 0.9; padding-inline-start: $indent + ($i - 2) * $base-font-size * 1.3;
font-size: (7 - $i) + $base-font-size * 0.9; font-size: $base-font-size * 1.2;
line-height: 1.4;
} }
} }
a { a {
display: flex; display: flex;
padding: 0px 8px; padding: 2px 8px;
color: darken($text-color, 10%);
* { * {
pointer-events: none; pointer-events: none;
} }
&:hover {
text-decoration: none;
color: lighten($text-color, 20%)!important;
}
} }
.active { .active {
color: white; background-color: $active-bgcolor;
background: mix(invert($theme-color), darkorange);
transition: background 0.5s; transition: background 0.5s;
border-left: 2px solid #202020;
margin-left: -2px;
&:hover {
background-color: lighten($active-bgcolor, 2%);
}
a {
color: #121416;
}
} }
} }
} }