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:
Alyssa Ross
2022-07-12 22:15:05 +00:00
committed by GitHub
parent 764dbb35a9
commit 3ca57e3b0d
4 changed files with 31 additions and 12 deletions

View File

@@ -1,7 +1,7 @@
//
// Base element style overrides
//
// stylelint-disable selector-no-type, selector-max-type
// stylelint-disable selector-no-type, selector-max-type, selector-max-specificity, selector-max-id
* {
box-sizing: border-box;
@@ -45,7 +45,8 @@ h2,
h3,
h4,
h5,
h6 {
h6,
#toctitle {
margin-top: 0;
margin-bottom: 1em;
font-weight: 500;