Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bold text in headline #78

Closed
holtzermann17 opened this issue Jan 19, 2021 · 3 comments
Closed

bold text in headline #78

holtzermann17 opened this issue Jan 19, 2021 · 3 comments

Comments

@holtzermann17
Copy link
Contributor

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
Copy link
Contributor

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 aa5f757 (from PR #26) added this styling, presumably to help with vertical alignment of tags in headlines.

holtzermann17 pushed a commit to exp2exp/exp2exp.github.io that referenced this issue Feb 7, 2021
@holtzermann17
Copy link
Contributor Author

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
Copy link
Owner

teesloane commented Feb 7, 2021

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.

teesloane added a commit that referenced this issue Apr 13, 2021
This was causing issues with sub-children in headings being mashed
together. See #78.
teesloane added a commit that referenced this issue Apr 30, 2021
This was causing issues with sub-children in headings being mashed
together. See #78.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants