fix: links in article content (#3171)

* fix: links in article content

Fixes underlines and colors of links in main page content.

Fix #2901

* update print style rules

* underline links in meta document footer

client/public/index.html

@@ -62,11 +62,11 @@
       ul.prev-next {
         display: none !important;
       }
-      .article,
-      .article pre {
+      .main-page-content,
+      .main-page-content pre {
         padding: 2px;
       }
-      .article pre {
+      .main-page-content pre {
         border-left-width: 2px;
       }
     </style>

client/src/document/index.scss

@@ -36,7 +36,7 @@
   }
 }
 
-.article {
+.main-page-content {
   padding: ($base-spacing / 2) $base-spacing $base-spacing;
 
   @media #{$mq-small-desktop-and-up} {
@@ -62,33 +62,39 @@
     @include readable-line-length();
   }
 
-  a {
-    &:active {
-      background-color: $primary-50;
-      color: $text-color-inverted;
-    }
-  }
-
   h2,
   h3 {
     code {
       background-color: transparent;
-      color: $neutral-100;
       text-decoration: none;
     }
   }
 
+  a {
+    text-decoration: underline;
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+    }
+
+    &:active {
+      background-color: $primary-50;
+      color: $text-color-inverted;
+
+      code {
+        background-color: transparent;
+      }
+    }
+  }
+
   h2 {
     margin-bottom: ($base-unit * 2);
 
     @media #{$mq-tablet-and-up} {
       margin-bottom: ($base-unit * 6);
     }
 
-    code {
-      color: $neutral-100;
-    }
-
     a:link,
     a:visited {
       color: $neutral-100;
@@ -101,10 +107,6 @@
   }
 
   h3 {
-    code {
-      color: $neutral-600;
-    }
-
     a:link,
     a:visited {
       color: $neutral-600;
@@ -116,6 +118,15 @@
     }
   }
 
+  h2,
+  h3,
+  h4 {
+    a:link,
+    a:visited {
+      text-decoration: none;
+    }
+  }
+
   table {
     margin-bottom: $base-spacing * 2;
   }

client/src/document/index.tsx

@@ -171,7 +171,7 @@ export function Document(props /* TODO: define a TS interface for this */) {
             />
           </React.Suspense>
         )}
-        <article className="article" lang={doc.locale}>
+        <article className="main-page-content" lang={doc.locale}>
           <h1>{doc.title}</h1>
           <RenderDocumentBody doc={doc} />
         </article>

client/src/document/organisms/metadata/index.scss

@@ -12,6 +12,11 @@
   margin: 0 auto;
   max-width: $max-width-default;
 
+  a:link,
+  a:visited {
+    text-decoration: underline;
+  }
+
   .on-github {
     margin-bottom: $base-spacing;
   }

client/src/site-search/index.scss

@@ -1,16 +1,5 @@
 .site-search {
   min-height: 500px;
-
-  // This is temporary
-  // Once https://github.com/mdn/yari/issues/2901 lands we can delete this
-  a {
-    text-decoration: underline;
-
-    &:hover,
-    &:focus {
-      text-decoration: none;
-    }
-  }
 }
 
 .query-string {

client/src/site-search/index.tsx

@@ -48,7 +48,7 @@ export function SiteSearch() {
   }, [query, page, ga]);
 
   return (
-    <div className="site-search">
+    <div className="site-search main-page-content">
       <PageContentContainer>
         {query ? (
           <h1>

client/src/site-search/search-results.scss

@@ -50,8 +50,10 @@
     padding: 0;
 
     a {
-      color: $neutral-100;
-      text-decoration: none;
+      &:link,
+      &:visited {
+        color: $neutral-100;
+      }
     }
   }
 

client/src/site-search/search-results.tsx

@@ -258,7 +258,7 @@ function ExplainBadRequestError({ errors }: { errors: FormErrors }) {
 function ExplainServerOperationalError({ statusCode }: { statusCode: number }) {
   return (
     <div className="notecard warning">
-      <p>The search failed because the server failed to response.</p>
+      <p>The search failed because the server failed to respond.</p>
       <p>
         If you're curious, it was a <b>{statusCode}</b> error.
       </p>