diff options
author | Ingo Schwarze <schwarze@openbsd.org> | 2022-07-05 21:25:29 +0000 |
---|---|---|
committer | Ingo Schwarze <schwarze@openbsd.org> | 2022-07-05 21:25:29 +0000 |
commit | 8bee07458b84a3c97d980af8bc26fbd8d9b72eab (patch) | |
tree | fddf846e6fb1cd89dfdc50d8affca7625aff709a /mandoc.css | |
parent | ae49b31649e571ceb182e182bc1eeff17e7b16ae (diff) | |
download | mandoc-8bee07458b84a3c97d980af8bc26fbd8d9b72eab.tar.gz mandoc-8bee07458b84a3c97d980af8bc26fbd8d9b72eab.tar.zst mandoc-8bee07458b84a3c97d980af8bc26fbd8d9b72eab.zip |
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.
Diffstat (limited to 'mandoc.css')
-rw-r--r-- | mandoc.css | 21 |
1 files changed, 15 insertions, 6 deletions
@@ -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. */ |