diff options
author | Mauro Toffanin <toffanin.mauro@gmail.com> | 2010-01-08 19:41:40 +0100 |
---|---|---|
committer | Mauro Toffanin <toffanin.mauro@gmail.com> | 2010-01-08 19:41:40 +0100 |
commit | 73836a667ae9c72108b30545e70ecb29d84622cc (patch) | |
tree | 677f6d35ec9ce6ab43ec054018bb1432a43a7737 | |
parent | Moved the 'web' stylesheet into public/stylesheets/ (diff) | |
download | devmanual-73836a667ae9c72108b30545e70ecb29d84622cc.tar.gz devmanual-73836a667ae9c72108b30545e70ecb29d84622cc.tar.bz2 devmanual-73836a667ae9c72108b30545e70ecb29d84622cc.zip |
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;
-rw-r--r-- | public/stylesheets/web/css/grid.css | 31 | ||||
-rw-r--r-- | public/stylesheets/web/css/style.css | 29 | ||||
-rw-r--r-- | public/stylesheets/web/css/typefacing.css | 26 | ||||
-rw-r--r-- | public/stylesheets/web/images/770-grid.png | bin | 0 -> 958 bytes | |||
-rw-r--r-- | public/stylesheets/web/images/770-grid.svg | 293 | ||||
-rw-r--r-- | public/stylesheets/web/images/hashtag-grid-980.gif | bin | 745 -> 0 bytes | |||
-rw-r--r-- | stylesheets/gentoo.org.xsl | 2 |
7 files changed, 347 insertions, 34 deletions
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 <p> 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 <p> 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 Binary files differnew file mode 100644 index 0000000..c4bf785 --- /dev/null +++ b/public/stylesheets/web/images/770-grid.png 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 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="770" + height="40" + id="svg2" + version="1.1" + inkscape:version="0.47 r22583" + sodipodi:docname="770-grid.svg" + inkscape:export-filename="/home/equilibrium/tmp/ineluttabile/devmanual/public/stylesheets/web/images/770-grid.png" + inkscape:export-xdpi="90" + inkscape:export-ydpi="90"> + <defs + id="defs4"> + <inkscape:perspective + sodipodi:type="inkscape:persp3d" + inkscape:vp_x="0 : 526.18109 : 1" + inkscape:vp_y="0 : 1000 : 0" + inkscape:vp_z="744.09448 : 526.18109 : 1" + inkscape:persp3d-origin="372.04724 : 350.78739 : 1" + id="perspective10" /> + <inkscape:perspective + id="perspective3621" + inkscape:persp3d-origin="0.5 : 0.33333333 : 1" + inkscape:vp_z="1 : 0.5 : 1" + inkscape:vp_y="0 : 1000 : 0" + inkscape:vp_x="0 : 0.5 : 1" + sodipodi:type="inkscape:persp3d" /> + <inkscape:perspective + id="perspective3643" + inkscape:persp3d-origin="0.5 : 0.33333333 : 1" + inkscape:vp_z="1 : 0.5 : 1" + inkscape:vp_y="0 : 1000 : 0" + inkscape:vp_x="0 : 0.5 : 1" + sodipodi:type="inkscape:persp3d" /> + <inkscape:perspective + id="perspective3665" + inkscape:persp3d-origin="0.5 : 0.33333333 : 1" + inkscape:vp_z="1 : 0.5 : 1" + inkscape:vp_y="0 : 1000 : 0" + inkscape:vp_x="0 : 0.5 : 1" + sodipodi:type="inkscape:persp3d" /> + <inkscape:perspective + id="perspective3665-0" + inkscape:persp3d-origin="0.5 : 0.33333333 : 1" + inkscape:vp_z="1 : 0.5 : 1" + inkscape:vp_y="0 : 1000 : 0" + inkscape:vp_x="0 : 0.5 : 1" + sodipodi:type="inkscape:persp3d" /> + <inkscape:perspective + id="perspective3665-1" + inkscape:persp3d-origin="0.5 : 0.33333333 : 1" + inkscape:vp_z="1 : 0.5 : 1" + inkscape:vp_y="0 : 1000 : 0" + inkscape:vp_x="0 : 0.5 : 1" + sodipodi:type="inkscape:persp3d" /> + <inkscape:perspective + id="perspective3665-5" + inkscape:persp3d-origin="0.5 : 0.33333333 : 1" + inkscape:vp_z="1 : 0.5 : 1" + inkscape:vp_y="0 : 1000 : 0" + inkscape:vp_x="0 : 0.5 : 1" + sodipodi:type="inkscape:persp3d" /> + <inkscape:perspective + id="perspective3665-7" + inkscape:persp3d-origin="0.5 : 0.33333333 : 1" + inkscape:vp_z="1 : 0.5 : 1" + inkscape:vp_y="0 : 1000 : 0" + inkscape:vp_x="0 : 0.5 : 1" + sodipodi:type="inkscape:persp3d" /> + <inkscape:perspective + id="perspective3665-6" + inkscape:persp3d-origin="0.5 : 0.33333333 : 1" + inkscape:vp_z="1 : 0.5 : 1" + inkscape:vp_y="0 : 1000 : 0" + inkscape:vp_x="0 : 0.5 : 1" + sodipodi:type="inkscape:persp3d" /> + <inkscape:perspective + id="perspective3665-3" + inkscape:persp3d-origin="0.5 : 0.33333333 : 1" + inkscape:vp_z="1 : 0.5 : 1" + inkscape:vp_y="0 : 1000 : 0" + inkscape:vp_x="0 : 0.5 : 1" + sodipodi:type="inkscape:persp3d" /> + <inkscape:perspective + id="perspective3665-4" + inkscape:persp3d-origin="0.5 : 0.33333333 : 1" + inkscape:vp_z="1 : 0.5 : 1" + inkscape:vp_y="0 : 1000 : 0" + inkscape:vp_x="0 : 0.5 : 1" + sodipodi:type="inkscape:persp3d" /> + <inkscape:perspective + id="perspective3665-54" + inkscape:persp3d-origin="0.5 : 0.33333333 : 1" + inkscape:vp_z="1 : 0.5 : 1" + inkscape:vp_y="0 : 1000 : 0" + inkscape:vp_x="0 : 0.5 : 1" + sodipodi:type="inkscape:persp3d" /> + <inkscape:perspective + id="perspective3665-43" + inkscape:persp3d-origin="0.5 : 0.33333333 : 1" + inkscape:vp_z="1 : 0.5 : 1" + inkscape:vp_y="0 : 1000 : 0" + inkscape:vp_x="0 : 0.5 : 1" + sodipodi:type="inkscape:persp3d" /> + <inkscape:perspective + id="perspective3665-78" + inkscape:persp3d-origin="0.5 : 0.33333333 : 1" + inkscape:vp_z="1 : 0.5 : 1" + inkscape:vp_y="0 : 1000 : 0" + inkscape:vp_x="0 : 0.5 : 1" + sodipodi:type="inkscape:persp3d" /> + <inkscape:perspective + id="perspective3665-8" + inkscape:persp3d-origin="0.5 : 0.33333333 : 1" + inkscape:vp_z="1 : 0.5 : 1" + inkscape:vp_y="0 : 1000 : 0" + inkscape:vp_x="0 : 0.5 : 1" + sodipodi:type="inkscape:persp3d" /> + <inkscape:perspective + id="perspective3786" + inkscape:persp3d-origin="0.5 : 0.33333333 : 1" + inkscape:vp_z="1 : 0.5 : 1" + inkscape:vp_y="0 : 1000 : 0" + inkscape:vp_x="0 : 0.5 : 1" + sodipodi:type="inkscape:persp3d" /> + <inkscape:perspective + id="perspective3786-4" + inkscape:persp3d-origin="0.5 : 0.33333333 : 1" + inkscape:vp_z="1 : 0.5 : 1" + inkscape:vp_y="0 : 1000 : 0" + inkscape:vp_x="0 : 0.5 : 1" + sodipodi:type="inkscape:persp3d" /> + <inkscape:perspective + id="perspective3786-2" + inkscape:persp3d-origin="0.5 : 0.33333333 : 1" + inkscape:vp_z="1 : 0.5 : 1" + inkscape:vp_y="0 : 1000 : 0" + inkscape:vp_x="0 : 0.5 : 1" + sodipodi:type="inkscape:persp3d" /> + <inkscape:perspective + id="perspective3786-6" + inkscape:persp3d-origin="0.5 : 0.33333333 : 1" + inkscape:vp_z="1 : 0.5 : 1" + inkscape:vp_y="0 : 1000 : 0" + inkscape:vp_x="0 : 0.5 : 1" + sodipodi:type="inkscape:persp3d" /> + <inkscape:perspective + id="perspective3786-9" + inkscape:persp3d-origin="0.5 : 0.33333333 : 1" + inkscape:vp_z="1 : 0.5 : 1" + inkscape:vp_y="0 : 1000 : 0" + inkscape:vp_x="0 : 0.5 : 1" + sodipodi:type="inkscape:persp3d" /> + <inkscape:perspective + id="perspective3844" + inkscape:persp3d-origin="0.5 : 0.33333333 : 1" + inkscape:vp_z="1 : 0.5 : 1" + inkscape:vp_y="0 : 1000 : 0" + inkscape:vp_x="0 : 0.5 : 1" + sodipodi:type="inkscape:persp3d" /> + </defs> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="1" + inkscape:cx="451.05476" + inkscape:cy="9.8780999" + inkscape:document-units="px" + inkscape:current-layer="layer1" + showgrid="true" + inkscape:showpageshadow="false" + inkscape:window-width="1024" + inkscape:window-height="710" + inkscape:window-x="-4" + inkscape:window-y="-3" + inkscape:window-maximized="1" + showborder="true"> + <inkscape:grid + type="xygrid" + id="grid2816" + empspacing="5" + visible="true" + enabled="true" + snapvisiblegridlinesonly="true" /> + </sodipodi:namedview> + <metadata + id="metadata7"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title></dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <g + inkscape:label="Livello 1" + inkscape:groupmode="layer" + id="layer1" + transform="translate(9.9999999,-1012.2403)"> + <path + style="fill:#aaaaaa;fill-opacity:1;stroke:#aaaaaa;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1, 1;stroke-dashoffset:0" + d="m 0.50000004,1003.1963 0,48.2361" + id="path2818" /> + <path + style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" + d="m 10.49997,1003.1869 0,48.2456" + id="path2818-6" /> + <path + style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" + d="m 115.5,1003.1964 0,48.2361" + id="path2818-6-3" /> + <path + style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" + d="m 135.5,1003.1964 0,48.2361" + id="path2818-6-3-2" /> + <path + style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" + d="m 240.5,1003.1964 0,48.2361" + id="path2818-6-3-6" /> + <path + style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" + d="m 260.5,1003.1964 0,48.2361" + id="path2818-6-3-5" /> + <path + style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" + d="m 365.5,1003.1964 0,48.2361" + id="path2818-6-3-4" /> + <path + style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" + d="m 385.5,1003.1964 0,48.2361" + id="path2818-6-3-65" /> + <path + style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" + d="m 490.5,1003.1963 0,48.236" + id="path2818-6-3-9" /> + <path + style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" + d="m 510.5,1003.1963 0,48.236" + id="path2818-6-3-7" /> + <path + style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" + d="m 615.5,1003.1963 0,48.236" + id="path2818-6-3-52" /> + <path + style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" + d="m 635.5,1003.1963 0,48.236" + id="path2818-6-3-74" /> + <path + style="fill:#0000ff;stroke:#0000ff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" + d="m 740.5,1003.1963 0,48.236" + id="path2818-6-3-0" /> + <path + style="fill:#aaaaaa;stroke:#cccccc;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1,1;stroke-dashoffset:0;fill-opacity:1" + d="m 125.5,1003.1964 0,48.2361" + id="path2818-6-3-43" /> + <path + style="fill:#aaaaaa;stroke:#aaaaaa;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1, 1;stroke-dashoffset:0;fill-opacity:1" + d="m 250.5,1002.4325 0,48.9901" + id="path2818-6-3-43-1" /> + <path + style="fill:#aaaaaa;stroke:#aaaaaa;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1,1;stroke-dashoffset:0;fill-opacity:1" + d="m 375.5,1003.1964 0,48.2361" + id="path2818-6-3-43-9" /> + <path + style="fill:#aaaaaa;stroke:#aaaaaa;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1, 1;stroke-dashoffset:0;fill-opacity:1" + d="m 500.5,1003.1964 0,48.2361" + id="path2818-6-3-43-0" /> + <path + style="fill:#aaaaaa;stroke:#aaaaaa;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1,1;stroke-dashoffset:0;fill-opacity:1" + d="m 625.5,1003.1964 0,48.2361" + id="path2818-6-3-43-8" /> + <path + style="fill:#aaaaaa;stroke:#aaaaaa;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1, 1;stroke-dashoffset:0;fill-opacity:1" + d="m 750.5,1003.1964 0,48.2361" + id="path2818-6-3-43-2" /> + </g> +</svg> diff --git a/public/stylesheets/web/images/hashtag-grid-980.gif b/public/stylesheets/web/images/hashtag-grid-980.gif Binary files differdeleted file mode 100644 index a4a8c01..0000000 --- a/public/stylesheets/web/images/hashtag-grid-980.gif +++ /dev/null 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 @@ <!-- 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) + <!-- Include hashgrid script (http://hashgrid.com) --> <script type="text/javascript"> <xsl:attribute name="src"> |