Change name to section-links and added pointer effect

BenCuff · BenCuff · commit e2acc2979b19 · 2024-09-03T10:06:59.000+01:00
diff --git a/docs/_layouts/guidance-page.html b/docs/_layouts/guidance-page.html
@@ -25,7 +25,7 @@
     
     <!--Scripts-->
     <script src="assets/scripts/expandable-sections.js"></script>
-    <script src="assets/scripts/permalinks.js" defer></script>
+    <script src="assets/scripts/section-links.js" defer></script>
     
   </head>
   <body>
diff --git a/docs/assets/scripts/section-links.js b/docs/assets/scripts/section-links.js
@@ -1,7 +1,7 @@
 // Function to copy link to clipboard
 function copylink(text) {
     navigator.clipboard.writeText(text).then(() => {
-        alert(`Link copied to clipboard: ${text}`);
+        alert(`Link copied to clipboard:\n${text}`);
     }).catch(err => {
         console.error('Failed to copy link', err);
     });
@@ -16,8 +16,8 @@ document.querySelectorAll('h1, h2, h3, h4, h5').forEach(heading => {
 
     // Create the icon element
     const iconWrapper = document.createElement('span');
-    iconWrapper.className = 'permalink';
-    iconWrapper.title = 'Permalink';
+    iconWrapper.className = 'section-link';
+    iconWrapper.title = 'Section link';
     iconWrapper.innerHTML = ' ';
 
     // Append the icon to the heading
diff --git a/docs/assets/styles.css b/docs/assets/styles.css
@@ -143,8 +143,8 @@ ul, ol{
 }
 
 
-/*Permalinks*/
-.permalink{
+/*Section links*/
+.section-link{
   background-image: url('img/permalink.png');
   width: 18px;
   height: 18px;
@@ -154,6 +154,10 @@ ul, ol{
   background-size: cover;
 }
 
+.section-link:hover{
+  cursor: pointer;
+}
+
 h1 span, h2 span, h3 span, h4 span, h5 span {
   transition: opacity 0.3s ease-in-out;
 }
@@ -163,7 +167,6 @@ h1:hover span, h2:hover span, h3:hover span, h4:hover span, h5:hover span{
 }
 
 
-
 /*Fancy elements*/
 blockquote{
   margin: 1em 0 2em 0;

Original file line number	Diff line number	Diff line change
`@@ -143,8 +143,8 @@ ul, ol{`
`143`	`143`	`}`
`144`	`144`
`145`	`145`
`146`		`-/Permalinks/`
`147`		`-.permalink{`
	`146`	`+/Section links/`
	`147`	`+.section-link{`
`148`	`148`	`background-image: url('img/permalink.png');`
`149`	`149`	`width: 18px;`
`150`	`150`	`height: 18px;`
`@@ -154,6 +154,10 @@ ul, ol{`
`154`	`154`	`background-size: cover;`
`155`	`155`	`}`
`156`	`156`
	`157`	`+.section-link:hover{`
	`158`	`+ cursor: pointer;`
	`159`	`+}`
	`160`	`+`
`157`	`161`	`h1 span, h2 span, h3 span, h4 span, h5 span {`
`158`	`162`	`transition: opacity 0.3s ease-in-out;`
`159`	`163`	`}`
`@@ -163,7 +167,6 @@ h1:hover span, h2:hover span, h3:hover span, h4:hover span, h5:hover span{`
`163`	`167`	`}`
`164`	`168`
`165`	`169`
`166`		`-`
`167`	`170`	`/Fancy elements/`
`168`	`171`	`blockquote{`
`169`	`172`	`margin: 1em 0 2em 0;`