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

Improved the posts layout.

Browse source
This commit is contained in:
Cotes Chung 2020-07-30 04:58:05 +08:00
parent 4675d42f90
commit 112091cbf6
4 changed files with 20 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
_includes/disqus.html
View file

@ -7,8 +7,10 @@
MIT License MIT License
--> -->
<div id="disqus" class="pt-2 pb-4"> <div id="disqus" class="pt-2 pb-2">
<p class="font-italic text-center text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p> <p class="font-italic text-center text-muted small">
Comments powered by <a href="https://disqus.com/">Disqus</a>.
</p>
</div> </div>
<script src="{{ site.baseurl }}/assets/js/lib/jquery.disqusloader.min.js"></script> <script src="{{ site.baseurl }}/assets/js/lib/jquery.disqusloader.min.js"></script>

2
_includes/related-posts.html
View file

@ -84,7 +84,7 @@
{% if index_list.size > 0 %} {% if index_list.size > 0 %}
<div id="related-posts" class="mt-4 mb-2 mb-sm-4 pb-2"> <div id="related-posts" class="mt-5 mb-2 mb-sm-4">
<h3 class="pt-2 mt-1 mb-4 ml-1" data-toc-skip>{{ site.data.label.post.relate_posts }}</h3> <h3 class="pt-2 mt-1 mb-4 ml-1" data-toc-skip>{{ site.data.label.post.relate_posts }}</h3>
<div class="card-deck mb-4"> <div class="card-deck mb-4">
{% for entry in index_list %} {% for entry in index_list %}

14
_layouts/post.html
View file

@ -99,7 +99,7 @@ layout: default
{% endif %} {% endif %}
<div class="post-tail-bottom <div class="post-tail-bottom
d-flex justify-content-between align-items-center pt-5 pb-2"> d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
{% if site.data.rights.license %} {% if site.data.rights.license %}
<div class="license-wrapper"> <div class="license-wrapper">
This post is licensed under This post is licensed under
@ -116,6 +116,7 @@ layout: default
</div> <!-- .post --> </div> <!-- .post -->
</div> <!-- #post-wrapper --> </div> <!-- #post-wrapper -->
{% include panel.html %} {% include panel.html %}
@ -123,9 +124,10 @@ layout: default
</div> <!-- .row --> </div> <!-- .row -->
<div class="row"> <div class="row">
<div id="post-extend-wrapper" class="col-12 col-lg-11 col-xl-8"> <div class="col-12 col-lg-11 col-xl-8">
<div id="post-extend-wrapper" class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4"> {% include related-posts.html %}
{% include post-nav.html %} {% include post-nav.html %}
@ -133,12 +135,10 @@ layout: default
{% include disqus.html %} {% include disqus.html %}
{% endif %} {% endif %}
{% include related-posts.html %}
</div> <!-- .pl-1 pr-1 -->
</div> <!-- #post-extend-wrapper --> </div> <!-- #post-extend-wrapper -->
</div> <!-- .col-* -->
</div> <!-- .row --> </div> <!-- .row -->
{% include lozad.html %} {% include lozad.html %}

33
assets/css/post.scss
View file

@ -45,7 +45,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
} }
.post-tail-wrapper { .post-tail-wrapper {
margin-top: 4rem; margin-top: 6rem;
border-bottom: 1px double var(--main-border-color); border-bottom: 1px double var(--main-border-color);
font-size: 0.85rem; font-size: 0.85rem;
} }
@ -209,6 +209,9 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
#post-extend-wrapper { #post-extend-wrapper {
min-height: 2rem; min-height: 2rem;
#disqus_thread {
margin-bottom: 2rem;
}
} }
.post-tail-bottom a { .post-tail-bottom a {
@ -350,31 +353,3 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
} }
} }
/*
The following resposive design aim to
make #post-extend-wrapper margin-right same as pannel's width
*/
@media all and (min-width: 1200px) {
#post-extend-wrapper {
margin-right: 25%;
}
}
@media all and (min-width: 1460px) {
#post-extend-wrapper {
margin-right: 300px;
}
}
@media all and (min-width: 1650px) {
#post-extend-wrapper {
margin-right: calc((100% - 1150px) / 10 + 300px);
}
}
@media all and (min-width: 1700px) {
#post-extend-wrapper {
margin-right: calc((100% - 1150px) / 8 + 300px);
}
}