From 8bee07458b84a3c97d980af8bc26fbd8d9b72eab Mon Sep 17 00:00:00 2001
From: Ingo Schwarze <schwarze@openbsd.org>
Date: Tue, 5 Jul 2022 21:25:29 +0000
Subject: Finally get rid of the archaic <table> markup for header and footer
 lines and use flexbox CSS instead.  Improve accessibility by adding role and
 aria-label attributes to these header and footer lines. Using ideas from both
 Anna Vyalkova <cyber at sysrq dot in> and myself.

As a welcome side effect, this also resolves the long-standing issue
that the rendering was always 65em wide, requiring horizontal scrolling
when the window was narrower.  Now, rendering nicely adapts to browser
windows of arbitrary narrowness.
---
 mandoc.css | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

(limited to 'mandoc.css')

diff --git a/mandoc.css b/mandoc.css
index fded3515..f2b5e733 100644
--- a/mandoc.css
+++ b/mandoc.css
@@ -1,4 +1,4 @@
-/* $Id: mandoc.css,v 1.50 2022/07/03 14:29:45 schwarze Exp $ */
+/* $Id: mandoc.css,v 1.51 2022/07/05 21:25:29 schwarze Exp $ */
 /*
  * Standard style sheet for mandoc(1) -Thtml and man.cgi(8).
  *
@@ -53,19 +53,28 @@ table.results {	margin-top: 1em;
 
 /* Header and footer lines. */
 
-table.head {	width: 100%;
+div[role=doc-pageheader] {
+		display: flex;
 		border-bottom: 1px dotted #808080;
 		margin-bottom: 1em;
 		font-size: smaller; }
-td.head-vol {	text-align: center; }
-td.head-rtitle {
+.head-ltitle {	flex: 1; }
+.head-vol {	flex: 0 1 auto;
+		text-align: center; }
+.head-rtitle {	flex: 1;
 		text-align: right; }
 
-table.foot {	width: 100%;
+div[role=doc-pagefooter] {
+		display: flex;
+		justify-content: space-between;
 		border-top: 1px dotted #808080;
 		margin-top: 1em;
 		font-size: smaller; }
-td.foot-os {	text-align: right; }
+.foot-left {	flex: 1; }
+.foot-date {	flex: 0 1 auto;
+		text-align: center; }
+.foot-os {	flex: 1;
+		text-align: right; }
 
 /* Sections and paragraphs. */
 
-- 
cgit v1.2.3-56-ge451