-
Notifications
You must be signed in to change notification settings - Fork 222
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit d2e4da1
Showing
867 changed files
with
5,506 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
.jekyll-cache | ||
_site | ||
deploys | ||
Gemfile.lock | ||
.DS_Store | ||
.bundle | ||
vendor |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
3.0.2 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
--- | ||
permalink: /404.html | ||
layout: default | ||
--- | ||
|
||
<h2>404</h2> | ||
|
||
<p><strong>Page not found :(</strong></p> | ||
<p>The requested page could not be found.</p> | ||
<hr> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
source "https://rubygems.org" | ||
# Hello! This is where you manage which Jekyll version is used to run. | ||
# When you want to use a different version, change it below, save the | ||
# file and run `bundle install`. Run Jekyll with `bundle exec`, like so: | ||
# | ||
# bundle exec jekyll serve | ||
# | ||
# This will help ensure the proper Jekyll version is running. | ||
# Happy Jekylling! | ||
gem "jekyll", "~> 4.1.1" | ||
# This is the default theme for new Jekyll sites. You may change this to anything you like. | ||
gem "minima", "~> 2.5" | ||
# If you want to use GitHub Pages, remove the "gem "jekyll"" above and | ||
# uncomment the line below. To upgrade, run `bundle update github-pages`. | ||
# gem "github-pages", group: :jekyll_plugins | ||
# If you have any plugins, put them here! | ||
#group :jekyll_plugins do | ||
# gem "jekyll-feed", "~> 0.12" | ||
#end | ||
|
||
# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem | ||
# and associated library. | ||
platforms :mingw, :x64_mingw, :mswin, :jruby do | ||
gem "tzinfo", "~> 1.2" | ||
gem "tzinfo-data" | ||
end | ||
|
||
# Performance-booster for watching directories on Windows | ||
gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin] | ||
|
||
|
||
gem "webrick", "~> 1.7" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
MIT License | ||
|
||
Copyright (c) 2022 Bradley Taunt | ||
|
||
Permission is hereby granted, free of charge, to any person obtaining a copy | ||
of this software and associated documentation files (the "Software"), to deal | ||
in the Software without restriction, including without limitation the rights | ||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
copies of the Software, and to permit persons to whom the Software is | ||
furnished to do so, subject to the following conditions: | ||
|
||
The above copyright notice and this permission notice shall be included in all | ||
copies or substantial portions of the Software. | ||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
SOFTWARE. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
# 1MB Club | ||
|
||
An exclusive members-only club for web pages weighing less than 1 megabyte | ||
|
||
Live collection: <a target="_blank" href="https://1mb.club">1mb.club</a> | ||
|
||
--- | ||
|
||
## Submitting a Website | ||
|
||
Please follow the instructions found on the [main submission page on 1mb.club](https://1mb.club/submit) | ||
|
||
### Review & Accepting Submissions | ||
|
||
**All web pages submitted will be manually reviewed for honesty and quality assurance.** | ||
|
||
1MB Club has the final say whether a web page is added to the official listing or not. Spam, low-quality pages, or shady SEO gimmicks will not be tolerated. If your web page is not accepted, negative arguments or complaints will be ignored and deleted. | ||
|
||
I look forward to seeing all your high quality, low-bandwidth web pages! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
title: 1MB Club | ||
description: An exclusive membership for web pages weighing less than 1 megabyte. | ||
baseurl: '' # the subpath of your site, e.g. /blog | ||
url: https://1mb.club # the base hostname & protocol for your site, e.g. http://example.com | ||
|
||
author: | ||
name: Bradley Taunt | ||
email: [email protected] | ||
|
||
# Collections | ||
collections: | ||
site_listings: | ||
output: false | ||
|
||
permalink: /blog/:title/ | ||
|
||
exclude: | ||
- generate.sh | ||
- website-check.rb | ||
- README.md | ||
- .ruby-version |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
<hr> | ||
<footer> | ||
<p>The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/1mb.club">code for this site</a> is <a href="https://git.sr.ht/~bt/1mb.club/tree/master/item/LICENSE">MIT</a></p> | ||
<p>Maintained with ♥ for a performant web<br> | ||
Proud supporter of <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a> and <a href="https://usefathom.com/ref/DKHJVX">Fathom</a><br> | ||
Feel free to reach out via <a rel="me" href="https://fosstodon.org/@tdarb">Mastodon</a><br> | ||
Latest sites via <a href="/atom.xml">atom.xml</a> // Latest articles via <a href="/posts.xml">posts.xml</a></p> | ||
</footer> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
|
||
<title>{{ site.title }}: {{ page.title }}</title> | ||
<meta name="description" content="{{ site.description }}"> | ||
<link rel="shortcut icon" href="{{ site.baseurl }}/favicon.png"> | ||
<link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ site.baseurl }}/atom.xml"> | ||
<link rel="stylesheet" href="{{ site.baseurl }}/style.css"> | ||
</head> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
<h1>1MB Club</h1> | ||
<nav> | ||
<ul> | ||
<li><a href="/">Home</a></li> | ||
<li><a href="/about">About</a></li> | ||
<li><a href="/#hof">Hall of Fame</a></li> | ||
<li><a href="/#members">Members</a></li> | ||
<li><a href="/blog">Blog</a></li> | ||
<li><a href="/submit">Submit</a></li> | ||
</ul> | ||
<hr> | ||
</nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
|
||
{% include head.html %} | ||
|
||
<body> | ||
{% include navigation.html %} | ||
{{ content }} | ||
{% include footer.html %} | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
|
||
{% include head.html %} | ||
|
||
<body> | ||
{% include navigation.html %} | ||
{{ content }} | ||
{% include footer.html %} | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
--- | ||
layout: default | ||
--- | ||
|
||
{{ content }} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
--- | ||
layout: default | ||
--- | ||
|
||
<h2 class="post">{{ page.title }}</h2> | ||
<time class="post-time" datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%a, %d %b %Y" }}</time> | ||
{{ content }} | ||
|
||
<div class="thanks"> | ||
<h3>Special Thanks</h3> | ||
<p>I'm extremely grateful for the support from the "Hall of Fame" supporters:<br> | ||
{% assign websites = site.site_listings %} | ||
{% for item in websites %} | ||
{% if item.hof == true %} | ||
<span><a target="_blank" href="https://{{ item.pageurl }}">{{ item.pageurl }}</a></span> | ||
{% endif %} | ||
{% endfor %} | ||
</p> | ||
<p>If you too would like to support this project and help fund more articles like this one:<br><a href="/hall-of-fame">Become a supporter today →</a></p> | ||
</div> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
--- | ||
title: CSS Variables | ||
date: 2018-03-24 00:00:00 Z | ||
layout: post | ||
description: How to properly use variables in vanilla CSS | ||
summary: CSS preprocessors have allowed developers to use variables for quite some | ||
time, but we now have the ability to use these properties in plain vanilla CSS. | ||
redirect_from: "/2018/03/24/css-variables/" | ||
--- | ||
|
||
The CSS language is becoming even more awesome and powerful everyday. In this quick article I'd like to focus specifically on the "new" CSS variable function that you can start using in your projects *right now*. | ||
|
||
### Getting started is easy | ||
|
||
Let's just jump right in - this is how you create variables in vanilla CSS: | ||
|
||
```css | ||
:root { | ||
--base-color: #e0e0e0; | ||
--text-color: #111; | ||
} | ||
``` | ||
|
||
We are using the `:root` selector at the very top of our CSS file in order to call these variables into any elements in the rest of our document. This is normally the safest way to include variables. | ||
|
||
As for the variables themselves, you declare that they are variables using the `--` tags, followed by the variable's name and it's property. Pretty simple stuff, right? | ||
|
||
Now let's use those variables: | ||
|
||
```css | ||
.header { | ||
border: 1px solid var(--base-color); | ||
} | ||
|
||
.main-container { | ||
background-color: var(--base-color); | ||
color: var(--text-color); | ||
} | ||
``` | ||
|
||
That's it! It's also good to know that CSS variables have pretty decent [browser support](https://caniuse.com/#feat=css-variables) (who likes IE11 anyway). | ||
|
||
|
||
### Why not just use a preprocessor? | ||
|
||
I'm a pretty big fan of Sass and Stylus, but sometimes it's refreshing to just use vanilla CSS for certain projects. Most preprocessors have had the ability to use variables and mixins for a while, but I prefer to avoid build scripts when not absolutely necessary. | ||
|
||
Get out there and have fun with some variables! | ||
|
||
* footnotes will be placed here. This line is necessary | ||
{:footnotes} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,83 @@ | ||
--- | ||
title: Pure CSS Simple Dropdown Plugin | ||
date: 2018-09-20 00:00:00 Z | ||
layout: post | ||
column: single | ||
description: Learn how to implement a custom select dropdown with CSS | ||
summary: A simple, JavaScript-free way to implement a custom styled, plug-and-play | ||
select dropdown with pure CSS. | ||
redirect_from: "/2018/09/20/pure-css-simple-dropdown-plugin/" | ||
--- | ||
|
||
I find myself blowing away default browser `select` styling and implementing my own custom dropdowns far more often than I'd like. So, I recently created a very simple and clean component using just pure CSS. | ||
|
||
You can find the HTML & CSS for the three different variations below: | ||
|
||
## The HTML | ||
|
||
```html | ||
<div class="select-container"> | ||
<select name="" id=""> | ||
<option value="Option 1">Option 1</option> | ||
<option value="Option 2">Option 2</option> | ||
<option value="Option 3">Option 3</option> | ||
</select> | ||
</div> | ||
|
||
<div class="select-container shadow"> | ||
<select name="" id=""> | ||
<option value="Option 1">Option 1</option> | ||
<option value="Option 2">Option 2</option> | ||
<option value="Option 3">Option 3</option> | ||
</select> | ||
</div> | ||
|
||
<div class="select-container shadow depth"> | ||
<select name="" id=""> | ||
<option value="Option 1">Option 1</option> | ||
<option value="Option 2">Option 2</option> | ||
<option value="Option 3">Option 3</option> | ||
</select> | ||
</div> | ||
``` | ||
|
||
## The CSS | ||
|
||
```css | ||
.select-container { | ||
background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYCAYAAACIhL/AAAAAAXNSR0IArs4c6QAAAWBJREFUSA3Nl00OgjAQRmnDeQhwBjcu3HIIXXgZ8SpuvAJh7yW8AAnO1zTElkHaWn6a1DJ22nk2fSGKpmluSZJcqO+x1aLv+7Rt2weNhz0RCiGeRVEcJT10aZpWNL72AggWzdRJQGVZ9pZSnmjivTUkGMACJrAoQDzkeY4TrKh3iDdqqF1pFoUwACIqy/JJ9Fc1s8EHaoPhu7QBiAm6mHca6u+klZ5rXdsoJ4xIB2ubTfdOGUvj6HqNThCMSFzLbKo1GMsdFguIxDXMJjjDWC9AJC9s9shYb0AsWMpsztggQCzSdsHuWO3OGcttzlrMJcYym+7dpLFc3UlJ7OQYZs8Za9dE7AyI5H/MdjEWNezmBYjFgWY7GWvDIfYGxCJfs12Nxd52CwLEJh5mOxtrwyF2tphbPGe2r7FcjeATVL/uxzs7xNjogNiQMzvU2EUAsalldrCxHGDU7+jf4Rk95qYfkiGLtr7wLgYAAAAASUVORK5CYII=') no-repeat calc(100% - 10px) center; | ||
background-size: 10px; | ||
border: 1px solid #ccc; | ||
border-radius: 5px; | ||
cursor: pointer; | ||
display: inline-block; | ||
overflow: hidden; | ||
} | ||
.select-container select { | ||
background: none; | ||
border: 0; | ||
cursor: pointer; | ||
outline: none; | ||
padding: 10px 40px 10px 10px; | ||
width: 100%; | ||
-webkit-appearance: none; | ||
-moz-appearance: none; | ||
} | ||
|
||
.select-container.shadow { | ||
box-shadow: 0 2px 5px rgba(0,0,0,0.1); | ||
} | ||
.select-container.depth { | ||
background-color: #F8F8F8; | ||
box-shadow: 0 2px 5px rgba(0,0,0,0.1), inset 0 2px 5px rgba(255,255,255,1), inset 0 -2px 5px rgba(0,0,0,0.05); | ||
} | ||
``` | ||
|
||
Check out the CodePen below and feel free to morph it as you see fit for your own projects! | ||
|
||
<p data-height="465" data-theme-id="0" data-slug-hash="rZPzWy" data-default-tab="result" data-user="bradleytaunt" data-pen-title="Plug & Play Dropdown (Pure CSS)" class="codepen">See the Pen <a href="https://codepen.io/bradleytaunt/pen/rZPzWy/">Plug & Play Dropdown (Pure CSS)</a> by Bradley Taunt (<a href="https://codepen.io/bradleytaunt">@bradleytaunt</a>) on <a href="https://codepen.io">CodePen</a>.</p> | ||
|
||
<script async src="https://static.codepen.io/assets/embed/ei.js"></script> | ||
|
||
* footnotes will be placed here. This line is necessary | ||
{:footnotes} |
Oops, something went wrong.