the home site for me: also iteration 3 or 4 of my site
feat: make the links less distracting
+31
-5
+31
-5
sass/css/suCSS.css
+31
-5
sass/css/suCSS.css
···
151
151
152
152
/* format links */
153
153
a {
154
-
font-weight: bold;
155
-
border-radius: 0.125rem;
156
154
color: var(--link);
157
-
text-decoration: underline double;
155
+
text-decoration: underline;
156
+
text-decoration-color: color-mix(
157
+
in oklab,
158
+
var(--link) 100%,
159
+
transparent 65%
160
+
);
161
+
text-decoration-thickness: 0.06em;
162
+
text-underline-offset: 0.14em;
163
+
transition:
164
+
color 120ms ease,
165
+
text-decoration-color 120ms ease,
166
+
text-underline-offset 120ms ease,
167
+
text-decoration-thickness 120ms ease;
158
168
}
159
169
160
170
a:visited {
161
-
color: var(--link-visited);
171
+
color: var(--link-visited); /* deeper purple */
172
+
text-decoration-color: color-mix(
173
+
in oklab,
174
+
var(--link-visited) 100%,
175
+
transparent 55%
176
+
);
162
177
}
163
178
164
-
a:hover {
179
+
a:hover,
180
+
a:focus-visible {
181
+
color: var(--accent-dark); /* bright purple */
182
+
text-decoration-thickness: 0.1em;
183
+
text-underline-offset: 0.18em;
184
+
text-decoration-color: var(--accent-dark);
185
+
outline: none;
186
+
}
187
+
188
+
a:visited:hover,
189
+
a:visited:focus-visible {
165
190
color: var(--accent-dark);
191
+
text-decoration-color: var(--accent-dark);
166
192
}
167
193
168
194
/* format lists */