Tweak print stylesheet

7 years ago · 0bd8289891
parent b681c80ed0
commit 0bd8289891
6 changed files with 37 additions and 68 deletions
--- a/assets/stylesheets/application-dark.css.scss
+++ b/assets/stylesheets/application-dark.css.scss
@ -12,6 +12,7 @@
 */

@import 'global/variables-dark',
+        'global/mixins',
        'global/icons',
        'global/classes',
        'global/base';
--- a/assets/stylesheets/application.css.scss
+++ b/assets/stylesheets/application.css.scss
@ -12,6 +12,7 @@
 */

@import 'global/variables',
+        'global/mixins',
        'global/icons',
        'global/classes',
        'global/base';
@ -98,7 +99,3 @@
        'pages/webpack',
        'pages/yard',
        'pages/yii';
-
-html { // specificity hack
-  @import 'global/print';
-}
--- a/assets/stylesheets/global/_base.scss
+++ b/assets/stylesheets/global/_base.scss
@ -4,6 +4,9 @@ html {
  background: $documentBackground;

  @media #{$mediumScreen} { font-size: 93.75%; }
+
+  @include print { background: none; }
+  @import 'global/print';
 }

 body {
--- a/assets/stylesheets/global/_classes.scss
+++ b/assets/stylesheets/global/_classes.scss
@ -2,19 +2,6 @@
 // Utilities
 //

-/* Usage:
- *
- * @include print {
- *   // print styles here
- * }
- *
- */
-@mixin print {
-  @media print {
-    @content;
-  }
-}
-
 %border-box {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
--- a/assets/stylesheets/global/_mixins.scss
+++ b/assets/stylesheets/global/_mixins.scss
@ -0,0 +1,9 @@
+//
+// Mixins
+//
+
+@mixin print {
+  @media print {
+    @content;
+  }
+}
--- a/assets/stylesheets/global/_print.scss
+++ b/assets/stylesheets/global/_print.scss
@ -1,79 +1,51 @@
-// Style overrides for printing
-
@include print {
-
-  ._header, ._sidebar, ._path, ._notif, ._toc, ._pre-clip, ._notice {
+  ._header, ._sidebar, ._path, ._notif, ._toc, ._pre-clip, ._notice, ._links {
    display: none !important;
  }

-  // make the docs fill the page and scroll the <body> instead of ._container
-  body {
-    height: initial;
-    &::after {
-      content: '';
-      clear: both;
-    }
-  }
-  ._app {
-    height: initial;
-  }
-  ._container {
+  body, ._app, ._container, ._content {
    margin: 0;
    padding: 0;
    height: initial;
+    background: none;

-    ._content {
-      margin: 0;
+    &:after {
+      content: '';
+      clear: both;
    }
  }

-  // Hide the scrollbars
  ::-webkit-scrollbar {
    display: none;
  }

-  // empty the boxes.
-  %box,
-  %heading-box {
-    background: transparent;
-  }
-  %heading-box {
-    border-radius: 0;
-    border: {
-      top: none;
-      left: none;
-      right: none;
-    }
+  %external-link:after {
+    display: none;
  }

+  ._attribution-p {
+    background: none;
+    border: 2px solid $boxBorder;
+  }

-  // Underline links, put the destination after the link text
-  %external-link {
-    text-decoration: underline;
-    &::after {
-      content: ' (' attr(href) ')';
-      background-image: none;
-      display: inline;
-      margin: 0;
-    }
+  ._attribution:last-child:after {
+    content: 'Exported from DevDocs — https://devdocs.io';
+    display: block;
+    margin-top: 1rem;
+    font-weight: $bolderFontWeight;
  }

-  // Link back to DevDocs
-  ._attribution-p {
-    background: transparent;
-    border: 2px solid $labelBackground;
+  ._attribution {
+    page-break-inside: avoid;
+  }

-    &:after {
-      content: 'Exported from DevDocs (https://devdocs.io)';
-      font-style: italic;
-    }
+  h1, h2, h3, h4, h5, h6 {
+    page-break-inside: avoid;
+    page-break-after: avoid;
  }

-  // Fix page breaks
  pre {
    page-break-before: avoid;
-  }
-  pre {
    orphans: 5;
    widows: 5;
  }