move link style to its own class and apply it for Conitnue Reading button

[klt39429]

Resolve issue #13 to add "Continue Button"

[gfidente]

hi Khoi, thanks for helping.

So I think the idea is good but have a couple of comments:

• I think this is meant to close issue Add "Continue Reading" button #13 right? Can you mention that in the pull request as described here: https://github.com/blog/1506-closing-issues-via-pull-requests
• I would prefer to see this implemented without changing the existing styles for the other elements, making the button to inherit what it needs and add what is missing based on position, what do you think about? I haven't tried myself though so I don't know how much hacking that would need.

[klt39429]

Hi Giulio, I would love to help and learn.

Are you referring to mixins? So we will have a class that defines the button style and the a tag from aside can include it? Then the a tag inside article can just use that class as is (no need to change base.html). For example:

  .button_link {
    padding: 5px 15px 5px 15px;
    border: 3px solid @light-grey;
    .border-radius(15px);
    color: @red;
    text-decoration: none !important;
    font-size: 16px;
  }


aside {
  div#user_meta {
    ul {
      li {
        a {
          .button_link
        }
      }

It would be neat to have a central place to update the style for those a tags as we can include other stuff in the future like hover color, font, style, etc.

[gfidente]

I am referring to mixins yes but you can't put that in the user_meta or it would only work for links in the left side of the page.

Instead you should customize the appearance of the 'a' items with 'button_link' applied into div#article_text

[klt39429]

I am putting it directly inside article_text div on index.html:

<a class="button_link" href="{{ SITEURL }}/{{ article.url }}">Continue reading →</a>

Any buttons in the future can just use the class button_link and not have to worry about where they are semantically.

[gfidente]

can you replace the arrow with the html code → ?

[gfidente]

closing for now because this didn't get updates in a while