diff options
| author | Alejandro Soto <alejandro@34project.org> | 2025-09-13 14:55:15 -0600 |
|---|---|---|
| committer | Alejandro Soto <alejandro@34project.org> | 2025-09-13 14:55:15 -0600 |
| commit | 87f85704af1fa866be83077b2b351c1fdad7c3ce (patch) | |
| tree | b49c8d49ef717e539bff6578992e692eea55d380 /themes/tabi-lean/sass/parts/_header-anchor.scss | |
| parent | 1a4c3216f027d6a6f36104547377b7b21faa5015 (diff) | |
| parent | a2ea06d513a5802964f8f0ef5795cec7e548ed7b (diff) | |
Merge commit 'a2ea06d513a5802964f8f0ef5795cec7e548ed7b' as 'themes/tabi-lean'
Diffstat (limited to 'themes/tabi-lean/sass/parts/_header-anchor.scss')
| -rw-r--r-- | themes/tabi-lean/sass/parts/_header-anchor.scss | 35 |
1 files changed, 35 insertions, 0 deletions
diff --git a/themes/tabi-lean/sass/parts/_header-anchor.scss b/themes/tabi-lean/sass/parts/_header-anchor.scss new file mode 100644 index 0000000..8a06200 --- /dev/null +++ b/themes/tabi-lean/sass/parts/_header-anchor.scss @@ -0,0 +1,35 @@ +.header-anchor { + display: inline-flex; + position: absolute; + justify-content: center; + align-items: center; + opacity: 0; + margin-inline-start: -2rem; + padding-inline-end: 0.3rem; + width: 1.9rem; + height: 100%; + user-select: none; + + @media (max-width: 500px) { + display: none; + } +} + +.link-icon { + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.78 3.653a3.936 3.936 0 1 1 5.567 5.567l-3.627 3.627a3.936 3.936 0 0 1-5.88-.353.75.75 0 0 0-1.18.928 5.436 5.436 0 0 0 8.12.486l3.628-3.628a5.436 5.436 0 1 0-7.688-7.688l-3 3a.75.75 0 0 0 1.06 1.061l3-3Z'%3E%3C/path%3E%3Cpath d='M7.28 11.153a3.936 3.936 0 0 1 5.88.353.75.75 0 0 0 1.18-.928 5.436 5.436 0 0 0-8.12-.486L2.592 13.72a5.436 5.436 0 1 0 7.688 7.688l3-3a.75.75 0 1 0-1.06-1.06l-3 3a3.936 3.936 0 0 1-5.567-5.568l3.627-3.627Z'%3E%3C/path%3E%3C/svg%3E"); + align-self: center; + cursor: pointer; + background: var(--text-color); + width: 1rem; + height: 1rem; +} + +h1, h2, h3, h4, h5, h6 { + &:hover .header-anchor { + opacity: 1; + } + + .header-anchor:hover { + background-color: transparent; + } +} |