index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

---
layout: homepage
title: A collection of web pages weighing in less than 1MB
summary: Listing all web pages under 1MB in total size
---

<div id="header">
    <p class="center"><strong>1MB Club</strong> is a growing collection of performance-focused web pages weighing less than 1 megabyte.</p>
    <p class="center"><strong>Help keep the lights on!</strong><br> Consider <a href="/hall-of-fame">donating to cover hosting and domain renewal costs</a>!</p>
</div>

<div id="main">
    {% assign websites = site.data.sites | sort: 'size' %}
    <h2 id="members">Official Members</h2>
    <img class="http-badge" src="/public/http-badge.svg" alt="HTTP badge" />
    <p>&nbsp;&nbsp;Items marked with this <i>clickable</i> badge support out-of-date browsers via HTTP (<a href="/blog/https-redirects">Why?</a>)</p>
    <hr/>
    <table class="members">
        <thead align="left">
            <tr>
                <th>URL</th>
                <th align="right">Size (KB)</th>
            </tr>
        </thead>
        <tbody id="container">
        {% for item in websites %}
            {% assign pct = item.size | times: 100.0 | divided_by: 1024.0 %}
            {% if item.size < 410 %}{% assign c = "lightgreen" %}
            {% elsif item.size < 717 %}{% assign c = "orange" %}
            {% else %}{% assign c = "crimson" %}{% endif %}
            <tr style="--fill:{{ item.size | times: 100.0 | divided_by: 1024.0 }}%;--c:{{ c }}">
                <td>
                    {% if item.http == true %}
                        <a href="http://{{ item.domain }}">
                            <img class="http-badge" src="/public/http-badge.svg" alt="HTTP badge" />
                        </a>&nbsp;
                    {% endif %}
                    <a class="site" href="https://{{ item.domain }}">{{ item.domain }}</a>
                </td>
                <td align="right"><span>{{ item.size }}</span></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <div class="fame">
        <h2 id="hof">🏆 Hall of Fame 🏆</h2>
        <p><strong>Supporters of a leaner web!</strong></p>
        <p>
            {% for item in websites %}
                {% if item.hof == true %}
                <span><a href="https://{{ item.domain }}">{{ item.domain }}</a></span>
                {% endif %}
            {% endfor %}
        </p>
        <p>These 1MB Club members donated to this project and are now immortalized into the "Hall of Fame"</p>
        <p><strong>Looking to join the Hall of Fame?</strong><br/><a href="/hall-of-fame">Become a supporter today &rarr;</a></p>
    </div>
</div>