From 00a0f64be4373afe47a8d13b1c029131d84b057b Mon Sep 17 00:00:00 2001 From: BBaoVanC Date: Tue, 19 Aug 2025 13:40:51 -0500 Subject: [PATCH] WIP body-module and smarter usage of container divs --- assets/css/bobastyle.css | 34 +++++-- layouts/_partials/breadcrumb.html | 2 +- layouts/_partials/top.html | 2 +- layouts/baseof.html | 40 ++++---- layouts/home.html | 6 +- layouts/page.html | 152 +++++++++++++++--------------- 6 files changed, 126 insertions(+), 110 deletions(-) diff --git a/assets/css/bobastyle.css b/assets/css/bobastyle.css index faa59d7..d6508db 100644 --- a/assets/css/bobastyle.css +++ b/assets/css/bobastyle.css @@ -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; diff --git a/layouts/_partials/breadcrumb.html b/layouts/_partials/breadcrumb.html index 6742a44..c0b45c9 100644 --- a/layouts/_partials/breadcrumb.html +++ b/layouts/_partials/breadcrumb.html @@ -1,4 +1,4 @@ -