Re: DDP styling maint-guide/debian-reference

[Stéphane Blondon <stephane.blondon@gmail.com>]

Hello,

you will find a new complete css file with the responsive display and
the changing arrows attached to this e-mail.


2014-11-04 21:42 GMT+01:00 Adrian Fita <adrian.fita@gmail.com>:
> Looking good, but I would lose the transition effect. It slows me down;
> it's kind of painful to wait for the arrow. Just stick with the
> plain-old HTML a:hover without effects please.

Note that you don't need to wait to click on link. The HTML is
unchanged too. It's only CSS.

I reduced the time of transition from 0.3 seconds to 0.15. So it's
faster (I hope it's ok for you) but the eye still catch the
transition. In my opinion, the rendering is better with the transition
than without it.

Osamu, if you're not convinced by the transition, feel free to remove
it or change duration (line 134):
    transition: opacity 0.15s ease-in-out;


Temporary demo updated:
http://stephane.yaal.fr/tmp/maint-guide-demo/first.en.html


-- 
Stéphane

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

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


/* Navigation elements */
.navheader a, .navfooter a {
    opacity: 0.50;
    transition: opacity 0.15s ease-in-out;
}
.navheader a:hover, .navfooter a:hover {
    opacity: 1;
}