@DaleDe --
I basically understand the CSS concepts (OK, sort of)
When I create a Sigil HTML TOC, the Sigil generated CSS:
Code:
div.sgc-toc-title {
font-size: 2em;
font-weight: bold;
margin-bottom: 1em;
text-align: center;
}
div.sgc-toc-level-1 {
margin-left: 0em;
}
div.sgc-toc-level-2 {
margin-left: 2em;
}
div.sgc-toc-level-3 {
margin-left: 2em;
}
div.sgc-toc-level-4 {
margin-left: 2em;
}
div.sgc-toc-level-5 {
margin-left: 2em;
}
div.sgc-toc-level-6 {
margin-left: 2em;
}
is pretty basic
The TOC HTML Sigil generates:
Code:
<body>
<div class="sgc-toc-title">
Table of Contents
</div>
<div class="sgc-toc-level-1">
<a href="../Text/Section0001.xhtml">1111111111111111</a>
<div class="sgc-toc-level-2">
<a href="../Text/Section0001.xhtml#sigil_toc_id_1">22222222222222222</a>
<div class="sgc-toc-level-3">
<a href="../Text/Section0001.xhtml#sigil_toc_id_2">3333333333333333333</a>
</div>
<div class="sgc-toc-level-3">
<a href="../Text/Section0001.xhtml#sigil_toc_id_3">3333333333333333</a>
</div>
<div class="sgc-toc-level-3">
<a href="../Text/Section0001.xhtml#sigil_toc_id_4">333333333333333333333</a>
</div>
</div>
<div class="sgc-toc-level-2">
<a href="../Text/Section0001.xhtml#sigil_toc_id_5">222222222222222</a>
has <div>s within <div>s within ..... etc.
Since Sigil will completely regenerate the TOC file, editing it seems like a waste of time, so I was trying to work with the sgc-toc.css file and save it in Preferences.
In level-1 I made font-size: 2em and I thought that if I left font-size: 1em in level-2, it would look nicer
Code:
div.sgc-toc-level-1 {
font-size: 2em;
margin-left: 0em;
}
div.sgc-toc-level-2 {
font-size: 1em;
margin-left: 2em;
}
What was happening was that it seemed like the level-2 font-size was not being honored, and what ever was in level-1 font size was used throughout.
I suspect that within a container, you can only adjust font relative to the container's font-size (?????). That seems kind of familiar, but I could be very wrong.
But theduck's percent seems to work nicely
Paul