Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Pretty links #675

Merged
merged 6 commits into from
Oct 10, 2023
Merged

Pretty links #675

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
04cc63b
Remove special styles for '.link-pretty' class
alinekeller Jul 27, 2023
cdfc4f8
Improve link underline thickness
alinekeller Jul 27, 2023
bad2c97
Fix styles for existing links with '.link-pretty'
alinekeller Jul 27, 2023
d2e0d2e
Remove class 'link-pretty'
alinekeller Aug 10, 2023
d049a7f
Improve link styles for background variants
alinekeller Oct 5, 2023
a441160
Merge branch 'dev' into styleguide/pretty-links
williambelle Oct 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions assets/components/atoms/definition-list/definition-list-grid.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@
<dt>Fonction</dt>
<dd>Chercheur</dd>
<dt>Unité</dt>
<dd><a class="link-pretty" href="#">Laboratoire de métallurgie mécanique</a></dd>
<dd><a href="#">Laboratoire de métallurgie mécanique</a></dd>
<dt>Domaines de recherche</dt>
<dd>
<a href="#" class="tag tag-primary">Inorganic Chemistry</a>
<a href="#" class="tag tag-primary">Organic Chemistry</a>
<a href="#" class="tag tag-primary">Renewable Energy</a>
</dd>
<dt>Bureau</dt>
<dd><a class="link-pretty" href="#">BM 42</a></dd>
<dd><a href="#">BM 42</a></dd>
<dt class="definition-list-item-full">A propos</dt>
<dd class="definition-list-item-full">Research at the Laboratory of Mechanical Metallurgy addresses the science and engineering of advanced metallic materials. Our activities and interests span the entire spectrum from materials processing to the exploration of links between the microstructure and the properties of materials. Materials we study are made at least in part of metal and can be destined for structural or for functional applications.</dd>
</dl>
5 changes: 5 additions & 0 deletions assets/components/atoms/link/link-bg-variants.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<p><strong class="pr-3">Dark:</strong> <span class="p-3 d-inline-block bg-dark"><a href="#">Teaching & PhD</a></span></p>
<p><strong class="pr-3">Danger:</strong> <span class="p-3 d-inline-block bg-danger"><a href="#">Teaching & PhD</a></span></p>
<p><strong class="pr-3">Success:</strong> <span class="p-3 d-inline-block bg-success"><a href="#">Teaching & PhD</a></span></p>
<p><strong class="pr-3">Info:</strong> <span class="p-3 d-inline-block bg-info"><a href="#">Teaching & PhD</a></span></p>
<p><strong class="pr-3">Warning:</strong> <span class="p-3 d-inline-block bg-warning"><a href="#">Teaching & PhD</a></span></p>
61 changes: 58 additions & 3 deletions assets/components/atoms/link/link.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,22 +23,77 @@ a {
text-decoration-color: $body-color;
}
}

.text-white &,
&.text-white {
text-decoration-color: currentcolor;

@include hover-focus-active {
text-decoration-color: transparent;
}
}

// add styles for background color variants
@each $color, $value in $theme-colors {
.bg-#{$color} & {
color: color-yiq($value);
text-decoration-color: currentcolor;

@include hover-focus-active {
text-decoration-color: transparent;
}
}
}
}

a,
a:hover,
a:focus,
a:active {
text-decoration-thickness: 0.08em;
text-decoration-thickness: min(0.08em, 0.1rem);
text-underline-offset: 0.14em;
}

// Manage all the underline colors based on `text-` helper class.
@each $color, $value in $theme-colors {
@include text-emphasis-variant-decoration(".text-#{$color}", $value);
}

// Special case for white links.
@include text-emphasis-variant-decoration(".text-white", $white);

// The link pretty allows you to have more cross-browser friendly link styles and the fancy focus box.
// Removed in July 2023, text-decoration color is now well supported by all major broswers: https://caniuse.com/mdn-css_properties_text-decoration-color
/*
.link-pretty {
@include link-pretty($red, $body-bg);

@extend .focused;
}
*/

// Fix for existing links with class '.link-pretty'

.nav-link.link-pretty {
text-decoration: underline;
text-decoration-color: $link-hover-color;
text-decoration-thickness: 0.08em;
text-decoration-thickness: min(0.08em, 0.1rem);
text-underline-offset: 0.14em;

@include hover-focus-active {
text-decoration-color: $link-color;
}
}

.bg-dark .link-pretty,
.bg-gray-600 .link-pretty{
Comment on lines +87 to +88
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Après plusieurs tests, il me semble qu'il manque des classes pour les variantes de background.
Par exemple, une alerte avec bg-danger text-white et un lien.

elements/assets/config/mixins.scss

Lines 42 to 55 in 55285f2

@each $color, $value in $theme-colors {
.bg-#{$color} & {
color: color-yiq($value);
@include link-pretty-text-shadow($value);
@if ($hover) {
&:hover,
&.hover {
background-image: linear-gradient(gray('300') 0%, gray('300') 100%);
}
}
}
}
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pour les couleurs d'arrière-plan générées automatiquement, je propose de simplement reprendre la couleur du texte pour le soulignement (en rouge ça rend mal sur tous les fonds à part le noir). La fonction Bootstrap color-yiq permet d'adapter automatiquement la couleur du texte à celle du fond, pour avoir le meilleur contraste:

epfl-links-02

Idem pour les liens avec la classe .text-white:

epfl-links-01

@williambelle @xentenza est-ce que ça vous semble ok comme ça ?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selon tes captures, ça me semble très bien.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@xentenza Est-ce que ça te convient ? Je viens de me rendre compte que cette PR est toujours ouverte, j'aurais besoin de ta validation pour finaliser les changements :)

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alinekeller oups... c'est tout bon!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@xentenza @williambelle Je viens d'envoyer les corrections que j'avais proposées. Vous pouvez voir ce que ça donne (notamment les états :hover et :focus) sur la page atoms/link. La section principale ne contient plus que les trois exemples standard, sur fond gris clair et sur fond gris foncé. J'ai ajouté une section supplémentaires pour les variantes de background.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alinekeller Merci pour ta PR. Vus à la suite des liens standards, le soulignement qui disparaît dans les background dark et colorés fait bizarre, mais je ne vois pas comment tu pourrais faire autrement.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alinekeller Le bouton "Primary small" dans Atoms > Button est plus petit, ce qui introduit plusieurs modifications en cascade:

  • Atoms > Upload
  • Atoms > Collapse > Partial Collapse
  • Content Types > Basic Page
  • etc.

Si ce n'est pas voulu et tu arrives à mettre la taille d'origine, super. Sinon, on fait avec, ce n'est pas hyper dérangeant

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Il me semble que c'est à cause de la branche qui n'était pas à jour.

color: #fff;

&:focus,
&:hover,
&:active {
text-decoration-color: #fff;
}
}

// Link collapse, see collapse component

Expand Down
7 changes: 3 additions & 4 deletions assets/components/atoms/link/link.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
<p><strong class="pr-3">Vanilla link:</strong> <a href="http://bit.ly/2DLIPLo">Teaching & PhD</a></p>
<p><strong class="pr-3">Pretty link:</strong> <a class="link-pretty" href="http://bit.ly/2DLIPLo">Teaching & PhD</a></p>
<p class="mt-4"><strong class="pr-3">Dark link:</strong> <span class="p-3 bg-dark"><a class="text-white" href="http://bit.ly/2DLIPLo">Teaching & PhD</a></span></p>
<p class="mt-4"><strong class="pr-3">Dark pretty link:</strong><span class="p-3 bg-dark"><a class="link-pretty" href="http://bit.ly/2DLIPLo">Teaching & PhD</a></span></p>
<p><strong class="pr-3">Regular link:</strong> <a href="#">Teaching & PhD</a></p>
<p><strong class="pr-3">Light background:</strong> <span class="p-3 d-inline-block bg-gray-100"><a href="#">Teaching & PhD</a></span></p>
<p><strong class="pr-3">Dark background:</strong> <span class="p-3 d-inline-block bg-gray-600"><a class="text-white" href="#">Teaching & PhD</a></span></p>
5 changes: 3 additions & 2 deletions assets/components/atoms/link/link.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,12 @@ notes: >
browsers](https://caniuse.com/#feat=text-decoration). In other browsers, the underline
uses text color.

The `link-pretty` class creates a better and more cross-browser style.

The `link-collapse` class sets the link to have a red triangle and special
styles.
variants:
- name: bg-variants
title: Background variants
notes:
- name: icon
title: Icon
notes: |
Expand Down
1 change: 0 additions & 1 deletion assets/components/content-types/event/event.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
color 0.2s ease-in-out;

@include hover-focus-active {
background: transparent !important;
text-decoration-color: $link-color !important;
}

Expand Down
2 changes: 1 addition & 1 deletion assets/components/content-types/news/news-latest-two.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@
{% endfor %}
</div>
<p class="text-center">
<a class="link-pretty" href="#">See all news</a>
<a href="#">See all news</a>
</p>
4 changes: 2 additions & 2 deletions assets/components/content-types/press-review/press-review.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
<p>
Le prototype de joystick imaginé par la start-up de l'EPFL MotionPilot permet de piloter un drone d’une seule main, de manière intuitive, rapporte L'Agefi.
</p>
<a class="link-pretty" href="#">Détails du communiqué</a><br>
<a class="link-pretty" href="#">Communiqué réservé aux journalistes</a>
<a href="#">Détails du communiqué</a><br>
<a href="#">Communiqué réservé aux journalistes</a>
<small>{% include "@atoms/icon/icon.twig" with { icon: 'icon-lock' } %}</small>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion assets/components/content-types/project/project.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@
{% endfor %}
</div>
<p class="text-center">
<a class="link-pretty" href="#">See all projects</a>
<a href="#">See all projects</a>
</p>
2 changes: 1 addition & 1 deletion assets/components/content-types/publication/publication.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
</div>
{% if bottomlink %}
<p class="text-center">
<a class="link-pretty" href="#" target="_blank">See all publications</a>
<a href="#" target="_blank">See all publications</a>
</p>
{% endif %}
</div>
17 changes: 0 additions & 17 deletions assets/components/molecules/card/card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,10 +145,6 @@ a.card-gray:hover .card-body { background: $white; }
color: $red;
text-decoration: none;

@include hover {
@include link-pretty($red, $body-bg, $body-color);
}

&.btn {
&:hover,
&.hover {
Expand Down Expand Up @@ -202,19 +198,6 @@ a.card-img-top {
}
}

a.card-title,
.card-title a {
transition: color 0.3s;

@include link-pretty($red, $body-bg, $body-color);

background-position: 0 90%;

.card-gray & {
@include link-pretty($red, gray('100'), $body-color);
}
}

// Whole card as a link
a.card {
text-decoration: none;
Expand Down
1 change: 0 additions & 1 deletion assets/components/molecules/list-group/list-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
background: var(--card-bg);

.card-title a {
@include link-pretty($red, var(--card-bg), $body-color);
transition: color 0.3s, text-shadow 0.25s;
}

Expand Down
4 changes: 2 additions & 2 deletions assets/components/organisms/contact/contact-compact-for-columns.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@
<img class="img-fluid rounded-circle mb-2 person-card-avatar" src="./images/defaults/person-avatar-default-small.png" alt="{{ person.prenom }} {{ person.nom }}">
{% endif %}
</div>
<h3><a class="link-pretty" href="#">{{ person.prenom }} {{ person.nom }}</a></h3>
<h3><a href="#">{{ person.prenom }} {{ person.nom }}</a></h3>
<dl class="definition-list definition-list-grid my-0">
<dt>Fonction</dt>
<dd>{{ person.functions|join(', ') }}
</dd>
<dt>Bureau</dt>
<dd><a class="link-pretty" href="#">{{ person.rooms.0 }}</a></dd>
<dd><a href="#">{{ person.rooms.0 }}</a></dd>
</dl>
<div class="w-100 mt-2 mt-md-auto">
<a class="btn btn-block btn-primary mb-2" href="mailto:{{ person.email }}">{{ person.email }}</a>
Expand Down
4 changes: 2 additions & 2 deletions assets/components/organisms/contact/contact-compact.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@
<a class="btn btn-block btn-secondary" href="tel:+41791234567">+41 79 123 45 67</a>
</div>
</div>
<h3><a class="link-pretty" href="#">Shawna Reeves O'Neill Edwards</a></h3>
<h3><a href="#">Shawna Reeves O'Neill Edwards</a></h3>
<dl class="definition-list definition-list-grid mb-0">
<dt>Fonction</dt>
<dd>Journaliste, Secouriste</dd>
<dt>Bureau</dt>
<dd><a class="link-pretty" href="#">BM 4129</a></dd>
<dd><a href="#">BM 4129</a></dd>
</dl>
</div>
</div>
2 changes: 1 addition & 1 deletion assets/components/organisms/contact/contact.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div class="my-3">
<img class="img-fluid rounded-circle" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Heidy Traill">
</div>
<h3><a class="link-pretty" href="#">Heidy Traill</a></h3>
<h3><a href="#">Heidy Traill</a></h3>
{% include '@atoms/definition-list/definition-list-grid.twig' %}
<a class="btn btn-block btn-primary mb-2" href="mailto:[email protected]">[email protected]</a>

Expand Down
2 changes: 1 addition & 1 deletion assets/components/organisms/headlines/headlines.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
</div>
{% if bottomlink %}
<p class="text-center">
<a class="link-pretty" href="#">{{ homepage.section_one.readmore }}</a>
<a href="#">{{ homepage.section_one.readmore }}</a>
</p>
{% endif %}
</div>
Expand Down
2 changes: 1 addition & 1 deletion assets/components/pages/event-detail/event-detail.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
<div class="mt-5">
<h2 class="h5 text-uppercase">Liens</h2>
<ul class="list-bullet">
<li><a class="link-pretty" href="#">Site web de l'exposition</a></li>
<li><a href="#">Site web de l'exposition</a></li>
</ul>
</div>

Expand Down
10 changes: 5 additions & 5 deletions assets/components/pages/news-detail/news-detail.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,17 +87,17 @@
<div class="mb-5">
<h2 class="h6">Liens</h2>
<ul class="list-bullet">
<li><a class="link-pretty" href="#">2012 Results</a></li>
<li><a class="link-pretty" href="#">Press kit</a></li>
<li><a class="link-pretty" href="#">Youtube</a></li>
<li><a href="#">2012 Results</a></li>
<li><a href="#">Press kit</a></li>
<li><a href="#">Youtube</a></li>
</ul>
</div>

<div class="mb-5">
<h2 class="h6">En relation</h2>
<ul class="list-bullet mb-5">
<li><a class="link-pretty" href="#">Toutes les actualités Mediacom</a></li>
<li><a class="link-pretty" href="#">Toutes les actualités EPFL</a></li>
<li><a href="#">Toutes les actualités Mediacom</a></li>
<li><a href="#">Toutes les actualités EPFL</a></li>
</ul>
</div>

Expand Down
20 changes: 10 additions & 10 deletions docs/design/typography.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,41 +112,41 @@ <h2 class="sr-only" id="footnote-label">Footnotes</h2>
<div class="row">
<div class="col-sm-2 pb-1">
<small>Unvisited (:link)</small><br>
<a class="link-pretty" href="http://bit.ly/2DLIPLo">Teaching & PhD</a>
<a href="http://bit.ly/2DLIPLo">Teaching & PhD</a>
</div>
<div class="col-sm-2 pb-1">
<small>Visited (:visited)</small><br>
<a class="link-pretty" href="#" class="visited">Teaching & PhD</a>
<a href="#" class="visited">Teaching & PhD</a>
</div>
<div class="col-sm-2 pb-1">
<small>Hover (:hover)</small><br>
<a class="link-pretty" href="#" class="hover">Teaching & PhD</a>
<a href="#" class="hover">Teaching & PhD</a>
</div>
<div class="col-sm-2 pb-1">
<small>Focus (:focus)</small><br>
<a class="link-pretty" href="#" class="focus">Teaching & PhD</a>
<a href="#" class="focus">Teaching & PhD</a>
</div>
<div class="col-sm-4 pb-1">
<small>Active (always + focus) (:active, :focus)</small><br>
<a class="link-pretty" href="#" class="active focus">Teaching & PhD</a>
<a href="#" class="active focus">Teaching & PhD</a>
</div>
</div>

<div class="row bg-dark mt-3 mb-5">
<div class="col-sm-2 py-4">
<a class="text-white link-pretty" href="http://bit.ly/2DLIPLo">Teaching & PhD</a>
<a class="text-white" href="http://bit.ly/2DLIPLo">Teaching & PhD</a>
</div>
<div class="col-sm-2 py-4">
<a class="text-white link-pretty" href="#" class="visited">Teaching & PhD</a>
<a class="text-white" href="#" class="visited">Teaching & PhD</a>
</div>
<div class="col-sm-2 py-4">
<a class="text-white link-pretty" href="#" class="hover">Teaching & PhD</a>
<a class="text-white" href="#" class="hover">Teaching & PhD</a>
</div>
<div class="col-sm-2 py-4">
<a class="text-white link-pretty" href="#" class="focus">Teaching & PhD</a>
<a class="text-white" href="#" class="focus">Teaching & PhD</a>
</div>
<div class="col-sm-4 py-4">
<a class="text-white link-pretty" href="#" class="active focus">Teaching & PhD</a>
<a class="text-white" href="#" class="active focus">Teaching & PhD</a>
</div>
</div>
<hr>
Expand Down
Loading