Skip to content

Commit 5c5044d

Browse files
Utsav1256Utsav1256
committed
feat(docs): restore hoverable ¶ anchors for subheadings (#91)
Re-added the hoverable paragraph anchors for all page subheadings so users can discover, copy, and link to specific sections, bringing back the behavior from the old contribute site. How: - Added CSS rules in src/css/custom.css to style the anchors (¶) and show them on heading hover. Closes #91
1 parent 0267e40 commit 5c5044d

File tree

1 file changed

+136
-56
lines changed

1 file changed

+136
-56
lines changed

‎src/css/custom.css‎

Lines changed: 136 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,22 @@
55
*/
66

77
/* You can override the default Infima variables here. */
8-
:root:not(#\#):not(#\#){
9-
--ifm-color-primary: #0086FF;
10-
--ifm-color-primary-dark: #0086FF;
11-
--ifm-color-primary-darker: #0086FF;
12-
--ifm-color-primary-darkest: #0086FF;
13-
--ifm-color-primary-light: #93EAFF;
14-
--ifm-color-primary-lighter: #93EAFF;
15-
--ifm-color-primary-lightest: #93EAFF;
8+
:root:not(#\#):not(#\#) {
9+
--ifm-color-primary: #0086ff;
10+
--ifm-color-primary-dark: #0086ff;
11+
--ifm-color-primary-darker: #0086ff;
12+
--ifm-color-primary-darkest: #0086ff;
13+
--ifm-color-primary-light: #93eaff;
14+
--ifm-color-primary-lighter: #93eaff;
15+
--ifm-color-primary-lightest: #93eaff;
1616
--ifm-code-font-size: 95%;
1717
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
1818
--ifm-link-color: #d62293;
1919
--ifm-link-hover-color: #d62293;
20-
--ifm-font-family-base: 'Clarity City', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, Roboto,
21-
Ubuntu, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
20+
--ifm-font-family-base:
21+
'Clarity City', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
22+
Arial, sans-serif, Roboto, Ubuntu, 'Apple Color Emoji', 'Segoe UI Emoji',
23+
'Segoe UI Symbol';
2224
}
2325

2426
/* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -34,77 +36,155 @@
3436
}
3537

3638
@font-face {
37-
font-family: 'Clarity City';
38-
font-weight: 100;
39-
font-style: normal;
40-
src: local('ClarityCity-Thin'), local('Clarity City'), url('/fonts/ClarityCity-100.woff2') format('woff2'),
41-
url('/fonts/ClarityCity-100.woff') format('woff'), url('/fonts/ClarityCity-100.ttf') format('ttf');
39+
font-family: 'Clarity City';
40+
font-weight: 100;
41+
font-style: normal;
42+
src:
43+
local('ClarityCity-Thin'),
44+
local('Clarity City'),
45+
url('/fonts/ClarityCity-100.woff2') format('woff2'),
46+
url('/fonts/ClarityCity-100.woff') format('woff'),
47+
url('/fonts/ClarityCity-100.ttf') format('ttf');
4248
}
4349

4450
@font-face {
45-
font-family: 'Clarity City';
46-
font-weight: 200;
47-
font-style: normal;
48-
src: local('ClarityCity-ExtraLight'), local('Clarity City'), url('/fonts/ClarityCity-200.woff2') format('woff2'),
49-
url('/fonts/ClarityCity-200.woff') format('woff'), url('/fonts/ClarityCity-200.ttf') format('ttf');
51+
font-family: 'Clarity City';
52+
font-weight: 200;
53+
font-style: normal;
54+
src:
55+
local('ClarityCity-ExtraLight'),
56+
local('Clarity City'),
57+
url('/fonts/ClarityCity-200.woff2') format('woff2'),
58+
url('/fonts/ClarityCity-200.woff') format('woff'),
59+
url('/fonts/ClarityCity-200.ttf') format('ttf');
5060
}
5161

5262
@font-face {
53-
font-family: 'Clarity City';
54-
font-weight: 300;
55-
font-style: normal;
56-
src: local('ClarityCity-Light'), local('Clarity City'), url('/fonts/ClarityCity-300.woff2') format('woff2'),
57-
url('/fonts/ClarityCity-300.woff') format('woff'), url('/fonts/ClarityCity-300.ttf') format('ttf');
63+
font-family: 'Clarity City';
64+
font-weight: 300;
65+
font-style: normal;
66+
src:
67+
local('ClarityCity-Light'),
68+
local('Clarity City'),
69+
url('/fonts/ClarityCity-300.woff2') format('woff2'),
70+
url('/fonts/ClarityCity-300.woff') format('woff'),
71+
url('/fonts/ClarityCity-300.ttf') format('ttf');
5872
}
5973

6074
@font-face {
61-
font-family: 'Clarity City';
62-
font-weight: 400;
63-
font-style: normal;
64-
src: local('ClarityCity-Regular'), local('Clarity City'), url('/fonts/ClarityCity-400.woff2') format('woff2'),
65-
url('/fonts/ClarityCity-400.woff') format('woff'), url('/fonts/ClarityCity-400.ttf') format('ttf');
75+
font-family: 'Clarity City';
76+
font-weight: 400;
77+
font-style: normal;
78+
src:
79+
local('ClarityCity-Regular'),
80+
local('Clarity City'),
81+
url('/fonts/ClarityCity-400.woff2') format('woff2'),
82+
url('/fonts/ClarityCity-400.woff') format('woff'),
83+
url('/fonts/ClarityCity-400.ttf') format('ttf');
6684
}
6785

6886
@font-face {
69-
font-family: 'Clarity City';
70-
font-weight: 500;
71-
font-style: normal;
72-
src: local('ClarityCity-Medium'), local('Clarity City'), url('/fonts/ClarityCity-500.woff2') format('woff2'),
73-
url('/fonts/ClarityCity-500.woff') format('woff'), url('/fonts/ClarityCity-500.ttf') format('ttf');
87+
font-family: 'Clarity City';
88+
font-weight: 500;
89+
font-style: normal;
90+
src:
91+
local('ClarityCity-Medium'),
92+
local('Clarity City'),
93+
url('/fonts/ClarityCity-500.woff2') format('woff2'),
94+
url('/fonts/ClarityCity-500.woff') format('woff'),
95+
url('/fonts/ClarityCity-500.ttf') format('ttf');
7496
}
7597

7698
@font-face {
77-
font-family: 'Clarity City';
78-
font-weight: 600;
79-
font-style: normal;
80-
src: local('ClarityCity-SemiBold'), local('Clarity City'), url('/fonts/ClarityCity-600.woff2') format('woff2'),
81-
url('/fonts/ClarityCity-600.woff') format('woff'), url('/fonts/ClarityCity-600.ttf') format('ttf');
99+
font-family: 'Clarity City';
100+
font-weight: 600;
101+
font-style: normal;
102+
src:
103+
local('ClarityCity-SemiBold'),
104+
local('Clarity City'),
105+
url('/fonts/ClarityCity-600.woff2') format('woff2'),
106+
url('/fonts/ClarityCity-600.woff') format('woff'),
107+
url('/fonts/ClarityCity-600.ttf') format('ttf');
82108
}
83109

84110
@font-face {
85-
font-family: 'Clarity City';
86-
font-weight: 700;
87-
font-style: normal;
88-
src: local('ClarityCity-Bold'), local('Clarity City'), url('/fonts/ClarityCity-700.woff2') format('woff2'),
89-
url('/fonts/ClarityCity-700.woff') format('woff'), url('/fonts/ClarityCity-700.ttf') format('ttf');
111+
font-family: 'Clarity City';
112+
font-weight: 700;
113+
font-style: normal;
114+
src:
115+
local('ClarityCity-Bold'),
116+
local('Clarity City'),
117+
url('/fonts/ClarityCity-700.woff2') format('woff2'),
118+
url('/fonts/ClarityCity-700.woff') format('woff'),
119+
url('/fonts/ClarityCity-700.ttf') format('ttf');
90120
}
91121

92122
@font-face {
93-
font-family: 'Clarity City';
94-
font-weight: 800;
95-
font-style: normal;
96-
src: local('ClarityCity-ExtraBold'), local('Clarity City'), url('/fonts/ClarityCity-800.woff2') format('woff2'),
97-
url('/fonts/ClarityCity-800.woff') format('woff'), url('/fonts/ClarityCity-800.ttf') format('ttf');
123+
font-family: 'Clarity City';
124+
font-weight: 800;
125+
font-style: normal;
126+
src:
127+
local('ClarityCity-ExtraBold'),
128+
local('Clarity City'),
129+
url('/fonts/ClarityCity-800.woff2') format('woff2'),
130+
url('/fonts/ClarityCity-800.woff') format('woff'),
131+
url('/fonts/ClarityCity-800.ttf') format('ttf');
98132
}
99133

100134
@font-face {
101-
font-family: 'Clarity City';
102-
font-weight: 900;
103-
font-style: normal;
104-
src: local('ClarityCity-Black'), local('Clarity City'), url('/fonts/ClarityCity-900.woff2') format('woff2'),
105-
url('/fonts/ClarityCity-900.woff') format('woff'), url('/fonts/ClarityCity-900.ttf') format('ttf');
135+
font-family: 'Clarity City';
136+
font-weight: 900;
137+
font-style: normal;
138+
src:
139+
local('ClarityCity-Black'),
140+
local('Clarity City'),
141+
url('/fonts/ClarityCity-900.woff2') format('woff2'),
142+
url('/fonts/ClarityCity-900.woff') format('woff'),
143+
url('/fonts/ClarityCity-900.ttf') format('ttf');
106144
}
107145

108146
.navbar__logo:not(#\#):not(#\#) {
109147
height: 2.5rem;
110-
}
148+
}
149+
150+
/* This enables Hoverable ¶ anchors for all headings */
151+
.markdown .hash-link {
152+
opacity: 0;
153+
margin-left: 0.3em;
154+
text-decoration: none;
155+
color: var(--ifm-color-primary);
156+
font-weight: normal;
157+
transition:
158+
opacity 0.2s ease-in-out,
159+
transform 0.2s ease-in-out;
160+
font-size: 0.9em;
161+
display: inline-block;
162+
transform: translateX(-2px);
163+
}
164+
165+
/* shows ¶ on heading hover or when focused */
166+
.markdown h1:hover .hash-link,
167+
.markdown h2:hover .hash-link,
168+
.markdown h3:hover .hash-link,
169+
.markdown h4:hover .hash-link,
170+
.markdown h5:hover .hash-link,
171+
.markdown h6:hover .hash-link,
172+
.markdown .hash-link:focus {
173+
opacity: 1;
174+
transform: translateX(0);
175+
}
176+
177+
/* adds ¶ content */
178+
.markdown .hash-link::before {
179+
content: '¶';
180+
pointer-events: none;
181+
}
182+
183+
/* making it easier to click on mobile */
184+
@media screen and (max-width: 768px) {
185+
.markdown .hash-link {
186+
transform: none;
187+
font-size: 1em;
188+
margin-left: 0.25em;
189+
}
190+
}

0 commit comments

Comments
 (0)