From 0e930f7ae12ede067624e2d128b7d23f1233702f Mon Sep 17 00:00:00 2001 From: BBaoVanC Date: Sat, 21 Oct 2023 19:44:02 -0500 Subject: [PATCH] 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. --- assets/css/bobastyle.css | 53 +++++++---------------------- exampleSite/config.yaml | 3 -- layouts/_default/baseof.html | 54 ++++++++++++++++-------------- layouts/_default/single.html | 9 +++-- layouts/partials/latest-posts.html | 11 ------ 5 files changed, 45 insertions(+), 85 deletions(-) delete mode 100644 layouts/partials/latest-posts.html diff --git a/assets/css/bobastyle.css b/assets/css/bobastyle.css index ac10c5f..26488a4 100644 --- a/assets/css/bobastyle.css +++ b/assets/css/bobastyle.css @@ -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; } diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 2c568fe..61047a9 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -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 diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index a1344f0..1369fae 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -6,10 +6,20 @@ + + {{ partial "icon.html" "chevron-up" }} + + + {{ partial "top.html" . }} -
- +
{{ 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 }} - - {{ if or .Site.Copyright .Site.Params.footer }} -
- {{ with .Site.Copyright }} -

{{ . | safeHTML }}

- {{ end }} - - {{ with .Site.Params.footer }} - {{ . | $.RenderString (dict "display" "block") }} - {{ end }} -
- {{ end }} - - - {{ partial "icon.html" "chevron-up" }} - - -
+ + {{ block "post-body" . }} + {{/* currently this is only used for related posts */}} + {{ end }} + + {{ if or .Site.Copyright .Site.Params.footer }} +
+ {{ with .Site.Copyright }} +

{{ . | safeHTML }}

+ {{ end }} + + {{ with .Site.Params.footer }} + {{ . | $.RenderString (dict "display" "block") }} + {{ end }} +
+ {{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 82475a4..36dca8c 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -73,17 +73,16 @@ {{ partial "comments.html" . }}
{{ end }} +{{ end }} + +{{ define "post-body" }} {{ $related := .Site.RegularPages.Related . | first 10 }} {{ with $related }} -
+

{{ i18n "related_posts" }}

{{ partial "page-list.html" . }}
{{ end }} - - {{ if .Site.Params.latestPostsOnContent }} - {{ partialCached "latest-posts.html" . }} - {{ end }} {{ end }} diff --git a/layouts/partials/latest-posts.html b/layouts/partials/latest-posts.html deleted file mode 100644 index 096160e..0000000 --- a/layouts/partials/latest-posts.html +++ /dev/null @@ -1,11 +0,0 @@ -
-
-

- {{ i18n "latest_posts" }} - {{ partial "rss-link.html" .Site.Home }} -

- - {{ with .Site.RegularPages | first 5 }} - {{ partial "page-list.html" . }} - {{ end }} -