Skip to content
Permalink
Browse files

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
  • Loading branch information
talha131 committed Dec 2, 2019
1 parent 6e617e1 commit 87fd3d3f88cebac83ca04460ef41e7356df0ccd2
Showing with 121 additions and 27 deletions.
  1. +43 −0 documentation/content/Components/links.md
  2. +0 −25 static/css/elegant.css
  3. +3 −2 static/css/elegant.prod.css
  4. +75 −0 static/css/links.css
@@ -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
```
@@ -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;
}

0 comments on commit 87fd3d3

Please sign in to comment.
You can’t perform that action at this time.