From 7d502cea33054ce58cb2246e8a69f460572d55b5 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Mon, 17 May 2021 09:23:08 -0400 Subject: [PATCH] Strip most of the default CSS for a more streamlined, HTML focused experience --- Gemfile | 2 + index.html | 138 +++++++++++++++++++++++++++++++---------------------- style.css | 133 +-------------------------------------------------- 3 files changed, 83 insertions(+), 190 deletions(-) diff --git a/Gemfile b/Gemfile index 85ec323..dea4159 100644 --- a/Gemfile +++ b/Gemfile @@ -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" diff --git a/index.html b/index.html index 62e1343..9bb92a9 100644 --- a/index.html +++ b/index.html @@ -8,23 +8,36 @@ summary: Listing all websites under 1MB in total size

1MB Club

The internet has become a bloated mess. Massive javascript libraries. Countless client-side queries. Overly complex frontend frameworks.

These things are a cancerous growth on the web.

-

But we can make a difference - no matter how small it may seem. 1MB Club 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:

+

But we can make a difference - no matter how small it may seem. 1MB Club 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:

  1. Total website size (not just transfered data) must not exceed 1 megabyte
-
-

How to Submit

+
+
+ How can I submit a website?

Please follow the instructions on the main Github project repo.

-
-

Support

-

If you are feeling generous, I would greatly appreciate any donations to help support the site.

-
    -
  1. BTC: 3JGsvjgxamQHi4VCALER4rXvnvzdWUaQGg
    2. -
  2. Or simply buy me a coffee
    3. -
-

Looking for a more extreme club?

-

Take a look and checkout the even more exclusive membership collection at the XHTML Club.

-

+ +
+
+ How can I help support this project? +

If you are feeling generous, I would greatly appreciate any donations to help support the site.

+
    +
  1. BTC: 3JGsvjgxamQHi4VCALER4rXvnvzdWUaQGg
    2. +
  2. Or simply buy me a coffee
    3. +
+
+
+
+ Looking for a more extreme club? +

Take a look and checkout the even more exclusive membership collection at the XHTML Club.

+
+
+
+ + +
+

Official Members

Jump to:   <50KB  ·  <100KB  ·  @@ -32,74 +45,83 @@ summary: Listing all websites under 1MB in total size <512KB  ·  <700KB  ·  Just Under 1MB - - -
-
    +

    + + + + + + + + {% assign site_items = site.site_listings | sort: 'size' %} -

    <50KB

    + + {% for item in site_items %} {% if item.size <= 50 %} -
  • - - {{ item.size }} KB - {{ item.pageurl }} -
    • + + + + {% endif %} {% endfor %} -

    <100KB

    + + {% for item in site_items %} - {% if item.size >= 50 and item.size <=100 %} -
  • - - {{ item.size }} KB - {{ item.pageurl }} -
    • + {% if item.size >= 50.1 and item.size <=100 %} + + + + {% endif %} {% endfor %} -

    <250KB

    + + {% for item in site_items %} - {% if item.size >= 100 and item.size <=250 %} -
  • - - {{ item.size }} KB - {{ item.pageurl }} -
    • + {% if item.size >= 100.1 and item.size <=250 %} + + + + {% endif %} {% endfor %} -

    <512KB

    + + {% for item in site_items %} - {% if item.size >= 250 and item.size <=512 %} -
  • - - {{ item.size }} KB - {{ item.pageurl }} -
    • + {% if item.size >= 250.1 and item.size <=512 %} + + + + {% endif %} {% endfor %} -

    <700KB

    + + {% for item in site_items %} - {% if item.size >= 512 and item.size <=700 %} -
  • - - {{ item.size }} KB - {{ item.pageurl }} -
    • + {% if item.size >= 512.1 and item.size <=700 %} + + + + {% endif %} {% endfor %} -

    Just Under 1MB

    + + {% for item in site_items %} - {% if item.size >= 700 and item.size <=1000 %} -
  • - - {{ item.size }} KB - {{ item.pageurl }} -
    • + {% if item.size >= 700.1 and item.size <=1000 %} + + + + {% endif %} {% endfor %} + +
    URLSize (KB)


    <50KB
    {{ item.pageurl }}{{ item.size }}


    <100KB
    {{ item.pageurl }}{{ item.size }}


    <250KB
    {{ item.pageurl }}{{ item.size }}


    <512KB
    {{ item.pageurl }}{{ item.size }}


    <700KB
    {{ item.pageurl }}{{ item.size }}


    Just Under 1MB
    {{ item.pageurl }}{{ item.size }}
+
+
diff --git a/style.css b/style.css index 4d71a8b..27ff41c 100644 --- a/style.css +++ b/style.css @@ -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);} }