Skip to content

feat(docs): restore hoverable ¶ anchors for subheadings (#91) #92

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+139 −56
Open

feat(docs): restore hoverable ¶ anchors for subheadings (#91) #92

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5e1ca3f
feat(docs): restore hoverable ¶ anchors for subheadings (#91)
Utsav1256 Oct 23, 2025
415e1c3
style(docs): fix hover ¶ underline color and tweak size/margin
Utsav1256 Oct 23, 2025
9d61837
Merge branch 'main' into feature/deep-links
krook Nov 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
195 changes: 139 additions & 56 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,22 @@
*/

/* You can override the default Infima variables here. */
:root:not(#\#):not(#\#){
--ifm-color-primary: #0086FF;
--ifm-color-primary-dark: #0086FF;
--ifm-color-primary-darker: #0086FF;
--ifm-color-primary-darkest: #0086FF;
--ifm-color-primary-light: #93EAFF;
--ifm-color-primary-lighter: #93EAFF;
--ifm-color-primary-lightest: #93EAFF;
:root:not(#\#):not(#\#) {
--ifm-color-primary: #0086ff;
--ifm-color-primary-dark: #0086ff;
--ifm-color-primary-darker: #0086ff;
--ifm-color-primary-darkest: #0086ff;
--ifm-color-primary-light: #93eaff;
--ifm-color-primary-lighter: #93eaff;
--ifm-color-primary-lightest: #93eaff;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
--ifm-link-color: #d62293;
--ifm-link-hover-color: #d62293;
--ifm-font-family-base: 'Clarity City', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, Roboto,
Ubuntu, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
--ifm-font-family-base:
'Clarity City', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
Arial, sans-serif, Roboto, Ubuntu, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
Expand All @@ -34,77 +36,158 @@
}

@font-face {
font-family: 'Clarity City';
font-weight: 100;
font-style: normal;
src: local('ClarityCity-Thin'), local('Clarity City'), url('/fonts/ClarityCity-100.woff2') format('woff2'),
url('/fonts/ClarityCity-100.woff') format('woff'), url('/fonts/ClarityCity-100.ttf') format('ttf');
font-family: 'Clarity City';
font-weight: 100;
font-style: normal;
src:
local('ClarityCity-Thin'),
local('Clarity City'),
url('/fonts/ClarityCity-100.woff2') format('woff2'),
url('/fonts/ClarityCity-100.woff') format('woff'),
url('/fonts/ClarityCity-100.ttf') format('ttf');
}

@font-face {
font-family: 'Clarity City';
font-weight: 200;
font-style: normal;
src: local('ClarityCity-ExtraLight'), local('Clarity City'), url('/fonts/ClarityCity-200.woff2') format('woff2'),
url('/fonts/ClarityCity-200.woff') format('woff'), url('/fonts/ClarityCity-200.ttf') format('ttf');
font-family: 'Clarity City';
font-weight: 200;
font-style: normal;
src:
local('ClarityCity-ExtraLight'),
local('Clarity City'),
url('/fonts/ClarityCity-200.woff2') format('woff2'),
url('/fonts/ClarityCity-200.woff') format('woff'),
url('/fonts/ClarityCity-200.ttf') format('ttf');
}

@font-face {
font-family: 'Clarity City';
font-weight: 300;
font-style: normal;
src: local('ClarityCity-Light'), local('Clarity City'), url('/fonts/ClarityCity-300.woff2') format('woff2'),
url('/fonts/ClarityCity-300.woff') format('woff'), url('/fonts/ClarityCity-300.ttf') format('ttf');
font-family: 'Clarity City';
font-weight: 300;
font-style: normal;
src:
local('ClarityCity-Light'),
local('Clarity City'),
url('/fonts/ClarityCity-300.woff2') format('woff2'),
url('/fonts/ClarityCity-300.woff') format('woff'),
url('/fonts/ClarityCity-300.ttf') format('ttf');
}

@font-face {
font-family: 'Clarity City';
font-weight: 400;
font-style: normal;
src: local('ClarityCity-Regular'), local('Clarity City'), url('/fonts/ClarityCity-400.woff2') format('woff2'),
url('/fonts/ClarityCity-400.woff') format('woff'), url('/fonts/ClarityCity-400.ttf') format('ttf');
font-family: 'Clarity City';
font-weight: 400;
font-style: normal;
src:
local('ClarityCity-Regular'),
local('Clarity City'),
url('/fonts/ClarityCity-400.woff2') format('woff2'),
url('/fonts/ClarityCity-400.woff') format('woff'),
url('/fonts/ClarityCity-400.ttf') format('ttf');
}

@font-face {
font-family: 'Clarity City';
font-weight: 500;
font-style: normal;
src: local('ClarityCity-Medium'), local('Clarity City'), url('/fonts/ClarityCity-500.woff2') format('woff2'),
url('/fonts/ClarityCity-500.woff') format('woff'), url('/fonts/ClarityCity-500.ttf') format('ttf');
font-family: 'Clarity City';
font-weight: 500;
font-style: normal;
src:
local('ClarityCity-Medium'),
local('Clarity City'),
url('/fonts/ClarityCity-500.woff2') format('woff2'),
url('/fonts/ClarityCity-500.woff') format('woff'),
url('/fonts/ClarityCity-500.ttf') format('ttf');
}

@font-face {
font-family: 'Clarity City';
font-weight: 600;
font-style: normal;
src: local('ClarityCity-SemiBold'), local('Clarity City'), url('/fonts/ClarityCity-600.woff2') format('woff2'),
url('/fonts/ClarityCity-600.woff') format('woff'), url('/fonts/ClarityCity-600.ttf') format('ttf');
font-family: 'Clarity City';
font-weight: 600;
font-style: normal;
src:
local('ClarityCity-SemiBold'),
local('Clarity City'),
url('/fonts/ClarityCity-600.woff2') format('woff2'),
url('/fonts/ClarityCity-600.woff') format('woff'),
url('/fonts/ClarityCity-600.ttf') format('ttf');
}

@font-face {
font-family: 'Clarity City';
font-weight: 700;
font-style: normal;
src: local('ClarityCity-Bold'), local('Clarity City'), url('/fonts/ClarityCity-700.woff2') format('woff2'),
url('/fonts/ClarityCity-700.woff') format('woff'), url('/fonts/ClarityCity-700.ttf') format('ttf');
font-family: 'Clarity City';
font-weight: 700;
font-style: normal;
src:
local('ClarityCity-Bold'),
local('Clarity City'),
url('/fonts/ClarityCity-700.woff2') format('woff2'),
url('/fonts/ClarityCity-700.woff') format('woff'),
url('/fonts/ClarityCity-700.ttf') format('ttf');
}

@font-face {
font-family: 'Clarity City';
font-weight: 800;
font-style: normal;
src: local('ClarityCity-ExtraBold'), local('Clarity City'), url('/fonts/ClarityCity-800.woff2') format('woff2'),
url('/fonts/ClarityCity-800.woff') format('woff'), url('/fonts/ClarityCity-800.ttf') format('ttf');
font-family: 'Clarity City';
font-weight: 800;
font-style: normal;
src:
local('ClarityCity-ExtraBold'),
local('Clarity City'),
url('/fonts/ClarityCity-800.woff2') format('woff2'),
url('/fonts/ClarityCity-800.woff') format('woff'),
url('/fonts/ClarityCity-800.ttf') format('ttf');
}

@font-face {
font-family: 'Clarity City';
font-weight: 900;
font-style: normal;
src: local('ClarityCity-Black'), local('Clarity City'), url('/fonts/ClarityCity-900.woff2') format('woff2'),
url('/fonts/ClarityCity-900.woff') format('woff'), url('/fonts/ClarityCity-900.ttf') format('ttf');
font-family: 'Clarity City';
font-weight: 900;
font-style: normal;
src:
local('ClarityCity-Black'),
local('Clarity City'),
url('/fonts/ClarityCity-900.woff2') format('woff2'),
url('/fonts/ClarityCity-900.woff') format('woff'),
url('/fonts/ClarityCity-900.ttf') format('ttf');
}

.navbar__logo:not(#\#):not(#\#) {
height: 2.5rem;
}
}

/* This enables Hoverable ¶ anchors for all headings */
.markdown .hash-link {
opacity: 0;
text-decoration: none;
color: #555;
font-weight: normal;
transition:
opacity 0.2s ease-in-out,
transform 0.2s ease-in-out;
font-size: 0.85em;
display: inline-block;
transform: translateX(-2px);
}

/* shows ¶ on heading hover or when focused */
.markdown h1:hover .hash-link,
.markdown h2:hover .hash-link,
.markdown h3:hover .hash-link,
.markdown h4:hover .hash-link,
.markdown h5:hover .hash-link,
.markdown h6:hover .hash-link,
.markdown .hash-link:focus {
opacity: 1;
transform: translateX(0);
text-decoration: none;
}

/* adds ¶ content */
.markdown .hash-link::before {
content: '¶';
pointer-events: none;
color: #555;
font-size: 0.62em;
text-decoration: none;
display: inline-block;
}

/* making it easier to click on mobile */
@media screen and (max-width: 768px) {
.markdown .hash-link {
transform: none;
font-size: 0.95em;
}
}