/* FlipFlop (2003/12/02)
an extremely annoying stylesheet featuring a lot of dynamical stuff
This sheet was designed using Mozilla Firebird 0.7 and I have no
idea whether it'll work with other browsers than the Gecko ones.
(Netscape 4.x almost certainly won't, IE prior to version 6 may not
do the more sophisticated CSS2 things.)
Your mileage may vary.
This software is provided "AS IS," without a warranty of any kind.
ALL EXPRESS OR IMPLIED CONDITIONS, REPRESENTATIONS AND WARRANTIES,
INCLUDING ANY IMPLIED WARRANTY OF MERCHANTABILITY, FITNESS FOR A
PARTICULAR PURPOSE OR NON-INFRINGEMENT, ARE HEREBY EXCLUDED.
You acknowledge that Software is not designed, licensed or intended
for use in the design, construction, operation or maintenance of
any nuclear facility.
TODO:
- check how it performs with variuos browsers and, if needed,
adjust to their needs.
- possily add some icons (e.g. for the storytitle bar)
- change the colors
CHANGELOG:
2003/10/18
initial version
2003/12/02
- incorporated the storybody class
- changed the quotation style from "everything-except-something"
to "exactly-some-things"
- fixed minor layout bugs (at least in Gecko)
- added a nice disclaimer ;-)
2003/12/04
- added 'blockquote' to the quotation style ;-)
*/
/* Part I
set some basic properties such as main font family (monospace) and
the look of links
Note that no absolute font sizes are specified to allow the user's
settings. I also use the unit 'em' which is relative to the current
font size quite often, so that the layout works at both
ridiculously large and tiny character sizes.
I wonder if the pagetitle should have 'position: fixed' ;-)
*/
body { font-family: Courier, monospace; margin: 0px}
a { text-decoration: none; color: #000000; }
:link,
:visited { font-family: Courier, monospace; font-weight: bold;
letter-spacing: 0.1em; }
p.pagetitle {
font-size: 200%; font-weight: bold;
text-align: right;
position: absolute; top: 25px; right: 0px;
background-color: white;
border: medium solid #336699; border-right: none;
}
/* FIXME: I use some padding here to prevent the mainblog from
collapsing with the blog */
div.blog { margin: 0px; padding: 1px; }
/* Part II
place the menu bar on the left - almost outside the viewport - and
have it hover in
The menubar is placed using a negative margin. I don't know if this
is a GoodThing(TM) regarding different browsers. I quote the CSS2
specs (http://www.w3.org/TR/REC-CSS2):
Negative values for margin properties are allowed, but there
may be implementation-specific limits.
Anyway, again using 'em' gives nice behavior with various font
sizes.
Unfortunately the document structure inside the bar (lacking a
decent hierarchy and/or class attributes) makes it very difficult
to assign different layout for the parts of the bar.
*/
div.menubar {
margin-left: -10em; width: 11em; float:left;
padding-top: 140px;
font-family: Arial, Helvetica, sans-serif;
text-align: center; color: #336699;
background-color: #ffffff;
background-image: url("LastManSitting.jpg");
background-repeat: no-repeat;
background-position: right top;
border-right: solid;
border-bottom: solid;
}
div.menubar:hover { margin-left: 0em; }
div.menubar ul {
margin: 0px; padding: 0px;
font-family: Courier, monospace;
text-align: left; color: #336699;
border-top: solid;
}
div.menubar ul>li {
display: block;
margin: 0em 0.5em 0em 1em;
padding: 0.5em 0em 0em 0.5em;
color: #000000; background-color: #cef5ff;
border-bottom: thin dashed;
border-left: thin solid;
}
/* Part III
the blog itself
Now here comes the fancy stuff: both the storybody and the
storylink children of the story root are hidden using 'display:
none' to make sure they don't affect the layout at all. Once the
user hovers above the story box (which he only can by hovering
above the storytitle) both children are displayed as block
formatting elements. Note that there must not be any other children
to the story root.
I also want any quotation in the blog appear in PostIt(TM)-like
yellow with red border. I used to do this by assigning this style
to all children, afterwards removing it from certain children
again. This has now been changed. The quotation style is explicitly
assigned to and
children. It is not assigned to lists,
since this seems to break the display of the list markers (bullets
resp. numbers). Maybe other tags need to be added in the
future. However I introduced a class "quote" to apply this style to
(almost) anything.
I originally wanted to use the 'display:marker' property for the
generated content and also consecutive numbering of the stories
with CSS counters, but Gecko somehow refused.
PS: -tags SHOULD - in XHTML MUST - be closed properly.
*/
div.mainblog {
margin: 15px 5px 5px 5px;
padding: 2em 15px;
background-color: #cccccc;
border-top: thin solid black;
}
.dateheader {
display: block;
padding: 1em 0em 0em 1em;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #336699;
border-bottom: solid;
}
.story {
margin-left: 50px;
background-color: #ffffff;
border-left: thin solid;
}
.story > .storybody {
margin: 1em 1em;
text-align: justify;
}
.storybody pre,
.storybody dl,
.storybody blockquote,
.storybody .quote {
margin: 1em 2em;
padding: 1em 1em;
background-color: #f3f495;
border-left: solid #ff0000;
overflow: hidden;
}
div.story .storybody,
div.story .storylink { display: none; }
div.story:hover .storybody,
div.story:hover .storylink { display: block; }
div.story > p.storytitle
{
margin: 0px; padding-top: 0.5em;
background-color: #cef5ff;
border-bottom: thin dashed;
}
p.storytitle:before {
content: "Subject: ";
font-weight: bold;
border-bottom: solid;
}
div.story > p.storylink
{
margin: 0px;
text-align: left;
background-color: #cef5ff;
border-top: thin dotted;
border-bottom: thin solid;
}
p.storylink:before { content: "see also: "; }