2015-03-21 13:31 GMT+01:00 Holger Wansing <li...@wansing-online.de>: > Stéphane Blondon <stephane.blon...@gmail.com> wrote: >> >> Has someone got any others remarks, bugs, etc.? >> > > Looks great to me.
Good news! I have done a new version which add the {note, caution,
important} icons. A demo is temporarily available at
http://stephane.yaal.fr/tmp/installationguide2/ch04s03.html (see Note
at the bottom of the page).
If nobody notices problems, it would be nice to commit it. There are
several files in attachments:
- add_css.diff : output of `svn diff`, based on revision 69688.
- images.tar.lzma : contains 2 directories of the pictures (png/
contains the used pictures by html, image-sources contains the
modified svg sources)
I tested the patch with.
./buildone.sh armel en html
2015-03-22 18:00 GMT+01:00 Lennart Sorensen <lsore...@csclub.uwaterloo.ca>:
> On Sat, Mar 21, 2015 at 01:42:02AM +0100, Stéphane Blondon wrote:
>> Perhaps we could have a CSS solution (see
>> http://codepen.io/cimmanon/pen/KqoCs) but in order to have a patch
>> soon, I simply removed the odd/even styling and the highlighting (as
>> you suggest).
>
> That example certainly appears to work well. I do like the highlighting
> idea, if it works.
I like highlighting too but I prefer to have a first release before
improving it: when the patch will be committed, there will be more
eyes to catch bugs and needed improvements.
(And we've got limited amount of time before the release.)
--
Stéphane
Index: build/buildone.sh
===================================================================
--- build/buildone.sh (révision 69688)
+++ build/buildone.sh (copie de travail)
@@ -29,6 +29,7 @@
stylesheet_html_single="$stylesheet_dir/style-html-single.xsl"
stylesheet_dsssl="$stylesheet_dir/style-print.dsl"
stylesheet_css="$stylesheet_dir/install.css"
+images_css_dir="png"
entities_path="$build_path/entities"
source_path="$manual_path/$language"
@@ -132,6 +133,7 @@
# Copy the custom css stylesheet to the destination directory
cp $stylesheet_css $destdir/html/
+ cp -r $images_css_dir $destdir/html/images
return 0
}
Index: build/stylesheets/install.css
===================================================================
--- build/stylesheets/install.css (révision 69688)
+++ build/stylesheets/install.css (copie de travail)
@@ -1,6 +1,189 @@
/* Cascading stylesheet for the Debian Installer Installation Guide */
-/* Use grey background for examples */
+/* global style of the page */
+body {
+ background-color: #EEEEEE;
+ border: 40px solid #EEEEEE;
+ margin: 0;
+ padding: 0 10px;
+ font-family: "liberation sans", "Myriad ", "Bitstream Vera Sans", "Lucida
Grande", "Luxi Sans", "Trebuchet MS", helvetica, verdana, arial, sans-serif;
+ line-height: 1.2em;
+}
+
+@media (max-width: 5in), (max-device-width: 5in){
+ body {
+ border: 0px;
+ padding: 0px;
+ }
+}
+
+body > div.book, body > div.article, body > div.set, body > div.preface, body
> div.chapter, body > div.section, body > div.appendix, body > div.part,
div.sect1 {
+ margin-top: 0;
+ padding: 2em 6em 6em;
+}
+body > div.book, body > div.article, body > div.set, body > div.preface, body
> div.chapter, body > div.section, body > div.appendix, body > div.part,
div.sect1 {
+ padding: 2em;
+}
+
+body > div.book, body > div.article, body > div.set, body > div.preface, body
> div.chapter, body > div.section, body > div.appendix, body > div.part, body >
div.index, div.sect1 {
+ background-color: #FFFFFF;
+ margin: 40px auto 4em;
+ padding: 1px 40px 20px 30px;
+}
+
+@media (max-width: 1024px) {
+ body > div.book, body > div.article, body > div.set, body > div.preface,
body > div.chapter, body > div.section, body > div.appendix, body > div.part,
body > div.index, div.sect1 {
+ max-width: 45em;
+ }
+}
+@media (min-width: 1025px) {
+ body > div.book, body > div.article, body > div.set, body > div.preface,
body > div.chapter, body > div.section, body > div.appendix, body > div.part,
body > div.index, div.sect1 {
+ max-width: 70em;
+ }
+}
+@media (max-width: 5in), (max-device-width: 5in){
+ body > div.book, body > div.article, body > div.set, body > div.preface,
body > div.chapter, body > div.section, body > div.appendix, body > div.part,
body > div.index, div.sect1 {
+ max-width: 100%;
+ }
+}
+
+hr {
+ border-top: 1px dotted #808080;
+ margin: 0;
+}
+
+a:link {
+ color: #0035C7;
+ text-decoration: none;
+}
+a:visited {
+ color: #00207A;
+ text-decoration: none;
+}
+a:link:hover {
+ color: #00207A;
+ text-decoration: underline;
+}
+
+code {
+ font-family: "liberation mono","bitstream vera mono","dejavu
mono",monospace;
+ font-weight: bold;
+ word-wrap: break-word;
+}
+
+h1 {
+ color: #C70036;
+ line-height: 1.1em;
+}
+
+h2, h3, h4, h5, h6 {
+ color: #C70036;
+}
+
+@media (max-width: 5in), (max-device-width: 5in){
+ dl, dt, dd {
+ margin-left: 0.25em;
+ }
+
+ ul {
+ padding-left: 1.5em;
+ }
+}
+
+
+/* for first page */
+.book > .titlepage h1.title {
+ text-align: center;
+}
+.titlepage h1.title {
+ text-align: left;
+}
+
+.authorgroup div {
+ text-align: center;
+}
+
+
+/* for table of contents */
+@media (max-width: 5in), (max-device-width: 5in){
+ .toc dl, .toc dt, .toc dd {
+ margin-top: 0.5em;
+ margin-bottom: 0.5em;
+ }
+}
+
+
+/* table in content */
+
+.informaltable table, .table-contents table {
+ border: 1px solid #AAAAAA;
+}
+
+.informaltable table th, .table-contents table th {
+ border-width: 0;
+ background-color: #C70036;
+}
+/*
+.informaltable table td, .table-contents table {
+ border-width: 0;
+}
+
+.informaltable tbody tr:nth-child(even), .table-contents table
tr:nth-child(even){
+background-color:#DDDDDD;
+}
+
+.informaltable tbody tr:hover, .table-contents table tr:hover {
+ background-color:#666666;
+ color: #FFFFFF;
+}
+*/
+
+
+/* Terminal examples */
pre.screen {
- background-color : #E0E0E0;
+ -moz-tab-size: 4;
+ background-color: #F5F5F5;
+ border-radius: 11px 11px 11px 11px;
+ border-style: none;
+ box-shadow: 0 2px 5px #AAAAAA inset;
+ color: #000000;
+ display: block;
+ font-family: "liberation mono","bitstream vera mono","dejavu
mono",monospace;
+ font-size: 0.9em;
+ margin-bottom: 1em;
+ padding: 0.5em 1em;
+ page-break-inside: avoid;
+ white-space: pre-wrap;
+ word-wrap: break-word;
}
+
+
+/* Navigation elements */
+.navheader a, .navfooter a {
+ opacity: 0.50;
+ transition: opacity 0.15s ease-in-out;
+}
+.navheader a:hover, .navfooter a:hover {
+ opacity: 1;
+}
+
+@media (max-width: 5in), (max-device-width: 5in){
+ .navfooter > table {
+ font-size: 0;
+ }
+}
+
+
+/* Infos blocks */
+.important, .caution, .note {
+ margin-left: 2em;
+ margin-right: 2em;
+}
+
+@media (max-width: 5in), (max-device-width: 5in){
+ .important, .caution, .note {
+ margin-left: 0.5em;
+ margin-right: 0.5em;
+ }
+}
+
Index: build/stylesheets/style-html.xsl
===================================================================
--- build/stylesheets/style-html.xsl (révision 69688)
+++ build/stylesheets/style-html.xsl (copie de travail)
@@ -28,10 +28,15 @@
<!-- We want some code aesthetic in resulting html -->
<xsl:param name="chunker.output.indent" select="'yes'"/>
-<!-- Do we want fancy icons around note, warning, etc.? -->
-<xsl:param name="admon.graphics">0</xsl:param>
+<!-- We want fancy icons around note, warning, etc. -->
+<xsl:param name="admon.graphics">1</xsl:param>
-<!-- Do we want fancy icons instead of Next, Prev, Up, Home? -->
-<xsl:param name="navig.graphics">0</xsl:param>
+<!-- We want fancy icons instead of Next, Prev, Up, Home -->
+<xsl:param name="navig.graphics">1</xsl:param>
+<xsl:param name="navig.graphics.extension">.png</xsl:param>
+<!-- We don't want default inline css -->
+<xsl:param name="css.decoration">0</xsl:param>
+<xsl:param name="admon.style" />
+
</xsl:stylesheet>
images.tar.lzma
Description: application/lzma
