Implement backlinks
This commit is contained in:
daudix
@ -68,11 +68,11 @@
|
||||
@media only screen and (max-width: 720px) {
|
||||
position: static;
|
||||
flex-direction: row-reverse;
|
||||
align-items: flex-end;
|
||||
// justify-content: center;
|
||||
margin-block-start: 2rem;
|
||||
}
|
||||
|
||||
#toc summary,
|
||||
summary,
|
||||
#go-to-top,
|
||||
#share,
|
||||
#issue {
|
||||
@ -101,7 +101,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
#toc {
|
||||
details {
|
||||
position: relative;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
@ -110,21 +110,21 @@
|
||||
|
||||
&[open] summary~* {
|
||||
transform-origin: bottom right;
|
||||
animation: toc-open var(--transition);
|
||||
animation: button-dropdown-open var(--transition);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform-origin: bottom left;
|
||||
animation: toc-open-rtl var(--transition);
|
||||
animation: button-dropdown-open-rtl var(--transition);
|
||||
}
|
||||
|
||||
@keyframes toc-open {
|
||||
@keyframes button-dropdown-open {
|
||||
from {
|
||||
transform: scale(0.5) translate(1rem, 1rem);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes toc-open-rtl {
|
||||
@keyframes button-dropdown-open-rtl {
|
||||
from {
|
||||
transform: scale(0.5) translate(-1rem, 1rem);
|
||||
opacity: 0;
|
||||
@ -136,67 +136,88 @@
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 3a1 1 0 1 0 0 2 1 1 0 0 0 0-2m4 0c-.554 0-1 .446-1 1s.446 1 1 1h8c.554 0 1-.446 1-1s-.446-1-1-1ZM2 7a1 1 0 1 0 0 2 1 1 0 0 0 0-2m4 0c-.554 0-1 .446-1 1s.446 1 1 1h8c.554 0 1-.446 1-1s-.446-1-1-1Zm-4 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2m4 0c-.554 0-1 .446-1 1s.446 1 1 1h8c.554 0 1-.446 1-1s-.446-1-1-1z'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: var(--icon);
|
||||
mask-image: var(--icon);
|
||||
summary + div {
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
display: flex;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
z-index: 1;
|
||||
backdrop-filter: var(--blur);
|
||||
inset-block-end: 0;
|
||||
inset-inline-end: 3rem;
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glass);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--nav-bg);
|
||||
padding: 1rem;
|
||||
width: min(calc(var(--container-width) / 3), calc(90vw - 3rem));
|
||||
max-height: 50vh;
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
@media only screen and (max-width: 720px) {
|
||||
inset-inline-end: 2.5rem;
|
||||
width: min(calc(var(--container-width) / 3), calc(90vw - 2.5rem));
|
||||
}
|
||||
|
||||
strong.title {
|
||||
color: var(--fg-muted-4);
|
||||
}
|
||||
|
||||
div {
|
||||
--mask: linear-gradient(to bottom, transparent, black 1rem, black calc(100% - 1rem), transparent);
|
||||
-webkit-mask-image: var(--mask);
|
||||
flex: 1;
|
||||
mask-image: var(--mask);
|
||||
margin: 0 -1rem -1rem;
|
||||
padding: 1rem;
|
||||
padding-block-start: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
margin: 0;
|
||||
padding-inline-start: 0.75rem;
|
||||
font-size: var(--font-size-small);
|
||||
|
||||
&:first-child {
|
||||
margin-block-start: 0.75rem;
|
||||
}
|
||||
|
||||
li::marker {
|
||||
color: var(--fg-muted-5);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--fg-muted-5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#toc .icon {
|
||||
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 3a1 1 0 1 0 0 2 1 1 0 0 0 0-2m4 0c-.554 0-1 .446-1 1s.446 1 1 1h8c.554 0 1-.446 1-1s-.446-1-1-1ZM2 7a1 1 0 1 0 0 2 1 1 0 0 0 0-2m4 0c-.554 0-1 .446-1 1s.446 1 1 1h8c.554 0 1-.446 1-1s-.446-1-1-1Zm-4 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2m4 0c-.554 0-1 .446-1 1s.446 1 1 1h8c.554 0 1-.446 1-1s-.446-1-1-1z'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: var(--icon);
|
||||
mask-image: var(--icon);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
#backlinks {
|
||||
.icon {
|
||||
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M5 14a1 1 0 0 1-.707-.293l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 1 1 1.414 1.414L3.414 8H12c1.117 0 2-.883 2-2s-.883-2-2-2c-.55 0-1-.45-1-1s.45-1 1-1c2.2 0 4 1.8 4 4s-1.8 4-4 4H3.414l2.293 2.293A1 1 0 0 1 5 14m0 0'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: var(--icon);
|
||||
mask-image: var(--icon);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
#toc-dropdown {
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
display: flex;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
z-index: 1;
|
||||
backdrop-filter: var(--blur);
|
||||
inset-block-end: 0;
|
||||
inset-inline-end: 3rem;
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glass);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--nav-bg);
|
||||
padding: 1rem;
|
||||
width: min(calc(var(--container-width) / 3), calc(90vw - 3rem));
|
||||
max-height: 50vh;
|
||||
|
||||
strong.title {
|
||||
color: var(--fg-muted-4);
|
||||
}
|
||||
|
||||
div {
|
||||
--mask: linear-gradient(to bottom, transparent, black 1rem, black calc(100% - 1rem), transparent);
|
||||
-webkit-mask-image: var(--mask);
|
||||
flex: 1;
|
||||
mask-image: var(--mask);
|
||||
margin: 0 -1rem -1rem;
|
||||
padding: 1rem;
|
||||
padding-block-start: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
margin: 0;
|
||||
padding-inline-start: 0.75rem;
|
||||
font-size: var(--font-size-small);
|
||||
|
||||
&:first-child {
|
||||
margin-block-start: 0.75rem;
|
||||
}
|
||||
|
||||
li::marker {
|
||||
color: var(--fg-muted-5);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--fg-muted-5);
|
||||
}
|
||||
}
|
||||
summary + div {
|
||||
width: min(calc(var(--container-width) / 3), calc(90vw - 5rem));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user