diff --git a/paragon/_discussion.scss b/paragon/_discussion.scss index 1ae3d1ce..8db4a8c1 100644 --- a/paragon/_discussion.scss +++ b/paragon/_discussion.scss @@ -1,6 +1,7 @@ // Discussion style -#root #courseTabsNavigation { +#root { + #courseTabsNavigation { padding: 20px 15px !important; max-width: 1600px; margin: 0 auto; @@ -14,6 +15,13 @@ margin: 0 !important; } } + } + + &:has(.header-action-bar) { + .sr-only.sr-only-focusable { + display: none; + } + } } #root .header-action-bar { max-width: 1600px; diff --git a/paragon/_header.scss b/paragon/_header.scss index 929bf64c..6b608fdc 100644 --- a/paragon/_header.scss +++ b/paragon/_header.scss @@ -3,6 +3,27 @@ position: relative; z-index: 1; width: 100%; + + header { + .sr-only-focusable { + z-index: 9999; + position: absolute; + top: 5px; + left: 50%; + background-color: black; + opacity: 0.8; + color: white; + text-decoration: none; + outline: none; + transform: translateX(-50%); + font-size: 1rem; + padding: 0 5px; + + &:focus { + clip: auto; + } + } + } header.site-header-mobile { padding: 0 15px; height: auto; @@ -133,9 +154,13 @@ .nav-link:focus, .nav-link.active, .expanded .nav-link { - background: transparent; - color: $primary; - text-decoration: underline; + background: transparent; + color: $primary; + text-decoration: underline; + } + + .dropdown-divider { + display: none; } } .logo {