[gimp-web-devel/pat/bootstrap] theme: style header links with icon
- From: Pat David <patdavid src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gimp-web-devel/pat/bootstrap] theme: style header links with icon
- Date: Tue, 13 Sep 2022 02:58:19 +0000 (UTC)
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]