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; } .atn { color: #606; }
.atv { color: #080; } .atv { color: #080; }
.dec { color: #606; } .dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888; }
@media print { @media print {
.str { color: #060; } .str { color: #060; }

View File

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