Alyssa Ross (3): docs/website: use semantic structure elements docs/website: create reusable "block" class docs/website: pin footer to bottom of viewport docs/website/layouts/index.html | 12 ++++---- .../qaul-theme/layouts/_default/baseof.html | 4 +-- .../qaul-theme/layouts/_default/learning.html | 4 +-- .../qaul-theme/layouts/_default/page.html | 4 +-- .../qaul-theme/layouts/partials/footer.html | 4 +-- .../themes/qaul-theme/static/css/qaul.css | 29 +++++++++---------- 6 files changed, 28 insertions(+), 29 deletions(-) -- 2.30.0
Copy & paste the following snippet into your terminal to import this patchset into git:
curl -s https://lists.sr.ht/~qaul/community/patches/20608/mbox | git am -3Learn more about email & git
HTML has dedicated elements for lots of these kinds of things, so we can improve readability and semantic meaning by using those instead of divs. I changed the .header and .footer styles to body > header and body > footer, because I don't think it's worth having a special class that would just be identical to the element names, but we might want to have inner headers and footers at some point, so I think it's worth restricting to just ones that are direct body descendants. --- docs/website/layouts/index.html | 12 ++++++------ .../themes/qaul-theme/layouts/_default/baseof.html | 4 ++-- .../themes/qaul-theme/layouts/_default/learning.html | 4 ++-- .../themes/qaul-theme/layouts/_default/page.html | 4 ++-- .../themes/qaul-theme/layouts/partials/footer.html | 4 ++-- docs/website/themes/qaul-theme/static/css/qaul.css | 2 +- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/website/layouts/index.html b/docs/website/layouts/index.html index b6d488ef..ac49e189 100644 --- a/docs/website/layouts/index.html +++ b/docs/website/layouts/index.html @@ -12,7 +12,7 @@ {{ define "main" }} {{ with .Site.GetPage "home/intro" }} -<div class="intro-block"> +<section class="intro-block"> <div class="wrap"> <div class="intro-item"> <img src="{{ "img/cube.svg" | relURL }}" /> @@ -36,11 +36,11 @@ </div> </div> </div> -</div> +</section> {{ end }} {{ with .Site.GetPage "home/about" }} -<div class="content"> +<section class="content"> <div class="wrap"> <h1>{{ .Params.Introduction_Title }}</h1> @@ -49,15 +49,15 @@ <h1>{{ .Params.Meshing_Title }}</h1> {{ .Params.Meshing | markdownify }} </div> -</div> +</section> {{ end }} {{ with .Site.GetPage "home/contribute" }} -<div class="contribute-block"> +<section class="contribute-block"> <div class="wrap"> <h1>{{ .Params.Contribute_Title }}</h1> {{ .Params.Contribute | markdownify }} </div> -</div> +</section> {{ end }} {{ end }} diff --git a/docs/website/themes/qaul-theme/layouts/_default/baseof.html b/docs/website/themes/qaul-theme/layouts/_default/baseof.html index 0b930be1..a86827d0 100644 --- a/docs/website/themes/qaul-theme/layouts/_default/baseof.html +++ b/docs/website/themes/qaul-theme/layouts/_default/baseof.html @@ -3,7 +3,7 @@ {{- partial "head.html" . -}} {{- block "head-override" .}}{{- end }} <body> - <div class="header"> + <header> <div class="wrap"> <!-- top logo & nav bar --> <div class="navbar"> @@ -19,7 +19,7 @@ {{- block "header-title" . }}{{- end }} </div> - </div> + </header> {{- block "main" . }}{{- end }} diff --git a/docs/website/themes/qaul-theme/layouts/_default/learning.html b/docs/website/themes/qaul-theme/layouts/_default/learning.html index 0f8988a0..bccf7f09 100644 --- a/docs/website/themes/qaul-theme/layouts/_default/learning.html +++ b/docs/website/themes/qaul-theme/layouts/_default/learning.html @@ -1,5 +1,5 @@ {{ define "main" }} -<div class="content"> +<main class="content"> <div class="wrap"> <h1>{{ .Title }}</h1> @@ -14,5 +14,5 @@ </div> </div> </div> -</div> +</main> {{ end }} diff --git a/docs/website/themes/qaul-theme/layouts/_default/page.html b/docs/website/themes/qaul-theme/layouts/_default/page.html index e63fd83b..b0a26109 100644 --- a/docs/website/themes/qaul-theme/layouts/_default/page.html +++ b/docs/website/themes/qaul-theme/layouts/_default/page.html @@ -1,9 +1,9 @@ {{ define "main" }} -<div class="content"> +<main class="content"> <div class="wrap"> <h1>{{ .Title }}</h1> {{ .Content }} </div> -</div> +</main> {{ end }} diff --git a/docs/website/themes/qaul-theme/layouts/partials/footer.html b/docs/website/themes/qaul-theme/layouts/partials/footer.html index a799c0a0..d537e14d 100644 --- a/docs/website/themes/qaul-theme/layouts/partials/footer.html +++ b/docs/website/themes/qaul-theme/layouts/partials/footer.html @@ -1,4 +1,4 @@ -<div class="footer"> +<footer> <div class="wrap"> <div class="navbar"> <div class="navbar-links"> @@ -6,4 +6,4 @@ </div> </div> </div> -</div> +</footer> diff --git a/docs/website/themes/qaul-theme/static/css/qaul.css b/docs/website/themes/qaul-theme/static/css/qaul.css index b2f5d363..d225a20d 100644 --- a/docs/website/themes/qaul-theme/static/css/qaul.css +++ b/docs/website/themes/qaul-theme/static/css/qaul.css @@ -25,7 +25,7 @@ p,li { max-width: 100%; } -.header, .footer { +body > header, body > footer { display: flex; justify-content: center; padding: 2rem; -- 2.30.0
Different blocks on a page share a lot of common behaviour, so let's make the CSS a bit easier to maintain by creating a single reusable "block" class, and standardizing on "block-*" as an additional class to give special behaviour to different types of blocks. --- docs/website/layouts/index.html | 6 ++--- .../qaul-theme/layouts/_default/baseof.html | 2 +- .../qaul-theme/layouts/_default/learning.html | 2 +- .../qaul-theme/layouts/_default/page.html | 2 +- .../qaul-theme/layouts/partials/footer.html | 2 +- .../themes/qaul-theme/static/css/qaul.css | 25 ++++++++----------- 6 files changed, 17 insertions(+), 22 deletions(-) diff --git a/docs/website/layouts/index.html b/docs/website/layouts/index.html index ac49e189..9d1298a7 100644 --- a/docs/website/layouts/index.html +++ b/docs/website/layouts/index.html @@ -12,7 +12,7 @@ {{ define "main" }} {{ with .Site.GetPage "home/intro" }} -<section class="intro-block"> +<section class="block block-intro"> <div class="wrap"> <div class="intro-item"> <img src="{{ "img/cube.svg" | relURL }}" /> @@ -40,7 +40,7 @@ {{ end }} {{ with .Site.GetPage "home/about" }} -<section class="content"> +<section class="block block-content"> <div class="wrap"> <h1>{{ .Params.Introduction_Title }}</h1> @@ -53,7 +53,7 @@ {{ end }} {{ with .Site.GetPage "home/contribute" }} -<section class="contribute-block"> +<section class="block block-contribute"> <div class="wrap"> <h1>{{ .Params.Contribute_Title }}</h1> {{ .Params.Contribute | markdownify }} diff --git a/docs/website/themes/qaul-theme/layouts/_default/baseof.html b/docs/website/themes/qaul-theme/layouts/_default/baseof.html index a86827d0..fb6b226c 100644 --- a/docs/website/themes/qaul-theme/layouts/_default/baseof.html +++ b/docs/website/themes/qaul-theme/layouts/_default/baseof.html @@ -3,7 +3,7 @@ {{- partial "head.html" . -}} {{- block "head-override" .}}{{- end }} <body> - <header> + <header class="block"> <div class="wrap"> <!-- top logo & nav bar --> <div class="navbar"> diff --git a/docs/website/themes/qaul-theme/layouts/_default/learning.html b/docs/website/themes/qaul-theme/layouts/_default/learning.html index bccf7f09..a45c5939 100644 --- a/docs/website/themes/qaul-theme/layouts/_default/learning.html +++ b/docs/website/themes/qaul-theme/layouts/_default/learning.html @@ -1,5 +1,5 @@ {{ define "main" }} -<main class="content"> +<main class="block block-content"> <div class="wrap"> <h1>{{ .Title }}</h1> diff --git a/docs/website/themes/qaul-theme/layouts/_default/page.html b/docs/website/themes/qaul-theme/layouts/_default/page.html index b0a26109..7fe3ff97 100644 --- a/docs/website/themes/qaul-theme/layouts/_default/page.html +++ b/docs/website/themes/qaul-theme/layouts/_default/page.html @@ -1,5 +1,5 @@ {{ define "main" }} -<main class="content"> +<main class="block block-content"> <div class="wrap"> <h1>{{ .Title }}</h1> diff --git a/docs/website/themes/qaul-theme/layouts/partials/footer.html b/docs/website/themes/qaul-theme/layouts/partials/footer.html index d537e14d..1437ae05 100644 --- a/docs/website/themes/qaul-theme/layouts/partials/footer.html +++ b/docs/website/themes/qaul-theme/layouts/partials/footer.html @@ -1,4 +1,4 @@ -<footer> +<footer class="block"> <div class="wrap"> <div class="navbar"> <div class="navbar-links"> diff --git a/docs/website/themes/qaul-theme/static/css/qaul.css b/docs/website/themes/qaul-theme/static/css/qaul.css index d225a20d..47ff119c 100644 --- a/docs/website/themes/qaul-theme/static/css/qaul.css +++ b/docs/website/themes/qaul-theme/static/css/qaul.css @@ -25,10 +25,13 @@ p,li { max-width: 100%; } -body > header, body > footer { +.block { display: flex; justify-content: center; - padding: 2rem; + padding: 2em; +} + +header.block, footer.block { background: black; color: #EFEFEF; } @@ -77,10 +80,7 @@ body > header, body > footer { margin-bottom: 0; } -.intro-block { - display: flex; - justify-content: center; - padding: 2em; +.block-intro { background: #2f556b; color: #EFEFEF; } @@ -110,26 +110,21 @@ body > header, body > footer { .intro-col p { margin: 0.5em 0; } -.content { - display: flex; - justify-content: center; +.block-content { margin: 0em 5% 2.5em; } -.content h1 { +.block-content h1 { margin-top: 2em; font-size: 1.75em; } -.contribute-block { - display: flex; - justify-content: center; - padding: 2em; +.block-contribute { background: #582f6b; color: #EFEFEF; } -.contribute-block a { +.block-contribute a { color: #FFFFFF; } -- 2.30.0
Previously, the footer would show up immediately after the content on short pages, so it would appear in the middle of the page, with blank space after it. We can solve that by making all blocks (apart from the header and footer) grow equally until they've filled up the page, making sure the footer is no higher than the bottom of the window. We have to set align-items center, or otherwise the content will appear at the top of a stretched block, which looks fine on a page with just a single stretched block, but not so good on a page with several like the home page. --- This patch is similar to Milan's patch[1], but it also makes the stretched blocks center their contents as described above. I also have to reset flex-grow on the header and footer because of the shared "block" class I introduced earlier in this series. [1]: https://lists.sr.ht/~qaul/community/%3C20210226131524.12552-1-milan%40petabyte.dev%3E docs/website/themes/qaul-theme/static/css/qaul.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/website/themes/qaul-theme/static/css/qaul.css b/docs/website/themes/qaul-theme/static/css/qaul.css index 47ff119c..ebd6290e 100644 --- a/docs/website/themes/qaul-theme/static/css/qaul.css +++ b/docs/website/themes/qaul-theme/static/css/qaul.css @@ -5,6 +5,7 @@ body { font-family: sans-serif; background: #e0e2e2; font-weight: 300; + min-height: 100vh; } strong { @@ -27,11 +28,14 @@ p,li { .block { display: flex; + flex-grow: 1; justify-content: center; + align-items: center; padding: 2em; } header.block, footer.block { + flex-grow: 0; background: black; color: #EFEFEF; } -- 2.30.0