bbaovanc/bobatheme
1
0
Fork 0
mirror of https://github.com/BBaoVanC/bobatheme.git synced 2024-12-21 20:03:18 -06:00
Code Issues Projects Releases Wiki Activity

Clean up dom layout of full-width page lists

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
assets/css/bobastyle.css
View File

@ -177,19 +177,14 @@ body {
margin: 0; margin: 0;
} }
.center-body { .main-container {
margin: 20px; margin: 20px auto;
max-width: 720px; padding: 0 20px;
} max-width: 760px; /* 720px + 20px for left & right padding */
@media (min-width: 760px) {
.center-body {
margin: 20px auto;
}
} }
footer { footer {
margin-top: 20px; margin: 20px 0;
text-align: center; text-align: center;
font-size: smaller; font-size: smaller;
} }
@ -893,47 +888,26 @@ aside.quote {
margin: 25px 0; margin: 25px 0;
} }
.full-width-page-list > hr, .related-posts > hr,
.full-width-page-list > h1 { .related-posts > h1 {
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
} }
.full-width-page-list .page { .related-posts .page {
min-width: 300px; min-width: 300px;
max-width: 300px; max-width: 300px;
} }
.full-width-page-list .page:first-child { .related-posts .page:first-child {
margin-left: 20px; margin-left: 20px;
} }
.full-width-page-list .page:last-child { .related-posts .page:last-child {
margin-right: 20px; margin-right: 20px;
} }
@media (max-width: 720px) { .related-posts .page-list {
/* 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 {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 20px; gap: 20px;
@ -960,8 +934,7 @@ aside.quote {
.post-meta-edit-history, .post-meta-edit-history,
.prevnext, .prevnext,
.share-buttons, .share-buttons,
.related-posts, .related-posts {
.latest-posts {
display: none; display: none;
} }
@ -977,7 +950,7 @@ aside.quote {
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
.center-body { .main-container {
max-width: 100%; max-width: 100%;
margin: 8px 0; margin: 8px 0;
} }

3
exampleSite/config.yaml
View File

@ -32,9 +32,6 @@ params:
# gitFileIcon: github-circle # gitFileIcon: github-circle
# gitHistoryURL: https://github.com/BBaoVanC/bobatheme/commits/master # 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 # social media share icons
# shareButtons: # shareButtons:
# twitter: true # twitter: true

54
layouts/_default/baseof.html
View File

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

9
layouts/_default/single.html
View File

@ -73,17 +73,16 @@
{{ partial "comments.html" . }} {{ partial "comments.html" . }}
</div> </div>
{{ end }} {{ end }}
{{ end }}
{{ define "post-body" }}
{{ $related := .Site.RegularPages.Related . | first 10 }} {{ $related := .Site.RegularPages.Related . | first 10 }}
{{ with $related }} {{ with $related }}
<div class="related-posts full-width-page-list"> <div class="related-posts">
<hr> <hr>
<h1>{{ i18n "related_posts" }}</h1> <h1>{{ i18n "related_posts" }}</h1>
{{ partial "page-list.html" . }} {{ partial "page-list.html" . }}
</div> </div>
{{ end }} {{ end }}
{{ if .Site.Params.latestPostsOnContent }}
{{ partialCached "latest-posts.html" . }}
{{ end }}
{{ end }} {{ end }}

11
layouts/partials/latest-posts.html
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>