dan/1mb-club
1
0
Fork 0
mirror of https://github.com/danbulant/1mb-club synced 2026-06-24 17:11:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Strip most of the default CSS for a more streamlined, HTML focused experience

Browse source
This commit is contained in:
Bradley Taunt 2021-05-17 09:23:08 -04:00
parent 057f4434ed
commit 7d502cea33
3 changed files with 83 additions and 190 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Gemfile
View file

@ -28,3 +28,5 @@ end
# Performance-booster for watching directories on Windows
gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
gem "webrick", "~> 1.7"

138
index.html
View file

@ -8,23 +8,36 @@ summary: Listing all websites under 1MB in total size
<h1>1MB Club</h1>
<p>The internet has become a <em>bloated mess</em>. Massive javascript libraries. Countless client-side queries. Overly complex frontend frameworks.</p>
<p>These things are a <strong>cancerous growth</strong> on the web.</p>
<p>But we can make a difference - no matter how small it may seem. <em>1MB Club</em> is a growing collection of performance-focused web pages found across the internet. The one and only rule for a web page to qualify as a member:</p>
<p>But we can make a difference - no matter how small it may seem. <em>1MB Club</em> is a growing collection of performance-focused web pages found across the internet.</p>
<p><strong>The one and only rule for a web page to qualify as a member:</strong></p>
<ol>
<li>Total website size (not <i>just</i> transfered data) must not exceed 1 megabyte</li>
</ol>
<blockquote>
<h3>How to Submit</h3>
<hr>
<details>
<summary><strong>How can I submit a website?</strong></summary>
<p>Please follow the instructions on the main <a target="_blank" href="https://github.com/bradleytaunt/1mb-club">Github project repo</a>.</p>
</blockquote>
<h3>Support</h3>
<p>If you are feeling generous, I would greatly appreciate any donations to help support the site.</p>
<ol>
<li>BTC: <strong><code>3JGsvjgxamQHi4VCALER4rXvnvzdWUaQGg</code></strong></li>
<li>Or simply <a href="https://www.buymeacoffee.com/WQTMtn7ir">buy me a coffee</a></li>
</ol>
<h3>Looking for a more <em>extreme</em> club?</h3>
<p>Take a look and checkout the even more exclusive membership collection at the <a href="https://xhtml.club">XHTML Club</a>.</p>
<br><hr><br>
</details>
<hr>
<details>
<summary><strong>How can I help support this project?</strong></summary>
<p>If you are feeling generous, I would greatly appreciate any donations to help support the site.</p>
<ol>
<li>BTC: <strong><code>3JGsvjgxamQHi4VCALER4rXvnvzdWUaQGg</code></strong></li>
<li>Or simply <a href="https://www.buymeacoffee.com/WQTMtn7ir">buy me a coffee</a></li>
</ol>
</details>
<hr>
<details>
<summary><strong>Looking for a <i>more extreme</i> club?</strong></summary>
<p>Take a look and checkout the even more exclusive membership collection at the <a href="https://xhtml.club">XHTML Club</a>.</p>
</details>
<hr>
<br>
</header>
<main>
<h2>Official Members</h2>
<span>Jump to: &nbsp;</span>
<a href="#50">&#60;50KB</a><span>&nbsp;&nbsp;&middot;&nbsp;</span>
<a href="#100">&#60;100KB</a><span>&nbsp;&nbsp;&middot;&nbsp;</span>
@ -32,74 +45,83 @@ summary: Listing all websites under 1MB in total size
<a href="#512">&#60;512KB</a><span>&nbsp;&nbsp;&middot;&nbsp;</span>
<a href="#700">&#60;700KB</a><span>&nbsp;&nbsp;&middot;&nbsp;</span>
<a href="#1000"><em>Just Under</em> 1MB</a>
</header>
<main>
<ul>
<hr><br>
<table>
<thead align="left">
<tr>
<th>URL</th>
<th align="right">Size (KB)</th>
</tr>
</thead>
<tbody>
{% assign site_items = site.site_listings | sort: 'size' %}
<h3 id="50"><50KB</h3>
<tr><td><br></td><td><br></td></tr>
<tr><td id="50">&lt;50KB</td><td></td></tr>
{% for item in site_items %}
{% if item.size <= 50 %}
<li>
<span class="before" style="--data-size:{{ item.size }};"></span>
<span class="after">{{ item.size }} KB</span>
<a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a>
</li>
<tr>
<td><a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a></td>
<td align="right"><span>{{ item.size }}</span></td>
</tr>
{% endif %}
{% endfor %}
<h3 id="100"><100KB</h3>
<tr><td><br></td><td><br></td></tr>
<tr><td id="100">&lt;100KB</td><td></td></tr>
{% for item in site_items %}
{% if item.size >= 50 and item.size <=100 %}
<li>
<span class="before" style="--data-size:{{ item.size }};"></span>
<span class="after">{{ item.size }} KB</span>
<a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a>
</li>
{% if item.size >= 50.1 and item.size <=100 %}
<tr>
<td><a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a></td>
<td align="right"><span>{{ item.size }}</span></td>
</tr>
{% endif %}
{% endfor %}
<h3 id="250"><250KB</h3>
<tr><td><br></td><td><br></td></tr>
<tr><td id="250">&lt;250KB</td><td></td></tr>
{% for item in site_items %}
{% if item.size >= 100 and item.size <=250 %}
<li>
<span class="before" style="--data-size:{{ item.size }};"></span>
<span class="after">{{ item.size }} KB</span>
<a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a>
</li>
{% if item.size >= 100.1 and item.size <=250 %}
<tr>
<td><a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a></td>
<td align="right"><span>{{ item.size }}</span></td>
</tr>
{% endif %}
{% endfor %}
<h3 id="512"><512KB</h3>
<tr><td><br></td><td><br></td></tr>
<tr><td id="512">&lt;512KB</td><td></td></tr>
{% for item in site_items %}
{% if item.size >= 250 and item.size <=512 %}
<li>
<span class="before" style="--data-size:{{ item.size }};"></span>
<span class="after">{{ item.size }} KB</span>
<a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a>
</li>
{% if item.size >= 250.1 and item.size <=512 %}
<tr>
<td><a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a></td>
<td align="right"><span>{{ item.size }}</span></td>
</tr>
{% endif %}
{% endfor %}
<h3 id="700"><700KB</h3>
<tr><td><br></td><td><br></td></tr>
<tr><td id="700">&lt;700KB</td><td></td></tr>
{% for item in site_items %}
{% if item.size >= 512 and item.size <=700 %}
<li>
<span class="before" style="--data-size:{{ item.size }};"></span>
<span class="after">{{ item.size }} KB</span>
<a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a>
</li>
{% if item.size >= 512.1 and item.size <=700 %}
<tr>
<td><a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a></td>
<td align="right"><span>{{ item.size }}</span></td>
</tr>
{% endif %}
{% endfor %}
<h3 id="1000"><em>Just Under</em> 1MB</h3>
<tr><td><br></td><td><br></td></tr>
<tr><td id="1000"><i>Just Under</i> 1MB</td><td></td></tr>
{% for item in site_items %}
{% if item.size >= 700 and item.size <=1000 %}
<li>
<span class="before" style="--data-size:{{ item.size }};"></span>
<span class="after">{{ item.size }} KB</span>
<a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a>
</li>
{% if item.size >= 700.1 and item.size <=1000 %}
<tr>
<td><a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a></td>
<td align="right"><span>{{ item.size }}</span></td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</main>
<br>
<hr>

133
style.css
View file

@ -1,134 +1,3 @@
* {
box-sizing: border-box;
}
body {
font: 18px/1.5 "Helvetica", "Arial", sans-serif;
margin: 0 0 4rem 0;
padding: 0 10px;
}
h1,h2,h3,h4,h5,h6 {
line-height: 1.2;
}
header,main,footer {
margin: 0 auto;
max-width: 800px;
width: 100%;
}
a,a:visited {
color: currentColor;
}
a:hover,a:focus {
color: blue;
}
.referral {
background: #27ae60;
color: white;
margin: 1rem 0 2rem;
padding: 10px;
text-align: center;
}
.referral p {
margin: 0;
padding: 0;
}
.referral a, .referral a:visited {
color: white;
font-weight: 600;
}
.referral a:hover, .referral a:focus {
color: black;
}
ul {
list-style: none;
margin: 3rem 0 0 0;
padding: 0;
}
ul li {
background: rgba(0,0,0,0.05);
line-height: 1;
margin: 0 0 0.5rem 0;
padding: 15px 10px 12px;
position: relative;
}
ul li span.before,
ul li span.after {
left: 0;
position: absolute;
top: 0;
}
ul li span.before {
background: rgba(0,0,0,0.1);
height: 100%;
width: calc(var(--data-size)/1000 * 100%);
z-index: 0;
}
ul li span.after {
left: auto;
opacity: 0.6;
right: 10px;
top: auto;
}
ul li a {
font-weight: bold;
position: relative;
z-index: 2;
}
blockquote {
background: blanchedalmond;
border-left: 5px solid burlywood;
margin: 3rem 0 2rem;
padding: 20px;
}
blockquote h3 {
margin-top: 0;
}
blockquote p {
margin: 0;
}
main h3 {
margin-top: 3rem;
padding-top: 1rem;
}
footer {
border-top: 1px solid lightgrey;
margin: 3rem auto 0;
padding: 0.5rem 0 0;
}
footer p {
font-size: 85%;
}
/* Dark Theme */
@media (prefers-color-scheme: dark) {
body {
background: #2d2d2d;
color: white;
}
blockquote {
background: #191919;
border-left: 5px solid black;
}
ul li {
background: rgba(0,0,0,0.2);
}
ul li span.before {
background: rgba(0,0,0,0.5);
}
}
@media(max-width:500px) {
body {
font: 16px/1.5 "Helvetica", "Arial", sans-serif;
margin: 0 0 4rem 0;
padding: 0 10px;
}
body{background:#191919;filter:invert(1);}
}