2024-04-19 06:46:32 -04:00
|
|
|
// Links
|
|
|
|
|
|
|
|
// Use CSS variables for link colors to make it easy to override in marketing page
|
|
|
|
:root {
|
2024-04-23 10:12:25 -04:00
|
|
|
--link-color: var(--link-ui);
|
2024-04-19 06:46:32 -04:00
|
|
|
--link-hover-color: var(--link-ui-hover);
|
|
|
|
--link-visited-color: var(--link-ui-visited);
|
2024-10-14 04:00:41 -04:00
|
|
|
--link-color-dark: var(--link-ui-dark);
|
|
|
|
--link-hover-color-dark: var(--link-ui-hover-dark);
|
|
|
|
--link-visited-color-dark: var(--link-ui-visited-dark);
|
2024-04-19 06:46:32 -04:00
|
|
|
}
|
|
|
|
|
2024-05-08 07:45:56 -04:00
|
|
|
a {
|
2024-04-19 06:46:32 -04:00
|
|
|
color: var(--link-color);
|
|
|
|
|
|
|
|
&:visited {
|
|
|
|
color: var(--link-visited-color);
|
|
|
|
}
|
2024-09-24 11:19:38 -04:00
|
|
|
|
|
|
|
&:hover {
|
|
|
|
color: var(--link-hover-color);
|
|
|
|
}
|
2024-04-19 06:46:32 -04:00
|
|
|
}
|
2024-09-16 11:27:09 -04:00
|
|
|
|
|
|
|
.link-monospace {
|
|
|
|
@extend .dm-mono;
|
|
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
color: var(--green-50);
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
color: var(--green-60);
|
|
|
|
}
|
|
|
|
}
|
2024-10-02 10:35:48 -04:00
|
|
|
|
2024-10-21 12:44:55 -04:00
|
|
|
.link-black-text {
|
2024-10-02 10:35:48 -04:00
|
|
|
color: var(--neutral-90);
|
|
|
|
text-decoration: none;
|
2024-10-21 12:44:55 -04:00
|
|
|
font-weight: 600;
|
2024-10-02 10:35:48 -04:00
|
|
|
|
|
|
|
&:visited {
|
|
|
|
color: var(--neutral-90);
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
color: var(--neutral-90);
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
}
|
2024-10-21 12:44:55 -04:00
|
|
|
|
|
|
|
.link-black-full-width {
|
|
|
|
@extend .link-black-text;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
width: 100%;
|
|
|
|
justify-content: space-between;
|
|
|
|
}
|