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:
BBaoVanC 2023-10-21 19:44:02 -05:00
parent 289f55dc19
commit 0e930f7ae1
Signed by: bbaovanc
GPG Key ID: 18089E4E3CCF1D3A
5 changed files with 45 additions and 85 deletions

View File

@ -177,19 +177,14 @@ body {
margin: 0;
}
.center-body {
margin: 20px;
max-width: 720px;
}
@media (min-width: 760px) {
.center-body {
.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;
}

View File

@ -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

View File

@ -6,32 +6,6 @@
<body>
<a id="top" aria-hidden="true"></a>
{{ partial "top.html" . }}
<div class="center-body">
{{ if not .IsHome }}
{{ partial "breadcrumb.html" . }}
{{ end }}
<main>
{{ block "main" . }}
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>
@ -43,7 +17,35 @@
</style>
</noscript>
{{ partial "top.html" . }}
<div class="main-container">
{{ if not .IsHome }}
{{ partial "breadcrumb.html" . }}
{{ end }}
<main>
{{ block "main" . }}
THIS TEXT SHOULD NOT SHOW. YUZSIQGHE (that string is so I can grep for it)
{{ end }}
</main>
</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>

View File

@ -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 }}

View File

@ -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>