feat(links): add new style and improve existing style for hyperlinks

BREAKING CHANGE: Style of muted links have been changed slightly. It is
still muted but has modern animation.

fix: #533
fix: #519

documentation/content/Components/links.md

@@ -0,0 +1,43 @@
+Title: Hyperlinks Styles
+Tags: style
+Category: Components
+Date: 2019-12-02 15:09
+Slug: hyperlinks-styles
+Authors: Talha Mansoor
+Subtitle:
+Summary:
+Keywords:
+
+Elegant has three styles for hyperlinks that you can use.
+
+## Muted Style
+
+This is the default style of link.
+
+[Example Link - Use Firefox Browser](https://www.mozilla.org/en-US/firefox/new/) to support open web standards.
+
+This style is very suitable for long-form articles. To read the rationale behind this choice, read our help article [Why Does Elegant Look The Way It Does?]({filename}../Contributing/why-look-and-feel.md).
+
+## Amplified Style
+
+We understand not all links should be muted. Some links require attention.
+
+[Example Link - Use Firefox Browser](https://www.mozilla.org/en-US/firefox/new/){: class="ampl"} to support open web standards.
+
+To use this style, you need to enable [Markdown attribute list extension](https://python-markdown.github.io/extensions/attr_list/){:class="ampl"}.
+
+```
+# Plugins and extensions
+MARKDOWN = {
+    "extension_configs": {
+        "markdown.extensions.extra": {},
+        "markdown.extensions.meta": {},
+    }
+}
+```
+
+Then use this style using `ampl` class.
+
+```text
+[Example Link](https://www.mozilla.org/){: class="ampl"} blah blah
+```

static/css/elegant.css

@@ -160,23 +160,6 @@ table.highlighttable tbody > tr:nth-child(odd) > td {
     "Lucida Grande", "Lucida Sans", Arial, Sans-Serif;
 }
 /* Article */
-article p:not(#list-of-translations):not(#post-share-links) a,
-article ol a,
-blockquote a,
-article
-  div.article-content
-  ul:not(.articles-timeline):not(.related-posts-list)
-  a {
-  border-bottom: thin dashed #a9a9a9;
-  color: #000;
-}
-article p a:hover,
-article ol a:hover,
-article div.article-content ul:not(.articles-timeline) a:hover {
-  border-bottom: none;
-  text-decoration: none;
-  text-shadow: none;
-}
 .article-content,
 div.recent-posts p {
   font: 1.2em/1.6em "PT Serif", Georgia, "Times New Roman", Times, Serif;
@@ -359,14 +342,6 @@ div.recent-posts-posted {
   color: #8f8f8f;
   font: 0.9em "PT Sans", "Helvetica Neue", Arial, Sans-Serif;
 }
-div.recent-posts-posted a {
-  color: inherit;
-  padding-left: 0.3em;
-}
-div.recent-posts-posted a:hover {
-  border-bottom: 1px dashed;
-  text-decoration: none;
-}
 div.recent-posts time {
   font-size: inherit;
 }