diff --git a/src/assets/styles/base/_base.scss b/src/assets/styles/base/_base.scss index 76bef24c..fc1ed140 100755 --- a/src/assets/styles/base/_base.scss +++ b/src/assets/styles/base/_base.scss @@ -28,13 +28,39 @@ a { text-decoration: underline; } -a:hover, -a:focus { - background: var(--fl-linkColor, var(--accent, var(--yellow-500))); - color: var(--fl-bgColor, currentColor); - outline: none; +main, +footer { + a { + border-radius: 5px; + } + + a:hover, + a:focus, + a:active { + outline-style: solid; + outline-width: 4px; + } + + a:hover { + color: var(--fl-bgColor, currentColor); + background: var(--fl-linkColor, var(--accent, var(--yellow-500))) !important; + outline-color: var(--fl-linkColor, var(--accent, var(--yellow-500))); + } + + a:focus { + outline-color: var(--fl-linkColor, var(--indigo-800)); + outline-offset: 2px; + outline-width: 2px; + } + + a:active { + color: var(--fl-bgColor, var(--white)); + background: var(--fl-linkColor, var(--indigo-800)); + outline-color: var(--fl-linkColor, var(--indigo-800)); + } } + a[hreflang], a[download], a[rel='external'] { diff --git a/src/assets/styles/pages/_home.scss b/src/assets/styles/pages/_home.scss index 069ef1ab..71030835 100755 --- a/src/assets/styles/pages/_home.scss +++ b/src/assets/styles/pages/_home.scss @@ -35,6 +35,10 @@ } } +#what-is-inclusive-design + * { + z-index: 1; +} + .page--home .entry + .entry { margin-top: rem(24); }