Quellcode durchsuchen

Tweak print stylesheet

Thibaut Courouble vor 8 Jahren
Ursprung
Commit
0bd8289891

+ 1 - 0
assets/stylesheets/application-dark.css.scss

@@ -12,6 +12,7 @@
  */
 
 @import 'global/variables-dark',
+        'global/mixins',
         'global/icons',
         'global/classes',
         'global/base';

+ 1 - 4
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';
-}

+ 3 - 0
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 {

+ 0 - 13
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;

+ 9 - 0
assets/stylesheets/global/_mixins.scss

@@ -0,0 +1,9 @@
+//
+// Mixins
+//
+
+@mixin print {
+  @media print {
+    @content;
+  }
+}

+ 23 - 51
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;
   }