{% extends "common/base.html" %}
{% block title %}Ark Pixel Inherited - Alphabet {{ font_config.font_size }}px {{ width_mode }}{% endblock %}
{% block style %}
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        {% with font_family = 'ark-pixel-inherited-' ~ font_config.font_size ~ 'px-' ~ width_mode %}
        @font-face {
            font-family: {{ font_family }};
            src: url("{{ font_family }}.woff2?r={{ build_random_key }}");
        }
        {% endwith %}
        {% if width_mode == 'monospaced' %}
        body {
            color: #4b4b4b;
            font-family: ark-pixel-inherited-{{ font_config.font_size }}px-{{ width_mode }}, sans-serif;
            font-size: {{ font_config.font_size * 4 }}px;
            line-height: {{ font_config.font_size * 4 }}px;
            word-break: break-all;
            background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 8%, transparent 8%), linear-gradient(180deg, transparent 96%, rgba(0, 0, 0, 0.1) 96%);
            background-size: {{ font_config.font_size * 2 }}px {{ font_config.font_size * 4 }}px;
        }
        {% else %}
        body {
            color: #4b4b4b;
            font-family: ark-pixel-inherited-{{ font_config.font_size }}px-{{ width_mode }}, sans-serif;
            font-size: {{ font_config.font_size * 4 }}px;
            line-height: {{ font_config.line_height * 4 }}px;
            word-break: break-all;
            background-image: linear-gradient(180deg, transparent 96%, rgba(0, 0, 0, 0.1) 96%);
            background-size: auto {{ font_config.line_height * 4 }}px;
        }
        {% endif %}
    </style>
{% endblock %}
{% block body %}
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
    <br>
    abcdefghijklmnopqrstuvwxyz
    <br>
    0123456789 !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~
    <br>
    {{ alphabet }}
{% endblock %}