diff options
author | Mauro Toffanin <toffanin.mauro@gmail.com> | 2010-01-08 13:56:51 +0100 |
---|---|---|
committer | Mauro Toffanin <toffanin.mauro@gmail.com> | 2010-01-08 13:56:51 +0100 |
commit | de5b13eb337f4448e3ee2c8819b8b3ffa21804b0 (patch) | |
tree | 13692e29e255c6a80a7b470a2601b2eed99815c5 | |
parent | Fixing bg/fg contrast and Makefile (diff) | |
download | devmanual-de5b13eb337f4448e3ee2c8819b8b3ffa21804b0.tar.gz devmanual-de5b13eb337f4448e3ee2c8819b8b3ffa21804b0.tar.bz2 devmanual-de5b13eb337f4448e3ee2c8819b8b3ffa21804b0.zip |
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);
-rw-r--r-- | public/stylesheets/typefacing.css | 14 | ||||
-rw-r--r-- | public/web/css/grid.css | 40 | ||||
-rw-r--r-- | public/web/css/reset.css (renamed from public/stylesheets/reset.css) | 0 | ||||
-rw-r--r-- | public/web/css/style.css (renamed from public/stylesheets/style.css) | 19 | ||||
-rw-r--r-- | public/web/css/typefacing.css | 80 | ||||
-rw-r--r-- | public/web/fonts/DroidSans-Bold.ttf | bin | 0 -> 191032 bytes | |||
-rw-r--r-- | public/web/fonts/DroidSans.ttf | bin | 0 -> 190044 bytes | |||
-rw-r--r-- | public/web/fonts/DroidSansMono.ttf | bin | 0 -> 117072 bytes | |||
-rw-r--r-- | public/web/fonts/DroidSerif-Bold.ttf | bin | 0 -> 184836 bytes | |||
-rw-r--r-- | public/web/fonts/DroidSerif-BoldItalic.ttf | bin | 0 -> 189916 bytes | |||
-rw-r--r-- | public/web/fonts/DroidSerif-Italic.ttf | bin | 0 -> 177176 bytes | |||
-rw-r--r-- | public/web/fonts/DroidSerif-Regular.ttf | bin | 0 -> 172532 bytes | |||
-rw-r--r-- | public/web/images/hashtag-grid-980.gif | bin | 0 -> 745 bytes | |||
-rw-r--r-- | public/web/js/hashgrid.js | 147 | ||||
-rw-r--r-- | stylesheets/gentoo.org.xsl | 62 |
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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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> |