Merge branch 'feature/improve-typography' into develop
This commit is contained in:
commit
1c3c22bb68
7 changed files with 23 additions and 51 deletions
|
@ -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>
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
|
@ -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,21 +124,20 @@ 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 %}
|
||||||
|
|
||||||
{% if site.disqus.comments and page.comments %}
|
{% if site.disqus.comments and page.comments %}
|
||||||
{% include disqus.html %}
|
{% include disqus.html %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% include related-posts.html %}
|
</div> <!-- #post-extend-wrapper -->
|
||||||
|
|
||||||
</div> <!-- .pl-1 pr-1 -->
|
</div> <!-- .col-* -->
|
||||||
|
|
||||||
</div> <!-- #post-extend-wrapper -->
|
|
||||||
|
|
||||||
</div> <!-- .row -->
|
</div> <!-- .row -->
|
||||||
|
|
||||||
|
|
|
@ -493,8 +493,7 @@ footer {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
@include semi-bold;
|
color: var(--footer-link);
|
||||||
color: var(---footer-link);
|
|
||||||
&:link {
|
&:link {
|
||||||
@include no-text-decoration;
|
@include no-text-decoration;
|
||||||
}
|
}
|
||||||
|
|
|
@ -84,7 +84,7 @@
|
||||||
--timeline-year-dot-color: var(--timeline-color);
|
--timeline-year-dot-color: var(--timeline-color);
|
||||||
|
|
||||||
/* Footer */
|
/* Footer */
|
||||||
---footer-link: rgb(146, 146, 146);
|
--footer-link: rgb(171 171 171);
|
||||||
|
|
||||||
.post-content img {
|
.post-content img {
|
||||||
filter: brightness(90%);
|
filter: brightness(90%);
|
||||||
|
|
|
@ -120,5 +120,5 @@
|
||||||
|
|
||||||
--footnote-target-bg: lightcyan;
|
--footnote-target-bg: lightcyan;
|
||||||
|
|
||||||
---footer-link: inherit;
|
--footer-link: #424242;
|
||||||
}
|
}
|
||||||
|
|
|
@ -27,10 +27,6 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
|
||||||
border-color: var(--btn-border-color);
|
border-color: var(--btn-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.author {
|
|
||||||
@include semi-bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post {
|
.post {
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
@ -45,7 +41,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 +205,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 +349,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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in a new issue