Accessibility

Jieiku · Aug 23, 2024 · 9e052f0 · 9e052f0
1 parent 6ca106d
commit 9e052f0
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 47 deletions.
diff --git a/README.md b/README.md
@@ -22,34 +22,34 @@ The Abridge.css demo is simply using Abridge theme as a submodule: [config.toml]
 
 ## Features
 
-- [X] Perfect [Lighthouse](https://pagespeed.web.dev/report?url=abridge.pages.dev), [YellowLabTools](https://yellowlab.tools/), and [Observatory](https://observatory.mozilla.org/analyze/abridge.pages.dev) scores.
-- [X] [PWA support](https://abridge.pages.dev/overview-abridge/#pwa-progressive-web-app) (Progressive Web Application).
-- [X] All JavaScript can be [fully disabled](https://abridge.pages.dev/overview-abridge/#javascript-files).
-- [X] Dark, Light, Auto, and Switcher themes. (colors can be customized, css variables)
-- [X] Code [syntax highlighting](https://abridge.pages.dev/overview-code-blocks/). (colors can be customized, css variables)
-- [X] Numbered code blocks with [line highlighting](https://abridge.pages.dev/overview-code-blocks/#toml).
-- [X] Entirely Offline Site by using the PWA **or** by setting `offline = true` in `config.toml` (full search support).
-- [X] Multi-language support.
-- [X] Search support. ([elasticlunr](https://abridge.pages.dev/), [pagefind](https://abridge-pagefind.pages.dev/), [tinysearch](https://abridge-tinysearch.pages.dev/))
-- [X] Search Suggestions navigation keys, `/` focus, `arrow` move, `enter` select, `escape` close.
-- [X] Search Results Page, type search query then hit `Enter Key` or `click` the search button icon.
-- [X] [SEO](https://abridge.pages.dev/overview-abridge/#seo-and-header-tags) support. (Search Engine Optimization)
-- [X] [Pagination](https://abridge.pages.dev/overview-abridge/#pagination) with numbered paginator on index.
-- [X] Title Based Previous and Next Article links at bottom of Article.
-- [X] Table of Contents in page Index (Optional, clickable links)
-- [X] Recent Posts Block. (Optional)
-- [X] Back to Top button. (uses css only)
-- [X] Code Blocks copy button.
-- [X] Email link in footer obfuscation. (anti-spam)
-- [X] [KaTeX](https://katex.org/) support.
-- [X] [Archive page](https://abridge.pages.dev/archive/).
-- [x] [Tags](https://abridge.pages.dev/tags/).
-- [x] Categories. (similar to Tags, disabled/commented out by default)
-- [x] Social icon links in footer.
-- [X] Responsive design. (mobile first)
-- [X] Video Shortcodes: [Youtube](https://abridge.pages.dev/video-streaming-sites/overview-embed-youtube/), [Vimeo](https://abridge.pages.dev/video-streaming-sites/overview-embed-vimeo/), [Streamable](https://abridge.pages.dev/video-streaming-sites/overview-embed-streamable/).
-- [X] Media Shortcodes: [video](https://abridge.pages.dev/overview-rich-content/#video), [img](https://abridge.pages.dev/overview-images/#img-shortcode), [imgswap](https://abridge.pages.dev/overview-images/#imgswap-shortcode), [image](https://abridge.pages.dev/overview-rich-content/#image), [gif](https://abridge.pages.dev/overview-rich-content/#gif), [audio](https://abridge.pages.dev/overview-rich-content/#audio).
-- [X] Other Shortcodes: [showdata](https://abridge.pages.dev/overview-showdata/), [katex](https://abridge.pages.dev/overview-math/#usage-1).
+- Perfect [Lighthouse](https://pagespeed.web.dev/report?url=abridge.pages.dev), [YellowLabTools](https://yellowlab.tools/), and [Observatory](https://observatory.mozilla.org/analyze/abridge.pages.dev) scores.
+- [PWA support](https://abridge.pages.dev/overview-abridge/#pwa-progressive-web-app) (Progressive Web Application).
+- All JavaScript can be [fully disabled](https://abridge.pages.dev/overview-abridge/#javascript-files).
+- Dark, Light, Auto, and Switcher themes. (colors can be customized, css variables)
+- Code [syntax highlighting](https://abridge.pages.dev/overview-code-blocks/). (colors can be customized, css variables)
+- Numbered code blocks with [line highlighting](https://abridge.pages.dev/overview-code-blocks/#toml).
+- Entirely Offline Site by using the PWA **or** by setting `offline = true` in `config.toml` (full search support).
+- Multi-language support.
+- Search support. ([elasticlunr](https://abridge.pages.dev/), [pagefind](https://abridge-pagefind.pages.dev/), [tinysearch](https://abridge-tinysearch.pages.dev/))
+- Search Suggestions navigation keys, `/` focus, `arrow` move, `enter` select, `escape` close.
+- Search Results Page, type search query then hit `Enter Key` or `click` the search button icon.
+- [SEO](https://abridge.pages.dev/overview-abridge/#seo-and-header-tags) support. (Search Engine Optimization)
+- [Pagination](https://abridge.pages.dev/overview-abridge/#pagination) with numbered paginator on index.
+- Title Based Previous and Next Article links at bottom of Article.
+- Table of Contents in page Index (Optional, clickable links)
+- Recent Posts Block. (Optional)
+- Back to Top button. (uses css only)
+- Code Blocks copy button.
+- Email link in footer obfuscation. (anti-spam)
+- [KaTeX](https://katex.org/) support.
+- [Archive page](https://abridge.pages.dev/archive/).
+- [Tags](https://abridge.pages.dev/tags/).
+- Categories. (similar to Tags, disabled/commented out by default)
+- Social icon links in footer.
+- Responsive design. (mobile first)
+- Video Shortcodes: [Youtube](https://abridge.pages.dev/video-streaming-sites/overview-embed-youtube/), [Vimeo](https://abridge.pages.dev/video-streaming-sites/overview-embed-vimeo/), [Streamable](https://abridge.pages.dev/video-streaming-sites/overview-embed-streamable/).
+- Media Shortcodes: [video](https://abridge.pages.dev/overview-rich-content/#video), [img](https://abridge.pages.dev/overview-images/#img-shortcode), [imgswap](https://abridge.pages.dev/overview-images/#imgswap-shortcode), [image](https://abridge.pages.dev/overview-rich-content/#image), [gif](https://abridge.pages.dev/overview-rich-content/#gif), [audio](https://abridge.pages.dev/overview-rich-content/#audio).
+- Other Shortcodes: [showdata](https://abridge.pages.dev/overview-showdata/), [katex](https://abridge.pages.dev/overview-math/#usage-1).
 
 **[Complete Documentation is available here](https://abridge.pages.dev/overview-abridge/)**
 

diff --git a/sass/abridge.scss b/sass/abridge.scss
@@ -1241,10 +1241,8 @@ $coderoundhighlight: false !default;//round corners on highlighted code blocks
       visibility: hidden;
       overflow: hidden;
     }
-    summary {// Series: aligns item with the rest of the list, and color differently.
-      margin-left: -1em;
-      margin-bottom: .2rem;
-      color: var(--c4);
+    summary {
+      filter: brightness(.7);
     }
 
   }

diff --git a/templates/macros/macros.html b/templates/macros/macros.html
@@ -15,9 +15,9 @@
 {%- set uglyurls = config.extra.uglyurls | default(value=false) -%}
 {%- if config.extra.search_library %}{%- if config.extra.search_library == "offline" %}{% set uglyurls = true %}{% endif %}{% endif %}
   {%- if inner.content == page.content %}
-      <li><a class="scur" href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a></li>
+      <a class="scur" href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a><br>
     {% else %}
-      <li><a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a></li>
+      <a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a><br>
   {%- endif %}
 {%- endmacro %}
 

diff --git a/templates/page.html b/templates/page.html
@@ -60,17 +60,15 @@
 
     <div class="block">
       <div class="blockdiv">
-        <a class="b s150" href="{{ tag.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ tag.name }} ({{ parts_string }})</a>
-        <ol>
+        <a class="b s150" href="{{ tag.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ tag.name }} ({{ parts_string }})</a><br>
         {%- for inner in tag.pages | sort(attribute="date") %}
           {%- if inner.content == page.content %}
-            <li><a class="scur" href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a></li>
+            <a class="scur" href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a><br>
             {%- set_global current_section_index = loop.index0 %} {# Finds the current section, needed for pagination logic later #}
           {% else %}
-            <li><a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a></li>
+            <a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a><br>
           {%- endif %}
         {%- endfor %}
-        </ol>
       </div>
     </div>
     {%- endif %}
@@ -105,8 +103,7 @@
       {%- if page.extra.series %}
       {%- set num_extra_pages = config.extra.series_items | default(value=9) %}
       <div class="blockdiv">
-        <a class="b s150" href="{{ tag.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ parts_string }}</a>
-        <ol>
+        <a class="b s150" href="{{ tag.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ parts_string }}</a><br>
         {%- if tag.page_count > num_extra_pages and num_extra_pages > 0 %}
           {%- set sorted_array = tag.pages | sort(attribute="date") %}
           {%- set num_pages = tag.page_count %}
@@ -121,7 +118,7 @@
             </details>
             <div class="hidden_li">
               {%- for inner in sorted_array | slice(start=1, end=(current_section_index - 2)) %}
-                <li><a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a></li>
+                <a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a><br>
               {%- endfor %}
             </div>
           {%- endif %}
@@ -135,7 +132,7 @@
 
           {# Shows two pages before current page #}
           {%- for inner in sorted_array | slice(start=num, end=current_section_index) %}
-            <li><a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a></li>
+            <a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a><br>
           {%- endfor %}
 
           {# Shows the current page #}
@@ -151,16 +148,16 @@
           {%- endif %}
 
           {%- for inner in sorted_array | slice(start=(current_section_index + 1), end=num ) %}
-            <li><a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a></li>
-          {%- endfor %}
+            <a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a><br>
+          {% endfor %}
 
           {%- if current_section_index < num_pages - 4 %}
             <details>
               <summary>{{ macros::translate(key="more", default="more", i18n=i18n) | title }}...</summary>
             </details>
             <div class="hidden_li">
               {%- for inner in sorted_array | slice(start=(current_section_index + 3), end=(num_pages - 1)) %}
-                <li><a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a></li>
+                <a href="{{ inner.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ inner.title }}</a><br>
               {%- endfor %}
             </div>
           {%- endif %}
@@ -174,7 +171,6 @@
             {{ macros::series_link(inner=inner, page=page, config=config) }}
           {%- endfor %}
         {%- endif %}
-        </ol>
       </div>
       {%- endif %}