Merge pull request #54 from carpentries/add-anchor

Add anchor links
carpentries · Aug 9, 2022 · 3077ca4 · 3077ca4
2 parents f2df91f + 02ac789
commit 3077ca4
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 6 deletions.
diff --git a/DESCRIPTION b/DESCRIPTION
@@ -1,6 +1,6 @@
 Package: varnish
 Title: Front-end for The Carpentries Lesson Template
-Version: 0.2.2
+Version: 0.2.3
 Authors@R: c(
     person(given = "Zhian N.",
            family = "Kamvar",

diff --git a/NEWS.md b/NEWS.md
@@ -1,3 +1,9 @@
+# varnish 0.2.3
+
+* Add support for displaying anchor links (requested @fiveop, 
+  https://github.com/carpentries/sandpaper/issues/285 and @anenadic, 
+  https://github.com/carpentries/workbench/issues/28; added: #54 by @zkamvar)
+
 # varnish 0.2.2
 
 * Formatting of list elements in the solutions and instructor notes now follows

diff --git a/inst/pkgdown/assets/assets/scripts.js b/inst/pkgdown/assets/assets/scripts.js
diff --git a/inst/pkgdown/assets/assets/styles.css b/inst/pkgdown/assets/assets/styles.css
diff --git a/inst/pkgdown/assets/assets/styles.css.map b/inst/pkgdown/assets/assets/styles.css.map
diff --git a/source/stylesheets/styles.css.scss b/source/stylesheets/styles.css.scss
@@ -90,8 +90,8 @@ h2 {
 }
 
 h3 {
-  font-size: 24px;
-  font-weight:400;
+  font-size:  24px;
+  font-weight: 400;
   font-style: normal;
   font-weight: 400;
   line-height: 31px;
@@ -123,6 +123,21 @@ a {
   text-decoration: none;
 }
 
+a.anchor {
+  display: none;
+  margin-left: 5px;
+  width: Min(0.9em, 20px);
+  height: Min(0.9em, 20px);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-link'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'%3E%3C/path%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: Min(0.9em, 20px) Min(0.9em, 20px);
+  background-position: center center;
+}
+
+h2, h3, h4, h5, h6 {
+  &:hover .anchor {display: inline-block;}
+}
+
 a:hover {
   text-decoration: underline;
 }