Accessibility fixes

pull/1/head
mat ess 2022-08-14 13:05:50 -04:00
parent bbd921e1c9
commit 16b4af073c
5 changed files with 87 additions and 73 deletions

View File

@ -103,6 +103,12 @@ footer {
code { code {
color: var(--text-0); color: var(--text-0);
} }
code:hover {
background-color: var(--primary-color);
color: var(--hover-color);
border-radius: 0;
}
} }
// Different sized headers // Different sized headers

View File

@ -3,7 +3,7 @@
--text-1: rgba(0, 0, 0, 66%); --text-1: rgba(0, 0, 0, 66%);
--bg-0: #fff; --bg-0: #fff;
--bg-1: rgba(169, 169, 169, 30%); --bg-1: rgba(210, 210, 210, 0.55);
--primary-color: lightcoral; --primary-color: lightcoral;
--hover-color: white; --hover-color: white;

View File

@ -9,11 +9,15 @@
{% include "partials/nav.html" %} {% include "partials/nav.html" %}
{# Post page is the default #} {# Post page is the default #}
<div class="inner"> <main class="inner">
{% block main_content %} {% block main_content %}
Nothing here?! Nothing here?!
{% endblock main_content %} {% endblock main_content %}
</div> </main>
{% block trailing_content %}
{% endblock trailing_content %}
{% include "partials/footer.html" %} {% include "partials/footer.html" %}
</div> </div>

View File

@ -55,86 +55,88 @@
{% endmacro content %} {% endmacro content %}
{% macro content(page) %} {% macro content(page) %}
<main> <article>
<article> <div class="title">
<div class="title"> {{ post_macros::page_header(title=page.title) }}
{{ post_macros::page_header(title=page.title) }}
{% if page.date %} {% if page.date %}
<div class="meta"> <div class="meta">
Posted on <time>{{ page.date | date(format="%Y-%m-%d") }}</time> Posted on <time>{{ page.date | date(format="%Y-%m-%d") }}</time>
{% if page.draft %} {% if page.draft %}
<span class="draft-label">DRAFT</span> <span class="draft-label">DRAFT</span>
{% endif %}
</div>
{% if page.updated %}
<div class="meta">
Updated on <time>{{ page.updated | date(format="%Y-%m-%d") }}</time>
</div>
{% endif %}
<div class="meta">
{{ page.word_count }} words, {{ page.reading_time }} minute read
</div>
{% endif %} {% endif %}
</div> </div>
{% if page.updated %}
{% if page.extra.tldr %} <div class="meta">
<div class="tldr"> Updated on <time>{{ page.updated | date(format="%Y-%m-%d") }}</time>
<strong>tl;dr:</strong>
{{ page.extra.tldr }}
</div> </div>
{% endif %} {% endif %}
<div class="meta">
{{ page.word_count }} words, {{ page.reading_time }} minute read
</div>
{% endif %}
</div>
{# Optional table of contents #} {% if page.extra.tldr %}
{% if config.extra.toc | default(value=false) %} <div class="tldr">
{% if page.toc %} <strong>tl;dr:</strong>
<h2>Table of Contents</h2> {{ page.extra.tldr }}
<ul> </div>
{% for h1 in page.toc %} {% endif %}
<li>
<a href="{{ h1.permalink | safe }}">{{ h1.title }}</a> {# Optional table of contents #}
{% if h1.children %} {% if config.extra.toc | default(value=false) %}
{% if page.toc %}
<h2>Table of Contents</h2>
<ul>
{% for h1 in page.toc %}
<li>
<a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
{% if h1.children %}
<ul>
{% for h2 in h1.children %}
<li>
<a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
</li>
{% if h2.children %}
<ul> <ul>
{% for h2 in h1.children %} {% for h3 in h2.children %}
<li> <li>
<a href="{{ h2.permalink | safe }}">{{ h2.title }}</a> <a href="{{ h3.permalink | safe }}">{{ h3.title }}</a>
</li> </li>
{% if h2.children %}
<ul>
{% for h3 in h2.children %}
<li>
<a href="{{ h3.permalink | safe }}">{{ h3.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% endfor %} {% endfor %}
</ul> </ul>
{% endif %} {% endif %}
</li> {% endfor %}
{% endfor %} </ul>
</ul> {% endif %}
{% endif %} </li>
{% endif %} {% endfor %}
</ul>
{% endif %}
{% endif %}
<section class="body"> <section class="body">
{{ page.content | safe }} {{ page.content | safe }}
</section> </section>
{% if page.taxonomies and page.taxonomies.tags %} {% if page.taxonomies and page.taxonomies.tags %}
<div class="post-tags"> <div class="post-tags">
<span class="meta" id="tagged-with-label">this post is tagged with</span> <span class="meta" id="tagged-with-label">this post is tagged with</span>
<nav class="nav tags" aria-labelledby="tagged-with-label"> <nav class="nav tags" aria-labelledby="tagged-with-label">
<ul class="tags"> <ul class="tags">
{% for tag in page.taxonomies.tags %} {% for tag in page.taxonomies.tags %}
<li><a href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}">{{ tag }}</a></li> <li>
{% endfor %} <a href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}">
</ul> #{{ tag }}
</nav> </a>
</div> </li>
{% endif %} {% endfor %}
</article> </ul>
</main> </nav>
</div>
{% endif %}
</article>
{% endmacro content %} {% endmacro content %}

View File

@ -3,7 +3,7 @@
{% block main_content %} {% block main_content %}
{{ post_macros::page_header(title="blog posts") }} {{ post_macros::page_header(title="blog posts") }}
<main class="list"> <div class="list">
{%- if paginator %} {%- if paginator %}
{%- set show_pages = paginator.pages -%} {%- set show_pages = paginator.pages -%}
{% else %} {% else %}
@ -12,8 +12,10 @@
{% endif -%} {% endif -%}
{{ post_macros::list_posts(pages=show_pages) }} {{ post_macros::list_posts(pages=show_pages) }}
</main> </div>
{% endblock main_content %}
{% block trailing_content %}
{% if paginator %} {% if paginator %}
<ul class="pagination"> <ul class="pagination">
{% if paginator.previous %} {% if paginator.previous %}
@ -29,4 +31,4 @@
{% endif %} {% endif %}
</ul> </ul>
{% endif %} {% endif %}
{% endblock main_content %} {% endblock trailing_content %}