[gimp-web-devel/pat/bootstrap] theme: style header links with icon



commit 29272391405e74d77b0cd9a37becbc97be6f069e
Author: Pat David <patdavid gmail com>
Date:   Mon Sep 12 21:57:36 2022 -0500

    theme: style header links with icon
    
    Header links remove underline on hover and add svg link icon
    and title text indicating it is a permalink.

 assets/sass/main.scss                        |  6 +++++-
 layouts/_default/_markup/render-heading.html | 11 +++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)
---
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 9f75978..3dd4a8d 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -45,7 +45,7 @@
     text-decoration: none;
   }
   h#{$i} a:hover {
-    text-decoration: underline;
+    // text-decoration: underline;
   }
 }
 
@@ -109,6 +109,10 @@ figcaption {
     }
 }
 
+/* Header link icon */
+.link-icon { display: none; }
+a:hover .link-icon { display: inline; }
+
 /* Table styling */
 /* ------------- */
 
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
new file mode 100644
index 0000000..6cdccd0
--- /dev/null
+++ b/layouts/_default/_markup/render-heading.html
@@ -0,0 +1,11 @@
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">
+  <a href="#{{ .Anchor | safeURL }}" title="Permalink to {{.Text}}">
+    {{ .Text | safeHTML }}
+    <span class='link-icon'>
+      <svg xmlns="http://www.w3.org/2000/svg"; height="24" fill="currentColor" class="bi bi-link-45deg" 
viewBox="0 0 16 16">
+  <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 
1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 
1-.128-1.287z"/>
+  <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 
2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
+</svg>
+    </span>
+  </a>
+</h{{ .Level }}>


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]