teesloane / firn

Org Mode Static Site Generator
Eclipse Public License 1.0
324 stars 24 forks source link

bold text in headline #78

Closed holtzermann17 closed 3 years ago

holtzermann17 commented 3 years ago

This example:

**** Getting the shared *Zettlekasten* / OR working!

Exports to:

<div class="firn-headline-section firn-headline-section-4"><h4 class="firn-headline firn-headline-4" id="getting-the-shared--or-working!"><span class="firn-headline-text"><span>Getting the shared </span><strong><span>Zettlekasten</span></strong><span> / OR working!</span></span></h4><section><ul><li><p><span>(Zettlekasten isn’t yet a solved problem.)</span></p></li></ul></section></div>

With the result that the space between "shared" and "Zettlekasten" goes away.

jarhodes314 commented 3 years ago

This seems to be an issue with the CSS. On span.firn-headline-text, the default stylesheet has display: flex, which will effectively suppress the spaces by placing the children directly next to each other. Removing the display: flex style, e.g. by removing the following lines (352-357 on master) from firn_base.css fixes this behaviour.

.firn-headline-text {
    display: flex;
    flex: 1;
    align-items: center;
}

A quick peek at the git blame for that file suggests that https://github.com/theiceshelf/firn/commit/aa5f75742241a5af6e6a71463bf06e43eb2e210e (from PR #26) added this styling, presumably to help with vertical alignment of tags in headlines.

holtzermann17 commented 3 years ago

Thanks for the info. Removing that line from the CSS fixes the display on my site: https://exp2exp.github.io/erg-02-01-2021#Getting-the-shared-Zettlekasten-/-OR-working!

That said, I don't notice any detectable difference to vertical display of tags based on turning display: flex; on and off.

Screenshot from 2021-02-07 17-46-23 Screenshot from 2021-02-07 17-46-15

I do think it would look nicer if the tags were aligned with the top of the headline, but I don't know how to make that happen.

teesloane commented 3 years ago

Great ! I will close this in that case, perhaps once I fix the unnecessary display flex.

Regarding alignment:

image

Changing align-items might help. However, you may still have to putter with the margin/padding on the tag item to align as you like.