Tweak example styling.

Author: skynavga

cssom-view/Overview.html

@@ -500,7 +500,7 @@ <h2 id="extensions-to-the-element-interface"><span class="secno">6 </span>Extens
 <dt class="method" id="widl-Element-getBoundingClientRect-ClientRect">
 <code>getBoundingClientRect</code> (), returns <span class="idlMethType"><a>ClientRect</a></span></dt>
 <dd>
-<p>The <code>getBoundingClientRect</code> operation, when invoked, must return the result of the  following algorithm:</p>    <ol>     <li><p>Let <var>list</var> be the result of invoking     <code title="dom-Element-getClientRects">getClientRects()</code> on the     same element this method was invoked on.</li>     <li><p>If the <var>list</var> is empty return a <code>ClientRect</code>     object whose <code title="dom-ClientRect-top">top</code>,     <code title="dom-ClientRect-right">right</code>,     <code title="dom-ClientRect-bottom">bottom</code> and     <code title="dom-ClientRect-left">left</code> members are zero.</li>     <li><p>Otherwise, return a <code>ClientRect</code> object describing the     smallest rectangle that includes the first rectangle in <var>list</var>     and all of the remaining rectangles of which the height or width is not     zero.</li>    </ol>    <div class="example">     <p>The following snippet gets the dimensions of the first     <code>div</code> element in a document:</p>     <pre class="example"><code>var example = document.getElementsByTagName("div")[0].getBoundingClientRect();
+<p>The <code>getBoundingClientRect</code> operation, when invoked, must return the result of the  following algorithm:</p>    <ol>     <li><p>Let <var>list</var> be the result of invoking     <code title="dom-Element-getClientRects">getClientRects()</code> on the     same element this method was invoked on.</li>     <li><p>If the <var>list</var> is empty return a <code>ClientRect</code>     object whose <code title="dom-ClientRect-top">top</code>,     <code title="dom-ClientRect-right">right</code>,     <code title="dom-ClientRect-bottom">bottom</code> and     <code title="dom-ClientRect-left">left</code> members are zero.</li>     <li><p>Otherwise, return a <code>ClientRect</code> object describing the     smallest rectangle that includes the first rectangle in <var>list</var>     and all of the remaining rectangles of which the height or width is not     zero.</li>    </ol>    <div class="example">     <p>The following snippet gets the dimensions of the first     <code>div</code> element in a document:</p>     <pre><code>var example = document.getElementsByTagName("div")[0].getBoundingClientRect();
 var exampleWidth = example.width;
 var exampleHeight = example.height;</code></pre>    </div></dd>
 <dt class="method" id="widl-Element-scrollIntoView-void-boolean-top">

cssom-view/idl/Element.idl

@@ -53,7 +53,7 @@ partial interface Element {
     <div class='example'>\
      <p>The following snippet gets the dimensions of the first\
      <code>div</code> element in a document:</p>\
-     <pre class='example'><code>var example = document.getElementsByTagName(&quot;div&quot;)[0].getBoundingClientRect();&#xA;\
+     <pre><code>var example = document.getElementsByTagName(&quot;div&quot;)[0].getBoundingClientRect();&#xA;\
 var exampleWidth = example.width;&#xA;\
 var exampleHeight = example.height;</code></pre>\
     </div>"

cssom/Overview.html

@@ -1228,7 +1228,7 @@ <h4 id="examples"><span class="secno">6.2.5 </span>Examples</h4>
   <div class="example">
    <p>Thus, in the following HTML snippet:</p>
 
-   <pre class="example">&lt;link rel="alternate stylesheet" title="foo" href="a"&gt;
+   <pre>&lt;link rel="alternate stylesheet" title="foo" href="a"&gt;
 &lt;link rel="alternate stylesheet" title="bar" href="b"&gt;
 &lt;script&gt;
   document.selectedStyleSheetSet = 'foo';
@@ -1248,7 +1248,7 @@ <h4 id="examples"><span class="secno">6.2.5 </span>Examples</h4>
 
    <p>Similarly, in the following HTML snippet:</p>
 
-   <pre class="example">&lt;link rel="alternate stylesheet" title="foo" href="a"&gt;
+   <pre>&lt;link rel="alternate stylesheet" title="foo" href="a"&gt;
 &lt;link rel="alternate stylesheet" title="bar" href="b"&gt;
 &lt;script&gt;
   var before = document.preferredStyleSheetSet;
@@ -1321,7 +1321,7 @@ <h4 id="the-linkstyle-interface"><span class="secno">6.3.1 </span>The <code>Link
    (Assuming the user agent supports CSS (<code>text/css</code>) and does
    not support ExampleSheets (<code>text/example-sheets</code>).</p>
 
-   <pre class="example">&lt;style type=text/css&gt; body { background:lime } &lt;/style&gt;
+   <pre>&lt;style type=text/css&gt; body { background:lime } &lt;/style&gt;
 &lt;style type=text/example-sheets&gt; $(body).background := lime &lt;/style&gt;</pre>
   </div>
 

cssom/cssom-source

@@ -1021,7 +1021,7 @@
   <div class="example">
    <p>Thus, in the following HTML snippet:</p>
 
-   <pre class="example">&lt;link rel="alternate stylesheet" title="foo" href="a"&gt;
+   <pre>&lt;link rel="alternate stylesheet" title="foo" href="a"&gt;
 &lt;link rel="alternate stylesheet" title="bar" href="b"&gt;
 &lt;script&gt;
   document.selectedStyleSheetSet = 'foo';
@@ -1041,7 +1041,7 @@
 
    <p>Similarly, in the following HTML snippet:</p>
 
-   <pre class="example">&lt;link rel="alternate stylesheet" title="foo" href="a"&gt;
+   <pre>&lt;link rel="alternate stylesheet" title="foo" href="a"&gt;
 &lt;link rel="alternate stylesheet" title="bar" href="b"&gt;
 &lt;script&gt;
   var before = document.preferredStyleSheetSet;
@@ -1104,7 +1104,7 @@
    (Assuming the user agent supports CSS (<code>text/css</code>) and does
    not support ExampleSheets (<code>text/example-sheets</code>).</p>
 
-   <pre class="example">&lt;style type=text/css> body { background:lime } &lt;/style>
+   <pre>&lt;style type=text/css> body { background:lime } &lt;/style>
 &lt;style type=text/example-sheets> $(body).background := lime &lt;/style></pre>
   </div>
 

cssom/cssom.css

@@ -52,14 +52,14 @@ code {
 
 
 /* --- EXAMPLES --- */
-pre.example {
+.example {
     border-top: 1px solid #ff4500;
     border-bottom: 1px solid #ff4500;
     padding:    1em;
-    margin-top: 1em;
+    margin: 2em 0;
 }
 
-pre.example::before {
+.example::before {
     content:    "Example";
     display:    block;
     width:      150px;