search

mmistakes / jekyll-theme-skinny-bones

A Jekyll starter with a variety of flexible layouts and components.
https://mmistakes.github.io/jekyll-theme-skinny-bones
MIT License
802 stars 907 forks source link

underline links even when they are within, say, em tags #23

Closed wpietri closed 9 years ago

wpietri commented 9 years ago

In an article, I have a paragraph that is in italics. It has a link in in the middle. The link should be underlined like links in other article paragraphs, but it isn't. This fixes the problem for me, but as I'm not a CSS expert, I won't swear that it's the right choice generally.

mmistakes commented 9 years ago

That's really strange. Can you point me to an example that the underlines aren't displaying for you?

I just tested it and I get the underlines to appear just fine on text links that are emphasized without having to edit the _layout.scss.

This is the Markdown I'm using [*text with emphasis*](http://whatever.co/) which outputs the following HTML <a href="http://whatever.co/"><em>text with emphasis</em></a>.

And here is what it looks like in practice:

em-underline-anchor

I also tried it in list items <li> along with text that was emphasized with either <em> and <i>.

wpietri commented 9 years ago

Sure thing. I was initially dealing with HTML that I was pasting in from my old site, so I had things like this:

<p>without emphasis <a href="foo">underlined</a></p>

<p><em> with emphasis  <a href="bar">not underlined</a></em></p>

However, you can trigger the issue with Markdown like this:

without emphasis [underlined](foo)

*with emphasis [not underlined](bar)*

I came across this because I had a whole paragraph that was in italics. It was a note I added on to the bottom of a post.

This test shows the problem for me both in the body of index.md and a new post created with octopress.

mmistakes commented 9 years ago

Ah I see it now. Your fix does the trick and doesn't seem to break anything.

Trying to remember why I did it the way that I did. Because I'm applying a 1px dotted border to the bottom of all .page-content links it also shows up in images wrapped in <a></a> for a split second before they load (which loads bad if when you notice it). I think I was trying to get around that with p > a, li > a { ... } but never finished fixing things.

Either way. Thanks for submitting the bug and PR.

wpietri commented 9 years ago

Gladly! I'm excited I could give a little something back. Thanks for making Skinny Bones; in redoing my personal website it is looking to be a major win.