accessibility and other minor improvements - saait - the most boring static page generator
HTML git clone git://git.codemadness.org/saait
DIR Log
DIR Files
DIR Refs
DIR README
DIR LICENSE
---
DIR commit f6831815feca19ff0cd808f783f173dc65db7594
DIR parent d281e7082c8987bec72e54522c6953546687c884
HTML 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:
M print.css | 6 ++++++
M style.css | 8 ++++++--
M templates/index.html/footer.html | 2 +-
M templates/index.html/header.html | 23 +++++++++++------------
M templates/index.html/item.html | 2 +-
M templates/page/footer.html | 3 ++-
M templates/page/header.html | 24 ++++++++++++------------
M templates/page/item.html | 7 +++++--
8 files changed, 44 insertions(+), 31 deletions(-)
---
DIR 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;
DIR 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%;
DIR diff --git a/templates/index.html/footer.html b/templates/index.html/footer.html
@@ -1,5 +1,5 @@
</table>
</div>
- </div>
+ </main>
</body>
</html>
DIR 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>
DIR 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>
DIR diff --git a/templates/page/footer.html b/templates/page/footer.html
@@ -1,4 +1,5 @@
+ </article>
</div>
- </div>
+ </main>
</body>
</html>
DIR 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>
DIR 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}