hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Proper support for heading anchors

Browse Source
This commit is contained in:
David Lapshin
2024-05-09 22:52:02 +03:00
parent 17a378b318
commit 1f7dab1f59
7 changed files with 35 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
sass/_icon.scss Normal file
View File

@ -0,0 +1,7 @@
i.icon {
display: inline-block;
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto;
}

16
sass/_main.scss
View File

@ -50,6 +50,7 @@ body {
@keyframes highlight-in-out {
50% {
font-weight: bolder;
letter-spacing: 0.125rem;
}
}
@ -77,17 +78,6 @@ h6 {
line-height: normal;
font-family: var(--font-serif);
letter-spacing: -0.05em;
.zola-anchor {
display: none;
visibility: hidden;
}
&:hover .zola-anchor {
display: inline-block;
visibility: visible;
text-decoration: none;
}
}
h1 {
@ -240,10 +230,6 @@ pre {
background-color: var(--fg-muted-4);
width: 1rem;
height: 1rem;
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto;
}
}
}

21
sass/_zola-anchor.scss Normal file
View File

@ -0,0 +1,21 @@
.zola-anchor {
margin: 0 0.25em;
&:hover i {
background-color: var(--primary-color);
}
i {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 4C1.8 4 0 5.8 0 8s1.8 4 4 4v-2c-1.125 0-2-.875-2-2s.875-2 2-2h3c1.125 0 2 .875 2 2 0 .84-.496 1.535-1.207 1.84l.785 1.84A4 4 0 0 0 11 8c0-2.2-1.8-4-4-4zm8 2v2c1.125 0 2 .875 2 2s-.875 2-2 2H9c-1.125 0-2-.875-2-2 0-.828.484-1.516 1.184-1.828l-.817-1.828A4.01 4.01 0 0 0 5 10c0 2.2 1.8 4 4 4h3c2.2 0 4-1.8 4-4s-1.8-4-4-4'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 4C1.8 4 0 5.8 0 8s1.8 4 4 4v-2c-1.125 0-2-.875-2-2s.875-2 2-2h3c1.125 0 2 .875 2 2 0 .84-.496 1.535-1.207 1.84l.785 1.84A4 4 0 0 0 11 8c0-2.2-1.8-4-4-4zm8 2v2c1.125 0 2 .875 2 2s-.875 2-2 2H9c-1.125 0-2-.875-2-2 0-.828.484-1.516 1.184-1.828l-.817-1.828A4.01 4.01 0 0 0 5 10c0 2.2 1.8 4 4 4h3c2.2 0 4-1.8 4-4s-1.8-4-4-4'/%3E%3C/svg%3E");
mask-size: cover;
transition: background-color var(--transition);
background-color: var(--fg-muted-4);
width: 1em;
height: 1em;
}
}
:target .zola-anchor i {
background-color: var(--primary-color-alpha);
}

2
sass/style.scss
View File

@ -14,6 +14,7 @@
@use "comments";
@use "crt";
@use "footer";
@use "icon";
@use "johnvertisement";
@use "links";
@use "media";
@ -22,3 +23,4 @@
@use "post-nav";
@use "statements";
@use "tags";
@use "zola-anchor";