Revert hover css changes (#384)

* Revert "Fix more hover css (#381)" This reverts commit 718a47e. * Revert "Fix hover css (#380)" This reverts commit e974868. * Revert "Add small change in readme (#377)" This reverts commit 0d4f38f. * Revert "Revert "Add small change in readme (#377)"" This reverts commit 8fea187.
huggingface · Jun 9, 2023 · 01b262b · 01b262b
1 parent 778f5d8
commit 01b262b
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git a/kit/preprocess.js b/kit/preprocess.js
@@ -511,7 +511,7 @@ function headingWithAnchorLink(code) {
 		return `<h${level} class="relative group">
 	<a 
 		id="${id}" 
-		class="header-link text-lg hidden group-hover:block absolute right-full p-1.5" 
+		class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" 
 		href="#${id}"
 	>
 		<span><IconCopyLink/></span>

diff --git a/kit/src/lib/Docstring.svelte b/kit/src/lib/Docstring.svelte
@@ -104,7 +104,7 @@
 		{@html highlightSignature(name)}
 		<a
 			id={anchor}
-			class="header-link invisible group-hover:visible pr-2"
+			class="header-link invisible with-hover:group-hover:visible pr-2"
 			href="#{anchor}"
 		>
 			<IconCopyLink />
@@ -179,7 +179,7 @@
 						<span class="group flex space-x-1.5 items-start">
 							<a
 								id={anchor}
-								class="header-link text-lg hidden group-hover:block absolute p-1.5 right-full"
+								class="header-link block pr-0.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"
 								href={`#${anchor}`}
 							>
 								<span><IconCopyLink classNames="text-smd" /></span>
@@ -203,7 +203,7 @@
 							<span class="group flex space-x-1.5 items-start">
 								<a
 									id={anchor}
-									class="header-link text-lg hidden group-hover:block absolute p-1.5 right-full"
+									class="header-link block pr-0.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"
 									href={`#${anchor}`}
 								>
 									<span><IconCopyLink classNames="text-smd" /></span>

diff --git a/kit/src/lib/ExampleCodeBlock.svelte b/kit/src/lib/ExampleCodeBlock.svelte
@@ -30,7 +30,7 @@
 <div class="relative group rounded-md" bind:this={containerEl}>
 	<a
 		id={anchor}
-		class="header-link text-lg hidden group-hover:block absolute p-1.5 right-full"
+		class="header-link block pr-0.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"
 		href={`#${anchor}`}
 	>
 		<span><IconCopyLink classNames="text-smd" /></span>

diff --git a/kit/tailwind.config.cjs b/kit/tailwind.config.cjs
@@ -37,6 +37,10 @@ module.exports = {
 			maxWidth: {
 				"2xs": "16rem"
 			},
+			screens: {
+				"with-hover": { raw: "(hover: hover)" },
+				"no-hover": { raw: "(hover: none)" }
+			},
 			gridTemplateRows: {
 				full: "100%"
 			},