{% 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-published" datetime="{{ page.date }}" pubdate="" itemprop="datePublished" content="{{ page.date }}">
      Last updated: {{ page.date }}
    </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>
    They are now entitled to add one of those shiny badges to your page. But don't forget, even though I tried to make them as small as possibe, a badge will add some kilobytes to your 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 by yourself 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>

  <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>

  <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>

  <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>

  <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><a href="/">back</a></p>
</main>
{% endblock content %}