iotcat
/
hexo-theme-volantis
mirror of https://github.com/IoTcat/hexo-theme-volantis.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

enable toc

Browse Source
i18n
xaoxuu 6 years ago
parent c1562b2da7
commit 99af61594a
2 changed files with 65 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      layout/_partial/article.ejs
  2. 118
      source/less/_toc.less

2
layout/_partial/article.ejs
Unescape View File

@ -17,7 +17,7 @@
<%- partial('categories',{post:post}) %> <%- partial('categories',{post:post}) %>
</section> </section>
<% if(post.toc!==false){ %> <% if(post.toc!==false){ %>
<!-- <section class="toc-wrapper"><%- toc(post.content, {list_number: false}) %></section> --> <section class="toc-wrapper"><%- toc(post.content, {list_number: false}) %></section>
<% } %> <% } %>
<section class="article typo"> <section class="article typo">

118
source/less/_toc.less
Unescape View File

@ -1,62 +1,72 @@
.toc-wrapper{ .toc-wrapper{
position:fixed; position:fixed;
top: @header-height + @gap * 2; top: @header-height + @gap * 2;
right: 50%; right: 50%;
margin-right: -@container-width/2; margin-right: -@container-width/2;
border-radius: @border-radius-width; border-radius: @border-radius-width;
.enable-trans(); .enable-trans();
&:extend(.z-depth-main); &:extend(.z-depth-main);
&:hover { &:hover {
&:extend(.z-depth-main-raised); &:extend(.z-depth-main-raised);
} }
&:active { &:active {
// box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); }
}
// prevent toc is too heigh.
overflow: auto;
max-height: ~"calc(100% - @{header-height} - 2 * @{gap})";
@media(max-width: @container-width){
right: 0;
margin-right:0;
}
@media(max-width: @on-phone){ overflow: auto;
top: @header-height + @gap; max-height: ~"calc(100% - @{header-height} - 2 * @{gap})";
right: 0px - @side-width; @media(max-width: @container-width){
border-radius: 0; right: 0;
margin-right:0; margin-right:0;
&.active{
transform: translateX(-@side-width - 10px);
} }
}
width: @side-width; @media(max-width: @on-phone){
z-index:3; top: @header-height + @gap;
&:extend(.z-depth-2); right: 0px - @side-width;
padding: @gap; border-radius: 0;
background: white; margin-right:0;
a { &.active{
color: fade(@text-color, 60%); transform: translateX(-@side-width - 10px);
font-size: @small-font-size; }
display: inline-block;
&:hover,&:active,&.active{
color: darken(@text-color-theme, 00%);
font-weight: bold;
} }
}
ol{ width: @side-width;
&.toc-child{ z-index:3;
padding-left: @gap; &:extend(.z-depth-2);
padding: @gap 0;
background: white;
a {
padding-left: 8px;
border-left: 0px solid @primary-color;
color: fade(@text-color, 60%);
font-size: @small-font-size;
display: inline-block;
&:hover,&:active,&.active{
color: darken(@text-color-theme, 00%);
font-weight: bold;
border-left-width: 3px;
}
&:active,&.active{
border-left: 3px solid @primary-color;
background:darken(white, 5%);
}
} }
li{ ol{
list-style: none; &.toc-child a{
width: auto; padding-left: 2*@gap;
&:extend(.txt-ellipsis); width: 100%;
}
li{
a{
padding-left: @gap;
width: 100%;
}
list-style: none;
width: auto;
&:extend(.txt-ellipsis);
}
}
&:empty{
display:none;
} }
}
&:empty{
display:none;
}
} }

Write Preview
Loading…
Cancel
Save