OddSite 4.0.0

Link Defaults

Initial global defaults for links…


:focus {
  @include config.focus-ring;

By default, all elements get a dotted outline on focus. In practice, we can override this when other focus styles exist.


a {
  &:visited {
    --underline-color--default: var(--accent);
    --underline-thickness--default: 0.1em;
    --underline-offset--default: 0.15em;

    color: var(--link, var(--action));

  &:focus {
    --img-bright: 1;
    --img-contrast: 1;
    --underline-color: var(--active);
    --underline-thickness: 0.2em;

    color: var(--link-focus, var(--active));

  // underlines applied to link-text as well as basic link states
  &:visited {
    @include config.transition('underline');

    text-decoration: underline;
    text-decoration-color: var(
    text-decoration-thickness: var(
    text-decoration-skip-ink: auto;
    text-underline-offset: var(

  // icon links have the underline removed
  // (and applied to the icon-text instead)
  &.icon-link {
    text-decoration: none;

Basic link (and link-states) apply action and interaction text colors. Text underlines are also applied, but the target depends on the presence or absence of icons, in order to avoid awkward-looking icon underlines.


.main-action {
  --link: var(--accent);

  font-size: var(--medium);
  margin-top: var(--double-gutter);

Main actions are large block links, used at the end of a section to represent the main call to action of that section.