Add style for heading anchor

This commit is contained in:
Cotes Chung 2021-12-06 02:40:51 +08:00
parent 45adf4aac2
commit 1487ae5284
2 changed files with 41 additions and 15 deletions

View file

@ -54,7 +54,7 @@ h1 {
h2 { h2 {
@extend %heading; @extend %heading;
@extend %section; @extend %section;
@extend %anchor; @extend %anchor-relative;
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -62,7 +62,7 @@ h2 {
h3 { h3 {
@extend %heading; @extend %heading;
@extend %section; @extend %section;
@extend %anchor; @extend %anchor-relative;
font-size: 1.2rem; font-size: 1.2rem;
} }
@ -1126,7 +1126,7 @@ $sidebar-display: "sidebar-display";
h1 { h1 {
margin-top: 2.2rem; margin-top: 2.2rem;
font-size: 1.55rem; font-size: 1.75rem;
} }
} }

View file

@ -10,6 +10,44 @@
font-family: 'Lato', 'Microsoft Yahei', sans-serif; font-family: 'Lato', 'Microsoft Yahei', sans-serif;
} }
%section {
padding-top: 3.5rem;
margin-top: -2.5rem;
#core-wrapper & {
line-height: 1.2;
margin-bottom: 1rem;
}
}
%anchor {
> a {
font-size: 70%;
visibility: hidden;
margin-left: 0.25rem;
border-bottom: none !important;
opacity: 0;
transition: opacity 0.25s ease-in, visibility 0s ease-in 0.25s;
}
&:hover {
> a {
visibility: visible;
opacity: 1;
transition: opacity 0.25s ease-in, visibility 0s ease-in 0s;
}
}
}
%anchor-relative {
@extend %anchor;
> a {
position: relative;
bottom: 1px;
}
}
%tag-hover { %tag-hover {
background: var(--tag-hover); background: var(--tag-hover);
transition: background 0.35s ease-in-out; transition: background 0.35s ease-in-out;
@ -47,18 +85,6 @@
border-bottom: none; border-bottom: none;
} }
%section {
#core-wrapper & {
line-height: 1.2;
margin-bottom: 1rem;
}
}
%anchor {
padding-top: 3.5rem;
margin-top: -2.5rem;
}
%cursor-pointer { %cursor-pointer {
cursor: pointer; cursor: pointer;
} }