Clean up dom layout of full-width page lists
They shouldn't be a child of the centered, max-width'd body because they need to be full width. So put them outside of the main container div.
This commit is contained in:
parent
289f55dc19
commit
0e930f7ae1
GPG Key ID:
18089E4E3CCF1D3A
|
|
@ -177,19 +177,14 @@ body {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.center-body {
|
||||
margin: 20px;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.center-body {
|
||||
margin: 20px auto;
|
||||
}
|
||||
.main-container {
|
||||
margin: 20px auto;
|
||||
padding: 0 20px;
|
||||
max-width: 760px; /* 720px + 20px for left & right padding */
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 20px;
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
|
@ -893,47 +888,26 @@ aside.quote {
|
|||
margin: 25px 0;
|
||||
}
|
||||
|
||||
.full-width-page-list > hr,
|
||||
.full-width-page-list > h1 {
|
||||
.related-posts > hr,
|
||||
.related-posts > h1 {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.full-width-page-list .page {
|
||||
.related-posts .page {
|
||||
min-width: 300px;
|
||||
max-width: 300px;
|
||||
|
||||
}
|
||||
|
||||
.full-width-page-list .page:first-child {
|
||||
.related-posts .page:first-child {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.full-width-page-list .page:last-child {
|
||||
.related-posts .page:last-child {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
/* when the screen is smaller than max size, make sure that the .related div
|
||||
* still reaches the screen edge. then if the posts overflow and require
|
||||
* scrolling, you can see it cut off on the side of your phone screen
|
||||
*/
|
||||
.full-width-page-list {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
.full-width-page-list {
|
||||
/* this makes it full width -- 720px max-width on body it is exactly 720px
|
||||
* so .related takes up full width
|
||||
*/
|
||||
margin-left: calc(-100vw / 2 + 720px / 2);
|
||||
margin-right: calc(-100vw / 2 + 720px / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.full-width-page-list .page-list {
|
||||
.related-posts .page-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
|
|
@ -960,8 +934,7 @@ aside.quote {
|
|||
.post-meta-edit-history,
|
||||
.prevnext,
|
||||
.share-buttons,
|
||||
.related-posts,
|
||||
.latest-posts {
|
||||
.related-posts {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -977,7 +950,7 @@ aside.quote {
|
|||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.center-body {
|
||||
.main-container {
|
||||
max-width: 100%;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,9 +32,6 @@ params:
|
|||
# gitFileIcon: github-circle
|
||||
# gitHistoryURL: https://github.com/BBaoVanC/bobatheme/commits/master
|
||||
|
||||
# display a "Latest Posts" section on the homepage below its content
|
||||
homepageLatestPosts: true
|
||||
|
||||
# social media share icons
|
||||
# shareButtons:
|
||||
# twitter: true
|
||||
|
|
|
|||
|
|
@ -6,10 +6,20 @@
|
|||
<body>
|
||||
<a id="top" aria-hidden="true"></a>
|
||||
|
||||
<a id="back-to-top" href="#top" aria-label="{{ i18n "aria_back_to_top_button" }}">
|
||||
{{ partial "icon.html" "chevron-up" }}
|
||||
</a>
|
||||
<noscript>
|
||||
<style>
|
||||
#back-to-top {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</noscript>
|
||||
|
||||
{{ partial "top.html" . }}
|
||||
|
||||
<div class="center-body">
|
||||
|
||||
<div class="main-container">
|
||||
{{ if not .IsHome }}
|
||||
{{ partial "breadcrumb.html" . }}
|
||||
{{ end }}
|
||||
|
|
@ -19,31 +29,23 @@
|
|||
THIS TEXT SHOULD NOT SHOW. YUZSIQGHE (that string is so I can grep for it)
|
||||
{{ end }}
|
||||
</main>
|
||||
|
||||
{{ if or .Site.Copyright .Site.Params.footer }}
|
||||
<footer>
|
||||
{{ with .Site.Copyright }}
|
||||
<p>{{ . | safeHTML }}</p>
|
||||
{{ end }}
|
||||
|
||||
{{ with .Site.Params.footer }}
|
||||
{{ . | $.RenderString (dict "display" "block") }}
|
||||
{{ end }}
|
||||
</footer>
|
||||
{{ end }}
|
||||
|
||||
<a id="back-to-top" href="#top" aria-label="{{ i18n "aria_back_to_top_button" }}">
|
||||
{{ partial "icon.html" "chevron-up" }}
|
||||
</a>
|
||||
<noscript>
|
||||
<style>
|
||||
#back-to-top {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</noscript>
|
||||
|
||||
</div>
|
||||
|
||||
{{ block "post-body" . }}
|
||||
{{/* currently this is only used for related posts */}}
|
||||
{{ end }}
|
||||
|
||||
{{ if or .Site.Copyright .Site.Params.footer }}
|
||||
<footer>
|
||||
{{ with .Site.Copyright }}
|
||||
<p>{{ . | safeHTML }}</p>
|
||||
{{ end }}
|
||||
|
||||
{{ with .Site.Params.footer }}
|
||||
{{ . | $.RenderString (dict "display" "block") }}
|
||||
{{ end }}
|
||||
</footer>
|
||||
{{ end }}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -73,17 +73,16 @@
|
|||
{{ partial "comments.html" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
{{ define "post-body" }}
|
||||
{{ $related := .Site.RegularPages.Related . | first 10 }}
|
||||
{{ with $related }}
|
||||
<div class="related-posts full-width-page-list">
|
||||
<div class="related-posts">
|
||||
<hr>
|
||||
<h1>{{ i18n "related_posts" }}</h1>
|
||||
{{ partial "page-list.html" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.latestPostsOnContent }}
|
||||
{{ partialCached "latest-posts.html" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
<div class="latest-posts full-width-page-list">
|
||||
<hr>
|
||||
<h1>
|
||||
{{ i18n "latest_posts" }}
|
||||
{{ partial "rss-link.html" .Site.Home }}
|
||||
</h1>
|
||||
|
||||
{{ with .Site.RegularPages | first 5 }}
|
||||
{{ partial "page-list.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
Loading…
Reference in New Issue