Files
lancedb/docs/src/styles/extra.css
Dominik Weckmüller e7b56b7b2a docs: add permanent link chain icon to headings without impacting SEO (#1746)
I noted that there are no permanent links in the docs. Adapted the
current best solution from
https://github.com/squidfunk/mkdocs-material/discussions/3535. It adds a
GitHub-like chain icon to the left of each heading (right on mobile) and
does not impact SEO unlike the default solution with pilcrow char `¶`
that might show up on google search results.

<img alt="image"
src="https://user-images.githubusercontent.com/182589/153004627-6df3f8e9-c747-4f43-bd62-a8dabaa96c3f.gif">
2024-10-14 11:58:23 -07:00

85 lines
2.9 KiB
CSS

/* markdown typesets */
.md-typeset .admonition,
.md-typeset details {
font-size: 1em
}
.md-typeset h1, .md-typeset h2 {
font-weight: bolder;
letter-spacing: -.01em;
}
/* grid */
.md-grid {
max-width: 95%;
}
@media (min-width: 1220px) {
.md-main__inner {
max-width: 80%;
margin-top: 0;
}
.md-sidebar {
height: auto;
}
.md-sidebar--primary {
border-right: 1px solid var(--md-default-fg-color--lightest);
}
.md-nav .md-nav__link {
font-size: 1.1em;
}
.md-nav .md-nav__link h3 {
font-size: 0.9em;
}
.md-nav .md-nav__title {
display: none;
}
.md-nav__icon {
width: 1.2rem;
height: 1.2rem;
margin-top: -.1rem;
}
}
/* remove pilcrow as permanent link and add chain icon similar to github https://github.com/squidfunk/mkdocs-material/discussions/3535 */
.headerlink {
--permalink-size: 16px; /* for font-relative sizes, 0.6em is a good choice */
--permalink-spacing: 4px;
width: calc(var(--permalink-size) + var(--permalink-spacing));
height: var(--permalink-size);
vertical-align: middle;
background-color: var(--md-default-fg-color--lighter);
background-size: var(--permalink-size);
mask-size: var(--permalink-size);
-webkit-mask-size: var(--permalink-size);
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
visibility: visible;
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg>');
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg>');
}
[id]:target .headerlink {
background-color: var(--md-typeset-a-color);
}
.headerlink:hover {
background-color: var(--md-accent-fg-color) !important;
}
@media screen and (min-width: 76.25em) {
h1, h2, h3, h4, h5, h6 {
display: flex;
align-items: center;
flex-direction: row;
column-gap: 0.2em; /* fixes spaces in titles */
}
.headerlink {
order: -1;
margin-left: calc(var(--permalink-size) * -1 - var(--permalink-spacing)) !important;
}
}