Bug#765535: New Debian theme web page and cell phone

[Stéphane Blondon]

Hi,

2014-10-17 15:09 GMT+02:00 Osamu Aoki <os...@debian.org>:
> On Fri, Oct 17, 2014 at 12:00:01PM +0200, Stéphane Blondon wrote:
>> If I understand well, you would like the borders are removed on little
>> screen (like phone) so there would have more space for the text.
>> Is it right?
>
> Exactly.
> [...]
>> It's can be achieved by adding CSS. I can provide a patch to fix it.

I modified maint-guide.css as provided in the last version of the
reposity maint-guide.
It adds media queries to remove border for small screen (less than
5inches width).
(It simplifies an instruction too.)

An unified diff and the modified complete file are provided to this messsage.


Tested with Iceweasel 31.1.0 on Debian and with Firefox and Chrome on Android.

-- 
Stéphane

--- maint-guide.css.orig        2014-10-18 22:43:45.757090661 +0200
+++ maint-guide.css     2014-10-18 22:44:58.842212840 +0200
@@ -10,11 +10,15 @@
     line-height: 1.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 {
-    margin-top: 0;
-    padding: 2em 6em 6em;
+@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;
 }
 
@@ -34,6 +38,11 @@
         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;

/* 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;
}

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;
}

h2, h3, h4, h5, h6 {
    color: #C70036;
}


/* 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: #CC0000;
}

.informaltable table td { 
    border-width: 0;
}


/* 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;
}