basic media print rules

gulpfile.js

@@ -28,9 +28,11 @@ gulp.task('liverel', function () {
 // });
 
 gulp.task('watch', function () {
-    livereload.listen()
+
     gulp.watch('./sass/**/*.scss', gulp.series('sass'))
     gulp.watch(['./**', '!./node_modules/**'], gulp.series('liverel'))
+    livereload.listen()
+
 });
 
 gulp.task('minify-svg', function () {

sass/_print.scss

@@ -3,18 +3,18 @@
 \*------------------------------------*/
 
 ::selection {
-	background:#04A4CC;
-	color:#FFF;
+  background: #04a4cc;
+  color: #fff;
   text-shadow: none;
 }
 ::-webkit-selection {
-	background:#04A4CC;
-	color:#FFF;
+  background: #04a4cc;
+  color: #fff;
   text-shadow: none;
 }
 ::-moz-selection {
-	background:#04A4CC;
-	color:#FFF;
+  background: #04a4cc;
+  color: #fff;
   text-shadow: none;
 }
 
@@ -55,8 +55,8 @@ a img.aligncenter {
   margin-right: auto;
 }
 .wp-caption {
-	background:#FFF;
-	border:1px solid #F0F0F0;
+  background: #fff;
+  border: 1px solid #f0f0f0;
   max-width: 96%;
   padding: 5px 3px 10px;
   text-align: center;
@@ -86,10 +86,8 @@ a img.aligncenter {
   padding: 0 4px 5px;
 }
 .sticky {
-
 }
 .bypostauthor {
-
 }
 
 /*------------------------------------*\
@@ -97,7 +95,20 @@ a img.aligncenter {
 \*------------------------------------*/
 
 @media print {
+  @page {
+    margin: 2cm;
+  }
+
+  html {
+    overflow-y: unset !important;
+  }
+
   * {
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact !important;
+  }
+
+  *:not(header *) {
     background: transparent !important;
     color: #000 !important;
     box-shadow: none !important;
@@ -118,14 +129,16 @@ a img.aligncenter {
   a[href^="#"]:after {
     content: "";
   }
-	pre,blockquote {
+  pre,
+  blockquote {
     border: 1px solid #999;
     page-break-inside: avoid;
   }
   thead {
     display: table-header-group;
   }
-	tr,img {
+  tr,
+  img {
     page-break-inside: avoid;
   }
   img {
@@ -144,4 +157,137 @@ a img.aligncenter {
   h3 {
     page-break-after: avoid;
   }
+
+  //structure
+  .wrapper {
+    height: unset !important;
+  }
+
+  //header
+
+  header {
+    position: relative !important;
+    flex-direction: column !important;
+    align-items: flex-start !important;
+    justify-content: flex-start !important;
+    padding: 2rem !important;
+    .header-inner {
+      flex-direction: column !important;
+      justify-content: flex-start;
+      align-items: flex-start !important;
+      padding: 0 2rem !important;
+      .dis-logo {
+        background-image: url(../img/dis-logo-black.png) !important;
+        background-image: url(../img/dis-logo-black.svg) !important;
+        margin-bottom: 1rem;
+      }
+      a {
+        display: flex !important;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        div {
+          margin-right: 2rem;
+        }
+      }
+      .menubutton {
+        display: none;
+      }
+      .social-link {
+        display: block !important;
+        margin: 0.5rem 2rem !important;
+      }
+      .events-link {
+        display: none;
+      }
+    }
+  }
+
+  //masonrypage
+  .masonrypage {
+    article {
+      min-height: unset !important;
+
+      a.thumbnailwrapper {
+        img {
+          height: 50vw !important;
+          width: 100vw !important;
+        }
+        &:after {
+          content: "";
+        }
+      }
+
+      h2 {
+        display: block !important;
+        padding-bottom: 5rem !important;
+      }
+
+      .metadata {
+        top: calc(50vw - 5rem + 1px) !important;
+        position: absolute;
+        // border-top: 1px solid #000;
+        @include fit-content(width);
+        height: $h-unit-1;
+        background-color: #fff;
+
+        @include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white, #000, left);
+        &::after {
+          display: block !important;
+        }
+      }
+    }
+  }
+
+  //single
+  .singularpage {
+    .titlewrapper {
+      padding-top: 2rem !important;
+      .metadata {
+        a {
+          text-decoration: none;
+          &::after {
+            content: "";
+          }
+        }
+      }
+    }
+
+    .single-content {
+      hr.content-begin {
+        margin-top: 2rem !important;
+      }
+
+      a.cboxElement::after {
+        content: "" !important;
+      }
+
+      figcaption {
+        display: block !important;
+      }
+
+      .alignleft,
+      .alignright,
+      .wp-block-image {
+        page-break-inside: avoid;
+        width: 100% !important;
+        height: auto;
+        img {
+          page-break-inside: avoid;
+          width: 100%;
+          height: auto;
+        }
+	  }
+	  &::after{
+		content: "A fák érdekében feleslegesen ne nyomtasd ki ezt a cikket. A papírszemetet gyűjtsd szelektíven!";
+		top: 3rem;
+		position: relative;
+	  }
+    }
+    .fb-like,
+    .fb-page,
+    .toHome {
+      display: none !important;
+    }
+  }
 }

sass/base.scss

@@ -505,6 +505,9 @@ $v-unit-6: 24rem;
         background-image: url(../img/#{$iconname}-black.png);
         background-image: url(../img/#{$iconname}-black.svg);
       }
+      @media print {
+        background-image: url(../img/#{$iconname}-black.png);
+      }
     }
 
     .facebook-icon {
@@ -568,7 +571,7 @@ $v-unit-6: 24rem;
     .events-link {
       margin: 0 2rem 0 0;
       &.hidden {
-        display: none !important;
+        display: none;
       }
       @media #{$tablet} {
         margin: 0;
@@ -2717,7 +2720,7 @@ body.page {
   //metadata on mobile
 
   .metadata {
-    @media #{$only-mobile} {
+    @media #{$only-mobile}, print {
       color: $color !important;
       .vr {
         background-color: $color !important;
@@ -2728,7 +2731,7 @@ body.page {
       color: $color !important;
     }
 
-    @media #{$only-mobile} {
+    @media #{$only-mobile}, print  {
       &::before,
       &::after {
         border-color: $color !important;
@@ -2736,7 +2739,7 @@ body.page {
     }
   }
   h2 {
-    @media #{$only-mobile} {
+    @media #{$only-mobile}, print  {
       border-top-color: $color !important;
     }
   }