From 73836a667ae9c72108b30545e70ecb29d84622cc Mon Sep 17 00:00:00 2001 From: Mauro Toffanin Date: Fri, 8 Jan 2010 19:41:40 +0100 Subject: Enhancements to the grid system and typefacing - implemented a 770 grid system to better adapt the content to the A4 ISO format when is printed; - added paragraph indentation; - added a better toc impagination using the grid and rounded borders; --- public/stylesheets/web/css/grid.css | 31 ++- public/stylesheets/web/css/style.css | 29 +- public/stylesheets/web/css/typefacing.css | 26 +- public/stylesheets/web/images/770-grid.png | Bin 0 -> 958 bytes public/stylesheets/web/images/770-grid.svg | 293 +++++++++++++++++++++ public/stylesheets/web/images/hashtag-grid-980.gif | Bin 745 -> 0 bytes stylesheets/gentoo.org.xsl | 2 +- 7 files changed, 347 insertions(+), 34 deletions(-) create mode 100644 public/stylesheets/web/images/770-grid.png create mode 100644 public/stylesheets/web/images/770-grid.svg delete mode 100644 public/stylesheets/web/images/hashtag-grid-980.gif diff --git a/public/stylesheets/web/css/grid.css b/public/stylesheets/web/css/grid.css index 44ef616..a2ed3d0 100644 --- a/public/stylesheets/web/css/grid.css +++ b/public/stylesheets/web/css/grid.css @@ -1,25 +1,24 @@ /** - * Grid + * Grid System + * + * total area: 770px - 203mm (A4 ISO format less the left/right margins) + * gutter/gap: 20px + * line height: 20px + * grid width: 730px (total area - 2 x gutter) */ -#grid{ +#grid { /* Vertical grid lines */ - background: url(../images/hashtag-grid-980.gif) repeat-y 0 0; + background: url(../images/770-grid.png) repeat-y 0 0; /* Dimensions - same width as your grid with gutters */ - width: 980px; - - /* Grid (left-aligned) - position: absolute; - top: 0; - left: 0; - */ + width: 770px; /* Grid (centered) */ position: absolute; top: 0; left: 50%; - margin-left: -490px; + margin-left: -385px; } @@ -29,12 +28,12 @@ * Remember, the CSS properties that define the box model: * visible height = height + borders + margins + padding */ -#grid .horiz{ +#grid .horiz { /* 20px line height */ - height: 19px; - border-bottom: 1px dotted #aaa; - margin: 0; - padding: 0; + height:19px; + border-bottom:1px dotted #AAA; + margin:0; + padding:0; } diff --git a/public/stylesheets/web/css/style.css b/public/stylesheets/web/css/style.css index 6c8c940..f24610d 100644 --- a/public/stylesheets/web/css/style.css +++ b/public/stylesheets/web/css/style.css @@ -14,7 +14,7 @@ body { background-color:#F9F9F9; color:#1A1A1A; - max-width:800px; + max-width:730px; margin:auto; margin-top:40px; margin-bottom:40px; @@ -28,12 +28,13 @@ hr { } p { text-align:justify; + text-indent:30px; } a { /* Resetting borders from the DocBook template */ text-decoration:none; border:0; - font-weight:bold; + border-bottom:1px dotted #0F83DB; color:#0F83DB; } @@ -46,12 +47,29 @@ a { } .section { } -.toc > dl > dd { +div.toc > dl > dd { margin-bottom:10px; } +div.toc > p { + text-indent:0px; +} +div.chapter > div.toc { + border:2px solid #1A1A1A; + padding:10px; + padding-left:30px; /* same as the

indentation */ + + -moz-border-radius:8px; + -webkit-border-radius:8px; + -khtml-border-radius:8px; + border-radius:8px; /* leave this CSS tag always as last */ +} +div.chapter > div.toc > dl > dt > span.section { +/* margin-left:20px; /* same as the

indentation */ +/* border:1px solid red;*/ +} .programlisting { background-color:#F8F8F8; - border:1px solid #1A1A1A; + border:2px solid #1A1A1A; border-left:16px solid #1A1A1A; padding:5px; @@ -67,3 +85,6 @@ a { height:60px; /* border:1px solid red;*/ } +h2.title { + border-bottom:2px solid #1A1A1A; +} diff --git a/public/stylesheets/web/css/typefacing.css b/public/stylesheets/web/css/typefacing.css index 0a277e2..e61f9a1 100644 --- a/public/stylesheets/web/css/typefacing.css +++ b/public/stylesheets/web/css/typefacing.css @@ -45,16 +45,16 @@ 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-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'; +.amp, em { +/* font-family:Baskerville,Georgia,'Times New Roman,sans-serif;*/ + font-family:'DroidSerif-Italic'; } -em { - font-family: 'DroidSerif-Italic'; +a { + font-family:'DroidSans-Bold'; } /** DocBook elements **/ @@ -67,12 +67,12 @@ para { 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; +/* font-family:'DroidSans-Mono','Consolas','Bitstream Vera Sans Mono','Courier New',Courier,monospace !important;*/ + font-family:'DoridSans-Mono'; + font-size:0.9em; + font-style:normal; + font-weight:normal; + line-height:20px; } .varname, .filename { font-family: 'DroidSans-Bold'; diff --git a/public/stylesheets/web/images/770-grid.png b/public/stylesheets/web/images/770-grid.png new file mode 100644 index 0000000..c4bf785 Binary files /dev/null and b/public/stylesheets/web/images/770-grid.png differ diff --git a/public/stylesheets/web/images/770-grid.svg b/public/stylesheets/web/images/770-grid.svg new file mode 100644 index 0000000..0e2c250 --- /dev/null +++ b/public/stylesheets/web/images/770-grid.svg @@ -0,0 +1,293 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/stylesheets/web/images/hashtag-grid-980.gif b/public/stylesheets/web/images/hashtag-grid-980.gif deleted file mode 100644 index a4a8c01..0000000 Binary files a/public/stylesheets/web/images/hashtag-grid-980.gif and /dev/null differ diff --git a/stylesheets/gentoo.org.xsl b/stylesheets/gentoo.org.xsl index 693507f..eb96ba8 100644 --- a/stylesheets/gentoo.org.xsl +++ b/stylesheets/gentoo.org.xsl @@ -72,7 +72,7 @@