From 863ded9adf04fa02be5325ae96da29f30c422542 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 28 Sep 2024 19:15:15 -0400
Subject: [PATCH] move permalinks to right on mobile - fixes #166

---
 packages/site-kit/src/lib/styles/text.css | 28 +++++++++++------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/packages/site-kit/src/lib/styles/text.css b/packages/site-kit/src/lib/styles/text.css
index 15b74bca61..0df325e646 100644
--- a/packages/site-kit/src/lib/styles/text.css
+++ b/packages/site-kit/src/lib/styles/text.css
@@ -1,6 +1,5 @@
 .text :where(h2) {
 	margin-top: 7rem;
-	border-bottom: 1px solid var(--sk-back-4);
 }
 
 .text :where(h3) {
@@ -224,26 +223,25 @@
 	background-size: 1em 1em;
 	width: 1.4em;
 	height: 1em;
-	left: -1.3em;
-	opacity: 0;
-	transition: opacity 0.2s;
 	bottom: 0.25em;
-}
 
-@media (min-width: 768px) {
-	.text :where(a.permalink:focus),
-	.text :where(h2, h3, h4, h5, h6):hover a.permalink {
-		opacity: 1;
+	@media (max-width: 767px) {
+		right: 0;
+		scale: 0.8;
 	}
-}
 
-@media (max-width: 768px) {
-	.text :where(a.permalink) {
-		transform: scale(0.6);
-		opacity: 1;
-		left: -1em;
+	@media (min-width: 768px) {
+		left: -1.3em;
+		opacity: 0;
+		transition: opacity 0.2s;
+
+		:where(h2, h3, h4, h5, h6):hover & {
+			opacity: 1;
+		}
 	}
+}
 
+@media (max-width: 768px) {
 	.text :where(blockquote *) {
 		word-break: break-word;
 	}