Skip to content

Commit

Permalink
Reduce the bold formatting in dl lists used for figures/examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@AmeliaBR
AmeliaBR committed Oct 15, 2017
1 parent 7454c89 commit f253549
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 15 deletions.
30 changes: 15 additions & 15 deletions ch01-overview-files/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ <h2 id="examples">Figures and Examples<a href="#examples" class="hash-link" aria
<p>The file names link to the code view on GitHub. <em>Beware: the linked screenshots are hi-resolution; some have very large file sizes.</em></p>
<p><a href="https://github.com/oreillymedia/Using_SVG/tree/master/ch01-overview-files">View all files for this chapter on GitHub</a>.</p>
<dl class="columns directory">
<dt>Example 1-1 (Defining an inline SVG element in an HTML file)</dt>
<dt>Example 1-1 <i>Defining an inline SVG element in an HTML file</i></dt>
<dd>
<ul>
<li><a href="inline-svg-boilerplate.html">Live HTML file</a>,
Expand All @@ -60,8 +60,8 @@ <h2 id="examples">Figures and Examples<a href="#examples" class="hash-link" aria
<li>See also the <a>Online Extra</a> (not yet ready) describing the elements and attributes</li>
</ul>
</dd>
<dt>Figure 1-1 (Primary color stoplight graphic)</dt>
<dt>Example 1-3 (Drawing a primary color stoplight in a stand-alone SVG file)</dt>
<dt>Figure 1-1 <i>Primary color stoplight graphic</i></dt>
<dt>Example 1-3 <i>Drawing a primary color stoplight in a stand-alone SVG file</i></dt>
<dd>
<ul>
<li><a href="simple-stoplight.svg">Live SVG file</a>,
Expand All @@ -71,39 +71,39 @@ <h2 id="examples">Figures and Examples<a href="#examples" class="hash-link" aria
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch01-overview-files/simple-stoplight.png">simple-stoplight.png</a></li>
</ul>
</dd>
<dt>Example 1-2 (Drawing a primary color stoplight in inline SVG)</dt>
<dt>Example 1-2 <i>Drawing a primary color stoplight in inline SVG</i></dt>
<dd>
<ul>
<li><a href="simple-stoplight-inline.html">Live HTML file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch01-overview-files/simple-stoplight-inline.html">simple-stoplight-inline.html</a>
</li>
</ul>
</dd>
<dt>Figure 1-2 (SVG and HTML files open in multiple web browser tabs)</dt>
<dt>Figure 1-2 <i>SVG and HTML files open in multiple web browser tabs</i></dt>
<dd>
<ul>
<li><a href="browser-tab-titles.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch01-overview-files/browser-tab-titles.png">browser-tab-titles.png</a></li>
</ul>
</dd>
<dt>Example 1-4 (Grouping elements within an SVG stoplight)</dt>
<dt>Example 1-4 <i>Grouping elements within an SVG stoplight</i></dt>
<dd>
<ul>
<li><a href="grouped-stoplight.svg">SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch01-overview-files/grouped-stoplight.svg">grouped-stoplight.svg</a>
</li>
</ul>
</dd>
<dt>Example 1-5 (Using inline styles in the SVG stoplight)</dt>
<dt>Example 1-5 <i>Using inline styles in the SVG stoplight</i></dt>
<dd>
<ul>
<li><a href="styled-stoplight.svg">Live SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch01-overview-files/styled-stoplight.svg">styled-stoplight.svg</a>
</li>
</ul>
</dd>
<dt>Example 1-6 (Re-using elements to draw an SVG stoplight)</dt>
<dt>Figure 1-3 (Stoplight drawn with re-used elements)</dt>
<dt>Example 1-6 <i>Re-using elements to draw an SVG stoplight</i></dt>
<dt>Figure 1-3 <i>Stoplight drawn with re-used elements</i></dt>
<dd>
<ul>
<li><a href="reuse-stoplight.svg">Live SVG file</a>,
Expand All @@ -114,8 +114,8 @@ <h2 id="examples">Figures and Examples<a href="#examples" class="hash-link" aria
</li>
</ul>
</dd>
<dt>Example 1-7 (Using gradient fills to enhance a vector graphic stoplight)</dt>
<dt>Figure 1-4 (Stoplight with gradient fills)</dt>
<dt>Example 1-7 <i>Using gradient fills to enhance a vector graphic stoplight</i></dt>
<dt>Figure 1-4 <i>Stoplight with gradient fills</i></dt>
<dd>
<ul>
<li><a href="gradients-stoplight.svg">Live SVG file</a>,
Expand All @@ -126,8 +126,8 @@ <h2 id="examples">Figures and Examples<a href="#examples" class="hash-link" aria
</li>
</ul>
</dd>
<dt>Example 1-8 (Animating the stoplight using CSS keyframes)</dt>
<dt>Figure 1-5 (Three stages of an animated stoplight with gradient fills)</dt>
<dt>Example 1-8 <i>Animating the stoplight using CSS keyframes</i></dt>
<dt>Figure 1-5 <i>Three stages of an animated stoplight with gradient fills</i></dt>
<dd>
<ul>
<li><a href="animated-stoplight-css.svg">Live SVG file</a>,
Expand All @@ -138,8 +138,8 @@ <h2 id="examples">Figures and Examples<a href="#examples" class="hash-link" aria
</li>
</ul>
</dd>
<dt>Example 1-9 (Adding text labels to the animated stoplight)</dt>
<dt>Figure 1-6 (Three stages of a labelled, animated stoplight)</dt>
<dt>Example 1-9 <i>Adding text labels to the animated stoplight</i></dt>
<dt>Figure 1-6 <i>Three stages of a labelled, animated stoplight</i></dt>
<dd>
<ul>
<li><a href="labelled-stoplight-css.svg">Live SVG file</a>,
Expand Down
6 changes: 6 additions & 0 deletions styles/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,12 @@ html {
dt {
font-weight: bold;
background-color: rgba(50%, 75%, 100%, 0.3);
padding: 0.2em 0;
}
dt + dt { padding-top: 0; }
dt > i {
font-weight: normal;
font-style: normal;
}
dl dl dt {
background: linear-gradient(to right, rgba(50%, 75%, 100%, 0.3), transparent);
Expand Down

0 comments on commit f253549

Please sign in to comment.