Hide ToC when scrolling to bottom.
This commit is contained in:
parent
54ed9bcc18
commit
bd5e8be215
4 changed files with 28 additions and 24 deletions
|
@ -69,13 +69,11 @@
|
|||
{% endfor %}
|
||||
|
||||
</div> <!-- div.d-flex.flex-wrap -->
|
||||
|
||||
</div> <!-- #access-tags -->
|
||||
|
||||
</div> <!-- .access -->
|
||||
|
||||
{% if page.layout == 'post' and site.toc and page.toc %}
|
||||
<div id="toc-wrap" class="pl-0 pr-4">
|
||||
<div id="toc-wrap" class="pl-0 pr-4 mb-5">
|
||||
<h3 data-toc-skip class="pl-3 pt-2">
|
||||
{{- site.data.label.panel.toc -}}
|
||||
</h3>
|
||||
|
|
|
@ -75,6 +75,17 @@ layout: default
|
|||
{% endif %}
|
||||
</div><!-- div.post-tail -->
|
||||
|
||||
</div> <!-- .post -->
|
||||
</div> <!-- #post-wrap -->
|
||||
|
||||
{% include panel.html %}
|
||||
|
||||
</div> <!-- .row -->
|
||||
|
||||
<div class="row d-flex justify-content-center bg-white">
|
||||
<div id="post-extend-wrap" class="col-12 col-lg-11 col-xl-8">
|
||||
|
||||
<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
|
||||
{% include related-posts.html %}
|
||||
|
||||
<div class="post-pager d-flex justify-content-between">
|
||||
|
@ -97,18 +108,13 @@ layout: default
|
|||
</a>
|
||||
</div> <!-- div.post-pager -->
|
||||
|
||||
</div> <!-- .post -->
|
||||
</div> <!-- #post-wrap -->
|
||||
|
||||
{% include panel.html %}
|
||||
|
||||
<div id="comment-wrap" class="col-12 col-lg-11 col-xl-8">
|
||||
<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
|
||||
{% if site.disqus.comments and page.comments %}
|
||||
{% include disqus.html %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- .pl-1 pr-1 -->
|
||||
|
||||
</div> <!-- wrap -->
|
||||
|
||||
</div> <!-- .row -->
|
||||
|
||||
|
|
|
@ -352,12 +352,12 @@ body {
|
|||
-webkit-transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
#main>div.row>div:nth-child(1),
|
||||
#main>div.row>div:nth-child(2) {
|
||||
#main>div.row:first-child>div:nth-child(1),
|
||||
#main>div.row:first-child>div:nth-child(2) {
|
||||
margin-top: 3rem; /* same as the height of topbar */
|
||||
}
|
||||
|
||||
#main>div.row>div:first-child {
|
||||
#main>div.row:first-child>div:first-child {
|
||||
min-height: calc(100vh - 3rem - 6rem); /* 3rem for topbar, 6rem for footer */
|
||||
}
|
||||
|
||||
|
@ -806,7 +806,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
|
||||
@media all and (max-width: 576px) {
|
||||
|
||||
#main>div.row>div:first-child {
|
||||
#main>div.row:first-child>div:first-child {
|
||||
min-height: calc(100vh - 3rem - 10rem); /* topbar is 3rem and footer is 10rem */
|
||||
}
|
||||
|
||||
|
@ -969,8 +969,8 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
top: 0 !important;
|
||||
}
|
||||
|
||||
#main>div.row>div:nth-child(1),
|
||||
#main>div.row>div:nth-child(2) {
|
||||
#main>div.row:first-child>div:nth-child(1),
|
||||
#main>div.row:first-child>div:nth-child(2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
|
|
@ -108,33 +108,33 @@
|
|||
right: 1rem;
|
||||
}
|
||||
|
||||
#comment-wrap {
|
||||
#post-extend-wrap {
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
/*
|
||||
The following resposive design aim to make #comment-wrap margin-right same as pannel's width
|
||||
The following resposive design aim to make #post-extend-wrap margin-right same as pannel's width
|
||||
*/
|
||||
@media all and (min-width: 1201px) {
|
||||
#comment-wrap {
|
||||
#post-extend-wrap {
|
||||
margin-right: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1460px) {
|
||||
#comment-wrap {
|
||||
#post-extend-wrap {
|
||||
margin-right: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1650px) {
|
||||
#comment-wrap {
|
||||
#post-extend-wrap {
|
||||
margin-right: calc((100% - 1150px) / 10 + 300px);
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1700px) {
|
||||
#comment-wrap {
|
||||
#post-extend-wrap {
|
||||
margin-right: calc((100% - 1150px) / 8 + 300px);
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue