feat(BaseStyle): add print styles

Ashanti/optimize print styles (#236)

assets/main.scss

@@ -7,3 +7,5 @@
 
 // stylelint-disable-next-line scss/at-import-no-partial-leading-underscore, scss/at-import-partial-extension-blacklist
 @import '../Components/**/_style.scss';
+
+@import 'styles/print';

assets/styles/_print.scss

@@ -0,0 +1,82 @@
+@media print {
+  *,
+  *::before,
+  *::after {
+    background: transparent !important;
+    box-shadow: none !important;
+    color: #000 !important;
+    /* Black prints faster */
+    text-shadow: none !important;
+  }
+
+  .mainHeader,
+  .mainFooter,
+  .wpFooter {
+    display: none !important;
+  }
+
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+
+  [href]::after {
+    content: '('attr(href)')';
+    display: inline;
+  }
+
+  /* prevent link overflowing parent elements */
+  .button[href] {
+    max-width: 100%;
+  }
+
+  abbr[title]::after { /* stylelint-disable-line selector-no-qualifying-type */
+    content: '('attr(title)')';
+  }
+
+  /**
+  * Don't show links that are fragment identifiers,
+  * or use the `javascript:` pseudo protocol
+  */
+
+  [href^='#']::after,
+  [href^='javascript:']::after {
+    content: '';
+  }
+
+  pre {
+    white-space: pre-wrap !important;
+  }
+
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+
+  /**
+  * Printing Tables:
+  * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
+  */
+
+  thead {
+    display: table-header-group;
+  }
+
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+}

templates/basestyle.twig

@@ -166,7 +166,7 @@
         </p>
         <p>
           <span class="pill">Pill</span>
-          <a class="pill" href="">Pill Link</a>
+          <a class="pill" href="javascript:void(0)">Pill Link</a>
           <button class="pill">Pill Button</button>
         </p>
         <p>
@@ -245,7 +245,7 @@
           <p>Using the <code>.themeLight</code> class allows you to style a group of content with a light background and dark text.</p>
           <p>
             <span class="pill">Pill</span>
-            <a class="pill" href="">Pill Link</a>
+            <a class="pill" href="javascript:void(0)">Pill Link</a>
             <button class="pill">Pill Button</button>
           </p>
           <p>
@@ -263,7 +263,7 @@
           <p>Using the <code>.themeDark</code> class allows you to style a group of content with a dark background and light text.</p>
           <p>
             <span class="pill">Pill</span>
-            <a class="pill" href="">Pill Link</a>
+            <a class="pill" href="javascript:void(0)">Pill Link</a>
             <button class="pill">Pill Button</button>
           </p>
           <p>
@@ -281,7 +281,7 @@
           <p>Using the <code>.themeHero</code> class allows you to style a group of content with a hero background and dark text.</p>
           <p>
             <span class="pill">Pill</span>
-            <a class="pill" href="">Pill Link</a>
+            <a class="pill" href="javascript:void(0)">Pill Link</a>
             <button class="pill">Pill Button</button>
           </p>
           <p>
@@ -301,7 +301,7 @@
             <p>Using the <code>.themeReset</code> class allows you to revert the styles of a parent theme back to the inital styles.</p>
             <p>
               <span class="pill">Pill</span>
-              <a class="pill" href="">Pill Link</a>
+              <a class="pill" href="javascript:void(0)">Pill Link</a>
               <button class="pill">Pill Button</button>
             </p>
             <p>