Slashdot Shinyfix's Journal: slashdot-shinyfix.css v.002 (8 Jun 2006)

/*****************************************************************************
slashdot-shinyfix.css v.002 (8 Jun 2006)

While Alex Bendiken's redesign of Slashdot is a very welcome change, it is not
without its shortcomings. In particular, many Slashdotters have expressed
disappointment with comment display. In hopes of improving Slashdot's
usability, while keeping with the spirit of Bendiken's redesign, this CSS
file aims to do the following:

  1. Add visual cues to aid scanning through nested comments and replies.
  2. Restore comment score to its rightful place, immediately to the right of
     the comment subject (Safari only--see note below).
  3. Restore <i> and <em> within blockquotes.
  4. Allow easy adjustment of body text font and size.
  5. Allow setting a fixed width for comments, in order to maintain
     readability with very wide browser windows.
  6. Make headings stand out better in Safari by undoing Slashdot's
     inexplicable override of the text-shadow default. While we're at it, use
     text-shadow to make them look engraved into the background.

You can enable or disable these fixes, as desired, by commenting or
uncommenting the relevant CSS below.

NOTE: Currently, repositioning the comment score to the right of the subject
only works as intended in browsers which support "display: inline-block,"
which includes Safari (and Opera?) but excludes Firefox and Mozilla. If
someone knows how to hack together an equivalent for Gecko-based browsers,
please contribute!

KNOWN BUGS: Repositioning comment score only works as intended in Safari.
Also, comment display with hidden comments (beneath threshold) and/or
collapsed comments (subject line only) doesn't work very well, the reason
being that the author of this stylesheet doesn't browse comments this way,
and doesn't think you should either--but would welcome improvements to the
CSS in this regard.

INSTALLATION (SAFARI): Set this as the style sheet for slashdot.org with a
PithHelmet <http://tinyurl.com/q46fb> rule or similar, or in Preferences >
Advanced.

INSTALLATION (FIREFOX): As if you need instructions.

LICENSE: The contents of this file are released into the public domain.
*****************************************************************************/

    /*** Font for chrome (i.e. titles and userboxes): ***/
body            { font: 12px lucida sans, tahoma, sans-serif !important; }

    /*** Font for article summaries and comments: ***/
div.body,
div.commentBody { font: 12px lucida sans, tahoma, sans-serif !important; }

    /*** Fixed width for comments, if desired: ***/
li.comment      { width: 42em !important; }

/****************************************************************************
***    VISUAL CUES TO AID SCANNING THROUGH NESTED COMMENTS AND REPLIES   ***
****************************************************************************/

    /*** Encase comment in gray box: ***/

div.commentTop div.details { background-color: #e6e6e6 !important; }

div.commentBody {
    border-left:    1px solid #eee !important;
    border-right:   1px solid #eee !important;
}

div.commentSub {
    background-color:   #eee !important;
    border-bottom:      none !important;
    margin-bottom:      0 !important;
}

    /*** Indent comments with thick gray line: ***/

li.comment > ul { /* List of replies */
    border-left:    2em solid #eee !important;
    margin:         1px 0 0 0 !important;
    padding:        0 0 1em 1em !important;
    background:     none !important;
}

li.comment > ul > li.comment { /* Replies */
    margin:     0 !important;
    padding:    1em 0 0 0 !important;
}

li.comment > ul     /* Deeply nested posts get special treatment to */
> li.comment > ul   /* indicate they may be indented at the wrong level */
> li.comment > ul
> li.comment > ul
> li.comment > ul
> li.comment > ul { border-left: 2em dotted #ddd !important; }

    /*** Top-level comments: ***/
ul#commentlisting > li.comment { margin: 1em 0 0 0 !important; }

div.commentTop { margin-top: 0 !important; }

/****************************************************************************
***            MOVE COMMENT SCORE FLUSH RIGHT WITH SUBJECT               ***
****************************************************************************/

div.commentTop div.title {
    line-height:    100% !important;
    vertical-align: baseline !important;
    padding-right:  1em !important;
}

div.commentTop div.title h4 { /* Comment subject */
    position:       static !important;
    display:        inline-block !important;
    line-height:    inherit !important;
    vertical-align: baseline !important;
    margin:         0 !important;
    padding:        .25em 0 .35em 1em !important;
}

div.commentTop div.title span.score {
    font-size:  84% !important;

    position:       static !important;
    display:        inline-block !important;
    line-height:    inherit !important;
    vertical-align: baseline !important;
    margin:         0 !important;
    padding:        .25em 0 .35em 1em !important;
}

/* Align edges of comment with edges of title: */
div.commentTop div.details, div.commentBody, div.commentSub {
    padding-left:   1em !important;
    padding-right:  1em !important;
}

/****************************************************************************
***                            MISC. FIXES                               ***
****************************************************************************/

    /*** Restore italics and emphasis in blockquotes: ***/
div.commentBody blockquote *    { font-style: inherit !important; }
div.commentBody blockquote i,
div.commentBody blockquote em   { font-style: italic !important; }

    /*** Restore default text-shadow for headings: ***/
h1, h2, h3, h4, h5, h6 { text-shadow: none !important; }

    /*** Engrave headings (pretty!): ***/
div.commentTop div.title span.score,
h1, h2, h3, h4, h5, h6 { text-shadow: rgba(0,0,0,0.5) 0 -1px 1px !important; }

    /*** Remove shadow from section titles in sidebar: ***/
div.content h2         { text-shadow: none !important; }

/* eof */

Sad as it could be

[Grrr]

INSTALLATION (FIREFOX): As if you need instructions.

I wanted to appreciate the work you put into this stylesheet (and I'm the kind of guy who actually does donate, to say thanks)... but that one line couldn't be more arrogant. Small wonder that many nontechnical people are put off smugness like this, all too common among us OSS users.

<grrr />

Re:Sad as it could be

[Slashdot Shinyfix]

Hmm. Yes, you're absolutely right on all counts. I'll change the text in the next release.

Truth is, I don't use Firefox myself; I'm not exactly sure what the procedure is for changing user stylesheets. How does this sound?

INSTALLATION (FIREFOX): You'll want to bracket this whole CSS file inside
@-moz-document domain(slashdot.org) {
[... CSS GOES HERE ...]
}
before plopping it into your userContent.css. This rule will prevent the
code within the curly b