~qaul/community

docs/website: various markup/CSS improvements v1 APPLIED

Alyssa Ross
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
Export patchset (mbox)
How do I use this?

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 -3
Learn more about email & git
View this thread in the archives

[PATCH 1/3] docs/website: use semantic structure elements Export this patch

Alyssa Ross
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

[PATCH 2/3] docs/website: create reusable "block" class Export this patch

Alyssa Ross
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

[PATCH 3/3] docs/website: pin footer to bottom of viewport Export this patch

Alyssa Ross
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