diff --git a/assets/stylesheets/application-dark.css.scss b/assets/stylesheets/application-dark.css.scss index d480f720..c88ada20 100644 --- 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'; diff --git a/assets/stylesheets/application.css.scss b/assets/stylesheets/application.css.scss index d2370e7f..f8b8a3c0 100644 --- 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'; -} diff --git a/assets/stylesheets/global/_base.scss b/assets/stylesheets/global/_base.scss index 659b8615..33c77a5e 100644 --- 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 { diff --git a/assets/stylesheets/global/_classes.scss b/assets/stylesheets/global/_classes.scss index c08c7f4c..f96f617b 100644 --- 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; diff --git a/assets/stylesheets/global/_mixins.scss b/assets/stylesheets/global/_mixins.scss new file mode 100644 index 00000000..604b9ac7 --- /dev/null +++ b/assets/stylesheets/global/_mixins.scss @@ -0,0 +1,9 @@ +// +// Mixins +// + +@mixin print { + @media print { + @content; + } +} diff --git a/assets/stylesheets/global/_print.scss b/assets/stylesheets/global/_print.scss index 69059fcf..30fa64c1 100644 --- 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 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; }