250kb-club/templates/page.html

{% extends "base.html" %} {% block content %}
<main id="member">
    <h1 id="title" class="p-name dated">{{ page.title }}</h1>
    <p class="big center">Proud member of the exclusive 250KB&nbsp;Club!</p>
    <p>
        <time
            class="dt-published"
            datetime="{{ page.date }}"
            pubdate=""
            itemprop="datePublished"
            content="{{ page.date }}"
        >
            Added: {{ page.date }}
        </time>
        |
        <time
            class="dt-updated"
            datetime="{{ page.updated }}"
            pubdate=""
            itemprop="dateUpdated"
            content="{{ page.updated }}"
        >
            Last updated: {{ page.updated }}
        </time>
    </p>
    <p class="e-content">
        <a
            rel="noopener nofollow"
            href="{{ page.extra.source }}"
            target="_blank"
            >{{ page.title }}</a
        >
        is a member of the exclusive 250KB Club. The page weighs
        <strong>
            {% if page.extra.size == 0 %} under 1kb {% else %} only {{
            page.extra.size }}kb {% endif %}
        </strong>
        and has a content-to-bloat ratio of
        <strong>{{ page.extra.ratio }}%</strong>.
    </p>
    <p>
        The owner of this page is now entitled to add one of those shiny badges
        to their page. But, even though I tried to make them as small as
        possible, a badge will add some kilobytes to the page weight. A code
        snipped can be found by clicking on the respective badge.
    </p>
    <p class="badges">
        The badges can either be downloaded and served as part of the website or
        linked directly from 250KB.club. The latter might save a few users some
        bandwidth if the badge is already cached. On the other hand this gives
        the 250KB.club server a log entry for
        <i>every visitor of <strong>your</strong> page</i>. I'm not interested
        in those logs but you still have to trust my word. So decide for
        yourself.
    </p>

    <p>
        <details>
            <summary>
                <img alt="simple badge, dark" src="/simple_badge_dark.png" />
                (1.4kB)
            </summary>
            <pre><code>
    &lt;a title="250KB Club page" href="https://250kb.club/{{ page.slug }}"&gt;
      &lt;img
        alt="badge: proud member of the 250KB Club"
        src="https://250kb.club/simple_badge_dark.png"
      /&gt;
    &lt;/a&gt;
      </code></pre>
        </details>
    </p>
    <p>
        <details>
            <summary>
                <img
                    alt="simple badge, bright"
                    src="/simple_badge_bright.png"
                />
                (1.7kB)
            </summary>
            <pre><code>
    &lt;a title="250KB Club page" href="https://250kb.club/{{ page.slug }}"&gt;
      &lt;img
        alt="badge: proud member of the 250KB Club"
        src="https://250kb.club/simple_badge_bright.png"
      /&gt;
    &lt;/a&gt;
      </code></pre>
        </details>
    </p>
    <p>
        <details>
            <summary>
                <img alt="color badge, bright" src="/color_badge_bright.png" />
                (4.0kB)
            </summary>
            <pre><code>
    &lt;a title="250KB Club page" href="https://250kb.club/{{ page.slug }}"&gt;
      &lt;img
        alt="badge: proud member of the 250KB Club"
        src="https://250kb.club/color_badge_bright.png"
      /&gt;
    &lt;/a&gt;
      </code></pre>
        </details>
    </p>
    <p>
        <details>
            <summary>
                <img alt="color badge, dark" src="/color_badge_dark.png" />
                (5.7kB)
            </summary>
            <pre><code>
    &lt;a title="250KB Club page" href="https://250kb.club/{{ page.slug }}"&gt;
      &lt;img
        alt="badge: proud member of the 250KB Club"
        src="https://250kb.club/color_badge_dark.png"
      /&gt;
    &lt;/a&gt;
      </code></pre>
        </details>
    </p>

    <p><a href="/">back</a></p>

</main>
{% endblock content %}