72 lines
2 KiB
CSS
72 lines
2 KiB
CSS
/* Basic link styling */
|
|
.site-nav ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
gap: var(--space-xs);
|
|
line-height: 0.5em;
|
|
padding-block-end: var(--space-s);
|
|
}
|
|
|
|
.site-nav a {
|
|
--text-color: var(--color-text);
|
|
--background-color: var(--color-bg);
|
|
--border-color: var(--color-bg-accent-2);
|
|
background-color: var(--background-color);
|
|
color: var(--text-color);
|
|
padding: var(--space-s);
|
|
text-decoration: none;
|
|
display: block;
|
|
border-radius: var(--border-radius);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* Change the border-color on :hover and :focus */
|
|
.site-nav a:where(:hover, :focus) {
|
|
--background-color: var(--color-text);
|
|
--text-color: var(--color-bg);
|
|
--border-color: var(--color-bg);
|
|
}
|
|
|
|
/* Change border-color and color for the active page. data-state='active' if a child is active. */
|
|
.site-nav [aria-current='page'],
|
|
.site-nav [data-state='active'] {
|
|
--background-color: var(--color-text);
|
|
--text-color: var(--color-bg);
|
|
--border-color: var(--color-bg);
|
|
}
|
|
|
|
@media screen(md) {
|
|
/* Basic link styling */
|
|
.site-nav ul {
|
|
padding-block-end: 0;
|
|
}
|
|
|
|
.site-nav a {
|
|
--text-color: var(--color-text);
|
|
--background-color: transparent;
|
|
--border-color: transparent;
|
|
--text-decoration: transparent;
|
|
background-color: var(--background-color);
|
|
color: var(--text-color);
|
|
padding: var(--space-xs) 0.2em;
|
|
text-decoration-line: underline;
|
|
text-decoration-color: var(--text-decoration, transparent);
|
|
text-decoration-thickness: 3px;
|
|
text-underline-offset: 0.2em;
|
|
}
|
|
|
|
/* Change the border-color on :hover and :focus */
|
|
.site-nav a:where(:hover, :focus) {
|
|
--text-decoration: var(--color-text-accent);
|
|
--text-color: var(--color-text);
|
|
--background-color: transparent;
|
|
}
|
|
|
|
/* Change border-color and color for the active page */
|
|
.site-nav [aria-current='page'],
|
|
.site-nav [data-state='active'] {
|
|
--text-decoration: var(--color-primary);
|
|
--text-color: var(--color-primary);
|
|
--background-color: transparent;
|
|
}
|
|
}
|