perf(layout): improve margins for tail block (#1243)

Keeps the margin of the elements in the tail area consistent regardless of the number of siblings, or if a <script> is inserted.
This commit is contained in:
Cotes Chung 2023-09-18 03:26:02 +08:00 committed by GitHub
parent e78f67d354
commit 13a3c3c906
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 17 deletions

View file

@ -1,6 +1,6 @@
<!-- The Disqus lazy loading. --> <!-- The Disqus lazy loading. -->
<div id="disqus_thread" class="mb-5"> <div id="disqus_thread">
<p class="text-center text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p> <p class="text-center text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p>
</div> </div>

View file

@ -1121,7 +1121,7 @@ search {
} }
} }
/* --- main wrapper --- */ /* --- basic wrappers --- */
#main-wrapper { #main-wrapper {
position: relative; position: relative;
@ -1135,6 +1135,16 @@ search {
@include ml-mr(0); @include ml-mr(0);
} }
#tail-wrapper {
> :not(script) {
margin-top: 3rem;
}
> :only-child {
margin-top: 0;
}
}
/* --- button back-to-top --- */ /* --- button back-to-top --- */
#back-to-top { #back-to-top {

View file

@ -14,7 +14,6 @@ $search-max-width: 200px !default;
$footer-height: 5rem !default; $footer-height: 5rem !default;
$footer-height-large: 6rem !default; /* screen width: < 850px */ $footer-height-large: 6rem !default; /* screen width: < 850px */
$main-content-max-width: 1250px !default; $main-content-max-width: 1250px !default;
$bottom-min-height: 35rem !default;
$base-radius: 0.5rem !default; $base-radius: 0.5rem !default;
$back2top-size: 2.75rem !default; $back2top-size: 2.75rem !default;

View file

@ -346,21 +346,13 @@ h1 + .post-meta {
} }
} }
#tail-wrapper {
min-height: 2rem;
> *:not(:last-child) {
margin-top: 3rem;
}
> *:nth-last-child(2) {
margin-bottom: 3rem;
}
/* stylelint-disable-next-line selector-id-pattern */ /* stylelint-disable-next-line selector-id-pattern */
#disqus_thread { #disqus_thread {
min-height: 8.5rem; min-height: 8.5rem;
} }
.utterances {
max-width: 100%;
} }
%btn-share-hovor { %btn-share-hovor {