Tweak a bit the default stylesheet:

* Remove background color from <screen> elements.  It makes them stand
  out too much.  Some pages have many <screen> elements, listing shell
  commands and their output.  Having a dark background seems a bit too
  distracting.

* Keep the background color for <programlisting> elements, but make it
  a bit lighter and add a thin border that is slightly darker than the
  highlighting background.

* Change the width of <example>, <note>, <warning> and other block
  elements to use a percentage of the page width instead of a
  hardcoded pixel-based length.

* Add Wikipedia-inspired coloured backgrounds and thin borders around
  <example>, <note>, <warning> and tip elements.

Reviewed by:	blackend, gavin, rene
No objections:	freebsd-doc
This commit is contained in:
Giorgos Keramidas 2008-11-21 07:28:34 +00:00
parent 926728d434
commit 8256de476c
Notes: svn2git 2020-12-08 03:00:23 +00:00
svn path=/head/; revision=33269

View file

@ -149,61 +149,55 @@ BODY P B.APPLICATION {
text-decoration: underline;
}
.PROGRAMLISTING, .SCREEN {
background-color: #DEE3E7;
padding: 4px;
.SCREEN {
padding: 1ex;
}
.PROGRAMLISTING {
padding: 1ex;
background-color: #eee;
border: 1px solid #ccc;
}
@media screen { /* hide from IE3 */
a[href]:hover { background: #ffa }
}
BLOCKQUOTE.NOTE{
color: #173B7F;
background: #d5e3ff;
border: 2px solid #7387b0;
padding-top: 1px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 2px;
width: 800px;
BLOCKQUOTE.NOTE {
color: #222;
background: #eee;
border: 1px solid #ccc;
padding: 0.4em 0.4em;
width: 85%;
}
BLOCKQUOTE.TIP{
BLOCKQUOTE.TIP {
color: #004F00;
background: #c8dcc6;
border: 2px solid green;
padding: 3px;
width: 800px;
align: middle;
background: #d8ecd6;
border: 1px solid green;
padding: 0.2em 2em;
width: 85%;
}
BLOCKQUOTE.IMPORTANT{
color:red;
font-family: arial;
BLOCKQUOTE.IMPORTANT {
font-style:italic;
font-weight:bold;
line-height: 21px;
border: 1px solid #a00;
border-left: 12px solid #c00;
padding: 0.1em 1em;
}
BLOCKQUOTE.WARNING{
BLOCKQUOTE.WARNING {
color: #9F1313;
background: #f8e4e4;
border: 2px solid #e59595;
padding-top: 1px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 2px;
width: 800px;
background: #f8e8e8;
border: 1px solid #e59595;
padding: 0.2em 2em;
width: 85%;
}
.EXAMPLE{
.EXAMPLE {
background: #fefde6;
border: 2px solid #f1bb16;
padding-top: 1px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 2px;
width: 800px;
border: 1px solid #f1bb16;
margin: 1em 0;
padding: 0.2em 2em;
width: 90%;
}