Commit 263dcac6d85effcc6f97824bc6bc03a86122b31f
Add a visually-hidden <hr> at the end of each <section>
This improves the layout's clarity in text-mode browsers that don't render sections clearly, e.g. links.Greg K Nicholson committed on 2/16/2018, 11:38:42 AM
Parent: df0e7a9773f81ffdb5ca791b59efe420377ce1bf
Files changed
themes/ran/static/style/ran.css | ||
---|---|---|
@@ -62,9 +62,15 @@ | ||
62 | 62 … | body > * { |
63 | 63 … | grid-column: 3/4; |
64 | 64 … | } |
65 | 65 … | |
66 … | +.visuallyhidden { | |
67 … | + position: absolute !important; | |
68 … | + top: -9999em !important; | |
69 … | + left: -9999em !important; | |
70 … | +} | |
66 | 71 … | |
72 … | + | |
67 | 73 … | /* Top and bottom navigation, article footer */ |
68 | 74 … | |
69 | 75 … | .topnav { |
70 | 76 … | margin-top: 10vh; |
@@ -144,8 +150,9 @@ | ||
144 | 150 … | width: auto; |
145 | 151 … | opacity: 1; |
146 | 152 … | } |
147 | 153 … | |
154 … | + | |
148 | 155 … | /* Nearby pages */ |
149 | 156 … | |
150 | 157 … | nav.nearby { |
151 | 158 … | display: block; |
themes/ran/templates/archives.html | |||
---|---|---|---|
@@ -13,8 +13,9 @@ | |||
13 | 13 … | </a> | |
14 | 14 … | </li> | |
15 | 15 … | {%- endfor -%} | |
16 | 16 … | </ul> | |
17 … | + <hr class="visuallyhidden"> | ||
17 | 18 … | </section> | |
18 | 19 … | <section class="smalllinks"> | |
19 | 20 … | <h2>Labels:</h2> | |
20 | 21 … | <ul> | |
@@ -27,7 +28,8 @@ | |||
27 | 28 … | </li> | |
28 | 29 … | {%- endif -%} | |
29 | 30 … | {%- endfor -%} | |
30 | 31 … | </ul> | |
32 … | + <hr class="visuallyhidden"> | ||
31 | 33 … | </section> | |
32 | 34 … | {%- endblock -%} | |
33 | 35 … |
themes/ran/templates/article.html | ||
---|---|---|
@@ -118,8 +118,9 @@ | ||
118 | 118 … | </li> |
119 | 119 … | {%- endfor -%} |
120 | 120 … | {%- endfor -%} |
121 | 121 … | </ul> |
122 … | + <hr class="visuallyhidden"> | |
122 | 123 … | </section> |
123 | 124 … | {%- endif -%} |
124 | 125 … | </footer> |
125 | 126 … | {%- endif -%} |
themes/ran/templates/base.html | ||
---|---|---|
@@ -43,8 +43,9 @@ | ||
43 | 43 … | </a> |
44 | 44 … | {%- endblock -%} |
45 | 45 … | </nav> |
46 | 46 … | {%- endblock -%} |
47 … | + <hr class="visuallyhidden"> | |
47 | 48 … | </section> |
48 | 49 … | {%- block main -%} |
49 | 50 … | <header> |
50 | 51 … | {%- block pagetitle -%} |
@@ -63,8 +64,9 @@ | ||
63 | 64 … | {{- AUTHOR -}} |
64 | 65 … | </a> |
65 | 66 … | </address> |
66 | 67 … | {%- endblock -%} |
68 … | + <hr class="visuallyhidden"> | |
67 | 69 … | </section> |
68 | 70 … | </details> |
69 | 71 … | {%- block maincontentintro -%} |
70 | 72 … | {%- endblock -%} |
@@ -85,8 +87,9 @@ | ||
85 | 87 … | <nav> |
86 | 88 … | {{- self.logo() -}} |
87 | 89 … | </nav> |
88 | 90 … | {%- endblock -%} |
91 … | + <hr class="visuallyhidden"> | |
89 | 92 … | </section> |
90 | 93 … | </body> |
91 | 94 … | </html> |
92 | 95 … |
themes/ran/templates/period_archives.html | ||
---|---|---|
@@ -30,8 +30,9 @@ | ||
30 | 30 … | </a> |
31 | 31 … | </li> |
32 | 32 … | {%- endfor -%} |
33 | 33 … | </ul> |
34 … | + <hr class="visuallyhidden"> | |
34 | 35 … | </section> |
35 | 36 … | {%- elif period | length == 2 and |
36 | 37 … | dates | unique(attribute="date.day") | list | length > 1 -%} |
37 | 38 … | <section class="smalllinks"> |
@@ -51,8 +52,9 @@ | ||
51 | 52 … | </a> |
52 | 53 … | </li> |
53 | 54 … | {%- endfor -%} |
54 | 55 … | </ul> |
56 … | + <hr class="visuallyhidden"> | |
55 | 57 … | </section> |
56 | 58 … | {%- endif -%} |
57 | 59 … | {%- endblock -%} |
58 | 60 … | {%- block maincontent -%} |
Built with git-ssb-web