532b4160bf6a2ef558d1c7208c1e356b0113d71e
custom.css
| ... | ... | @@ -27,65 +27,26 @@ |
| 27 | 27 | /** |
| 28 | 28 | * Initialiazing a `footnotes` counter on the wrapper |
| 29 | 29 | */ |
| 30 | - article { |
|
| 30 | + ol { |
|
| 31 | 31 | counter-reset: footnotes; |
| 32 | - } |
|
| 32 | + list-style: none; |
|
| 33 | + } |
|
| 33 | 34 | |
| 34 | - /** |
|
| 35 | - * Inline footnotes references |
|
| 36 | - * 1. Increment the counter at each new reference |
|
| 37 | - * 2. Reset link styles to make it appear like regular text |
|
| 38 | - */ |
|
| 39 | - [aria-describedby="footnote-label"] { |
|
| 40 | - counter-increment: footnotes; /* 1 */ |
|
| 41 | - text-decoration: none; /* 2 */ |
|
| 42 | - color: inherit; /* 2 */ |
|
| 43 | - cursor: default; /* 2 */ |
|
| 44 | - outline: none; /* 2 */ |
|
| 45 | - } |
|
| 35 | +li { |
|
| 36 | + display: block; |
|
| 37 | + margin-bottom: 0.625rem; |
|
| 38 | + position:relative; |
|
| 39 | + } |
|
| 46 | 40 | |
| 47 | - /** |
|
| 48 | - * Actual numbered references |
|
| 49 | - * 1. Display the current state of the counter (e.g. `[1]`) |
|
| 50 | - * 2. Align text as superscript |
|
| 51 | - * 3. Make the number smaller (since it's superscript) |
|
| 52 | - * 4. Slightly offset the number from the text |
|
| 53 | - * 5. Reset link styles on the number to show it's usable |
|
| 54 | - */ |
|
| 55 | - [aria-describedby="footnote-label"]::after { |
|
| 56 | - content: '[' counter(footnotes) ']'; /* 1 */ |
|
| 57 | - vertical-align: super; /* 2 */ |
|
| 58 | - font-size: 0.5em; /* 3 */ |
|
| 59 | - margin-left: 2px; /* 4 */ |
|
| 60 | - color: blue; /* 5 */ |
|
| 61 | - text-decoration: underline; /* 5 */ |
|
| 62 | - cursor: pointer; /* 5 */ |
|
| 63 | - } |
|
| 64 | - |
|
| 65 | - /** |
|
| 66 | - * Resetting the default focused styles on the number |
|
| 67 | - */ |
|
| 68 | - [aria-describedby="footnote-label"]:focus::after { |
|
| 69 | - outline: thin dotted; |
|
| 70 | - outline-offset: 2px; |
|
| 71 | - } |
|
| 72 | - |
|
| 73 | - [aria-label="Back to content"] { |
|
| 74 | - font-size: 0.8em; |
|
| 75 | - } |
|
| 76 | - |
|
| 77 | - /** |
|
| 78 | - * Visually hidden yet accessible content |
|
| 79 | - */ |
|
| 80 | - .visually-hidden { |
|
| 41 | +[aria-label="Return to content"] { |
|
| 42 | + counter-increment: footnotes; |
|
| 43 | + dont-weight: 700; |
|
| 44 | + margin-right: 0.625rem; |
|
| 81 | 45 | position: absolute; |
| 82 | - clip: rect(0 0 0 0); |
|
| 83 | - visibility: hidden; |
|
| 84 | - opacity: 0; |
|
| 85 | - } |
|
| 86 | - |
|
| 87 | - .p { |
|
| 88 | - text-align: center; |
|
| 89 | - font-size: .75em; |
|
| 90 | - padding-top: 150px; |
|
| 91 | - } |
|
| ... | ... | \ No newline at end of file |
| 0 | + right: 100%; |
|
| 1 | + top: 0; |
|
| 2 | + } |
|
| 3 | + |
|
| 4 | +[aria-label="Return to content"]::before { |
|
| 5 | + content: counter(footnotes, decimal-leading-zero); |
|
| 6 | + } |
|
| ... | ... | \ No newline at end of file |