From 5574e33b6c561645f671bca0bd0839fe8caf814e Mon Sep 17 00:00:00 2001
From: Bradley Taunt <bradleytaunt@gmail.com>
Date: Mon, 30 Nov 2020 10:19:26 -0500
Subject: [PATCH] add filtered categories based on size

---
 _site_listings/1mb.club.md |  4 ++
 index.html                 | 76 +++++++++++++++++++++++++++++++++++---
 style.css                  |  5 +++
 3 files changed, 79 insertions(+), 6 deletions(-)
 create mode 100644 _site_listings/1mb.club.md

diff --git a/_site_listings/1mb.club.md b/_site_listings/1mb.club.md
new file mode 100644
index 0000000..770c3b5
--- /dev/null
+++ b/_site_listings/1mb.club.md
@@ -0,0 +1,4 @@
+---
+pageurl: 1mb.club
+size: 76.7
+---
diff --git a/index.html b/index.html
index cefa8cc..fc9f162 100644
--- a/index.html
+++ b/index.html
@@ -16,17 +16,81 @@ summary: Personal articles, demos and occasional ramblings
         <p><strong>Update</strong></p>
         <p>Due to the huge number of submissions on initial launch, requesting new sites to be added is temporarily paused. Once the backlog has been worked through, submissions will open up again. Thanks!</p>
     </blockquote>
+    <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>
+    <a href="#250">&#60;250KB</a><span>&nbsp;&nbsp;&middot;&nbsp;</span>
+    <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>
     {% assign site_items = site.site_listings | sort: 'size' %}
+    <h3 id="50"><50KB</h3>
     {% for item in site_items %}
-        <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 %}
+            <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>
+        {% endif %}
+    {% endfor %}
+
+    <h3 id="100"><100KB</h3>
+    {% 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>
+        {% endif %}
+    {% endfor %}
+
+    <h3 id="250"><250KB</h3>
+    {% 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>
+        {% endif %}
+    {% endfor %}
+
+    <h3 id="512"><512KB</h3>
+    {% 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>
+        {% endif %}
+    {% endfor %}
+
+    <h3 id="700"><700KB</h3>
+    {% 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>
+        {% endif %}
+    {% endfor %}
+
+    <h3 id="1000"><em>Just Under</em> 1MB</h3>
+    {% 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>
+        {% endif %}
     {% endfor %}
-    </ul>
 </main>
diff --git a/style.css b/style.css
index 62a921e..a7c99fd 100644
--- a/style.css
+++ b/style.css
@@ -71,6 +71,11 @@ blockquote p {
     margin: 0;
 }
 
+main h3 {
+    margin-top: 3rem;
+    padding-top: 1rem;
+}
+
 footer {
     border-top: 1px solid lightgrey;
     margin: 3rem auto 0;