Improve rendering of <example> and div.example HTML

This change unifiess the rendering for <example> and <div class=example>.
The former is rendered as HTML <pre>, the latter is taken over. This
patch does the following:

 * Merge <pre> CSS from prettify.js int xmpp.css
 * Give <pre> a blue-ish background derived from the caption color
 * Make the <pre> border use the caption color
 * Change div.example background color from neon yellow to a colder and lighter tone that matches the overall color theme
 * Add a border to div.example that fits its background color
 * Derive width for div.example from <pre>

P.S: Don't eat yellow snow!
This commit is contained in:
Georg Lukas 2016-07-21 14:32:14 +02:00
parent 25ae4ca40a
commit ae42b7761c
2 changed files with 7 additions and 4 deletions

View File

@ -11,7 +11,6 @@
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888; }
@media print {
.str { color: #060; }

View File

@ -55,6 +55,9 @@ H1, H2, H3, H4, H5, H6 {
}
pre {
font-family: Courier, monospace;
background-color: #e0e9f2;
padding: 0.4em;
border: 1px solid #369;
}
ul {
list-style: disc outside;
@ -91,9 +94,10 @@ ul {
font-style: italic;
}
.example {
background-color: yellow;
margin-left: 5%;
margin-right: 25%;
background-color: #f2ee6e;
margin: 0.4em 5%;
border: 1px solid #999633;
padding: 0 0.4em;
}
.indent {
padding-left: 5%;