garrit
/
512kb.club
mirror of https://github.com/kevquirk/512kb.club
1
0
Fork 0
Code Issues 1 Projects Releases Wiki Activity
Browse Source

Add Editor Config File and clean all files based on .editorconfig

pull/378/head
Khaldoon Mutahar 3 years ago
parent
c17801077c
commit
d54e49660c
No known key found for this signature in database
GPG Key ID: 82BE371CB63A1D69
17 changed files with 502 additions and 441 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      .editorconfig
  2. 42
      _config.yml
  3. 18
      _includes/blue-team.html
  4. 23
      _includes/faq-01.html
  5. 32
      _includes/faq-02.html
  6. 9
      _includes/faq-03.html
  7. 16
      _includes/faq-04.html
  8. 16
      _includes/faq-05.html
  9. 8
      _includes/faq-06.html
  10. 19
      _includes/faq-07.html
  11. 18
      _includes/green-team.html
  12. 18
      _includes/orange-team.html
  13. 76
      _layouts/default.html
  14. 2
      _redirects
  15. 533
      assets/css/style.css
  16. 94
      index.md
  17. 2
      netlify.toml

17
.editorconfig
Unescape View File

@ -0,0 +1,17 @@
# http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.gemspec]
indent_size = 2
[*.yml]
indent_size = 2

42
_config.yml
Unescape View File

@ -1,21 +1,21 @@
plugins:
- jekyll-sitemap
- jekyll-seo-tag
# SEO Stuff
author: Kev Quirk
title: 512KB Club
tagline: A showcase of lightweight websites.
description: The 512KB Club is an exclusive list of web pages weighing less than 512 kilobytes.
lang: en
locale: en_GB
url: "https://512kb.club"
baseurl: ""
permalink: :title
# Syntax Highlighting
highlighter: rouge
# Netlify redirects
include:
- _redirects
plugins:
- jekyll-sitemap
- jekyll-seo-tag
# SEO Stuff
author: Kev Quirk
title: 512KB Club
tagline: A showcase of lightweight websites.
description: The 512KB Club is an exclusive list of web pages weighing less than 512 kilobytes.
lang: en
locale: en_GB
url: "https://512kb.club"
baseurl: ""
permalink: :title
# Syntax Highlighting
highlighter: rouge
# Netlify redirects
include:
- _redirects

18
_includes/blue-team.html
Unescape View File

@ -1,9 +1,9 @@
<ul class="blue">
{% for item in site.data.blue-team %}
<li>
<span class="before" style="--data-size:{{ item.size }};"></span>
<span class="after">{{ item.size }} KB</span>
<a class="site" target="blank" href="{{ item.url }}">{{ item.domain }}</a>
</li>
{% endfor %}
</ul>
<ul class="blue">
{% for item in site.data.blue-team %}
<li>
<span class="before" style="--data-size:{{ item.size }};"></span>
<span class="after">{{ item.size }} KB</span>
<a class="site" target="blank" href="{{ item.url }}">{{ item.domain }}</a>
</li>
{% endfor %}
</ul>

23
_includes/faq-01.html
Unescape View File

@ -1,13 +1,18 @@
<details>
<summary>How to join The 512KB Club</summary>
<p>If you're interested in getting your site added to <b>The 512KB Club</b>, all you need to do is follow these instructions:</p>
<summary>How to join The 512KB Club</summary>
<p>If you're interested in getting your site added to <b>The 512KB Club</b>, all you need to do is follow these
instructions:</p>
<ol>
<li>Do a <a target="blank" href="https://gtmetrix.com">GTMetrix scan</a> on your website.</li>
<li>Once complete, click on the <b>Waterfall</b> tab to make sure the <b>uncompressed</b> size of your site is less than 512KB.</li>
<li>If your site satisfies this requirement, create a pull request (<a target="blank" href="https://github.com/kevquirk/512kb.club/blob/master/README.md#how-to-create-a-pr-to-add-your-site-to-the-512kb-club">instructions here</a>) to add your site.</li>
<li>I will then review you PR and merge it into main. Once merged, your site will be added to the list.</li>
</ol>
<ol>
<li>Do a <a target="blank" href="https://gtmetrix.com">GTMetrix scan</a> on your website.</li>
<li>Once complete, click on the <b>Waterfall</b> tab to make sure the <b>uncompressed</b> size of your site is
less than 512KB.</li>
<li>If your site satisfies this requirement, create a pull request (<a target="blank"
href="https://github.com/kevquirk/512kb.club/blob/master/README.md#how-to-create-a-pr-to-add-your-site-to-the-512kb-club">instructions
here</a>) to add your site.</li>
<li>I will then review you PR and merge it into main. Once merged, your site will be added to the list.</li>
</ol>
<p class="small"><b>Note:</b> <i>I reserve the right to not add sites based on whether I think they're suitable to be added or not.</i></p>
<p class="small"><b>Note:</b> <i>I reserve the right to not add sites based on whether I think they're suitable to
be added or not.</i></p>
</details>

32
_includes/faq-02.html
Unescape View File

@ -1,23 +1,29 @@
<details>
<summary>Once you're in The 512KB Club</summary>
<p>If your site qualifies for <b>The 512KB Club</b>, I will add it to one of the following 3 teams:</p>
<summary>Once you're in The 512KB Club</summary>
<p>If your site qualifies for <b>The 512KB Club</b>, I will add it to one of the following 3 teams:</p>
<ol>
<li><b><span style="color:var(--before-green); text-shadow: 1px 1px 1px black;">The green team</span></b> is for sites with a total uncompressed size of <b>less than 100KB</b>.</li>
<li><b><span style="color:var(--before-orange); text-shadow: 1px 1px 1px black;">The orange team</span></b> is for sites with a total uncompressed size of <b>less than 250KB</b>.</li>
<li><b><span style="color:var(--before-blue); text-shadow: 1px 1px 1px black;">The blue team</span></b> is for sites with a total uncompressed size of <b>less than 512KB</b>.</li>
</ol>
<ol>
<li><b><span style="color:var(--before-green); text-shadow: 1px 1px 1px black;">The green team</span></b> is for
sites with a total uncompressed size of <b>less than 100KB</b>.</li>
<li><b><span style="color:var(--before-orange); text-shadow: 1px 1px 1px black;">The orange team</span></b> is
for sites with a total uncompressed size of <b>less than 250KB</b>.</li>
<li><b><span style="color:var(--before-blue); text-shadow: 1px 1px 1px black;">The blue team</span></b> is for
sites with a total uncompressed size of <b>less than 512KB</b>.</li>
</ol>
<p>Once you're a proud member of one of the teams, you are free to use one of the banners below on your own website. You can either save the SVG or use the code snippet below (remembering to change the name to whichever team you're in).</p>
<p>Once you're a proud member of one of the teams, you are free to use one of the banners below on your own website.
You can either save the SVG or use the code snippet below (remembering to change the name to whichever team
you're in).</p>
<p><img src="/assets/images/green-team.svg" alt="green team banner" /></p>
<p><img src="/assets/images/green-team.svg" alt="green team banner" /></p>
<p><img src="/assets/images/orange-team.svg" alt="orange team banner" /></p>
<p><img src="/assets/images/orange-team.svg" alt="orange team banner" /></p>
<p><img src="/assets/images/blue-team.svg" alt="blue team banner" /></p>
<p><img src="/assets/images/blue-team.svg" alt="blue team banner" /></p>
<pre><code>&lt;a href="https://512kb.club"&gt;&lt;img src="https://512kb.club/assets/images/green-team.svg" /&gt;&lt;/a&gt;</code></pre>
<pre><code>&lt;a href="https://512kb.club"&gt;&lt;img src="https://512kb.club/assets/images/green-team.svg" /&gt;&lt;/a&gt;</code></pre>
<p>Alternatively, you can add the banner to your site in pure HTML/CSS using <a target="blank" href="https://codepen.io/kevquirk/pen/VwmVaKm">this CodePen</a> as a guide.</p>
<p>Alternatively, you can add the banner to your site in pure HTML/CSS using <a target="blank"
href="https://codepen.io/kevquirk/pen/VwmVaKm">this CodePen</a> as a guide.</p>
</details>

9
_includes/faq-03.html
Unescape View File

@ -1,6 +1,9 @@
<details>
<summary>I've optimised some more, what now?</summary>
<p><b>The 512KB Club</b> appears to have sparked some interest in a lot of website owners and the whole thing has become somewhat of a race to the top.</p>
<summary>I've optimised some more, what now?</summary>
<p><b>The 512KB Club</b> appears to have sparked some interest in a lot of website owners and the whole thing has
become somewhat of a race to the top.</p>
<p>If you have optimised your website further and want to change your number, please log a <b>new</b> <a target="blank" href="https://github.com/kevquirk/512kb.club/issues">GitHub issue</a> ensuring the title clearly states this is an update.</p>
<p>If you have optimised your website further and want to change your number, please log a <b>new</b> <a
target="blank" href="https://github.com/kevquirk/512kb.club/issues">GitHub issue</a> ensuring the title
clearly states this is an update.</p>
</details>

16
_includes/faq-04.html
Unescape View File

@ -1,15 +1,19 @@
<details>
<summary>My site doesn't qualify, what can I do?</summary>
<p>Many sites won't qualify for the 512KB Club, but there are some quick things you could try to reduce the size of your site:</p>
<summary>My site doesn't qualify, what can I do?</summary>
<p>Many sites won't qualify for the 512KB Club, but there are some quick things you could try to reduce the size of
your site:</p>
<p><b>1. Replace custom fonts with a local font stack by replacing your <code>font-family</code> declerations in your CSS to one of the following:</b></p>
<pre><code># Sans-serif font stack
<p><b>1. Replace custom fonts with a local font stack by replacing your <code>font-family</code> declerations in
your CSS to one of the following:</b></p>
<pre><code># Sans-serif font stack
font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
# Serif font stack
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;</code></pre>
<p><b>2. Optimise any images you have on your page.</b> <a target="blank" href="https://shortpixel.com">Short Pixel</a> is a great service for this.</p>
<p><b>2. Optimise any images you have on your page.</b> <a target="blank" href="https://shortpixel.com">Short
Pixel</a> is a great service for this.</p>
<p><b>3. If all else fails</b> and your site is pretty close the 512KB, but not quite there, why not apply for Bradley Taunt's <a target="blank" href="https://1mb.club">1MB Club</a> instead?</p>
<p><b>3. If all else fails</b> and your site is pretty close the 512KB, but not quite there, why not apply for
Bradley Taunt's <a target="blank" href="https://1mb.club">1MB Club</a> instead?</p>
</details>

16
_includes/faq-05.html
Unescape View File

@ -1,11 +1,13 @@
<details>
<summary>What's the point of all this?</summary>
<p><b>That's a great question!</b></p>
<summary>What's the point of all this?</summary>
<p><b>That's a great question!</b></p>
<p>I decided to start this project for a couple of reasons:</p>
<p>I decided to start this project for a couple of reasons:</p>
<ol>
<li>Most, if not all, of the sites listed below are personal sites. Many of which are blogs. The 512KB Club is a great way of discovering other blog owners who are also interested in minimalist/efficient web design. Think of it like a modern day <a target="blank" href="https://en.wikipedia.org/wiki/Webring">webring</a>.</li>
<li>It's a bit of fun, so why not?</li>
</ol>
<ol>
<li>Most, if not all, of the sites listed below are personal sites. Many of which are blogs. The 512KB Club is a
great way of discovering other blog owners who are also interested in minimalist/efficient web design. Think
of it like a modern day <a target="blank" href="https://en.wikipedia.org/wiki/Webring">webring</a>.</li>
<li>It's a bit of fun, so why not?</li>
</ol>
</details>

8
_includes/faq-06.html
Unescape View File

@ -1,6 +1,8 @@
<details>
<summary>I see a problem / how do I get in touch?</summary>
<p>See a problem on this site? Maybe there's a site listed that's not longer live, or no longer qualifies for the club. Or, maybe you just want to get in touch for some reason.</p>
<summary>I see a problem / how do I get in touch?</summary>
<p>See a problem on this site? Maybe there's a site listed that's not longer live, or no longer qualifies for the
club. Or, maybe you just want to get in touch for some reason.</p>
<p>If so, <a target="blank" href="https://github.com/kevquirk/512kb.club/issues">create an issue on GitHub</a> or use <a target="blank" href="https://kevq.uk/contact">the contact page on my main website</a>.</p>
<p>If so, <a target="blank" href="https://github.com/kevquirk/512kb.club/issues">create an issue on GitHub</a> or
use <a target="blank" href="https://kevq.uk/contact">the contact page on my main website</a>.</p>
</details>

19
_includes/faq-07.html
Unescape View File

@ -1,12 +1,19 @@
<details>
<summary id="lightweight-notice">Notice about ultra lightweight sites</summary>
<p>There are a growing number of "sites" being submitted to The 512KB Club that are ultra lightweight (usually <1KB). These sites often contain absolutely no information apart from a couple of links to other pages that <i>do</i> contain information.</p>
<summary id="lightweight-notice">Notice about ultra lightweight sites</summary>
<p>There are a growing number of "sites" being submitted to The 512KB Club that are ultra lightweight (usually
<1KB). These sites often contain absolutely no information apart from a couple of links to other pages that <i>
do</i> contain information.</p>
<p><b>These sites are not in keeping with the aim of The 512KB Club and will not be added.</b> To be added to this site the page you submit must contain a reasonable amount of information.</p>
<p><b>These sites are not in keeping with the aim of The 512KB Club and will not be added.</b> To be added to this
site the page you submit must contain a reasonable amount of information.</p>
<p class="medium">But what qualifies as a "reasonable amount of information"?</p>
<p class="medium">But what qualifies as a "reasonable amount of information"?</p>
<p>Great question! Ultimately it's for me to decide and I will use my own discretion, but as a guide, if your site contains nothing more than a title and a couple of links, it <b>won't</b> be added. If you page contains some CSS formatting, a couple of paragraphs of text, and links to other pages, it will probably be added.</p>
<p>Great question! Ultimately it's for me to decide and I will use my own discretion, but as a guide, if your site
contains nothing more than a title and a couple of links, it <b>won't</b> be added. If you page contains some
CSS formatting, a couple of paragraphs of text, and links to other pages, it will probably be added.</p>
<p>The aim of The 512KB Club is to showcase lightweight websites. Anyone can create a website that is under 1KB, but composed only of a single <code>h1</code> tag and a couple of links. That's boring - try and be more interesting.</p>
<p>The aim of The 512KB Club is to showcase lightweight websites. Anyone can create a website that is under 1KB, but
composed only of a single <code>h1</code> tag and a couple of links. That's boring - try and be more
interesting.</p>
</details>

18
_includes/green-team.html
Unescape View File

@ -1,9 +1,9 @@
<ul class="green">
{% for item in site.data.green-team %}
<li>
<span class="before" style="--data-size:{{ item.size }};"></span>
<span class="after">{{ item.size }} KB</span>
<a class="site" target="blank" href="{{ item.url }}">{{ item.domain }}</a>
</li>
{% endfor %}
</ul>
<ul class="green">
{% for item in site.data.green-team %}
<li>
<span class="before" style="--data-size:{{ item.size }};"></span>
<span class="after">{{ item.size }} KB</span>
<a class="site" target="blank" href="{{ item.url }}">{{ item.domain }}</a>
</li>
{% endfor %}
</ul>

18
_includes/orange-team.html
Unescape View File

@ -1,9 +1,9 @@
<ul class="orange">
{% for item in site.data.orange-team %}
<li>
<span class="before" style="--data-size:{{ item.size }};"></span>
<span class="after">{{ item.size }} KB</span>
<a class="site" target="blank" href="{{ item.url }}">{{ item.domain }}</a>
</li>
{% endfor %}
</ul>
<ul class="orange">
{% for item in site.data.orange-team %}
<li>
<span class="before" style="--data-size:{{ item.size }};"></span>
<span class="after">{{ item.size }} KB</span>
<a class="site" target="blank" href="{{ item.url }}">{{ item.domain }}</a>
</li>
{% endfor %}
</ul>

76
_layouts/default.html
Unescape View File

@ -1,36 +1,40 @@
<!doctype html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% seo %}
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="icon" type="image/png" href="/assets/images/favicon.png" />
<!-- Plausible analytics -->
<script async defer data-domain="512kb.club" src="https://plausible.io/js/plausible.js"></script>
</head>
<body>
<a name="top"></a>
<header>
<h1>The 512KB Club</h1>
</header>
<main>
{{ content }}
</main>
<footer>
<p>The 512KB Club was created by <a href="https://kevq.uk">Kev Quirk</a> and was inspired by <a href="https://uglyduck.ca">Bradley Taunt's</a> 1MB Club.</p>
<p>Maintained with &hearts; for a performant, lightweight web.</p>
<a href="#top">^ TOP ^</a>
</footer>
</body>
</html>
<!doctype html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% seo %}
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="icon" type="image/png" href="/assets/images/favicon.png" />
<!-- Plausible analytics -->
<script async defer data-domain="512kb.club" src="https://plausible.io/js/plausible.js"></script>
</head>
<body>
<a name="top"></a>
<header>
<h1>The 512KB Club</h1>
</header>
<main>
{{ content }}
</main>
<footer>
<p>The 512KB Club was created by <a href="https://kevq.uk">Kev Quirk</a> and was inspired by <a
href="https://uglyduck.ca">Bradley Taunt's</a> 1MB Club.</p>
<p>Maintained with &hearts; for a performant, lightweight web.</p>
<a href="#top">^ TOP ^</a>
</footer>
</body>
</html>

2
_redirects
Unescape View File

@ -1,3 +1,3 @@
https://512kb.club/images/green-team.svg https://512kb.club/assets/images/green-team.svg
https://512kb.club/images/orange-team.svg https://512kb.club/assets/images/orange-team.svg
https://512kb.club/images/blue-team.svg https://512kb.club/assets/images/blue-team.svg
https://512kb.club/images/blue-team.svg https://512kb.club/assets/images/blue-team.svg

533
assets/css/style.css
Unescape View File

@ -1,261 +1,272 @@
/* Global colour variables */
:root {
--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
--bg: #FAFAFA;
--header-bg: #212121;
--text: #212121;
--header-text: #FAFAFA;
--link: #0D47A1;
--code: #D81B60;
--pre: #D0D0D0;
--pre-bg: #1A1A1A;
--accent: #e6e6e6;
--before-blue: #64B5F6;
--after-blue: #BBDEFB;
--before-orange: #FBC02D;
--after-orange: #FFF176;
--before-green: #4CAF50;
--after-green: #C8E6C9;
}
/* Define colours for auto dark mode */
@media (prefers-color-scheme: dark) {
:root {
--bg: #212121;
--header-bg: #111;
--text: #EEE;
--link: #64B5F6;
--accent: #333;
--code: #F06292;
}
ul li {
opacity: .8;
}
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--sans-font);
font-size: 1.1rem;
margin: 0 0 4rem 0;
padding: 0 .5rem;
background: var(--bg);
color: var(--text);
}
header,main,footer {
margin: 0 auto;
max-width: 50rem;
width: 100%;
}
header {
background: var(--header-bg);
color: var(--header-text);
border-radius: 5px;
text-align: center;
padding: 3rem 0;
margin-top: .5rem;
}
header h1 {
margin: 0;
font-size: 3rem;
padding: 0 .5rem;
}
.small {
font-size: .9rem;
}
.medium {
font-weight: bold;
font-size: 1.4rem;
}
h1,h2,h3,h4,h5,h6 {
line-height: 1.2;
}
h2 {
margin: 4rem 0 -1.5rem 0;
}
.jump li {
display: inline-block;
padding-right: 1rem;
}
a, a:visited {
color: var(--link)
}
a:hover,a:focus {
text-decoration: none;
}
a.site, a.site:visited {
color: currentColor;
text-decoration: none;
}
a.site:hover,a.site:focus {
text-decoration: underline;
}
pre {
font-family: var(--mono-font);
background: var(--pre-bg) !important;
border-radius: 5px;
margin-bottom: 1.6em;
max-width: 100%;
white-space: pre-wrap;
padding: 1.6em;
max-height: 650px;
}
pre code {
font-size: 1.1rem;
font-family: var(--mono-font);
color: #ccc;
}
code {
font-family: var(--mono-font);
color: var(--code);
}
ul {
list-style: none;
margin: 3rem 0 0 0;
padding: 0;
}
/* BLUE COLOURS */
ul.blue li {
background: var(--after-blue);
color: #212121;
line-height: 1;
margin: 0 0 0.5rem 0;
padding: 15px 10px 12px;
position: relative;
border-radius: 4px;
}
ul.blue li span.before {
background: var(--before-blue);
height: 100%;
width: calc(var(--data-size)/512 * 100%);
border-radius: 4px;
z-index: 0;
}
/* ORANGE COLOURS */
ul.orange li {
background: var(--after-orange);
color: #212121;
line-height: 1;
margin: 0 0 0.5rem 0;
padding: 15px 10px 12px;
position: relative;
border-radius: 4px;
}
ul.orange li span.before {
background: var(--before-orange);
height: 100%;
width: calc(var(--data-size)/512 * 100%);
border-radius: 4px;
z-index: 0;
}
/* GREEN COLOURS */
ul.green li {
background: var(--after-green);
color: #212121;
line-height: 1;
margin: 0 0 0.5rem 0;
padding: 15px 10px 12px;
position: relative;
border-radius: 4px;
}
ul.green li span.before {
background: var(--before-green);
height: 100%;
width: calc(var(--data-size)/512 * 100%);
border-radius: 4px;
z-index: 0;
}
ul li span.before,
ul li span.after {
left: 0;
position: absolute;
top: 0;
}
ul li span.after {
left: auto;
opacity: 0.8;
right: 10px;
top: auto;
}
ul li a {
font-weight: bold;
position: relative;
z-index: 2;
}
footer {
border-top: 1px solid var(--text);
margin: 3rem auto 0;
padding: 0.5rem 0 0;
text-align: center;
font-size: .9rem;
}
@media(max-width:500px) {
body {
margin: 0 0 4rem 0;
padding: 0 10px;
}
}
/* Format the accordion */
details {
padding: .6rem 1rem;
background: var(--accent);
border: 1px solid;
border-radius: 5px;
margin-bottom: 1rem;
}
summary {
cursor: pointer;
font-weight: bold;
}
details[open] {
padding-bottom: .75rem;
}
details[open] summary {
margin-bottom: .5rem;
}
details[open]>*:last-child {
margin-bottom: 0;
}
/* Global colour variables */
:root {
--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
--bg: #FAFAFA;
--header-bg: #212121;
--text: #212121;
--header-text: #FAFAFA;
--link: #0D47A1;
--code: #D81B60;
--pre: #D0D0D0;
--pre-bg: #1A1A1A;
--accent: #e6e6e6;
--before-blue: #64B5F6;
--after-blue: #BBDEFB;
--before-orange: #FBC02D;
--after-orange: #FFF176;
--before-green: #4CAF50;
--after-green: #C8E6C9;
}
/* Define colours for auto dark mode */
@media (prefers-color-scheme: dark) {
:root {
--bg: #212121;
--header-bg: #111;
--text: #EEE;
--link: #64B5F6;
--accent: #333;
--code: #F06292;
}
ul li {
opacity: .8;
}
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--sans-font);
font-size: 1.1rem;
margin: 0 0 4rem 0;
padding: 0 .5rem;
background: var(--bg);
color: var(--text);
}
header,
main,
footer {
margin: 0 auto;
max-width: 50rem;
width: 100%;
}
header {
background: var(--header-bg);
color: var(--header-text);
border-radius: 5px;
text-align: center;
padding: 3rem 0;
margin-top: .5rem;
}
header h1 {
margin: 0;
font-size: 3rem;
padding: 0 .5rem;
}
.small {
font-size: .9rem;
}
.medium {
font-weight: bold;
font-size: 1.4rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.2;
}
h2 {
margin: 4rem 0 -1.5rem 0;
}
.jump li {
display: inline-block;
padding-right: 1rem;
}
a,
a:visited {
color: var(--link)
}
a:hover,
a:focus {
text-decoration: none;
}
a.site,
a.site:visited {
color: currentColor;
text-decoration: none;
}
a.site:hover,
a.site:focus {
text-decoration: underline;
}
pre {
font-family: var(--mono-font);
background: var(--pre-bg) !important;
border-radius: 5px;
margin-bottom: 1.6em;
max-width: 100%;
white-space: pre-wrap;
padding: 1.6em;
max-height: 650px;
}
pre code {
font-size: 1.1rem;
font-family: var(--mono-font);
color: #ccc;
}
code {
font-family: var(--mono-font);
color: var(--code);
}
ul {
list-style: none;
margin: 3rem 0 0 0;
padding: 0;
}
/* BLUE COLOURS */
ul.blue li {
background: var(--after-blue);
color: #212121;
line-height: 1;
margin: 0 0 0.5rem 0;
padding: 15px 10px 12px;
position: relative;
border-radius: 4px;
}
ul.blue li span.before {
background: var(--before-blue);
height: 100%;
width: calc(var(--data-size)/512 * 100%);
border-radius: 4px;
z-index: 0;
}
/* ORANGE COLOURS */
ul.orange li {
background: var(--after-orange);
color: #212121;
line-height: 1;
margin: 0 0 0.5rem 0;
padding: 15px 10px 12px;
position: relative;
border-radius: 4px;
}
ul.orange li span.before {
background: var(--before-orange);
height: 100%;
width: calc(var(--data-size)/512 * 100%);
border-radius: 4px;
z-index: 0;
}
/* GREEN COLOURS */
ul.green li {
background: var(--after-green);
color: #212121;
line-height: 1;
margin: 0 0 0.5rem 0;
padding: 15px 10px 12px;
position: relative;
border-radius: 4px;
}
ul.green li span.before {
background: var(--before-green);
height: 100%;
width: calc(var(--data-size)/512 * 100%);
border-radius: 4px;
z-index: 0;
}
ul li span.before,
ul li span.after {
left: 0;
position: absolute;
top: 0;
}
ul li span.after {
left: auto;
opacity: 0.8;
right: 10px;
top: auto;
}
ul li a {
font-weight: bold;
position: relative;
z-index: 2;
}
footer {
border-top: 1px solid var(--text);
margin: 3rem auto 0;
padding: 0.5rem 0 0;
text-align: center;
font-size: .9rem;
}
@media(max-width:500px) {
body {
margin: 0 0 4rem 0;
padding: 0 10px;
}
}
/* Format the accordion */
details {
padding: .6rem 1rem;
background: var(--accent);
border: 1px solid;
border-radius: 5px;
margin-bottom: 1rem;
}
summary {
cursor: pointer;
font-weight: bold;
}
details[open] {
padding-bottom: .75rem;
}
details[open] summary {
margin-bottom: .5rem;
}
details[open]>*:last-child {
margin-bottom: 0;
}

94
index.md
Unescape View File

@ -1,47 +1,47 @@
---
permalink: /
layout: default
---
The internet has become a <b>bloated mess</b>. Massive JavaScript libraries, countless client-side queries and overly complex frontend frameworks are par for the course these days.
When online newspapers like [The Guardian](https://www.theguardian.com/uk) are **over 4MB in size**, you know there's a problem. Why does an online newspaper need to be over 4MB in size? It's crazy.
But we can make a difference - all it takes is some optimisation. Do you really need that extra piece of JavaScript? Does your WordPress site need a theme that adds lots of functionality you're never going to use? Are those huge custom fonts really needed? Are your images optimised for the web?
**The 512KB Club** is a collection of performance-focused web pages from across the Internet. To qualify your website must satisfy **both** of the following requirements:
1. It must be an actual site that contains a reasonable amount of information, not just a couple of links on a page ([more info here](#lightweight-notice)).
2. Your total UNCOMPRESSED web resources must not exceed 512KB.
{% include faq-01.html %}
{% include faq-02.html %}
{% include faq-03.html %}
{% include faq-04.html %}
{% include faq-05.html %}
{% include faq-06.html %}
{% include faq-07.html %}
<br>
<hr>
{:.jump}
* **Jump to:**
* [Green Team (<100KB)](#100)
* [Orange Team (<250KB)](#250)
* [Blue Team (<512KB)](#512)
<h2 id="100">The Green Team (<100KB) <span class="small"><a href="#top">^ Top ^</a></span></h2>
{% include green-team.html %}
<h2 id="250">The Orange Team (<250KB) <span class="small"><a href="#top">^ Top ^</a></span></h2>
{% include orange-team.html %}
<h2 id="512">The Blue Team (<512KB) <span class="small"><a href="#top">^ Top ^</a></span></h2>
{% include blue-team.html %}
---
permalink: /
layout: default
---
The internet has become a <b>bloated mess</b>. Massive JavaScript libraries, countless client-side queries and overly complex frontend frameworks are par for the course these days.
When online newspapers like [The Guardian](https://www.theguardian.com/uk) are **over 4MB in size**, you know there's a problem. Why does an online newspaper need to be over 4MB in size? It's crazy.
But we can make a difference - all it takes is some optimisation. Do you really need that extra piece of JavaScript? Does your WordPress site need a theme that adds lots of functionality you're never going to use? Are those huge custom fonts really needed? Are your images optimised for the web?
**The 512KB Club** is a collection of performance-focused web pages from across the Internet. To qualify your website must satisfy **both** of the following requirements:
1. It must be an actual site that contains a reasonable amount of information, not just a couple of links on a page ([more info here](#lightweight-notice)).
2. Your total UNCOMPRESSED web resources must not exceed 512KB.
{% include faq-01.html %}
{% include faq-02.html %}
{% include faq-03.html %}
{% include faq-04.html %}
{% include faq-05.html %}
{% include faq-06.html %}
{% include faq-07.html %}
<br>
<hr>
{:.jump}
* **Jump to:**
* [Green Team (<100KB)](#100)
* [Orange Team (<250KB)](#250)
* [Blue Team (<512KB)](#512)
<h2 id="100">The Green Team (<100KB) <span class="small"><a href="#top">^ Top ^</a></span></h2>
{% include green-team.html %}
<h2 id="250">The Orange Team (<250KB) <span class="small"><a href="#top">^ Top ^</a></span></h2>
{% include orange-team.html %}
<h2 id="512">The Blue Team (<512KB) <span class="small"><a href="#top">^ Top ^</a></span></h2>
{% include blue-team.html %}

2
netlify.toml
Unescape View File

@ -2,4 +2,4 @@
[[headers]]
for = "/*"
[headers.values]
Permissions-Policy = "interest-cohort=()"
Permissions-Policy = "interest-cohort=()"

Write Preview
Loading…
Cancel
Save