--sidebar-nav-strong-font-size is not styling navbar strong items. about docsify-themeable HOT 3 CLOSED

I believe this is because the selector is too reliant on the structure (something we should move away from in Docsify 5.0):

from docsify-themeable.

For 4.0, should that selector be modified to

 ul > li,
 ul > li > p { 
     > span, 
     > strong { 

?

I'm not sure about that span yet though.

In my plain CSS of my site, I added this:

.sidebar-nav ul > li > p > strong,
.sidebar nav ul > li > p > strong {
	display: block;
	margin: var(--sidebar-nav-strong-margin);
	padding: var(--sidebar-nav-strong-padding);
	border-width: var(--sidebar-nav-strong-border-width, 0);
	border-style: solid;
	border-color: var(--sidebar-nav-strong-border-color);
	color: var(--sidebar-nav-strong-color);
	font-size: var(--sidebar-nav-strong-font-size);
	font-weight: var(--sidebar-nav-strong-font-weight);
	text-transform: var(--sidebar-nav-strong-text-transform);
}

After placing that CSS I could then style my headers like in the design in the screenshot at #48 (comment).

from docsify-themeable.

Remove the empty lines between your list items. This causes docsify to generate extra, unnecessary markup for the sidebar navigation.

Instead of this:

-   **Foo**

    -   [Hello](/hello)

-   **Bar**

    -   [Goodbye](goodbye.md)

Do this:

- **Foo**
  - [Hello](/hello)
- **Bar**
  - [Goodbye](goodbye.md)

This will generate the following HTML which works as expected with docsify-themeable's CSS:

<div class="sidebar-nav">
  <ul>
    <li>
      <strong>Foo</strong>
      <ul>
        <li><a href="#/hello">Hello</a></li>
      </ul>
    </li>
    <li>
      <strong>Bar</strong>
      <ul>
        <li><a href="#/goodbye">Goodbye</a></li>
      </ul>
    </li>
  </ul>
</div>

The CSS selector used in docsify-themeable is based on the HTML structure because this is the only way to target sidebar elements given the HTML generated by docsify. Ideally, docsify would render sidebar markdown consistently by accounting for things like empty lines between list items. If/when this happens, a CSS selector based on the HTML structure will be a non-issue. Arguably, it makes for cleaner HTML and fewer classnames to manage in CSS, which (ideally) devs would never have to see anyway because they're using custom properties to change styles.

Hope this helps!

from docsify-themeable.