Forgot your password?
typodupeerror
Slashdot.org

Journal: slashdot-shinyfix.css v.002 (8 Jun 2006) 2

Journal by Slashdot Shinyfix
/*****************************************************************************
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 */
Slashdot.org

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

Journal by Slashdot Shinyfix
/****************************************************************************
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 ***/

Try `stty 0' -- it works much better.

Working...