Add print styles to remove navigation elements and excess whitespace

This makes it much easier to export the documentation to PDF or paper
for offline reading.

Author: sruggier

components/content.tsx

@@ -6,7 +6,7 @@ import Link from "next/link";
 function Footer({ next, prev, mdPath }) {
   let edit = `https://github.com/tokio-rs/website/edit/master/content/${mdPath}`;
   return (
-    <div className="tk-doc-footer">
+    <div className="tk-doc-footer is-hidden-print">
       <div className="level">
         <div className="level-left">
           <div className="level-item tk-prev">
@@ -98,7 +98,7 @@ function TableOfContents({ headings }) {
   }, [headings]);
 
   return (
-    <aside className="column is-one-third tk-content-summary">
+    <aside className="column is-one-third tk-content-summary is-hidden-print">
       <ul className="tk-content-summary-menu">{list}</ul>
     </aside>
   );
@@ -134,7 +134,7 @@ export default function Content({
   return (
     <>
       <div className="columns is-marginless tk-docs">
-        <div className="column is-one-quarter tk-docs-nav">
+        <div className="column is-one-quarter tk-docs-nav is-hidden-print">
           <Menu href={href} menu={menu}>
             {isBlogRoute && (
               <div className="all-posts-link">

components/nav.tsx

@@ -39,7 +39,7 @@ const Navigation: FC<{ blog: Blog }> = ({ blog }) => {
 
   return (
     <nav
-      className="navbar is-spaced"
+      className="navbar is-spaced is-hidden-print"
       role="navigation"
       aria-label="main navigation"
     >

package-lock.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "bulma": "^0.8.2",
+    "bulma-print": "^1.0.1",
     "classnames": "2.5.1",
     "glob": "11.0.0",
     "gray-matter": "^4.0.3",

package.json

@@ -79,6 +79,7 @@ $footer-background-color: black;
 $footer-color: white;
 
 @import "../node_modules/bulma/bulma.sass";
+@import "../node_modules/bulma-print/bulma-print";
 
 // Darken colors
 @function darken($color) {
@@ -516,6 +517,24 @@ a:active {
   }
 }
 
+@media print {
+  .columns {
+    display: block !important;
+    margin: 0 !important;
+  }
+  .tk-content,
+  .tk-markdown {
+    width: 100% !important;
+    padding: 0 !important;
+  }
+  .section {
+    padding: 0 !important;
+  }
+  body {
+    margin: revert !important;
+  }
+}
+
 .tk-docs {
   .tk-docs-nav {
     background-color: $light-gray;