Wordpress

My little printer-friendly CSS

Posted on by Paolo Redaelli

Here is my little “Printer friendly CSS” that I add to each and every page using Simple Custom CSS and JS 

/* override styles when printing */
@media print {
	@page {
		margin: 2cm; 
		@top-center {
			font-family: sans-serif;
			font-weight: bold;
			font-size: 2em;
			content: counter(page);
		}
	}
	/* target the first page only */
	@page :first { margin-top: 6cm; }
	/* target left (even-numbered) pages only */
	@page :left { margin-right: 2cm; }
	/* target right (odd-numbered) pages only */
	@page :right { margin-left: 2cm; }
	
	
	body {
		font-size: 16pt;
		line-height: 1.2;
		/*margin: 1cm;*/
		color: #000;
		background-color: #fff;
		border: 1mm black;
	}
	/* header, */
	footer, aside, nav, form, iframe, .menu, .hero, .adslot, .header-bottom, .site-header, .header-middle {
		display: none;
	}
	
	h2.entry-title {
		font-size: 32pt;
	}
	
	/* page breaks before main header */
	h1 {
		break-before: page; 
	}
	/* don't break tables and pictures*/ 
	table, img, svg {
		break-inside: avoid;
	}
	
	/* avoid too small text */
	body,p {
		font-size: 16pt;
		line-height: 1.2;
	}
	article {
		width: 100%;
		/* no columns please 
		** column-width: 19cm;
		** column-gap: 0.5cm;
		*/
	}
	
	/* no background images */
	* {
		background-image: none !important;
	}
	
	 /* styling links */
	a {
		font-size: 80%;
	}
	a::after {
		content: " (" attr(href) ")";
		overflow-wrap: break-word;
	}
	
	
	/* don't display unimportang pictures */
	/* img, svg {
	**	display: none !important;
	** }
	*/
	
	/* make picture big */
	img.print, svg.print {
		display: block;
		max-width: 100%;
	}
	
	/* don't show comments */
	#comments {
		display: none;
	}
	
	/* don't show tables of contents */
	.wp-block-uagb-table-of-contents, .advgb-toc {
		display: none;
	}
}

I use it with News-box theme but it should work fine with any other “pretty modern” theme.

I started reading How to Create Printer-friendly Pages with CSS (local copy)

Using New Gatsby Source WordPress Plugin

Posted on by Paolo Redaelli

In my previous article, I discussed how I learned to create a decoupled WordPress powered Gatsby site using the Gatsby Source WPGraphQL plugin. The

From: Using New Gatsby Source WordPress Plugin | CSS-Tricks

Interesting but it seems to me a little betrayal of WordPress. Luckily henrikwirth in his awesome-wordpress-gatsby repository clearly explain the rationale

Why Gatsby and WordPress?

WordPress is one of the most used CMS in the world and therefore many people already know how to work with it. The typical front-end approach with PHP-based templates is getting more and more problematic in an environment where performance is key. The approach to use WordPress as a headless CMS with normal API calls through JavaScript already exists, but also has the downside of having to make requests to the server and rendering depending on the response. This adds time to load. Gatsby instead, pre-renders the whole site at compile time and therefore the user gets a fully prepared static site on their first request, making it one of the best approaches for performance. Another huge benefit is security, as your WordPress instance can be anywhere, even locally and you don’t need to expose any of it to the user. The static Gatsby site therefore, is not hackable. Find further arguments for pros and cons in the resources below.