diff options
| author | Joey Hess <joey@kitenet.net> | 2010-05-02 15:09:33 -0400 |
|---|---|---|
| committer | Joey Hess <joey@kitenet.net> | 2010-05-02 15:09:33 -0400 |
| commit | d69f6057d1e1787fa3c19cc13c40eb3e9b822283 (patch) | |
| tree | aa547dc8305255748fd281f715a179d181fbe1e5 | |
| parent | 7517d34da928bb9612c65fcde87cc434b7b7d653 (diff) | |
use html5 semantic markup in page.tmpl
This is a first pass, it avoids needing to change style.css
except where it refers to tag types.
This goes a bit off the rails at the pageheader with its nested header.
Semantically, there should be an article around the whole page
header, content, and footer. Just as there will be an article around a
whole comment or inlined page header, content, and footer.
But that will mean changing the css that currently refers to pageheader to
refer to the enclosing article instead.
| -rw-r--r-- | debian/changelog | 3 | ||||
| -rw-r--r-- | doc/style.css | 5 | ||||
| -rw-r--r-- | templates/page.tmpl | 49 |
3 files changed, 29 insertions, 28 deletions
diff --git a/debian/changelog b/debian/changelog index c9fc2e657..789fda1ce 100644 --- a/debian/changelog +++ b/debian/changelog @@ -3,6 +3,9 @@ ikiwiki (3.20100502) UNRELEASED; urgency=low * Add parameter to displaytime to specify that it is a pubdate, and in html5 mode, use time tag. * Add placeholder text in search form (in html5 mode only). + * In html5 mode, use all the nice new semantic tags. Care was taken + to not change the id/class named used in the CSS, so only CSS + that refers to tag types needed to be changed. -- Joey Hess <joeyh@debian.org> Sun, 02 May 2010 13:22:50 -0400 diff --git a/doc/style.css b/doc/style.css index 7ffcf9fe2..69c7f80d8 100644 --- a/doc/style.css +++ b/doc/style.css @@ -60,15 +60,12 @@ div.inlinecontent { clear: both; } -.tags { -} - #pageinfo { margin: 1em 0; border-top: 1px solid #000; } -div.tags { +.tags { margin-top: 1em; } diff --git a/templates/page.tmpl b/templates/page.tmpl index 661d4a515..0176b0116 100644 --- a/templates/page.tmpl +++ b/templates/page.tmpl @@ -5,7 +5,7 @@ <html xmlns="http://www.w3.org/1999/xhtml"> </TMPL_IF> <head> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<TMPL_IF HTML5><meta charset="utf-8" /><TMPL_ELSE><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></TMPL_IF> <meta http-equiv="Cache-Control" content="must-revalidate" /> <title><TMPL_VAR TITLE></title> <TMPL_IF NAME="FAVICON"> @@ -26,8 +26,8 @@ </head> <body> -<div class="pageheader"> -<div class="header"> +<TMPL_IF HTML5><article class="pageheader"><TMPL_ELSE><div class="pageheader"></TMPL_IF> +<TMPL_IF HTML5><header class="header"><TMPL_ELSE><div class="header"></TMPL_IF> <span> <span class="parentlinks"> <TMPL_LOOP NAME="PARENTLINKS"> @@ -40,14 +40,14 @@ (<TMPL_VAR NAME="PERCENTTRANSLATED">%) </TMPL_IF> </span> -</span><!--.header--> +</span> <TMPL_IF NAME="SEARCHFORM"> <TMPL_VAR SEARCHFORM> </TMPL_IF> -</div> +<TMPL_IF HTML5></header><TMPL_ELSE></div></TMPL_IF> <TMPL_IF NAME="HAVE_ACTIONS"> -<div class="actions"> +<TMPL_IF HTML5><nav class="actions"><TMPL_ELSE><div class="actions"></TMPL_IF> <ul> <TMPL_IF NAME="EDITURL"> <li><a href="<TMPL_VAR EDITURL>" rel="nofollow">Edit</a></li> @@ -72,11 +72,11 @@ </TMPL_IF> </TMPL_IF> </ul> -</div> +<TMPL_IF HTML5></nav><TMPL_ELSE></div></TMPL_IF> </TMPL_IF> <TMPL_IF NAME="OTHERLANGUAGES"> -<div id="otherlanguages"> +<TMPL_IF HTML5><nav class="otherlanguages"><TMPL_ELSE><div class="otherlanguages"></TMPL_IF> <ul> <TMPL_LOOP NAME="OTHERLANGUAGES"> <li> @@ -89,23 +89,22 @@ </li> </TMPL_LOOP> </ul> -</div> <!-- #otherlanguages --> +<TMPL_IF HTML5></nav><TMPL_ELSE></div></TMPL_IF> </TMPL_IF> -</div> <!-- .pageheader --> +<TMPL_IF HTML5></header><TMPL_ELSE></div></TMPL_IF> <TMPL_IF SIDEBAR> -<div class="sidebar"> +<TMPL_IF HTML5><aside class="sidebar"><TMPL_ELSE><div class="sidebar"></TMPL_IF> <TMPL_VAR SIDEBAR> -</div> +<TMPL_IF HTML5></aside><TMPL_ELSE></div></TMPL_IF> </TMPL_IF> -<div id="content"> +<TMPL_IF HTML5><article id="content"><TMPL_ELSE><div id="content"></TMPL_IF> <TMPL_VAR CONTENT> -</div> <TMPL_IF COMMENTS> -<div id="comments"> +<TMPL_IF HTML5><aside id="comments"><TMPL_ELSE><div id="comments"></TMPL_IF> <TMPL_VAR COMMENTS> <TMPL_IF ADDCOMMENTURL> <div class="addcomment"> @@ -114,23 +113,25 @@ <TMPL_ELSE> <div class="addcomment">Comments on this page are closed.</div> </TMPL_IF> -</div> +<TMPL_IF HTML5></aside><TMPL_ELSE></div></TMPL_IF> </TMPL_IF> -<div id="footer" class="pagefooter"> -<div id="pageinfo"> +<TMPL_IF HTML5></article><TMPL_ELSE></div></TMPL_IF> + +<TMPL_IF HTML5><footer id="footer" class="pagefooter"><TMPL_ELSE><div id="footer" class="pagefooter"></TMPL_IF> +<TMPL_IF HTML5><nav id="pageinfo"><TMPL_ELSE><div id="pageinfo"></TMPL_IF> <TMPL_IF NAME="TAGS"> -<div class="tags"> +<TMPL_IF HTML5><nav class="tags"><TMPL_ELSE><div class="tags"></TMPL_IF> Tags: <TMPL_LOOP NAME="TAGS"> <TMPL_VAR LINK> </TMPL_LOOP> -</div> +<TMPL_IF HTML5></nav><TMPL_ELSE></div></TMPL_IF> </TMPL_IF> <TMPL_IF NAME="BACKLINKS"> -<div id="backlinks"> +<TMPL_IF HTML5><nav id="backlinks"><TMPL_ELSE><div id="backlinks"></TMPL_IF> Links: <TMPL_LOOP NAME="BACKLINKS"> <a href="<TMPL_VAR URL>"><TMPL_VAR PAGE></a> @@ -144,7 +145,7 @@ Links: </span> </span> </TMPL_IF> -</div><!-- #backlinks --> +<TMPL_IF HTML5></nav><TMPL_ELSE></div></TMPL_IF> </TMPL_IF> <TMPL_IF COPYRIGHT> @@ -166,10 +167,10 @@ Last edited <TMPL_VAR MTIME> <!-- Created <TMPL_VAR CTIME> --> </div> -</div><!-- #pageinfo --> +<TMPL_IF HTML5></nav><TMPL_ELSE></div></TMPL_IF> <TMPL_IF EXTRAFOOTER><TMPL_VAR EXTRAFOOTER></TMPL_IF> <!-- from <TMPL_VAR WIKINAME> --> -</div><!-- .pagefooter #footer --> +<TMPL_IF HTML5></footer><TMPL_ELSE></div></TMPL_IF> </body> </html> |