Pretty links (#675)

* Remove special styles for '.link-pretty' class * Improve link underline thickness * Fix styles for existing links with '.link-pretty'
epfl-si · Oct 10, 2023 · 4e7eca4 · 4e7eca4
1 parent d6648c4
commit 4e7eca4
Show file tree

Hide file tree

Showing 19 changed files with 98 additions and 57 deletions.
diff --git a/assets/components/atoms/definition-list/definition-list-grid.twig b/assets/components/atoms/definition-list/definition-list-grid.twig
@@ -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>
diff --git a/assets/components/atoms/link/link-bg-variants.twig b/assets/components/atoms/link/link-bg-variants.twig
@@ -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>
diff --git a/assets/components/atoms/link/link.scss b/assets/components/atoms/link/link.scss
@@ -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{
+  color: #fff;
+
+  &:focus,
+  &:hover,
+  &:active {
+    text-decoration-color: #fff;
+  }
+}
 
 // Link collapse, see collapse component
 

diff --git a/assets/components/atoms/link/link.twig b/assets/components/atoms/link/link.twig
@@ -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>
diff --git a/assets/components/atoms/link/link.yml b/assets/components/atoms/link/link.yml
@@ -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: |

diff --git a/assets/components/content-types/event/event.scss b/assets/components/content-types/event/event.scss
@@ -11,7 +11,6 @@
     color 0.2s ease-in-out;
 
   @include hover-focus-active {
-    background: transparent !important;
     text-decoration-color: $link-color !important;
   }
 

diff --git a/assets/components/content-types/news/news-latest-two.twig b/assets/components/content-types/news/news-latest-two.twig
@@ -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>
diff --git a/assets/components/content-types/press-review/press-review.twig b/assets/components/content-types/press-review/press-review.twig
@@ -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>

diff --git a/assets/components/content-types/project/project.twig b/assets/components/content-types/project/project.twig
@@ -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>
diff --git a/assets/components/content-types/publication/publication.twig b/assets/components/content-types/publication/publication.twig
@@ -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>
diff --git a/assets/components/molecules/card/card.scss b/assets/components/molecules/card/card.scss
@@ -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 {
@@ -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;

diff --git a/assets/components/molecules/list-group/list-group.scss b/assets/components/molecules/list-group/list-group.scss
@@ -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;
   }
 

diff --git a/assets/components/organisms/contact/contact-compact-for-columns.twig b/assets/components/organisms/contact/contact-compact-for-columns.twig
@@ -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>

diff --git a/assets/components/organisms/contact/contact-compact.twig b/assets/components/organisms/contact/contact-compact.twig
@@ -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>
diff --git a/assets/components/organisms/contact/contact.twig b/assets/components/organisms/contact/contact.twig
@@ -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>
 

diff --git a/assets/components/organisms/headlines/headlines.twig b/assets/components/organisms/headlines/headlines.twig
@@ -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>

diff --git a/assets/components/pages/event-detail/event-detail.twig b/assets/components/pages/event-detail/event-detail.twig
@@ -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>
 

diff --git a/assets/components/pages/news-detail/news-detail.twig b/assets/components/pages/news-detail/news-detail.twig
@@ -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>
 

diff --git a/docs/design/typography.html b/docs/design/typography.html
@@ -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>