{% extends "layout.html" %}

{% block htmltitle %}<title>Styles{{ titlesuffix }}</title>{% endblock %}

{% block body %}
<style>
.style-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
h2 {
    margin-top: 2em;
}
.style-gallery h3 {
    margin-bottom: 0.1em;
}
.style-gallery pre {
    background-color: inherit;
}
</style>
{{ body }}

<h1>Styles</h1>

<p>Pygments comes with the following builtin styles.
For more information about styles refer to <a href="{{ pathto('docs/styles') }}">the documentation</a>.
</p>

<div class=style-gallery>
{% for style in styles_aa %}
    <div>
    <h3 id="{{style.name}}">{{style.name}}</h3>
    {{style.html|safe}}
    </div>
{% endfor %}
</div>

<h2>Styles with a lower contrast</h2>
<p>
The following styles do not meet the <a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html">WCAG 2.1 AA contrast minimum</a>,
so they might be difficult to read for people with suboptimal vision.
If you want your highlighted code to be well readable for other people, you
should use one of the earlier styles instead.
</p>
<div class=style-gallery>
    {% for style in styles_sub_aa %}
    <div>
    <h3 id="{{style.name}}">{{style.name}}</h3>
    {{style.html|safe}}
    </div>
    {% endfor %}
</div>

{% endblock %}