accessibility and other minor improvements - saait - the most boring static pag… | |
git clone git://git.codemadness.org/saait | |
Log | |
Files | |
Refs | |
README | |
LICENSE | |
--- | |
commit f6831815feca19ff0cd808f783f173dc65db7594 | |
parent d281e7082c8987bec72e54522c6953546687c884 | |
Author: Hiltjo Posthuma <[email protected]> | |
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(-) | |
--- | |
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} … | |
- <link rel="icon" type="image/png" href="/favicon.png" /> | |
+ <link rel="alternate" href="atom.xml" type="application/atom+xml" titl… | |
+ <link rel="icon" href="/favicon.png" type="image/png" /> | |
<!-- This site is created using saait: https://git.codemadness.org/saa… | |
</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 o… | |
- <a href="/releases/" title="Software releases"… | |
- <a href="gopher://codemadness.org" title="My g… | |
+ <a href="index.html">Blog</a> | | |
+ <a href="/git/" title="Git repository with som… | |
+ <a href="/releases/">Releases</a> | | |
+ <a href="gopher://codemadness.org">Gopherhole<… | |
</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"… | |
- <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">M… | |
</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="… | |
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} … | |
- <link rel="icon" type="image/png" href="/favicon.png" /> | |
+ <link rel="alternate" href="atom.xml" type="application/atom+xml" titl… | |
+ <link rel="icon" href="/favicon.png" type="image/png" /> | |
<!-- This site is created using saait: https://git.codemadness.org/saa… | |
</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 o… | |
- <a href="/releases/" title="Software releases"… | |
- <a href="gopher://codemadness.org" title="My g… | |
+ <a href="index.html">Blog</a> | | |
+ <a href="/git/" title="Git repository with som… | |
+ <a href="/releases/">Releases</a> | | |
+ <a href="gopher://codemadness.org">Gopherhole<… | |
</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"… | |
- <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">M… | |
</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}">… | |
+</header> | |
+ | |
+%{htmlfile} |