feat(styles): Allow pages which are too short to properly shrink

Before, if a page (like src/teaching.html) was too short, we would get a
whole lot of gray color after the article footer. Now we don't.

1 files changed, 9 insertions, 3 deletions

diff --git a/src/styles.css b/src/styles.css
index bfc9c3b..d0e9c41 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -93,7 +93,7 @@ body, td, th { font-size: 18px; font-family: 'Tabler', sans-serif; }
    * add elements for helping with website usage, but which shouldn't be seen otherwise */
 .nocss-aid { display: none; }
 
-nav, article { background-color: var(--bg-color); }
+nav, article > #article-container { background-color: var(--bg-color); }
 
   /* Lists with line-separated items (ORDERED_LIST, UNORDERED_LIST) */
 li > div:only-child,
@@ -179,11 +179,17 @@ article {
   max-width: 56em; /* Equivalent to 50em on 19px font-size */
   margin-bottom: 1em;
   overflow: auto;
-  padding: 0 1em;
 
   margin-left: auto;
   margin-right: auto;
 }
+article > #article-container {
+  /* Top padding is 1.7em * 0.67em = (h1 font size) * (h1 default margin size) */
+  padding: 1.139em 1em 0 1em;
+}
+article > #article-container > h1:first-child {
+  margin-top: 0;
+}
 .article-wide {
   max-width: initial;
   margin-left: initial;
@@ -299,7 +305,7 @@ a[rev="footnote"] { border: none; }
 
 /*### Wrapper > Article > footer ###*/
 
-article > footer {
+article > #article-container > footer {
   margin: 0 -1em;
   padding: 0.5em;
   border: 3px solid var(--accent-line-color);