From 6e3846d60def83e3e0d2c8adb84ed330ba4168c7 Mon Sep 17 00:00:00 2001
From: "Edgar P. Burkhart" <git@edgarpierre.fr>
Date: Sat, 18 Mar 2023 11:51:02 +0100
Subject: [PATCH] Implement print layout

---
 src/index.html          |  4 +--
 src/static/css/main.css | 58 +++++++++++++++++++++++++++++++++++------
 2 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/src/index.html b/src/index.html
index 1a48f70..0f3d0b1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -55,7 +55,7 @@
 			<div class="block link-block">
 				<a href="https://git.edgarpierre.fr/edpibu">
 					<span class="i ri-git-repository-fill"></span>
-					<span class="desc">Git</span>
+					<span class="desc">Git <em>git.edgarpierre.fr/edpibu</em></span>
 				</a>
 				<a href="https://www.komoot.fr/user/383887346799">
 					<span class="i ri-map-2-fill"></span>
@@ -63,7 +63,7 @@
 				</a>
 				<a href="https://m.edgarpierre.fr">
 					<span class="i ri-mastodon-fill"></span>
-					<span class="desc">Mastodon</span>
+					<span class="desc">Mastodon <em>m.edgarpierre.fr</em></span>
 				</a>
 			</div>
 		</div>
diff --git a/src/static/css/main.css b/src/static/css/main.css
index 11ee3da..3214f16 100644
--- a/src/static/css/main.css
+++ b/src/static/css/main.css
@@ -36,6 +36,11 @@ body {
 	grid-template-columns: 1fr;
 	grid-gap: var(--colgap);
 }
+@media print {
+	body {
+		display: block;
+	}
+}
 /* body > div {
 	column-width: var(--colw);
 	column-gap: var(--gap);
@@ -48,11 +53,11 @@ div.title > img {
 h1 {
 	margin-top: 1rem;
 }
-@media (min-width: 40rem) {
+@media screen and (width >= 40rem) {
 	body {grid-template-columns: var(--colw) 1fr}
 	body > div.cv {grid-column: 2 / -1}
 }
-@media (min-width: 70rem) {
+@media screen and (width >= 70rem) {
 	h1 {
 		margin-top: 2rem;
 	}
@@ -66,6 +71,11 @@ h1 {
 		margin: 0;
 	}
 }
+@media print {
+	div.title > img {
+		margin-top: 0;
+	}
+}
 
 h1, h2, h3 {
 	font-weight: 250;
@@ -92,6 +102,12 @@ h4 {font-size: 1.2rem}
 h5 {font-size: 1rem}
 h6 {font-size: .8rem}
 
+@media print {
+	h2 {
+		display: none;
+	}
+}
+
 p, ul, ol, dl {line-height: var(--lh)}
 em {font-variation-settings: 'slnt' -5}
 strong {font-weight: 550}
@@ -127,21 +143,37 @@ dd {
 	grid-template-columns: 1fr;
 	grid-gap: .2rem;
 	grid-auto-rows: auto;
+	margin: 1rem 0;
 }
 .img-block > img {
 	max-width: 100%;
 	object-fit: cover;
 }
 .link-block > a {
-	background: var(--bg-01);
 	color: inherit;
-	padding: var(--gap);
-	height: 6rem;
-	display: grid;
-	grid-template-columns: 1fr;
-	grid-template-rows: 1fr auto;
 	text-decoration: none;
 }
+@media not print {
+	.link-block > a {
+		background: var(--bg-01);
+		padding: var(--gap);
+		height: 6rem;
+		display: grid;
+		grid-template-columns: 1fr;
+		grid-template-rows: 1fr auto;
+	}
+}
+@media print {
+	.img-block {
+		display: none;
+	}
+	.link-block > a {
+		height: auto;
+	}
+	.link-block > a > .i {
+		display: none;
+	}
+}
 .link-block > a:hover {
 	background: var(--bg-02);
 }
@@ -173,3 +205,13 @@ footer {
 	margin: calc(-1 * var(--gap));
 	margin-top: 0;
 }
+@media print {
+	footer {
+		display: none;
+	}
+}
+
+@page {
+	size: a4 portrait;
+	margin: 2cm;
+}