From: Alyssa Ross <hi@alyssa.is>
To: ~qaul/community@lists.sr.ht
Cc: Katharina Fey <kookie@spacekookie.de>
Subject: [PATCH 2/3] docs/website: create reusable "block" class
Date: Fri, 26 Feb 2021 13:50:45 +0000
Message-Id: <20210226135046.32283-3-hi@alyssa.is>
In-Reply-To: <20210226135046.32283-1-hi@alyssa.is>
References: <20210226135046.32283-1-hi@alyssa.is>
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit

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