From 9e052f0a552497be4265ab2ca3a977f6cc15b224 Mon Sep 17 00:00:00 2001 From: Jieiku <106644+Jieiku@users.noreply.github.com> Date: Thu, 22 Aug 2024 21:08:47 -0700 Subject: [PATCH] Accessibility --- README.md | 56 ++++++++++++++++++------------------ sass/abridge.scss | 6 ++-- templates/macros/macros.html | 4 +-- templates/page.html | 22 ++++++-------- 4 files changed, 41 insertions(+), 47 deletions(-) diff --git a/README.md b/README.md index a2c29116..b2a9bd33 100644 --- 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 index 7c84668e..c4523bda 100644 --- 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 index fd551f4a..54ace325 100644 --- 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 %} -
  • {{ inner.title }}
    • + {{ inner.title }}
    {% else %} -
  • {{ inner.title }}
    • + {{ inner.title }}
    {%- endif %} {%- endmacro %} diff --git a/templates/page.html b/templates/page.html index 24c628a8..cf8016b6 100644 --- a/templates/page.html +++ b/templates/page.html @@ -60,17 +60,15 @@
    - {{ tag.name }} ({{ parts_string }}) -
      + {{ tag.name }} ({{ parts_string }})
      {%- for inner in tag.pages | sort(attribute="date") %} {%- if inner.content == page.content %} -
    1. {{ inner.title }}
      2. + {{ inner.title }}
      {%- set_global current_section_index = loop.index0 %} {# Finds the current section, needed for pagination logic later #} {% else %} -
    2. {{ inner.title }}
      3. + {{ inner.title }}
      {%- endif %} {%- endfor %} -
    {%- endif %} @@ -105,8 +103,7 @@ {%- if page.extra.series %} {%- set num_extra_pages = config.extra.series_items | default(value=9) %}
    - {{ parts_string }} -
      + {{ parts_string }}
      {%- 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 @@
      {%- for inner in sorted_array | slice(start=1, end=(current_section_index - 2)) %} -
    1. {{ inner.title }}
      2. + {{ inner.title }}
      {%- endfor %}
      {%- endif %} @@ -135,7 +132,7 @@ {# Shows two pages before current page #} {%- for inner in sorted_array | slice(start=num, end=current_section_index) %} -
    2. {{ inner.title }}
      3. + {{ inner.title }}
      {%- endfor %} {# Shows the current page #} @@ -151,8 +148,8 @@ {%- endif %} {%- for inner in sorted_array | slice(start=(current_section_index + 1), end=num ) %} -
    3. {{ inner.title }}
      4. - {%- endfor %} + {{ inner.title }}
      + {% endfor %} {%- if current_section_index < num_pages - 4 %}
      @@ -160,7 +157,7 @@
      {%- for inner in sorted_array | slice(start=(current_section_index + 3), end=(num_pages - 1)) %} -
    4. {{ inner.title }}
      5. + {{ inner.title }}
      {%- endfor %}
      {%- endif %} @@ -174,7 +171,6 @@ {{ macros::series_link(inner=inner, page=page, config=config) }} {%- endfor %} {%- endif %} -
    {%- endif %}