diff options
| author | Alejandro Soto <alejandro@34project.org> | 2025-09-13 15:01:06 -0600 |
|---|---|---|
| committer | Alejandro Soto <alejandro@34project.org> | 2025-09-13 15:01:06 -0600 |
| commit | f4fcda54638685899c730b3fa90a87d80d6dbef5 (patch) | |
| tree | 0737e627cce304c3a9c4e757bc5f6571a7456091 /sysret.org/themes/tabi-lean/sass/parts/_header-anchor.scss | |
| parent | d8b9cf1f61cc07d625f1c37ccc28adfd58918416 (diff) | |
| parent | 2c13119932765c6d788f08fb53abc244407c0d80 (diff) | |
Merge commit '6a7d3111b31e73fc66af5360149d41f690fbcaa4'
Diffstat (limited to 'sysret.org/themes/tabi-lean/sass/parts/_header-anchor.scss')
| -rw-r--r-- | sysret.org/themes/tabi-lean/sass/parts/_header-anchor.scss | 35 |
1 files changed, 35 insertions, 0 deletions
diff --git a/sysret.org/themes/tabi-lean/sass/parts/_header-anchor.scss b/sysret.org/themes/tabi-lean/sass/parts/_header-anchor.scss new file mode 100644 index 0000000..8a06200 --- /dev/null +++ b/sysret.org/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; + } +} |