saait

Simple static page generator
git clone https://git.sinitax.com/codemadness/saait
Log | Files | Refs | README | LICENSE | Upstream | sfeed.txt

commit f6831815feca19ff0cd808f783f173dc65db7594
parent d281e7082c8987bec72e54522c6953546687c884
Author: Hiltjo Posthuma <hiltjo@codemadness.org>
Date:   Sat,  9 Mar 2019 14:22:41 +0100

accessibility and other minor improvements

CSS: make underline below main nav menu 3px.
code-style: consistency: reorder <link rel> attributes>.
readability: rename "Atom" to "Atom feed".
accessibility: instead of divs just use semantic HTML5 tags.
accessibility: use HTML5 <time> tag for timestamps.
accessibility: remove redundant titles in nav menu links.

Diffstat:
Mprint.css | 6++++++
Mstyle.css | 8++++++--
Mtemplates/index.html/footer.html | 2+-
Mtemplates/index.html/header.html | 23+++++++++++------------
Mtemplates/index.html/item.html | 2+-
Mtemplates/page/footer.html | 3++-
Mtemplates/page/header.html | 24++++++++++++------------
Mtemplates/page/item.html | 7+++++--
8 files changed, 44 insertions(+), 31 deletions(-)

diff --git a/print.css b/print.css @@ -3,6 +3,12 @@ a:visited { color: inherit; text-decoration: none; } +/* HTML5 semantic tags: some (older) browsers display this inline by default */ +article, figcaption, figure, header, main { + display: block; +} +/* hide navigation menus when printing */ +nav, #menuwrap, .hidden { display: none; diff --git a/style.css b/style.css @@ -9,13 +9,17 @@ body { padding: 0; text-align: center; } +/* HTML5 semantic tags: some (older) browsers display this inline by default */ +article, figcaption, figure, header, main, nav { + display: block; +} table, img { border: 0; } hr { border: 0; - border-bottom: 1px solid #aaa; - height: 1px; + border-bottom: 3px solid #aaa; + height: 3px; } h1 { font-size: 160%; diff --git a/templates/index.html/footer.html b/templates/index.html/footer.html @@ -1,5 +1,5 @@ </table> </div> - </div> + </main> </body> </html> diff --git a/templates/index.html/header.html b/templates/index.html/header.html @@ -10,32 +10,31 @@ <title>Posts - ${sitetitle}</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <link rel="stylesheet" href="print.css" type="text/css" media="print" /> - <link rel="alternate" type="application/atom+xml" title="${sitetitle} Atom Feed" href="atom.xml" /> - <link rel="icon" type="image/png" href="/favicon.png" /> + <link rel="alternate" href="atom.xml" type="application/atom+xml" title="${sitetitle} Atom Feed" /> + <link rel="icon" href="/favicon.png" type="image/png" /> <!-- This site is created using saait: https://git.codemadness.org/saait/file/README.html --> </head> <body> - <div id="menuwrap"> + <nav id="menuwrap"> <table id="menu" width="100%" border="0"> <tr> <td id="links" align="left"> - <a href="index.html" title="Blog">Blog</a> | - <a href="//git.codemadness.org/" title="Some of my projects">Git</a> | - <a href="/releases/" title="Software releases">Releases</a> | - <a href="gopher://codemadness.org" title="My gopherhole">Gopherhole</a> + <a href="index.html">Blog</a> | + <a href="/git/" title="Git repository with some of my projects">Git</a> | + <a href="/releases/">Releases</a> | + <a href="gopher://codemadness.org">Gopherhole</a> </td> <td id="links-contact" align="right"> <span class="hidden"> | </span> - <a href="atom.xml" title="Atom feed">Atom</a> | - <a href="tor-service.html" title="Tor service">Tor</a> | - <a href="pgp.asc" title="PGP key">PGP</a> | + <a href="atom.xml">Atom feed</a> | + <a href="pgp.asc">PGP</a> | <a href="mailto:${sitemail}" title="Mail me">Mail</a> </td> </tr> </table> - </div> + </nav> <hr class="hidden" /> - <div id="mainwrap"> + <main id="mainwrap"> <div id="main"> <h1>Posts</h1> <table> diff --git a/templates/index.html/item.html b/templates/index.html/item.html @@ -1 +1 @@ -<tr><td nowrap>${created}</td><td><a href="${filename}">${title}</a></td></tr> +<tr><td nowrap><time datetime="${created}">${created}</time></td><td><a href="${filename}">${title}</a></td></tr> diff --git a/templates/page/footer.html b/templates/page/footer.html @@ -1,4 +1,5 @@ + </article> </div> - </div> + </main> </body> </html> diff --git a/templates/page/header.html b/templates/page/header.html @@ -10,30 +10,30 @@ <title>${title} - ${sitetitle}</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <link rel="stylesheet" href="print.css" type="text/css" media="print" /> - <link rel="alternate" type="application/atom+xml" title="${sitetitle} Atom Feed" href="atom.xml" /> - <link rel="icon" type="image/png" href="/favicon.png" /> + <link rel="alternate" href="atom.xml" type="application/atom+xml" title="${sitetitle} Atom Feed" /> + <link rel="icon" href="/favicon.png" type="image/png" /> <!-- This site is created using saait: https://git.codemadness.org/saait/file/README.html --> </head> <body> - <div id="menuwrap"> + <nav id="menuwrap"> <table id="menu" width="100%" border="0"> <tr> <td id="links" align="left"> - <a href="index.html" title="Blog">Blog</a> | - <a href="//git.codemadness.org/" title="Some of my projects">Git</a> | - <a href="/releases/" title="Software releases">Releases</a> | - <a href="gopher://codemadness.org" title="My gopherhole">Gopherhole</a> + <a href="index.html">Blog</a> | + <a href="/git/" title="Git repository with some of my projects">Git</a> | + <a href="/releases/">Releases</a> | + <a href="gopher://codemadness.org">Gopherhole</a> </td> <td id="links-contact" align="right"> <span class="hidden"> | </span> - <a href="atom.xml" title="Atom feed">Atom</a> | - <a href="tor-service.html" title="Tor service">Tor</a> | - <a href="pgp.asc" title="PGP key">PGP</a> | + <a href="atom.xml">Atom feed</a> | + <a href="pgp.asc">PGP</a> | <a href="mailto:${sitemail}" title="Mail me">Mail</a> </td> </tr> </table> - </div> + </nav> <hr class="hidden" /> - <div id="mainwrap"> + <main id="mainwrap"> <div id="main"> + <article> diff --git a/templates/page/item.html b/templates/page/item.html @@ -1,3 +1,6 @@ +<header> <h1><a href="">${title}</a></h1> - <p><strong>Last modification on </strong> ${updated}</p> - %{htmlfile} + <p><strong>Last modification on </strong> <time datetime="${updated}">${updated}</time></p> +</header> + +%{htmlfile}