asandikci.com/web
1
0
Fork 0
Code Issues 10 Pull requests Projects Releases Packages Wiki Activity Actions

Hide ToC when scrolling to bottom.

Browse source
This commit is contained in:
Cotes Chung 2019-11-27 17:08:54 +08:00
parent 54ed9bcc18
commit bd5e8be215
4 changed files with 28 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
_includes/panel.html
View file

@ -69,13 +69,11 @@
{% endfor %} {% endfor %}
</div> <!-- div.d-flex.flex-wrap --> </div> <!-- div.d-flex.flex-wrap -->
</div> <!-- #access-tags --> </div> <!-- #access-tags -->
</div> <!-- .access --> </div> <!-- .access -->
{% if page.layout == 'post' and site.toc and page.toc %} {% 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"> <h3 data-toc-skip class="pl-3 pt-2">
{{- site.data.label.panel.toc -}} {{- site.data.label.panel.toc -}}
</h3> </h3>

24
_layouts/post.html
View file

@ -75,6 +75,17 @@ layout: default
{% endif %} {% endif %}
</div><!-- div.post-tail --> </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 %} {% include related-posts.html %}
<div class="post-pager d-flex justify-content-between"> <div class="post-pager d-flex justify-content-between">
@ -97,18 +108,13 @@ layout: default
</a> </a>
</div> <!-- div.post-pager --> </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 %} {% if site.disqus.comments and page.comments %}
{% include disqus.html %} {% include disqus.html %}
{% endif %} {% endif %}
</div>
</div> </div> <!-- .pl-1 pr-1 -->
</div> <!-- wrap -->
</div> <!-- .row --> </div> <!-- .row -->

12
assets/css/main.scss
View file

@ -352,12 +352,12 @@ body {
-webkit-transition: transform 0.4s ease; -webkit-transition: transform 0.4s ease;
} }
#main>div.row>div:nth-child(1), #main>div.row:first-child>div:nth-child(1),
#main>div.row>div:nth-child(2) { #main>div.row:first-child>div:nth-child(2) {
margin-top: 3rem; /* same as the height of topbar */ 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 */ 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) { @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 */ 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; top: 0 !important;
} }
#main>div.row>div:nth-child(1), #main>div.row:first-child>div:nth-child(1),
#main>div.row>div:nth-child(2) { #main>div.row:first-child>div:nth-child(2) {
margin-top: 0; margin-top: 0;
} }

12
assets/css/post.scss
View file

@ -108,33 +108,33 @@
right: 1rem; right: 1rem;
} }
#comment-wrap { #post-extend-wrap {
min-height: 2rem; 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) { @media all and (min-width: 1201px) {
#comment-wrap { #post-extend-wrap {
margin-right: 25%; margin-right: 25%;
} }
} }
@media all and (min-width: 1460px) { @media all and (min-width: 1460px) {
#comment-wrap { #post-extend-wrap {
margin-right: 300px; margin-right: 300px;
} }
} }
@media all and (min-width: 1650px) { @media all and (min-width: 1650px) {
#comment-wrap { #post-extend-wrap {
margin-right: calc((100% - 1150px) / 10 + 300px); margin-right: calc((100% - 1150px) / 10 + 300px);
} }
} }
@media all and (min-width: 1700px) { @media all and (min-width: 1700px) {
#comment-wrap { #post-extend-wrap {
margin-right: calc((100% - 1150px) / 8 + 300px); margin-right: calc((100% - 1150px) / 8 + 300px);
} }
} }