Add "Open in Codepen" to link example

[spectranaut]

In order to add the "Open in Codepen" button to this example, I did the following:

1. I update the PNG to an SVG so the two image link examples use the same SVG image
2. For the example that uses "css :before", I encoded the SVG into a url in the CSS to handle the fact that relative paths in CSS do not work when the code is sent to codepen

Preview

[carmacleod]

Will you be adding the Open in CodePen button in a different PR?

[spectranaut]

Whoops! Added @carmacleod :)

[carmacleod]

Looks good!
Thanks @spectranaut !

[mcking65]

@spectranaut just one question.

Btw, thank you for all this awesome work on the images so they work in codepen.

[mcking65]

Why do we have to make a change for a specific example in the core.css?

[spectranaut]

All of the other examples follow the same layout -- there is a header which describes the example. If there is just on example, it says "Example". If there are multiple examples on the page, there is a header for each example (something like: "Example 1: Simple List of Links"). The open in codepen button is added automatically as a sibling element to this header.

In the case of the links, though, the three examples are in a table. So the styling has to be slightly different to look good.. I'm not sure another place to put it, I could put it in the link example pages css but that css is ONLY for the example itself not the surrounding page.

[mcking65]

@spectranaut wrote:

All of the other examples follow the same layout -- there is a header which describes the example. If there is just on example, it says "Example". If there are multiple examples on the page, there is a header for each example (something like: "Example 1: Simple List of Links"). The open in codepen button is added automatically as a sibling element to this header.

In the case of the links, though, the three examples are in a table. So the styling has to be slightly different to look good..

Oh, I didn't realize the styling was that different. Link was one of the very early examples. And, due to its simplicity, it has had almost no attention over the years.

I'm not sure another place to put it, I could put it in the link example pages css but that css is ONLY for the example itself not the surrounding page.

It makes sense to be in core. We might want to revisit the page design. That is likely to happen naturally as part of the redesign project, so I guess we don't need a separate issue for it.

[carmacleod]

@mcking65 @spectranaut
Another possibility is to put the whole table with all 3 link examples into a single codepen instead of having 3 separate codepens.