Various enhancements to the typefacing layout:

- the CSS stylesheet has been move into public/web/ directory to let
  people add new stylesheets types;
- gentoo.org.xsl param elements has been improved to better reflect the
  new 'web' stylesheet structure;
- Added an inline grid system using hashgrid javascript tool (grid
  subdivision is not complete);
- Improved typefacing using Droid font sets (fonts metric is not
  complete);

15 files changed, 334 insertions, 28 deletions

diff --git a/public/stylesheets/typefacing.css b/public/stylesheets/typefacing.css
deleted file mode 100644
index cac0a6a..0000000
--- a/public/stylesheets/typefacing.css
+++ /dev/null
@@ -1,14 +0,0 @@
-/** Typefacing tweaks **/
-html {
-	font-size:100.01%; /* FIX typefacing rendering on broken browsers */
-}
-.amp {
-	font-family:Baskerville,Georgia,"Times New Roman",sans-serif;
-	font-style:italic;
-}
-em {
-	font-style:italic;
-}
-.legalnotice {
-	font-style:italic;
-}
diff --git a/public/web/css/grid.css b/public/web/css/grid.css
new file mode 100644
index 0000000..44ef616
--- /dev/null
+++ b/public/web/css/grid.css
@@ -0,0 +1,40 @@
+/**
+ * Grid
+ */
+#grid{
+
+    /* Vertical grid lines */
+    background: url(../images/hashtag-grid-980.gif) repeat-y 0 0;
+
+    /* Dimensions - same width as your grid with gutters */
+    width: 980px;
+
+    /* Grid (left-aligned)
+    position: absolute;
+    top: 0;
+    left: 0;
+    */
+
+    /* Grid (centered) */
+    position: absolute;
+    top: 0;
+    left: 50%;
+    margin-left: -490px;
+
+}
+
+/**
+ * Horizontal grid lines, defined by your base line height
+ *
+ * Remember, the CSS properties that define the box model:
+ * visible height = height + borders + margins + padding
+ */
+#grid .horiz{
+
+    /* 20px line height */
+    height: 19px;
+    border-bottom: 1px dotted #aaa;
+    margin: 0;
+    padding: 0;
+
+}
diff --git a/public/stylesheets/reset.css b/public/web/css/reset.css
index 3a5ff48..3a5ff48 100644
--- a/public/stylesheets/reset.css
+++ b/public/web/css/reset.css
diff --git a/public/stylesheets/style.css b/public/web/css/style.css
index d91cc30..6c8c940 100644
--- a/public/stylesheets/style.css
+++ b/public/web/css/style.css
@@ -14,13 +14,15 @@
 body {
 	background-color:#F9F9F9;
 	color:#1A1A1A;
-	font-family:Helvetica,"Helvetica Neue","Lucida Grande","Lucida Sans Unicode",Sans-Serif,Verdana,Arial;
-	font-size:1em;
 	max-width:800px;
 	margin:auto;
-	margin-top:50px;
+	margin-top:40px;
+	margin-bottom:40px;
+/*	border:1px solid red;*/
 }
 hr {
+	margin:0;
+	padding:0;
 	border:0;
 	border-bottom:4px solid #1A1A1A;
 }
@@ -51,11 +53,6 @@ a {
 	background-color:#F8F8F8;
 	border:1px solid #1A1A1A;
 	border-left:16px solid #1A1A1A;
-	font-family:"Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
-	font-size:0.9em !important;
-	font-style:normal !important;
-	font-weight:normal !important;
-	line-height:1.1em !important;
 	padding:5px;
 
         -moz-border-radius:8px;
@@ -66,7 +63,7 @@ a {
 .programlisting > a {
 	color:#333333;
 }
-.varname, .filename {
-	font-weight:bold;
-	font-size:1.2em;
+.navheader {
+	height:60px;
+/*	border:1px solid red;*/
 }
diff --git a/public/web/css/typefacing.css b/public/web/css/typefacing.css
new file mode 100644
index 0000000..0a277e2
--- /dev/null
+++ b/public/web/css/typefacing.css
@@ -0,0 +1,80 @@
+/**
+ * @font-face is supported by:
+ * - Safari 3.1+;
+ * - Internet Explorer (only if EOT fonts are used);
+ * - Opera 9+;
+ * - Firefox 3.5+;
+ * - Konqueror 4.3+;
+ * - Google Chrome/Chromium;
+ */
+
+/** Sans font sets **/
+@font-face {
+	font-family: 'DroidSans';
+	src: url('../fonts/DroidSans.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'DroidSans-Bold';
+	src: url('../fonts/DroidSans-Bold.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'DoridSans-Mono';
+	src: url('../fonts/DroidSansMono.ttf') format('truetype');
+}
+
+/** Sans Serif font sets **/
+@font-face {
+	font-family: 'DroidSerif-BoldItalic';
+	src: url('../fonts/DroidSerif-BoldItalic.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'DroidSerif-Bold';
+	src: url('../fonts/DroidSerif-Bold.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'DroidSerif-Regular';
+	src: url('../fonts/DroidSerif-Regular.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'DroidSerif-Italic';
+	src: url('../fonts/DroidSerif-Italic.ttf') format('truetype');
+}
+
+/** Typefacing elements **/
+html {
+	font-size:100.01%; /* FIX typefacing rendering on broken browsers */
+}
+body {
+/*	font-family:Helvetica,"Helvetica Neue","Lucida Grande","Lucida Sans Unicode",Sans-Serif,Verdana,Arial;*/
+	font-family: 'DroidSans';
+	font-size:1em;
+}
+.amp {
+/*	font-family:Baskerville,Georgia,"Times New Roman",sans-serif;*/
+	font-family: 'DroidSerif-Italic';
+}
+em {
+	font-family: 'DroidSerif-Italic';
+}
+
+/** DocBook elements **/
+para {
+}
+
+
+/** DocBook classes **/
+.legalnotice {
+	font-family: 'DroidSerif-Italic';
+}
+.programlisting {
+/*	font-family: "DroidSans-Mono","Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;*/
+	font-family: 'DoridSans-Mono';
+	font-size:0.9em !important;
+	font-style:normal !important;
+	font-weight:normal !important;
+	line-height:20px !important;
+}
+.varname, .filename {
+	font-family: 'DroidSans-Bold';
+	font-size:1.2em;
+}
diff --git a/public/web/fonts/DroidSans-Bold.ttf b/public/web/fonts/DroidSans-Bold.ttf
new file mode 100644
index 0000000..7ac04b6
--- /dev/null
+++ b/public/web/fonts/DroidSans-Bold.ttf
diff --git a/public/web/fonts/DroidSans.ttf b/public/web/fonts/DroidSans.ttf
new file mode 100644
index 0000000..2537cc3
--- /dev/null
+++ b/public/web/fonts/DroidSans.ttf
diff --git a/public/web/fonts/DroidSansMono.ttf b/public/web/fonts/DroidSansMono.ttf
new file mode 100644
index 0000000..6e79dad
--- /dev/null
+++ b/public/web/fonts/DroidSansMono.ttf
diff --git a/public/web/fonts/DroidSerif-Bold.ttf b/public/web/fonts/DroidSerif-Bold.ttf
new file mode 100644
index 0000000..85d6c6b
--- /dev/null
+++ b/public/web/fonts/DroidSerif-Bold.ttf
diff --git a/public/web/fonts/DroidSerif-BoldItalic.ttf b/public/web/fonts/DroidSerif-BoldItalic.ttf
new file mode 100644
index 0000000..9d8e798
--- /dev/null
+++ b/public/web/fonts/DroidSerif-BoldItalic.ttf
diff --git a/public/web/fonts/DroidSerif-Italic.ttf b/public/web/fonts/DroidSerif-Italic.ttf
new file mode 100644
index 0000000..6acc86d
--- /dev/null
+++ b/public/web/fonts/DroidSerif-Italic.ttf
diff --git a/public/web/fonts/DroidSerif-Regular.ttf b/public/web/fonts/DroidSerif-Regular.ttf
new file mode 100644
index 0000000..8c1c2c4
--- /dev/null
+++ b/public/web/fonts/DroidSerif-Regular.ttf
diff --git a/public/web/images/hashtag-grid-980.gif b/public/web/images/hashtag-grid-980.gif
new file mode 100644
index 0000000..a4a8c01
--- /dev/null
+++ b/public/web/images/hashtag-grid-980.gif
diff --git a/public/web/js/hashgrid.js b/public/web/js/hashgrid.js
new file mode 100644
index 0000000..428ba43
--- /dev/null
+++ b/public/web/js/hashgrid.js
@@ -0,0 +1,147 @@
+/**
+ * Overlay tool (jQuery version)
+ * http://github.com/dotjay/hashgrid
+ * Version 1, 21 Dec 2009
+ * By Jon Gibbins, accessibility.co.uk
+ */
+
+$(document).ready(function() {
+
+	var grid = new GridOverlay('grid');
+
+});
+
+
+/**
+ * Grid overlay
+ */
+var GridOverlay = function(id) {
+
+	var overlayEl = $('<div id="' + id + '"></div>'),
+		overlayGrid = false,
+		overlaySticky = false,
+		cookieName = 'gridoverlay' + id;
+
+	// Remove any conflicting overlay in the DOM
+	if ($('#' + id).length > 0) {
+		$('#' + id).remove();
+	}
+
+	// Ensure the overlay is hidden before adding to the DOM
+	overlayEl.css('display', 'none');
+	$("body").prepend(overlayEl);
+	var overlay = $('#' + id);
+
+	// Unless a custom z-index is set, ensure the overlay will be behind everything
+	var overlayZ = overlay.css('z-index');
+	if (overlayZ == 'auto') {
+		overlayZ = '-1';
+		overlay.css('z-index', overlayZ);
+	}
+
+	// Override the default overlay height with the actual page height
+	var pageHeight = parseFloat($(document).height());
+	overlay.height(pageHeight);
+
+	// Add the first grid line so that we can measure it
+	overlay.append('<div class="horiz first-line">');
+
+	// Calculate the number of grid lines needed
+	var overlayGridLines = overlay.children('.horiz'),
+	overlayGridLineHeight = parseFloat(overlayGridLines.css('height')) + parseFloat(overlayGridLines.css('border-bottom-width')),
+	numGridLines = Math.floor(pageHeight / overlayGridLineHeight),
+	i;
+
+	// Add the remaining grid lines
+	for (i = numGridLines - 1; i >= 1; i--) {
+		overlay.append('<div class="horiz">');
+	};
+
+	// Check for previous overlay state
+	var overlayCookie = readCookie(cookieName);
+	if (overlayCookie) {
+		overlayGrid = true;
+		overlaySticky = true;
+		overlay.show();
+	}
+
+	// Keyboard controls
+	$(document).bind('keydown', function(e) {
+		var code = (e.keyCode ? e.keyCode : e.which);
+		var modifier = (e.altKey ? e.altKey : false);
+		//console.log('press: ' + code);
+		if (overlayGrid) {
+			// Toggle sticky overlay z-index (b == 66)
+			if (modifier && (code == 66)) {
+				if (overlay.css('z-index') == 9999) {
+					overlay.css('z-index', overlayZ);
+				}
+				else {
+					overlay.css('z-index', 9999);
+				}
+			}
+			// Turn sticky overlay on
+			if (modifier && (code == 13)) {
+				overlaySticky = true;
+				createCookie(cookieName, true, 1);
+			}
+			// Turn sticky overlay off
+			else if (overlaySticky && modifier && (code == 71)) {
+				overlay.hide();
+				overlayGrid = false;
+				overlaySticky = false;
+				eraseCookie(cookieName);
+			}
+		}
+		else{
+			// Show overlay (g == 71)
+			if (modifier && (code == 71)) {
+				overlay.show();
+				overlayGrid = true;
+			}
+		}
+	});
+
+	$(document).bind('keyup', function(e) {
+		var code = (e.keyCode ? e.keyCode : e.which);
+		var modifier = (e.altKey ? e.altKey : false);
+		// Hide overlay (g == 71)
+		if (!overlaySticky && modifier && (code == 71)) {
+			overlay.hide();
+			overlayGrid = false;
+		}
+	});
+
+}
+
+
+/**
+ * Cookie functions
+ * 
+ * By Peter-Paul Koch:
+ * http://www.quirksmode.org/js/cookies.html
+ */
+function createCookie(name,value,days) {
+	if (days) {
+		var date = new Date();
+		date.setTime(date.getTime()+(days*24*60*60*1000));
+		var expires = "; expires="+date.toGMTString();
+	}
+	else var expires = "";
+	document.cookie = name+"="+value+expires+"; path=/";
+}
+
+function readCookie(name) {
+	var nameEQ = name + "=";
+	var ca = document.cookie.split(';');
+	for(var i=0;i < ca.length;i++) {
+		var c = ca[i];
+		while (c.charAt(0)==' ') c = c.substring(1,c.length);
+		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+	}
+	return null;
+}
+
+function eraseCookie(name) {
+	createCookie(name,"",-1);
+}
\ No newline at end of file
diff --git a/stylesheets/gentoo.org.xsl b/stylesheets/gentoo.org.xsl
index d40f8cc..693507f 100644
--- a/stylesheets/gentoo.org.xsl
+++ b/stylesheets/gentoo.org.xsl
@@ -6,27 +6,83 @@
 
 <xsl:import href="http://docbook.sourceforge.net/release/xsl-ns/current/xhtml/chunktoc.xsl" />
 
+
+<!-- List of the configurable parameters -->
 <xsl:param name="baseuri"></xsl:param>
+<xsl:param name="theme-name">web/</xsl:param>
+<xsl:param name="css-path">css/</xsl:param>
+<xsl:param name="js-path">js/</xsl:param>
+<xsl:param name="images-path">images/</xsl:param>
 
 <xsl:template name="user.head.content">
+	<!-- Include the reset Style Sheet
+	     The main purposes of a reset stylesheet is to reduce browser
+	     inconsistencies in things like default line heights, margins
+	     and font sizes of headings, and so on. -->
 	<link rel="stylesheet" type="text/css">
 		<xsl:attribute name="href">
 			<xsl:value-of select="$baseuri" />
-			<xsl:text>stylesheets/reset.css</xsl:text>
+			<xsl:text>stylesheets/</xsl:text>
+			<xsl:value-of select="$theme-name" />
+			<xsl:value-of select="$css-path" />
+			<xsl:text>reset.css</xsl:text>
 		</xsl:attribute>
 	</link>
+
+	<!-- Include the main Style Sheet
+	     -->
 	<link rel="stylesheet" type="text/css">
 		<xsl:attribute name="href">
 			<xsl:value-of select="$baseuri" />
-			<xsl:text>stylesheets/style.css</xsl:text>
+			<xsl:text>stylesheets/</xsl:text>
+			<xsl:value-of select="$theme-name" />
+			<xsl:value-of select="$css-path" />
+			<xsl:text>style.css</xsl:text>
 		</xsl:attribute>
 	</link>
+
+	<!-- Include the typefacing Style Sheet
+	     The main purposes of a typefacing stylesheet is to apply
+	     fonts, typography metric and proportions. -->
 	<link rel="stylesheet" type="text/css">
 		<xsl:attribute name="href">
 			<xsl:value-of select="$baseuri" />
-			<xsl:text>stylesheets/typefacing.css</xsl:text>
+			<xsl:text>stylesheets/</xsl:text>
+			<xsl:value-of select="$theme-name" />
+			<xsl:value-of select="$css-path" />
+			<xsl:text>typefacing.css</xsl:text>
 		</xsl:attribute>
 	</link>
+
+	<!-- Include the grid Style Sheet
+	     -->
+	<link rel="stylesheet" type="text/css">
+		<xsl:attribute name="href">
+			<xsl:value-of select="$baseuri" />
+			<xsl:text>stylesheets/</xsl:text>
+			<xsl:value-of select="$theme-name" />
+			<xsl:value-of select="$css-path" />
+			<xsl:text>grid.css</xsl:text>
+		</xsl:attribute>
+	</link>
+</xsl:template>
+
+<xsl:template name="user.footer.navigation">
+
+	<!-- Include latest versione of jQuery -->
+	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" />
+
+	<!-- Include hashgrid script (http://hashgrid.org)
+	     -->
+	<script type="text/javascript">
+		<xsl:attribute name="src">
+			<xsl:value-of select="$baseuri" />
+			<xsl:text>stylesheets/</xsl:text>
+			<xsl:value-of select="$theme-name" />
+			<xsl:value-of select="$js-path" />
+			<xsl:text>hashgrid.js</xsl:text>
+		</xsl:attribute>
+	</script>
 </xsl:template>
 
 </xsl:stylesheet>