Journal: slashdot-shinyfix.css v.001 (5 Jun 2006)

/****************************************************************************
slashdot-shinyfix.css v.001 (5 Jun 2006)

While Alex Bendiken's redesign of Slashdot is a very welcome change, not to
mention gorgeous, many Slashdotters have discovered deficiencies in the
resulting rendering. In particular, the usability of Slashdot's story
commenting has taken a beating. To ameliorate these "misfeatures", this CSS
file aims to do the following:

  1. Add visual cues to aid scanning through nested comments and replies.
  2. Move comment score back to the subject.
  3. Allow <i> and <em> within blockquotes.
  4. Adjust body text font and size.
  5. Set a fixed width for comments (e.g. 42 ems) to maintain readability
     with very wide browser windows. [DISABLED BY DEFAULT]

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

NOTE: Currently, fix #2 only works in Safari (and perhaps Opera?).
Gecko-based browsers do not support "display: inline-block," which is used to
reposition the post score. If someone knows how to hack together an
equivalent for Firefox, please contribute!

INSTALLATION (SAFARI): Set this as the style sheet for slashdot.org with a
PithHelmet* rule or similar, or in Preferences > Advanced.
               (* <http://www.culater.net/software/PithHelmet/PithHelmet.php>)

INSTALLATION (FIREFOX): As if you need instructions.

LICENSE: The contents of this file are hereby released into the public
domain. Take that, Stallmanists.
                                                                          ***/

/****************************************************************************
    1. VISUAL CUES TO AID SCANNING THROUGH REPLIES                        ***/

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

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

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

div.commentSub {
    border-bottom:  1px solid   #eee        !important;
    margin-bottom:  0                       !important;
}

/*** Indent replies with a thick gray line: ***/

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

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

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

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

/****************************************************************************
    2. MOVE COMMENT SCORE BACK TO SUBJECT                                 ***/

div.commentTop div.title h4 {
    position: static                !important;
    display: inline-block           !important; /* sorry, firefox weenies! */
    vertical-align: top             !important;
    padding: .4em .7em .55em .7em   !important;
}

div.commentTop div.title span.score {
    position: static                !important;
    display: inline-block           !important;
    vertical-align: top             !important;
    padding: .4em 0 .55em 0         !important;
    opacity: 0.6                    !important;
}

/****************************************************************************
    3, 4, 5. MISCELLANEOUS FIXES                                          ***/

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

/*** 4. Adjust fonts for (a) chrome, (b) article summaries and comments: ***/
body                            { font: 12px lucida sans    !important; }
div.body, div.commentBody       { font: 12px lucida sans    !important; }

/*** 5. Set a fixed width for comments: ***/
li.comment                      { /*width: 42em               !important;*/ }

/*** eof ***/