Remove class 'link-pretty'

epfl-si · Aug 10, 2023 · d2e0d2e · d2e0d2e
1 parent bad2c97
commit d2e0d2e
Show file tree

Hide file tree

Showing 17 changed files with 34 additions and 40 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.scss b/assets/components/atoms/link/link.scss
@@ -54,13 +54,13 @@ a:active {
 
 // Fix for existing links with class '.link-pretty'
 
-.link-pretty.nav-link {
+.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;
   }
@@ -69,7 +69,7 @@ a:active {
 .bg-dark .link-pretty,
 .bg-gray-600 .link-pretty{
   color: #fff;
-  
+
   &:focus,
   &:hover,
   &:active {

diff --git a/assets/components/atoms/link/link.twig b/assets/components/atoms/link/link.twig
@@ -1,2 +1,2 @@
-<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><strong class="pr-3">Regular link:</strong> <a href="#">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="#">Teaching & PhD</a></span></p>
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 {

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>