Bug#772963: release-notes: cellphone friendly CSS
Thank you Niels for your help! I cloned your git repository and
patched the debian.css file.
I attach here the new file and a diff. If it's nicer for you, I could
create a temporary repository on GitHub. I've got a account on alioth
(sblondon-guest) too.
The temporary demo:
http://stephane.yaal.fr/tmp/release-notes.amd64.html/index.en.html
Details about the patch below:
2015-01-27 8:46 GMT+01:00 Niels Thykier <niels@thykier.net>:
> On 2015-01-24 18:27, Stéphane Blondon wrote:
>> 2015-01-21 17:48 GMT+01:00 Niels Thykier <niels@thykier.net>:
>> There
>> are unbreakable spaces in the name ('Chapter 1. xxx'), that's why the
>> footer expands. It's the same problem in the current version of the
>> footer and is not due to the new css. For example, see with a little
>> screen :
>> https://www.debian.org/releases/stable/amd64/ch01s06.html
>>
>> I don't think it's easy to fix without changing HTML. I will ask to a
>> web designer at work monday but I'm pessimistic.
>>
>
> Ok, let me know what he/she said.
We tried to use word-wrap but the attempt fails. According to him,
with CSS only, we could decrease the font size or hide the text.
I tried the decrease the font size but it's not always enough.
So in the patch, the chapter names are hidden on small screen, only
the arrows are displayed. This solution fixes the problem on small
screen.
On larger screen, both chapter names and arrows are displayed.
The home image is below the arrows. In my opinion, it would be better
to display it at the same height than the arrows. I don't know if it's
hard to do.
>>>>> * 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;"
>> [...]
> Turns out it is fair simple to do, but it kills *all* inline styles[1].
I keep some of the added css in the patch and the caution, important
and notes block got a lower margin on small screen.
Ordered lists have the same behaviour (like unordered list).
What do you think about these changes?
For next improvement, we could replace the caution and note images
with more modern ones (from the publican project or tango desktop
project for example).
--
Stéphane
diff --git a/debian.css b/debian.css
index 0d40995..593c4e5 100644
--- a/debian.css
+++ b/debian.css
@@ -85,7 +85,7 @@ h2, h3, h4, h5, h6 {
margin-left: 0.25em;
}
- ul {
+ ul, ol {
padding-left: 1.5em;
}
}
@@ -172,22 +172,22 @@ pre.screen {
background-image: url('images/draft.png');
}
-
-/* Extracted from docbook.xml default output */
-
-h2.title {
- clear: both;
+@media (max-width: 5in), (max-device-width: 5in){
+ .navfooter > table {
+ font-size: 0;
+ }
}
-div.important, div.caution, div.note {
- margin-left: 0.5in;
- margin-right: 0.5in;
-}
-div.footnotes hr {
- width: 100;
+/* Infos blocks */
+.important, .caution, .note {
+ margin-left: 2em;
+ margin-right: 2em;
}
-ul.itemizedlist {
- list-style-type: disc;
+@media (max-width: 5in), (max-device-width: 5in){
+ .important, .caution, .note {
+ margin-left: 0.5em;
+ margin-right: 0.5em;
+ }
}
/* 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, ol {
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');
}
@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;
}
}
Reply to: