adjust style
This commit is contained in:
parent
c9612d8a1d
commit
ad8718ba49
48 changed files with 4217 additions and 15 deletions
62
sass/_zola-anchor.scss
Normal file
62
sass/_zola-anchor.scss
Normal file
|
@ -0,0 +1,62 @@
|
|||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
&:hover .zola-anchor {
|
||||
transform: translateY(-0.125em);
|
||||
opacity: 1;
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: translateY(-0.125em);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zola-anchor {
|
||||
position: absolute;
|
||||
transform: translateX(0.5rem) translateY(-0.125em);
|
||||
opacity: 0;
|
||||
transition: var(--transition);
|
||||
margin-inline-start: calc(-1em + -0.5rem);
|
||||
color: var(--fg-muted-4);
|
||||
line-height: 1;
|
||||
|
||||
@media only screen and (max-width: 832px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: translateX(-0.5rem) translateY(-0.125em);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon-link);
|
||||
mask-image: var(--icon-link);
|
||||
mask-size: cover;
|
||||
transition: var(--transition);
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:target .zola-anchor {
|
||||
color: var(--accent-color-alpha);
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue