dredmorbius@joindiaspora.com
Doc Morbius (moved to Glasswings)

Any Markdown / Pandoc mavens know how to tweak the HTML DOM generated for HTML pages?

I'm looking at one for an article which doesn't seem to generate or elements, though if it did either, would make some layout / CSS issues a lot easier to deal with.

Problem now is that when I set additional margins within <blockquote> segements, they don't really or consistently differ from the adjacent <p> elements. I have a sad.

The CSS I'm using, in part (and yes, I can share the full stylesheet, though this seems to be the operative code):

body {
  margin: 1rem auto;
  max-width: 90rem;
  padding: 0 4rem 0.5rem;
  width: auto;
  font-size: 1rem;
  line-height: 1.4;
}

blockquote {
    margin-left: 8em;
    margin-right: 6em;
}

article, p, ol, ul, li, div {
    width: auto;
    max-width: 45rem;
    margin: 0 auto;
    line-height: 1.4;
}

p {
    margin: 1em auto;
}

What happens is that the blockquote margins are acting against the full page width, and push the blockquote block back and forth across the full page, rather than constraining it within the region bounded by the <p> blocks. Given that the blockquotes aren't within the <p> blocks, that makes sense, but it's not the effect I want.

I'd also like to preserve the option to be able to set elements (images, sidenotes, callouts) within the left or right margins.

I'm thinking that changing the DOM to include an article element would make that easier, as I could set the width of the article or main elements.

Present DOM:

  • html
    • head
    • body
      • header
      • nav
      • p
      • blockquote
      • p
    • body /
  • html /

That would better be:

  • html
    • head
    • body
      • header
      • nav
      • article
      • p
      • blockquote
      • p
      • article /
    • body /
  • html /

("element /" is being used for closing tags)

Looking at HTML5 semantic elements:

  • <section>
  • <nav>
  • <article>
  • <aside>
  • <hgroup>
  • <header>
  • <footer>
  • <time>
  • <mark>

... "article" is what I'm looking for.o

Though ... Dive in to HTML5 doesn't use these: view-source:http://diveinto.html5doctor.com/past.html

But yeah: if I could shim an <article> tag in there, I think I'd be happier.

And yes, I can (and probably will) CodePen this in a bit.

#pandoc #markdown #html #css

2