Skip to content
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/
  2. +0 −25 static/css/elegant.css
  3. +3 −2 static/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

Elegant has three styles for hyperlinks that you can use.

## Muted Style

This is the default style of link.

[Example Link - Use Firefox Browser]( 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/

## Amplified Style

We understand not all links should be muted. Some links require attention.

[Example Link - Use Firefox Browser]({: class="ampl"} to support open web standards.

To use this style, you need to enable [Markdown attribute list extension]({:class="ampl"}.

# Plugins and extensions
"extension_configs": {
"markdown.extensions.extra": {},
"markdown.extensions.meta": {},

Then use this style using `ampl` class.

[Example Link]({: 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,
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;
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.