Journal Journal: slashdot-shinyfix.css v.002 (8 Jun 2006) 2
/*****************************************************************************
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-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.
*****************************************************************************/
body { font: 12px lucida sans, tahoma, sans-serif !important; }
div.body,
div.commentBody { font: 12px lucida sans, tahoma, sans-serif !important; }
li.comment { width: 42em !important; }
/****************************************************************************
*** VISUAL CUES TO AID SCANNING THROUGH NESTED COMMENTS AND REPLIES ***
****************************************************************************/
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;
}
li.comment > ul {
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 {
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; }
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 {
position: static !important;
display: inline-block !important;
line-height: inherit !important;
vertical-align: baseline !important;
margin: 0 !important;
padding:
}
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:
}
/* 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 ***
****************************************************************************/
div.commentBody blockquote * { font-style: inherit !important; }
div.commentBody blockquote i,
div.commentBody blockquote em { font-style: italic !important; }
h1, h2, h3, h4, h5, h6 { text-shadow: none !important; }
div.commentTop div.title span.score,
h1, h2, h3, h4, h5, h6 { text-shadow: rgba(0,0,0,0.5) 0 -1px 1px !important; }
div.content h2 { text-shadow: none !important; }
/* eof */
