Browse Source

Complete header re-design. Created FAQ page.

pull/419/head
Kev Quirk 3 years ago
parent
commit
7892b9c774
  1. 6
      Gemfile.lock
  2. 8
      _data/navigation.yml
  3. 2
      _includes/faq-01.html
  4. 2
      _includes/faq-02.html
  5. 9
      _includes/faq-03.html
  6. 2
      _includes/faq-05.html
  7. 27
      _includes/faq-07.html
  8. 63
      _includes/gh-banner.html
  9. 5
      _includes/navigation.html
  10. 10
      _layouts/default.html
  11. 77
      assets/css/style.css
  12. BIN
      assets/images/light-website.png
  13. 23
      faq.md
  14. 18
      index.md

6
Gemfile.lock

@ -1,7 +1,7 @@
GEM
remote: https://rubygems.org/
specs:
addressable (2.7.0)
addressable (2.8.0)
public_suffix (>= 2.0.2, < 5.0)
colorator (1.1.0)
concurrent-ruby (1.1.9)
@ -10,8 +10,8 @@ GEM
http_parser.rb (~> 0.6.0)
eventmachine (1.2.7)
eventmachine (1.2.7-x64-mingw32)
ffi (1.15.1)
ffi (1.15.1-x64-mingw32)
ffi (1.15.3)
ffi (1.15.3-x64-mingw32)
forwardable-extended (2.6.0)
http_parser.rb (0.6.0)
i18n (1.8.10)

8
_data/navigation.yml

@ -0,0 +1,8 @@
- name: Home
link: /
- name: FAQ
link: /faq
- name: Github
link: https://github.com/kevquirk/512kb.club

2
_includes/faq-01.html

@ -1,5 +1,5 @@
<details>
<summary>How to join The 512KB Club</summary>
<summary>How do I 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>

2
_includes/faq-02.html

@ -1,5 +1,5 @@
<details>
<summary>Once you're in The 512KB Club</summary>
<summary>Can I add something to my site to show I'm 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>

9
_includes/faq-03.html

@ -1,9 +1,4 @@
<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>
<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/pulls">GitHub Pull Request</a> ensuring the
title clearly states this is an update.</p>
<summary>I've made changes to my site and it's a different size now. What do i do?</summary>
<p>We regularly check all the sites that are added to the <b>The 512KB Club</b> (yes, its a big job. If you want help, <a href="mailto:hi@kevq.uk">email me</a>). But if you have made changes and the size of your size needs updating please log a <b>new</b> <a target="blank" href="https://github.com/kevquirk/512kb.club/pulls">GitHub Pull Request</a>.</p>
</details>

2
_includes/faq-05.html

@ -5,7 +5,7 @@
<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
<li>Most, if not all, of the sites listed 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>

27
_includes/faq-07.html

@ -1,20 +1,21 @@
<details>
<summary id="lightweight-notice">Notice about ultra lightweight sites</summary>
<details class="red-notice" id="lightweight-notice">
<summary>What We Won't Accept Into The 512KB Club</summary>
<h2> Ultra lightweight sites</h2>
<p>There are a growing number of "sites" being submitted to The 512KB Club that are ultra lightweight (usually
&lt;1KB). These sites often contain absolutely no information apart from a couple of links to other pages that
<i>
do</i> contain information.</p>
<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> If your site contains nothing more than a title and a couple of links, it <b>won't</b> be added. Think of it like this - if someone can visit your homepage and understand what the site is about, or who you are, then it's far more likely to be added. Here's an example of an unacceptable website:</p>
<img alt="Ultra light website example" src="/assets/images/light-website.png" />
<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 h1 tag and a couple of links. That's boring - try and be more interesting.</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>
<h2>Illegal or inappropriate conent</h2>
<p class="medium">But what qualifies as a "reasonable amount of information"?</p>
<p>This can be anything we deem inappropriate for the 512KB Club. Things like pornographic sites, or sites that contain NSFW material will not be added. Basically, if you wouldn't show it to your grandma or your kids, you're probably not going to get accepted.</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 your page contains some
CSS formatting, a couple of paragraphs of text, and links to other pages, it will probably be added.</p>
<p><b>We reserve the right to refuse any site we deem to be inappropriate, even if it doesn't obviously align to any of the rules stated above.</b></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>

63
_includes/gh-banner.html

@ -1,63 +0,0 @@
<svg height="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 23">
<path fill="var(--text)" fill-opacity="1" d="M 12.00,0.00
C 5.37,0.00 0.00,5.27 0.00,11.78
0.00,16.98 3.44,21.39 8.21,22.95
8.81,23.06 9.03,22.69 9.03,22.38
9.03,22.10 9.02,21.18 9.01,20.19
5.67,20.90 4.97,18.80 4.97,18.80
4.42,17.44 3.63,17.08 3.63,17.08
2.55,16.35 3.72,16.36 3.72,16.36
4.92,16.45 5.56,17.58 5.56,17.58
6.63,19.38 8.36,18.86 9.05,18.56
9.16,17.79 9.47,17.27 9.81,16.98
7.14,16.68 4.34,15.67 4.34,11.16
4.34,9.88 4.81,8.82 5.58,8.00
5.45,7.70 5.04,6.51 5.70,4.88
5.70,4.88 6.70,4.57 9.00,6.09
9.95,5.83 10.98,5.70 12.00,5.69
13.02,5.70 14.05,5.83 15.01,6.09
17.30,4.57 18.30,4.88 18.30,4.88
18.96,6.51 18.55,7.70 18.42,8.00
19.19,8.82 19.66,9.88 19.66,11.16
19.66,15.68 16.85,16.68 14.18,16.97
14.61,17.34 14.99,18.05 14.99,19.15
14.99,20.73 14.98,22.00 14.98,22.38
14.98,22.70 15.19,23.06 15.80,22.95
20.57,21.39 24.00,16.98 24.00,11.78
24.00,5.27 18.63,0.00 12.00,0.00 Z
M 4.49,16.78
C 4.47,16.83 4.37,16.85 4.29,16.81
4.20,16.77 4.15,16.69 4.18,16.63
4.21,16.57 4.30,16.56 4.39,16.60
4.47,16.64 4.52,16.72 4.49,16.78 Z
M 5.08,17.29
C 5.03,17.34 4.92,17.32 4.84,17.24
4.76,17.16 4.75,17.05 4.80,16.99
4.86,16.94 4.97,16.97 5.05,17.05
5.13,17.13 5.14,17.24 5.08,17.29 Z
M 5.49,17.95
C 5.42,18.00 5.30,17.96 5.22,17.85
5.15,17.75 5.15,17.62 5.22,17.57
5.30,17.52 5.42,17.57 5.49,17.67
5.56,17.78 5.56,17.90 5.49,17.95 Z
M 6.17,18.72
C 6.11,18.79 5.97,18.77 5.87,18.67
5.76,18.58 5.73,18.44 5.80,18.37
5.86,18.30 6.01,18.32 6.11,18.42
6.21,18.51 6.24,18.65 6.17,18.72 Z
M 7.06,18.98
C 7.03,19.07 6.90,19.11 6.76,19.07
6.62,19.03 6.54,18.92 6.56,18.83
6.59,18.74 6.73,18.69 6.86,18.74
7.00,18.78 7.09,18.88 7.06,18.98 Z
M 8.07,19.09
C 8.07,19.18 7.96,19.27 7.81,19.27
7.67,19.27 7.55,19.19 7.55,19.10
7.55,19.00 7.66,18.92 7.81,18.92
7.95,18.91 8.07,18.99 8.07,19.09 Z
M 9.06,19.05
C 9.07,19.15 8.97,19.24 8.83,19.27
8.69,19.29 8.56,19.23 8.55,19.14
8.53,19.04 8.63,18.95 8.77,18.92
8.91,18.90 9.04,18.95 9.06,19.05 Z"></path>
</svg>

Before

Width:  |  Height:  |  Size: 2.7 KiB

5
_includes/navigation.html

@ -0,0 +1,5 @@
<nav>
{% for item in site.data.navigation %}
<a href="{{ item.link }}" {% if page.url == item.link %}class="current"{% endif %}>{{ item.name }}</a>
{% endfor %}
</nav>

10
_layouts/default.html

@ -8,18 +8,14 @@
{% seo %}
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="icon" type="image/png" href="/assets/images/favicon.png" />
</head>
<body>
<a name="top"></a>
<header>
<div class="title-banner">
<h1>The 512KB Club</h1>
</div>
<div class="gh-banner">
<a href="https://github.com/kevquirk/512kb.club" target="blank">{% include gh-banner.html %} Find us on
GitHub</a>
</div>
{% include navigation.html %}
<h1>The 512KB Club</h1>
</header>
<main>

77
assets/css/style.css

@ -64,37 +64,49 @@ footer {
width: 100%;
}
.gh-banner a {
text-align: center;
font-size: 1.5rem;
font-weight: bold;
background: var(--accent);
margin-top: .5rem;
padding: .5rem 0;
border-radius: 5px;
/* Format navigation */
nav {
font-size: 1rem;
line-height: 2;
padding: 1rem 0;
margin-left: 1rem;
}
nav a {
border: 1px solid var(--text);
display: block;
border-radius: 5px;
color: var(--text) !important;
display: inline-block;
padding: .1rem 1rem;
margin-right: 1rem;
text-decoration: none;
transition: .4s;
}
nav a:hover,
nav a.current {
color: var(--text) !important;
background: var(--accent);
}
.gh-banner a:hover {
background: var(--gh-hover);
nav a.current:hover {
text-decoration: none;
}
.title-banner {
background: var(--header-bg);
color: var(--header-text);
border-radius: 5px;
text-align: center;
padding: 3rem 0;
margin-top: .5rem;
header {
padding-bottom: 2rem;
border-bottom: 2px solid var(--text);
}
header h1 {
margin: 0;
font-size: 3rem;
padding: 0 .5rem;
padding: 1rem 0 1rem 0;
text-align: center;
}
main {
margin-top: 3rem;
}
.small {
@ -145,6 +157,19 @@ a.site:focus {
text-decoration: underline;
}
.button {
background: var(--link);
color: var(--bg) !important;
margin: 1.5rem 0;
padding: 1rem 1.25rem;
border-radius: 5px;
text-decoration: none;
}
.button:hover {
background: var(--text);
}
pre {
font-family: var(--mono-font);
background: var(--pre-bg) !important;
@ -274,6 +299,16 @@ details {
margin-bottom: 1rem;
}
details.red-notice {
background: #951818;
border-color: #951818;
color: white;
}
.red-notice h2 {
margin: 0;
}
summary {
cursor: pointer;
font-weight: bold;
@ -290,3 +325,7 @@ details[open] summary {
details[open]>*:last-child {
margin-bottom: 0;
}
img {
max-width: 100%;
}

BIN
assets/images/light-website.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

23
faq.md

@ -0,0 +1,23 @@
---
permalink: /faq
layout: default
title: FAQ
---
# Frequently Asked Questions
This page is intended to answer any questions you may have about joining or maintaining the 512KB Club. If you still have unanswered questions after reading this page, please [submit an issue in GitHub](https://github.com/kevquirk/512kb.club/issues) and we will endeavour to answer your question.
{% 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 %}

18
index.md

@ -10,23 +10,11 @@ But we can make a difference - all it takes is some optimisation. Do you really
**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)).
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](/faq/#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>
<a class="button" href="/faq">View FAQ for more details</a>
<br>
<hr>

Loading…
Cancel
Save