Bug#772963: release-notes: cellphone friendly CSS
On 2015-01-27 08:46, Niels Thykier wrote:
> On 2015-01-24 18:27, Stéphane Blondon wrote:
>>[...]
>>>>> * The "Caution" remarks (plus "note" etc.) has a so much margin that
>>>>> only 16-20 characters are shown per line[2]. In desktop mode it
>>>>> only takes 1-2 lines.
>>
>> It's not really easy to fix because there is css style directly in the page:
>> <div class="caution" style="margin-left: 0.5in; margin-right: 0.5in;">
>>
>> Like the footer, this margin create the same problem on little screen
>> for the current documentation (Debian 7.0).
>> The clean way to do it is to remove the style attribute and to it in
>> the css file. Do you think it's easy to do?
>>
>> [...]
>>
>
> Turns out it is fair simple to do, but it kills *all* inline styles[1].
> Simply apply attached patch and rebuild. All inline styles should now
> be gone (for better and for worse). We might need to extract the
> existing styles to keep the current look and feel.
>
> [...]
>
> ~Niels
>
> [1] Well, except the "body" used for displaying the draft image - but we
> have an existing work-around for that.
>
>
Attached patch replaces my previous one and also extracts the inline
styles (I noticed) into the debian.css. I have tried to record them as
faithfully as I could.
I also attached the current debian.css file in full, in case it is
easier for you to work with that.
Thanks,
~Niels
From ba4d3e2eee49b89ab0329d8ca6d00ef870f0ee66 Mon Sep 17 00:00:00 2001
From: Niels Thykier <niels@thykier.net>
Date: Tue, 27 Jan 2015 17:46:35 +0100
Subject: [PATCH 8/8] Extract inline css styles into debian.css
Signed-off-by: Niels Thykier <niels@thykier.net>
---
debian.css | 20 ++++++++++++++++++++
html.xsl | 2 ++
2 files changed, 22 insertions(+)
diff --git a/debian.css b/debian.css
index 5397613..0d40995 100644
--- a/debian.css
+++ b/debian.css
@@ -171,3 +171,23 @@ pre.screen {
.navfooter > table {
background-image: url('images/draft.png');
}
+
+
+/* Extracted from docbook.xml default output */
+
+h2.title {
+ clear: both;
+}
+
+div.important, div.caution, div.note {
+ margin-left: 0.5in;
+ margin-right: 0.5in;
+}
+
+div.footnotes hr {
+ width: 100;
+}
+
+ul.itemizedlist {
+ list-style-type: disc;
+}
diff --git a/html.xsl b/html.xsl
index 0b58419..161a1ef 100644
--- a/html.xsl
+++ b/html.xsl
@@ -12,6 +12,8 @@
<xsl:param name="section.autolabel">1</xsl:param>
<xsl:param name="section.label.includes.component.label">1</xsl:param>
<xsl:param name="use.id.as.filename">1</xsl:param>
+ <xsl:param name="css.decoration">0</xsl:param>
+ <xsl:param name="admon.style" />
<!--
Add a viewport and overwrite a few of the pre-defined styles
--
2.1.4
/* Cascading stylesheet for the Debian Installer Installation Guide */
/* 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 {
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 {
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 {
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 {
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 {
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 {
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;
}
/* table in content */
.informaltable table {
border: 1px solid #AAAAAA;
}
.informaltable table th {
border-width: 0;
background-color: #C70036;
}
.informaltable table td {
border-width: 0;
}
.informaltable tbody tr:nth-child(even) {
background-color:#DDDDDD;
}
.informaltable tbody tr:hover {
background-color:#666666;
color: #FFFFFF;
}
/* Terminal examples */
pre.screen {
-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;
}
.navheader, .navfooter {
background-image: url('images/draft.png');
background-repeat: no-repeat;
background-position: top left;
}
.navheader > table {
background-image: url('images/draft.png');
}
.navfooter > table {
background-image: url('images/draft.png');
}
/* Extracted from docbook.xml default output */
h2.title {
clear: both;
}
div.important, div.caution, div.note {
margin-left: 0.5in;
margin-right: 0.5in;
}
div.footnotes hr {
width: 100;
}
ul.itemizedlist {
list-style-type: disc;
}
Reply to: