| .toc { |
| width: 15em; |
| height: 100%; |
| flex-grow: 1; |
| flex-shrink: 0; |
| padding: $m-s; |
| font-size: 1em; |
| position: -webkit-sticky; |
| position: sticky; |
| top: 0; |
| border-left: 1px solid $medium-purple; |
| border-left: 1px solid var(--text-second); |
| |
| > nav > ul { |
| font-size: 1em; |
| font-weight: normal; |
| } |
| |
| > nav > ul ul { |
| font-weight: bold; |
| font-size: 0.875em; |
| margin-top: 0.75em; |
| |
| a { |
| text-transform: none; |
| } |
| } |
| |
| > nav > ul > li > a { |
| text-transform: uppercase; |
| font-size: 0.875em; |
| font-weight: bold; |
| font-family: 'Ubuntu', sans-serif; |
| margin-top: 1em; |
| display: block; |
| } |
| |
| ul { |
| list-style-type: none; |
| padding: 0; |
| margin-bottom: 1.25em; |
| } |
| |
| li { |
| margin-bottom: 0.75em; |
| } |
| |
| a { |
| color: $dark-purple; |
| color: var(--text-color); |
| display: block; |
| text-decoration: none; |
| line-height: 1.2; |
| text-transform: uppercase; |
| |
| &:hover, |
| &:focus { |
| text-decoration: underline; |
| } |
| |
| &:focus { |
| outline: 1px dashed; |
| outline-offset: 0.3em; |
| } |
| } |
| |
| } |
| |
| @media print, only screen and (max-width: 50rem) { |
| .toc { |
| display: none; |
| } |
| } |
