Skip to content

CSS paragraph styling error #22

@FBemf

Description

@FBemf

There's an issue with how paragraph indents are styled on https://jwiegley.github.io/git-from-the-bottom-up/. There's no CSS in this repo, so I don't know if this is the right place to raise this issue, but there isn't a link anywhere to the repo for the hamilton.css stylesheet either.

The default stylesheet indents every paragraph and then removes the indent from the first paragraph child of the parent element, like so:

.main-content p {
    text-indent: 1.5em;
}

.main-content p:first-of-type {
    text-indent: 0;
}

The trouble with this is that paragraphs end up being indented after non-paragraph sibling elements, like <pre></pre>:

image

The fix is to set none of the paragraphs as being indented, and then indent all paragraphs that follow a previous sibling paragraph:

.main-content p {
    text-indent: 0;
}

.main-content p + p {
    text-indent: 1.5 em;
}

Which renders like this:

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions