css support

2006-03-29 07:24:03 +00:00 · 2006-03-29 07:24:03 +00:00 · 5591d621b9
parent ce48f18a3b
commit 5591d621b9
11 changed files with 148 additions and 38 deletions
--- a/IkiWiki/CGI.pm
+++ b/IkiWiki/CGI.pm
@ -38,6 +38,7 @@ sub cgi_recentchanges ($) { #{{{
 		indexlink => indexlink(),
 		wikiname => $config{wikiname},
 		changelog => [rcs_recentchanges(100)],
+		styleurl => styleurl(),
 	);
 	print $q->header, $template->output;
 } #}}}
@ -64,7 +65,8 @@ sub cgi_signin ($$) { #{{{
 		action => $q->request_uri,
 		header => 0,
 		template => (-e "$config{templatedir}/signin.tmpl" ?
-		              "$config{templatedir}/signin.tmpl" : "")
+		              "$config{templatedir}/signin.tmpl" : ""),
+		stylesheet => styleurl(),
 	);
 	
 	$form->field(name => "name", required => 0);
@ -228,7 +230,8 @@ sub cgi_prefs ($$) { #{{{
 		params => $q,
 		action => $q->request_uri,
 		template => (-e "$config{templatedir}/prefs.tmpl" ?
-		              "$config{templatedir}/prefs.tmpl" : "")
+		              "$config{templatedir}/prefs.tmpl" : ""),
+		stylesheet => styleurl(),
 	);
 	my @buttons=("Save Preferences", "Logout", "Cancel");
 	
@ -323,6 +326,7 @@ sub cgi_editpage ($$) { #{{{
 	$form->tmpl_param("indexlink", indexlink());
 	$form->tmpl_param("helponformattinglink",
 		htmllink("", "HelpOnFormatting", 1));
+	$form->tmpl_param("styleurl", styleurl());
 	if (! $form->submitted) {
 		$form->field(name => "rcsinfo", value => rcs_prepedit($file),
 			force => 1);
--- a/IkiWiki/Render.pm
+++ b/IkiWiki/Render.pm
@ -227,6 +227,7 @@ sub genpage ($$$) { #{{{
 		backlinks => [backlinks($page)],
 		discussionlink => htmllink($page, "Discussion", 1, 1),
 		mtime => scalar(gmtime($mtime)),
+		styleurl => styleurl($page),
 	);
 	
 	return $template->output;
--- a/basewiki/style.css
+++ b/basewiki/style.css
@ -0,0 +1,68 @@
+#header h1 {
+	margin: 0;
+	padding: 2px 0;
+}
+
+#actions ul {
+	margin: 0;
+	padding: 2px;
+	list-style-type: none;
+	border-bottom: 1px solid #000;
+}
+
+#actions li {
+	display: inline;
+	padding: .2em .4em;
+}
+
+#content {
+	border-bottom: 1px solid #000;
+}
+
+/* Used for adding a blog page. */
+#blogform {
+	padding: 10px 10px;
+	border: 1px solid #aaa;
+	background: #eee;
+}
+
+#backlinks {
+	margin: 1em 0;
+}
+
+#footer {
+	margin: 1em 0;
+}
+
+#pageinfo {
+	font-style: italic;
+}
+
+/* Used for invalid form fields. */
+.fb_invalid {
+	color: red;
+}
+
+/* Used for required form fields. */
+.fb_required {
+	fornt-style: bold;
+}
+
+/* RSS button. */
+.rssbutton {
+	background: #ff6600;
+	color: white !important;
+	border-left: 1px solid #cc9966;
+	border-top: 1px solid #ccaa99;
+	border-right: 1px solid #993300;
+	border-bottom: 1px solid #331100;
+	padding: 0px 0.5em 0px 0.5em;
+	font-family: helvetica, arial, sans-serif;
+	font-weight: bold;
+	font-size: small;
+	text-decoration: none;
+	margin-top: 1em;
+}
+.rssbutton:hover {
+	background: #ff9900;
+}
--- a/doc/todo/html.mdwn
+++ b/doc/todo/html.mdwn
@ -1,8 +1,8 @@
-Add css and prettify. Make RecentChanges use table for
+Create some nice stylesheets. Make RecentChanges use table for
 formatting, and images to indicate web vs svn commits and to link to diffs.

 All of this should be doable w/o touching a single line of code, just
-editing the [[templates]] BTW.
+editing the [[templates]] and/or editing [[style.css]] BTW.

 ## html validation

@ -41,6 +41,5 @@ editing the [[templates]] BTW.
 	markdown enclosing it in other spanning tags in some cases.
 	I've implemented this hack now. :-/ --[[Joey]]

-  * This page is now valid, although the validator conplains at having to guess the encoding. Should the encoding be forced to utf-8 in the templates?
-
+This page is now valid.
 Test: [validate this page](http://validator.w3.org/check?url=referer)
--- a/13
+++ b/13
@ -265,6 +265,16 @@ sub cgiurl (@) { #{{{
 	return $config{cgiurl}."?".join("&amp;", map "$_=$params{$_}", keys %params);
 } #}}}

+sub styleurl (;$) { #{{{
+	my $page=shift;
+
+	return "$config{url}/style.css" if ! defined $page;
+	
+	$page=~s/[^\/]+$//;
+	$page=~s/[^\/]+\//..\//g;
+	return $page."style.css";
+} #}}}
+
 sub htmllink ($$;$$$) { #{{{
 	my $page=shift;
 	my $link=shift;
@ -300,7 +310,7 @@ sub htmllink ($$;$$$) { #{{{
 	$bestlink=File::Spec->abs2rel($bestlink, dirname($page));
 	
 	if (! $noimageinline && isinlinableimage($bestlink)) {
-		return "<img src=\"$bestlink\" alt=\"$linktext\">";
+		return "<img src=\"$bestlink\" alt=\"$linktext\" />";
 	}
 	return "<a href=\"$bestlink\">$linktext</a>";
 } #}}}
@ -395,6 +405,7 @@ sub misctemplate ($$) { #{{{
 		indexlink => indexlink(),
 		wikiname => $config{wikiname},
 		pagebody => $pagebody,
+		styleurl => styleurl(),
 	);
 	return $template->output;
 }#}}}
--- a/templates/blogpost.tmpl
+++ b/templates/blogpost.tmpl
@ -1,9 +1,9 @@
-<hr />
-<form action="<TMPL_VAR CGIURL>" method="GET">
-<input type="hidden" name="do" value="blog">
-<input type="hidden" name="from" value="<TMPL_VAR ROOTPAGE>">
-<input type="hidden" name="subpage" value="1">
-Add a new post titled: <input name=title size=40>
-<input type="submit" value="Edit">
+<form action="<TMPL_VAR CGIURL>" method="get">
+<div id="blogform">
+<input type="hidden" name="do" value="blog" />
+<input type="hidden" name="from" value="<TMPL_VAR ROOTPAGE>" />
+<input type="hidden" name="subpage" value="1" />
+Add a new post titled: <input name="title" size="40" />
+<input type="submit" value="Edit" />
+</div>
 </form>
-<hr />
--- a/templates/editpage.tmpl
+++ b/templates/editpage.tmpl
@ -1,7 +1,11 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
-<head><title><TMPL_VAR FORM-TITLE></title></head>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title><TMPL_VAR FORM-TITLE></title>
+<link rel="stylesheet" href="<TMPL_VAR STYLEURL>" type="text/css" />
+</head>
 <body>
 <TMPL_IF NAME="PAGE_CONFLICT">
 <p>
@ -31,8 +35,12 @@ Optional comment about this change:<br />
 <TMPL_VAR FORM-END>
 <hr />
 <TMPL_IF NAME="PAGE_PREVIEW">
+<div id="header">
 <h1>Page preview:</h1>
+</div>
+<div id="content">
 <TMPL_VAR PAGE_PREVIEW>
+</div>
 <TMPL_ELSE>
 <TMPL_VAR HELPONFORMATTINGLINK>
 </TMPL_IF>
--- a/templates/inlinepagetitle.tmpl
+++ b/templates/inlinepagetitle.tmpl
@ -1,4 +1,4 @@
 <p>
-<TMPL_VAR PAGELINK><br>
+<TMPL_VAR PAGELINK><br />
 <i>(posted <TMPL_VAR CTIME>)</i>
 </p>
--- a/templates/misc.tmpl
+++ b/templates/misc.tmpl
@ -1,7 +1,11 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
-<head><title><TMPL_VAR TITLE></title></head>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title><TMPL_VAR TITLE></title>
+<link rel="stylesheet" href="<TMPL_VAR STYLEURL>" type="text/css" />
+</head>
 <body>

 <h1>
--- a/templates/page.tmpl
+++ b/templates/page.tmpl
@ -1,57 +1,66 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
-<head><title><TMPL_VAR TITLE></title></head>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title><TMPL_VAR TITLE></title>
+<link rel="stylesheet" href="<TMPL_VAR STYLEURL>" type="text/css" />
+</head>
 <body>

+<div id="header">
 <h1>
 <TMPL_LOOP NAME="PARENTLINKS">
 <a href="<TMPL_VAR NAME=URL>"><TMPL_VAR NAME=PAGE></a>/ 
 </TMPL_LOOP>
 <TMPL_VAR TITLE>
 </h1>
+</div>

-<p>
+<div id="actions">
+<ul>
 <TMPL_IF NAME="EDITURL">
-<a href="<TMPL_VAR EDITURL>">Edit</a>&nbsp;
+<li><a href="<TMPL_VAR EDITURL>">Edit</a></li>
 </TMPL_IF>

 <TMPL_IF NAME="RECENTCHANGESURL">
-<a href="<TMPL_VAR RECENTCHANGESURL>">RecentChanges</a>&nbsp;
+<li><a href="<TMPL_VAR RECENTCHANGESURL>">RecentChanges</a></li>
 </TMPL_IF>

 <TMPL_IF NAME="HISTORYURL">
-<a href="<TMPL_VAR HISTORYURL>">History</a>&nbsp;
+<li><a href="<TMPL_VAR HISTORYURL>">History</a></li>
 </TMPL_IF>

 <TMPL_IF NAME="PREFSURL">
-<a href="<TMPL_VAR PREFSURL>">Preferences</a>&nbsp;
+<li><a href="<TMPL_VAR PREFSURL>">Preferences</a></li>
 </TMPL_IF>

-<TMPL_VAR DISCUSSIONLINK><br />
-</p>
+<li><TMPL_VAR DISCUSSIONLINK><br /></li>
+</ul>
+</div>

-<hr />
+<div id="content">
 <TMPL_VAR CONTENT>
-<hr />
+</div>

+<div id="backlinks">
 <TMPL_IF NAME="BACKLINKS">
-<p>Links:
+Links:
 <TMPL_LOOP NAME="BACKLINKS">
 <a href="<TMPL_VAR NAME=URL>"><TMPL_VAR NAME=PAGE></a>
 </TMPL_LOOP>
-</p>
 </TMPL_IF>
+</div>

-<p>
-<i>
+<div id="footer">
+<span id="pageinfo">
 <!-- from <TMPL_VAR NAME=WIKINAME> -->
 Last edited <TMPL_VAR NAME=MTIME>
+</span>
 <TMPL_IF NAME="RSSURL">
-; <a type="application/rss+xml" href="<TMPL_VAR NAME=RSSURL>">RSS</a>
+<a class="rssbutton" type="application/rss+xml" href="<TMPL_VAR NAME=RSSURL>">RSS</a>
 </TMPL_IF>
-</i>
-</p>
+</div>

 </body>
 </html>
--- a/templates/recentchanges.tmpl
+++ b/templates/recentchanges.tmpl
@ -1,15 +1,20 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
-<head><title><TMPL_VAR TITLE></title></head>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title><TMPL_VAR TITLE></title>
+<link rel="stylesheet" href="<TMPL_VAR STYLEURL>" type="text/css" />
+</head>
 <body>

+<div id="header">
 <h1>
 <TMPL_VAR INDEXLINK>/ <TMPL_VAR TITLE>
 </h1>
+</div>

-<hr />
-
+<div id="content">
 <ul>
 <TMPL_LOOP NAME="CHANGELOG">
 	<li> <!-- <TMPL_VAR NAME="REV"> -->
@ -32,6 +37,7 @@
 	</li>
 </TMPL_LOOP>
 </ul>
+</div>

 <!-- from <TMPL_VAR NAME=WIKINAME> -->