mirror of
https://github.com/BBaoVanC/bobatheme.git
synced 2025-08-30 08:37:34 -05:00
WIP body-module and smarter usage of container divs
This commit is contained in:
@@ -293,17 +293,35 @@ body {
|
||||
color: var(--text-0);
|
||||
overflow-wrap: break-word;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--page-margin);
|
||||
}
|
||||
|
||||
.main-container {
|
||||
margin: var(--page-margin) auto;
|
||||
/* use padding because otherwise there's no way to have margin be both auto, and a minimum value */
|
||||
padding: 0 var(--page-margin);
|
||||
max-width: calc(720px + 2 * var(--page-margin)); /* padding is included in the element's width */
|
||||
.body-module {
|
||||
width: 100%; /* without, it collapses inside flexbox for some reason TODO: figure out why */
|
||||
}
|
||||
|
||||
.body-module--marginless {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.body-module--full-width {
|
||||
margin: 0 var(--page-margin);
|
||||
/*
|
||||
margin-left: var(--page-margin);
|
||||
margin-right: var(--page-margin);
|
||||
*/
|
||||
}
|
||||
.body-module--wide {
|
||||
margin-left: var(--page-margin);
|
||||
margin-right: var(--page-margin);
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin: var(--page-margin) 0;
|
||||
margin-bottom: var(--page-margin);
|
||||
text-align: center;
|
||||
font-size: smaller;
|
||||
}
|
||||
@@ -376,10 +394,6 @@ footer p {
|
||||
|
||||
/* Breadcrumb navigation {{{ */
|
||||
|
||||
.breadcrumb {
|
||||
margin: var(--page-margin) 0;
|
||||
}
|
||||
|
||||
.breadcrumb ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<nav class="breadcrumb" aria-label="{{ i18n "aria_breadcrumbnav" }}">
|
||||
<nav class="body-module body-module--wide breadcrumb" aria-label="{{ i18n "aria_breadcrumbnav" }}">
|
||||
<ul>
|
||||
{{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
|
||||
</ul>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<header class="top">
|
||||
<header class="body-module body-module--marginless top">
|
||||
<div class="brand">
|
||||
<a href="{{ .Site.Home.Permalink | absLangURL }}">
|
||||
{{ .Site.Title | markdownify }}
|
||||
|
||||
@@ -8,29 +8,29 @@
|
||||
|
||||
{{ partial "top.html" . }}
|
||||
|
||||
<div class="main-container">
|
||||
{{ if not .IsHome }}
|
||||
{{ partial "breadcrumb.html" . }}
|
||||
{{ end }}
|
||||
{{ if not .IsHome }}
|
||||
{{ partial "breadcrumb.html" . }}
|
||||
{{ end }}
|
||||
|
||||
<main id="main-content">
|
||||
{{ block "main" . }}
|
||||
THIS TEXT SHOULD NOT SHOW. YUZSIQGHE (that string is so I can grep for it)
|
||||
{{ block "pre-body" . }}{{ end }}
|
||||
|
||||
<main id="main-content">
|
||||
{{ 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 class="body-module body-module--wide">
|
||||
{{ with .Site.Copyright }}
|
||||
{{ . | safeHTML }}
|
||||
{{ end }}
|
||||
</main>
|
||||
|
||||
{{ if or .Site.Copyright .Site.Params.footer }}
|
||||
<footer>
|
||||
{{ with .Site.Copyright }}
|
||||
{{ . | safeHTML }}
|
||||
{{ end }}
|
||||
|
||||
{{ with .Site.Params.footer }}
|
||||
{{ . | $.RenderString (dict "display" "block") }}
|
||||
{{ end }}
|
||||
</footer>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ with .Site.Params.footer }}
|
||||
{{ . | $.RenderString (dict "display" "block") }}
|
||||
{{ end }}
|
||||
</footer>
|
||||
{{ end }}
|
||||
|
||||
{{ block "post-body" . }}
|
||||
{{/* currently this is only used for related posts */}}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
{{ define "main" }}
|
||||
{{ with .Content }}
|
||||
<article class="homepage-content">
|
||||
<article class="body-module body-module--wide">
|
||||
{{ . }}
|
||||
</article>
|
||||
<hr>
|
||||
<hr class="body-module body-module--wide">
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.homepageLatestPosts }}
|
||||
<div class="homepage-latest-posts">
|
||||
<div class="body-module body-module--wide">
|
||||
<h1>
|
||||
{{ i18n "latest_posts" }}
|
||||
{{ partial "rss-link.html" . }}
|
||||
|
||||
@@ -1,84 +1,86 @@
|
||||
{{ define "main" }}
|
||||
<div class="page-title">
|
||||
<h1>
|
||||
{{ .Title | markdownify }}
|
||||
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
|
||||
</h1>
|
||||
</div>
|
||||
<article class="body-module body-module--wide">
|
||||
<div class="page-title">
|
||||
<h1>
|
||||
{{ .Title | markdownify }}
|
||||
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{{ partial "page-metadata/post-full.html" . }}
|
||||
{{ partial "series-box.html" . }}
|
||||
{{ partial "page-metadata/post-full.html" . }}
|
||||
{{ partial "series-box.html" . }}
|
||||
|
||||
{{ if .Params.Toc }}
|
||||
<div class="table-of-contents" aria-label="{{ i18n "aria_table_of_contents" }}">
|
||||
<details>
|
||||
<summary>{{ i18n "table_of_contents" }}</summary>
|
||||
{{ if .Params.Toc }}
|
||||
<div class="table-of-contents" aria-label="{{ i18n "aria_table_of_contents" }}">
|
||||
<details>
|
||||
<summary>{{ i18n "table_of_contents" }}</summary>
|
||||
{{ .TableOfContents }}
|
||||
</details>
|
||||
</div>
|
||||
<div class="table-of-contents print">
|
||||
{{ i18n "table_of_contents" }}
|
||||
{{ .TableOfContents }}
|
||||
</details>
|
||||
</div>
|
||||
<div class="table-of-contents print">
|
||||
{{ i18n "table_of_contents" }}
|
||||
{{ .TableOfContents }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ partial "feature-figure.html" . }}
|
||||
|
||||
<article class="post-content" data-pagefind-body>
|
||||
{{ .Content }}
|
||||
</article>
|
||||
|
||||
{{ partial "series-box.html" . }}
|
||||
|
||||
{{ if or .NextInSection .PrevInSection }}
|
||||
<div class="prevnext">
|
||||
{{ with .NextInSection }}
|
||||
<a class="prev" href="{{ .Permalink }}">
|
||||
<div class="prev-caption">
|
||||
← {{ i18n "newer_post" }}
|
||||
</div>
|
||||
<div class="prev-post">
|
||||
{{ .Title | markdownify }}
|
||||
</div>
|
||||
</a>
|
||||
{{ else }}
|
||||
<div class="prev"></div>
|
||||
{{ end }}
|
||||
|
||||
{{ with .PrevInSection }}
|
||||
<a class="next" href="{{ .Permalink }}">
|
||||
<div class="next-caption">
|
||||
{{ i18n "older_post" }} →
|
||||
</div>
|
||||
<div class="next-post">
|
||||
{{ .Title | markdownify }}
|
||||
</div>
|
||||
</a>
|
||||
{{ else }}
|
||||
<div class="next"></div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.shareButtons }}
|
||||
{{ partial "share.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ if .Params.comments }}
|
||||
<div class="comments">
|
||||
{{ partial "comments.html" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ partial "feature-figure.html" . }}
|
||||
|
||||
<article class="post-content" data-pagefind-body>
|
||||
{{ .Content }}
|
||||
{{ define "post-body" }}
|
||||
{{ $related := .Site.RegularPages.Related . | first 10 }}
|
||||
{{ with $related }}
|
||||
<div class="related-posts">
|
||||
<hr>
|
||||
<h1>{{ i18n "related_posts" }}</h1>
|
||||
{{ partial "page-list.html" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</article>
|
||||
|
||||
{{ partial "series-box.html" . }}
|
||||
|
||||
{{ if or .NextInSection .PrevInSection }}
|
||||
<div class="prevnext">
|
||||
{{ with .NextInSection }}
|
||||
<a class="prev" href="{{ .Permalink }}">
|
||||
<div class="prev-caption">
|
||||
← {{ i18n "newer_post" }}
|
||||
</div>
|
||||
<div class="prev-post">
|
||||
{{ .Title | markdownify }}
|
||||
</div>
|
||||
</a>
|
||||
{{ else }}
|
||||
<div class="prev"></div>
|
||||
{{ end }}
|
||||
|
||||
{{ with .PrevInSection }}
|
||||
<a class="next" href="{{ .Permalink }}">
|
||||
<div class="next-caption">
|
||||
{{ i18n "older_post" }} →
|
||||
</div>
|
||||
<div class="next-post">
|
||||
{{ .Title | markdownify }}
|
||||
</div>
|
||||
</a>
|
||||
{{ else }}
|
||||
<div class="next"></div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.shareButtons }}
|
||||
{{ partial "share.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ if .Params.comments }}
|
||||
<div class="comments">
|
||||
{{ partial "comments.html" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
{{ define "post-body" }}
|
||||
{{ $related := .Site.RegularPages.Related . | first 10 }}
|
||||
{{ with $related }}
|
||||
<div class="related-posts">
|
||||
<hr>
|
||||
<h1>{{ i18n "related_posts" }}</h1>
|
||||
{{ partial "page-list.html" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
Reference in New Issue
Block a user