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 |