From ccce5c94a9982ad2852c223f9dc63bc66c8f598a Mon Sep 17 00:00:00 2001
From: Rohan Kumar <seirdy@seirdy.one>
Date: Sun, 27 Mar 2022 17:24:07 -0700
Subject: [PATCH] Inline nav links in print media

---
 assets/css/main.css                      | 2 +-
 content/posts/website-best-practices.gmi | 4 ++--
 content/posts/website-best-practices.md  | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 2a0bdb8..1e76a41 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -84,7 +84,7 @@ nav li,
 }
 
 /* single-line nav on widescreen */
-@media (min-width: 32em) {
+@media print, (min-width: 32em) {
 	header nav li {
 		display: inline;
 		padding-right: 0.5em;
diff --git a/content/posts/website-best-practices.gmi b/content/posts/website-best-practices.gmi
index b92090b..c8c0221 100644
--- a/content/posts/website-best-practices.gmi
+++ b/content/posts/website-best-practices.gmi
@@ -335,8 +335,8 @@ Exceptions exist: one or two very simple responsive changes won't hurt. The main
 For example, the only responsive layout change on my website (https://seirdy.one) is a single CSS declaration to switch between inline and multi-line navigation links at the top of the page:
 
 ```
-@media (min-width: 32rem) {
-  nav li {
+@media print, (min-width: 32rem) {
+  header nav li {
     display: inline;
   }
 }
diff --git a/content/posts/website-best-practices.md b/content/posts/website-best-practices.md
index ac1d659..b2c670f 100644
--- a/content/posts/website-best-practices.md
+++ b/content/posts/website-best-practices.md
@@ -296,8 +296,8 @@ The only responsive layout change on [my website](https://seirdy.one/) is a sing
 </figcaption>
 
 ```
-@media (min-width: 32rem) {
-  nav li {
+@media print, (min-width: 32rem) {
+  header nav li {
     display: inline;
   }
 }