Re: Communication and Design at Guix

[swedebugia]

Ludovic Courtès <address@hidden> writes:

> Hi!
>
> Ricardo Wurmus <address@hidden> skribis:
>> It’s fine to deviate from the consistent style.  We do that already for
>> the style sheet that’s used for our HTML documentation.  Compare this:
>>
>>     https://www.gnu.org/software/sharutils/manual/html_node/index.html
>>
>> with this:
>>
>>     https://www.gnu.org/software/guix/manual/en/html_node/index.html
>>
>> It’s fine to change our style sheet, but let’s stay with Texinfo.
>
> Note that our manual uses https://gnu.org/software/gnulib/manual.css,
> which is the standard CSS produced by Gnulib’s gendocs.sh, and this CSS
> is used by many (most?) manuals at gnu.org, not just Guix.
>
> My suggestion was to improve this CSS, if L p R n d n is willing to make
> the extra social effort to get changes accepted.  If that doesn’t work,
> we can depart from that.

Thanks for the clarification :)

I looked into the chicken docs and their html and css. They generate
their examples from source-code with this MIT chicken egg-script: 
http://code.call-cc.org/svn/chicken-eggs/release/4/colorize/trunk/colorize.scm.

To use their approach with parens highlighting we would need to either
depend on chicken and this egg or port it to guile.

I ran it just for fun and got an error as expected. :p

It generates nice html like this:
<pre><tt class="highlight scheme-language"><span class="comment">;; irregex, 
the regular expression library, is one of the
</span><span class="comment">;; libraries included with CHICKEN.
</span><span class="paren1">(<span class="default">import <span 
class="paren2">(<span class="default">chicken irregex</span>)</span>
        <span class="paren2">(<span class="default">chicken 
io</span>)</span></span>)</span>


The CSS magic is this (public domain):
#content .highlight .paren1,#content .highlight .paren2,#content .highlight 
.paren3,#content .highlight .paren4,#content .highlight .paren5,#content 
.highlight .paren6 {
    background-color:inherit;
}

#content .highlight .paren1:hover,#content .highlight .paren2:hover,#content 
.highlight .paren3:hover,#content .highlight .paren4:hover,#content .highlight 
.paren5:hover,#content .highlight .paren6:hover {
    color:#FFF;
    font-weight:700;
}

#content .highlight .paren1:hover {
    background-color:#DB7859;
}

#content .highlight .paren2:hover {
    background-color:#1B804C;
}

#content .highlight .paren3:hover {
    background-color:#9F214E;
}

#content .highlight .paren4:hover {
    background-color:#DBA059;
}

#content .highlight .paren5:hover {
    background-color:#B64926;
}

#content .highlight .paren6:hover {
    background-color:#64A422;
}

#content .highlight .comment {
    color:#8C8281;
    font-style:italic;
}