Merge pull request #103 from XuluWarrior/print-friendly-html

Print friendly html
XuluWarrior · Sep 21, 2024 · a06dbb2 · a06dbb2
2 parents d661ecc + 91ae3f9
commit a06dbb2
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 14 deletions.
diff --git a/assets/css/styles-1.css b/assets/css/styles-1.css
@@ -267,7 +267,7 @@ ul {
   color: #fb866a;
 }
 /* Extra small devices (phones, less than 768px) */
-@media (max-width: 767px) {
+@media only screen and (max-width: 767px) {
   .sidebar-wrapper {
     position: static;
     width: inherit;
@@ -286,7 +286,7 @@ ul {
 }
 /* Small devices (tablets, 768px and up) */
 /* Medium devices (desktops, 992px and up) */
-@media (min-width: 992px) {
+@media only screen and (min-width: 992px) {
   .skillset .level-title {
     display: inline-block;
     float: left;
@@ -303,3 +303,14 @@ ul {
 }
 /* Large devices (large desktops, 1200px and up) */
 /* Ex-Large devices (large desktops, 1200px and up) */
+@media print {
+  html,
+  body {
+    width: 1020px;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+}
+.item {
+  break-inside: avoid;
+}
diff --git a/assets/css/styles-2.css b/assets/css/styles-2.css
@@ -267,7 +267,7 @@ ul {
   color: #fb866a;
 }
 /* Extra small devices (phones, less than 768px) */
-@media (max-width: 767px) {
+@media only screen and (max-width: 767px) {
   .sidebar-wrapper {
     position: static;
     width: inherit;
@@ -286,7 +286,7 @@ ul {
 }
 /* Small devices (tablets, 768px and up) */
 /* Medium devices (desktops, 992px and up) */
-@media (min-width: 992px) {
+@media only screen and (min-width: 992px) {
   .skillset .level-title {
     display: inline-block;
     float: left;
@@ -303,3 +303,14 @@ ul {
 }
 /* Large devices (large desktops, 1200px and up) */
 /* Ex-Large devices (large desktops, 1200px and up) */
+@media print {
+  html,
+  body {
+    width: 1020px;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+}
+.item {
+  break-inside: avoid;
+}
diff --git a/assets/css/styles-3.css b/assets/css/styles-3.css
@@ -267,7 +267,7 @@ ul {
   color: #fb866a;
 }
 /* Extra small devices (phones, less than 768px) */
-@media (max-width: 767px) {
+@media only screen and (max-width: 767px) {
   .sidebar-wrapper {
     position: static;
     width: inherit;
@@ -286,7 +286,7 @@ ul {
 }
 /* Small devices (tablets, 768px and up) */
 /* Medium devices (desktops, 992px and up) */
-@media (min-width: 992px) {
+@media only screen and (min-width: 992px) {
   .skillset .level-title {
     display: inline-block;
     float: left;
@@ -303,3 +303,14 @@ ul {
 }
 /* Large devices (large desktops, 1200px and up) */
 /* Ex-Large devices (large desktops, 1200px and up) */
+@media print {
+  html,
+  body {
+    width: 1020px;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+}
+.item {
+  break-inside: avoid;
+}
diff --git a/assets/css/styles-4.css b/assets/css/styles-4.css
@@ -267,7 +267,7 @@ ul {
   color: #fb866a;
 }
 /* Extra small devices (phones, less than 768px) */
-@media (max-width: 767px) {
+@media only screen and (max-width: 767px) {
   .sidebar-wrapper {
     position: static;
     width: inherit;
@@ -286,7 +286,7 @@ ul {
 }
 /* Small devices (tablets, 768px and up) */
 /* Medium devices (desktops, 992px and up) */
-@media (min-width: 992px) {
+@media only screen and (min-width: 992px) {
   .skillset .level-title {
     display: inline-block;
     float: left;
@@ -303,3 +303,14 @@ ul {
 }
 /* Large devices (large desktops, 1200px and up) */
 /* Ex-Large devices (large desktops, 1200px and up) */
+@media print {
+  html,
+  body {
+    width: 1020px;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+}
+.item {
+  break-inside: avoid;
+}
diff --git a/assets/css/styles-5.css b/assets/css/styles-5.css
@@ -267,7 +267,7 @@ ul {
   color: #fb866a;
 }
 /* Extra small devices (phones, less than 768px) */
-@media (max-width: 767px) {
+@media only screen and (max-width: 767px) {
   .sidebar-wrapper {
     position: static;
     width: inherit;
@@ -286,7 +286,7 @@ ul {
 }
 /* Small devices (tablets, 768px and up) */
 /* Medium devices (desktops, 992px and up) */
-@media (min-width: 992px) {
+@media only screen and (min-width: 992px) {
   .skillset .level-title {
     display: inline-block;
     float: left;
@@ -303,3 +303,14 @@ ul {
 }
 /* Large devices (large desktops, 1200px and up) */
 /* Ex-Large devices (large desktops, 1200px and up) */
+@media print {
+  html,
+  body {
+    width: 1020px;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+}
+.item {
+  break-inside: avoid;
+}
diff --git a/assets/css/styles-6.css b/assets/css/styles-6.css
@@ -267,7 +267,7 @@ ul {
   color: #fb866a;
 }
 /* Extra small devices (phones, less than 768px) */
-@media (max-width: 767px) {
+@media only screen and (max-width: 767px) {
   .sidebar-wrapper {
     position: static;
     width: inherit;
@@ -286,7 +286,7 @@ ul {
 }
 /* Small devices (tablets, 768px and up) */
 /* Medium devices (desktops, 992px and up) */
-@media (min-width: 992px) {
+@media only screen and (min-width: 992px) {
   .skillset .level-title {
     display: inline-block;
     float: left;
@@ -303,3 +303,14 @@ ul {
 }
 /* Large devices (large desktops, 1200px and up) */
 /* Ex-Large devices (large desktops, 1200px and up) */
+@media print {
+  html,
+  body {
+    width: 1020px;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+}
+.item {
+  break-inside: avoid;
+}
diff --git a/assets/less/default/responsive.less b/assets/less/default/responsive.less
@@ -1,5 +1,5 @@
 /* Extra small devices (phones, less than 768px) */
-@media (max-width: 767px) { 
+@media only screen and (max-width: 767px) {
 
     .sidebar-wrapper {
         position: static;
@@ -29,7 +29,7 @@
 }
 
 /* Medium devices (desktops, 992px and up) */
-@media (min-width: 992px) {
+@media only screen and (min-width: 992px) {
 
     .skillset .level-title {
         display: inline-block;
@@ -60,4 +60,14 @@
 
 }
 
+@media print {
+    html, body {
+        width: 1020px;
+        -webkit-print-color-adjust:exact !important;
+        print-color-adjust:exact !important;
+    }
+}
 
+.item {
+    break-inside: avoid;
+}