Replace gutenberg with custom print.css

To fix issues with printing the homepage grid

diff --git a/404.html b/404.html
index 25407b3c4495505d8eff857e5c37cce86e821994..c0423fba4721ba51a35b8068cf3ed3cc686a3c44 100644 (file)
--- a/404.html
+++ b/404.html
@@ -8,7 +8,12 @@
   <link rel="icon" href="/favicon.ico">
   <link rel="stylesheet" href="/style.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gutenberg-css@0.6.1/dist/gutenberg.min.css" media="print">
+  <link rel="stylesheet" href="/print.css" media="print">
+  <style media="print">
+    header {
+      display: none;
+    }
+  </style>
   <title>ardislu.dev</title>
 </head>
 

diff --git a/index.html b/index.html
index 3f5801706025f3568d24181107caf8293caeb6c9..3b6a436c70e177e51ba7e52f4693bf4fca31bd6d 100644 (file)
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
   <meta name="description" content="Ardis Lu's personal blog.">
   <link rel="icon" href="/favicon.ico">
   <link rel="stylesheet" href="/style.css">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gutenberg-css@0.6.1/dist/gutenberg.min.css" media="print">
+  <link rel="stylesheet" href="/print.css" media="print">
   <title>ardislu.dev</title>
 </head>
 

diff --git a/print.css b/print.css
new file mode 100644 (file)
index 0000000..0f4456d
--- /dev/null
+++ b/print.css
@@ -0,0 +1,43 @@
+@page {
+  margin: 0.5in;
+}
+
+* {
+  background: transparent !important;
+  color: #000 !important;
+  box-shadow: none !important;
+  text-shadow: none !important;
+}
+
+h1 {
+  font-size: 16pt;
+}
+
+h2 {
+  font-size: 13pt;
+}
+
+p {
+  font-size: 11pt;
+}
+
+a {
+  text-decoration: underline;
+}
+
+a[href]:after {
+  content: " (" attr(href) ")";
+}
+
+pre {
+  white-space: pre-wrap;
+}
+
+.card-container {
+  display: block;
+}
+
+.card {
+  break-inside: avoid;
+  border: none;
+}