Stealth stylesheet for Sage
Stealth
For those times when browsing discretion is the better part of valor. The design is *cough* low key and the image hiding prevents embarassing moments
Two column format.
Individual posts have a fixed height until hovered.
On hovering, they will expand to show the entire available text (some feeds only show a post summary).
Images remain completely hidden while a post is collapsed.
When a post is expanded images are shown but with low opacity.
Hover over an image to show it fully.
Active images (where they act as a link) show with a red border.
Normal images (not clickable) show with a blue border.
Hint:
You can make a post active (and thus remain open even when not hovering) by
Clicking and dragging either the title link, or a contained image or link.
- Click on the link or image and hold the mouse button down.
- Drag the mouse a short distance (you should see the "No" symbol)
- Release the mouse button
Feel free to remix, reuse, and recycle as you wish.
/*
Stealth
For those times when browsing discretion is the better part of valor.
The design is *cough* low key and the image hiding prevents embarassing moments
(even work-safe/appropriate sites might contain an image that could be deemed "inappropriate" by others).
Adapted from various sheets by Clive Rowe
www.cliverowe.com
Two column format.
Individual posts have a fixed height until hovered.
On hovering, they will expand to show the entire available text (some feeds only show a post summary).
Images remain completely hidden while a post is collapsed.
When a post is expanded images are shown but with low opacity.
Hover over an image to show it fully.
Active images (where they act as a link) show with a red border.
Normal images (not clickable) show with a blue border.
Hint:
You can make a post active (and thus remain open even when not hovering) by
Clicking and dragging either the title link, or a contained image or link.
- Click on the link or image and hold the mouse button down.
- Drag the mouse a short distance (you should see the "No" symbol)
- Release the mouse button
Feel free to remix, reuse, and recycle as you wish.
*/
html {
background-color: #fff;
}
body {
margin: 0 5%;
color: #333;
font-family: "Verdana", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
}
a:link { text-decoration: underline; color: #000; }
a:visited { text-decoration: underline; color: #666; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }
img {border: 2px solid #000; opacity:.05;}
img:hover {opacity: 1; border: 2px solid #00f;} /* Set the intensity of hovered images */
img:active {opacity: 1;border: 2px solid #666;} /* Set the intensity of active (clicked) images */
acronym {cursor: help}
p.item-desc a:link { color: #ccc; }
h1 {
color: #333;
}
#rss-header h1:before
{
content: "Newsfeed:";
color: #24446b;
margin-right: 5px;
border-color: #24446b;
border-top: 2px solid #24446b;
border-bottom: 2px solid #24446b;
}
#rss-header {
margin: 1%;
padding: 1%;
background-color: #eee;
color: #000;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
border-bottom: 1px solid #222;
border-right: 1px solid #222;
border-radius: 0.5em;
}
#rss-header a {
color: #000;
text-decoration: none;
}
#rss-title {
margin: 0;
margin-left: 10px;
}
#rss-desc {
color: #666;
font-weight: bold;
font-size: .8em;
margin: 0;
padding: 1%;
margin-left: 10px;
}
div.item {
margin: 1%;
padding: 1%;
background: #fff;
float:left;
width: 45%;
border: 1px solid #333;
margin: 0px 0px 8px 2%;
padding: 0px;
border-radius: 0.5em;
max-height: 20ex; /* height of each post's 'box'. Set to none to see everything (remember: not all feeds show the entire post) */
overflow:hidden; /*Set to Auto or Scroll if you would prefer scroll bars instead of changing box height */
clear:left;
}
/*Post 'box' will expand when hovered */
div.item:hover, div.item:active {
height: auto;
max-height: none;
}
/*Hides images in post summary until hovered */
div.item img {
display:none;
}
/* Shows previously hidden images when you hover over a post using the img{... settings above */
div.item:hover img, div.item:active img {
display:inherit;
}
div.item:nth-of-type(2n+1) {
clear:right;
}
h2.item-title {
font-size: .9em;
font-weight: normal;
margin: 0;
padding: 1%;
clear: both;
color: #444;
background: #e3e3e3;
border-bottom: 1px dotted #999;
border-radius: 0.5em 0.5em 0 0;
}
h2.item-title a {
text-decoration: none;
font-weight: bold;
color:#333;
}
h2.item-title a:visited {
color: #777;
}
h2.item-title a:link:hover, h2.item-title a:link:active {
text-decoration: underline;
}
h2.item-title a:visited:hover, h2.item-title a:visited:active {
text-decoration: underline;
}
span.item-ordinal {
font-family: "Times New Roman", serif;
font-size: 1.2em;
background: #24446b;
color: #fff;
font-weight: bold;
margin: 5px .5em 1em 0;
padding: 0 5px 0 5px;
border-radius: 0.5em;
}
div.item-desc {
font-size: .8em;
margin: 0;
padding: 1%;
}
div.item-desc a { text-decoration: underline; }
div.item-desc a:hover { text-decoration: none; }
div.item-pubDate {
font-size: x-small;
color: #999;
padding: 1%;
}
div.item-technorati {
float: right;
clear: both;
text-align: right;
padding-right: 5px;
}
div.item-desc img {
max-width: 97%;
height: auto;
margin: 0.2em .5em .2em .2em;
padding: 1px;
}
div.item-desc a img {
border: 2px solid #000;
}
div.item-desc a:hover img {
border: 2px solid #f00;
}
div.item-footer {
background: #eee;
border: 1px dotted #999;
margin: 10px;
padding: 10px;
clear: both;
}
div.item-category {
font-size: .65em;
font-family: ariel;
color: #666;
display: none;
}
div.item-author {
font-family: ariel;
color: #444;
}
div.item-pubDate {
color: #24446b;
}
blockquote {
background-color: #deeeff;
border-right: 2px solid #b8d8df;
border-bottom: 2px solid #b8d8df;
padding: 5px;
}
blockquote[cite]:after {
color: #008;
content: "Quote: " attr(cite);
display: block;
border-top: 1px solid #999;
margin: 0.5em 0 0 0;
padding: 0.5em 0 0;
font-size: .8em;
text-align: right;
}
blockquote P:first-letter, cite P:first-letter {
font-weight: bold;
}
blockquote blockquote {
background-color: #eeeeff;
border-right: 2px solid #8888aa;
border-bottom: 2px solid #888899;
padding: 5px;
}