chore: replace permlink icon with hash icon (#401)

* chore: replace permlink icon with hash icon

* Update packages/site-kit/src/lib/components/Text.svelte

* use rem so size is consistent between h2 and h3

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>

Author: trueadm

packages/site-kit/src/lib/components/Text.svelte

@@ -75,11 +75,11 @@
 		h2,
 		h3 {
 			max-width: 100%;
-			padding: 0 1em 0 0;
+			padding: 0 2.4rem 0 0;
 
 			@media (min-width: 768px) {
-				margin: 0 0 0 -2em;
-				padding: 0 1em 0 2em;
+				margin: 0 0 0 -4.8rem;
+				padding: 0 2.4rem 0 4.8rem;
 			}
 
 			/* we can't use `text-overflow` on the heading itself,
@@ -335,19 +335,23 @@
 		a.permalink {
 			position: absolute !important;
 			display: block;
-			background: url(../icons/link.svg) 50% 50% no-repeat;
-			background-size: 1em 1em;
-			width: 1.2em;
-			height: 0.8em;
-			top: 0.2em;
+			background: url(../icons/hash-light.svg) 50% 50% no-repeat;
+			background-size: 2.4rem 2.4rem;
+			width: 2.6rem;
+			height: 2.2rem;
+			top: calc(50% - 1rem);
 
 			@media (max-width: 767px) {
 				right: 0;
 				scale: 0.8;
 			}
 
+			:root.dark & {
+				background-image: url(../icons/hash-dark.svg);
+			}
+
 			@media (min-width: 768px) {
-				left: 0.7em;
+				left: 1.6rem;
 				opacity: 0;
 				transition: opacity 0.2s;