mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-09-15 06:03:33 -06:00
Minor style fixes for jekyll-asciidoc (#829)
I have a site whose content is written in AsciiDoc, using the [jekyll-asciidoc][] plugin. Just the Docs works great, but there are just two minor styling glitches I've noticed: The first is that Just the Docs' CSS doesn't understand the code block markup jekyll-asciidoc produces. It's not too different though, so it's very easily fixed. The second is that jekyll-asciidoc generates `div.sect(𝑛 − 1)` elements around headings of type `h𝑛`, that enclose all the heading and all the content after it until the next heading of greater or equal rank. This means that headings are _always_ first children in AsciiDoc output, which meant the wrong margins were applied to most headings. To fix this, we need to only reduce the margin of first-child headings nested directly below the .main-content element, and headings nested directly below AsciiDoc `.sect𝑛` elements that are themselves first children. With these two small changes, my site looks perfect, and the styles look exactly the same as on Just the Docs' own documentation. [jekyll-asciidoc]: https://github.com/asciidoctor/jekyll-asciidoc
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
//
|
||||
// Styles for rendered markdown in the .main-content container
|
||||
//
|
||||
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
|
||||
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity, selector-max-id
|
||||
|
||||
.main-content {
|
||||
line-height: $content-line-height;
|
||||
@@ -204,19 +204,17 @@
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
h6,
|
||||
#toctitle {
|
||||
position: relative;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 0.25em;
|
||||
|
||||
&:first-child {
|
||||
margin-top: $sp-2;
|
||||
}
|
||||
|
||||
+ table,
|
||||
+ .table-wrapper,
|
||||
+ .code-example,
|
||||
+ .highlighter-rouge {
|
||||
+ .highlighter-rouge,
|
||||
+ .sectionbody .listingblock {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
@@ -224,4 +222,18 @@
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> h1:first-child,
|
||||
> h2:first-child,
|
||||
> h3:first-child,
|
||||
> h4:first-child,
|
||||
> h5:first-child,
|
||||
> h6:first-child,
|
||||
> .sect1:first-child > h2,
|
||||
> .sect2:first-child > h3,
|
||||
> .sect3:first-child > h4,
|
||||
> .sect4:first-child > h5,
|
||||
> .sect5:first-child > h6 {
|
||||
margin-top: $sp-2;
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user