Comments (3)
I believe this is because the selector is too reliant on the structure (something we should move away from in Docsify 5.0):
docsify-themeable/src/scss/app/_sidebar.scss
Lines 158 to 169 in 6cada95
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.
Related Issues (20)
- cannot change '>' and 'v' color HOT 2
- The drop-down arrow does not appear when using "routerMode: 'history'" HOT 2
- Changing the padding (top/bottom) on "blockquote" HOT 2
- expand/collapse icons in the sidebar not working when external link present HOT 3
- Browser console reports an uncaught error HOT 2
- Sidebar not aligning to left of page HOT 1
- sidebar not aligned between file and folder classes HOT 2
- Inactive chevron in multilevel menu show up as active HOT 6
- Inactive chevron in multilevel menu show up as active HOT 3
- Page content is not using all available space on large screens HOT 1
- Unexpected style of title when I come to the third level of the sidebar HOT 1
- Can we make the sidebar arrow in theme-simple point right if it has multiple sidebar .md files HOT 1
- On a phone brower, when touching any sidebar contents, the sidebar will hide automatically. HOT 5
- Top level sidebar items should always be collapsible HOT 2
- Table in small screens will render with CSS attribute `content`
- Switch button for dark/light mode HOT 2
- In the cover page Custom background is invalid HOT 5
- Quotation Marks Inconsistent HOT 5
- Unexplained 'TypeError: Attempted to assign to readonly property.' console error message HOT 8
- Keyboard focus is not visible at Hamburger menu present at the UI.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from docsify-themeable.