-
Notifications
You must be signed in to change notification settings - Fork 197
/
index.html
136 lines (121 loc) · 14.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="A demonstration of what can be accomplished visually through just 1 K of CSS.">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>CSS1K</title>
<link rel="stylesheet" href="styles/default.css">
<link rel="stylesheet alternate" href="styles/stripes.css" title="Stripes" data-id="stripes" data-author-name="Vasilis van Gemert" data-author-url="http://vasilis.nl">
<link rel="stylesheet alternate" href="styles/notepad.css" title="Notepad" data-id="notepad" data-author-name="Wout Mager" data-author-url="http://twitter.com/eworm_">
<link rel="stylesheet alternate" href="styles/bbubles.css" title="Bbubles" data-id="bbubles" data-author-name="akella & Genn" data-author-url="http://cssing.org.ua">
<link rel="stylesheet alternate" href="styles/swiss.css" title="Swiss" data-id="swiss" data-author-name="Chris Lee" data-author-url="http://chrsl.net">
<link rel="stylesheet alternate" href="styles/turnaround.css" title="Turn around" data-id="turnaround" data-author-name="Bas van Dorst" data-author-url="http://www.basvandorst.nl">
<link rel="stylesheet alternate" href="styles/bundler_inspired.css" title="BundlerInspired" data-id="bundler_inspired" data-author-name="PhilG" data-author-url="https://github.com/PhilG">
<link rel="stylesheet alternate" href="styles/oldie.css" title="Oldie" data-id="oldie" data-author-name="Alexander Mankuta" data-author-url="http://pointlessone.org">
<link rel="stylesheet alternate" href="styles/typhon.css" title="Typhon" data-id="typhon" data-author-name="ESWAT" data-author-url="http://eswat.ca">
<link rel="stylesheet alternate" href="styles/cube.css" title="Cube" data-id="cube" data-author-name="Sergii Iurevych" data-author-url="http://be.net/iurevych">
<link rel="stylesheet alternate" href="styles/northern-lights.css" title="Northern Lights" data-id="northern-lights" data-author-name="Igor «SkAZi» Potapov" data-author-url="http://potapoff.org">
<link rel="stylesheet alternate" href="styles/skewed.css" title="Skewed" data-id="skewed" data-author-name="Paul Steffens" data-author-url="http://twitter.com/sntxrrr">
<link rel="stylesheet alternate" href="styles/moonlight.css" title="Moonlight" data-id="moonlight" data-author-name="Christian "Schepp" Schaefer" data-author-url="http://twitter.com/derSchepp">
<link rel="stylesheet alternate" href="styles/1024-bytes.css" title="1024-bytes" data-id="1024-bytes" data-author-name="Faisalman" data-author-url="http://github.com/faisalman">
<link rel="stylesheet alternate" href="styles/molokai.css" title="Molokai" data-id="molokai" data-author-name="Kien Nguyen" data-author-url="http://designtomarkup.com">
<link rel="stylesheet alternate" href="styles/android.css" title="Android" data-id="android" data-author-name="Aleksej Romanovskij" data-author-url="http://agat.in">
<link rel="stylesheet alternate" href="styles/geocities.css" title="GeoCities" data-id="geocities" data-author-name="Alexey Savartsov" data-author-url="https://github.com/asavartsov/">
<link rel="stylesheet alternate" href="styles/facetime.css" title="Facetime" data-id="facetime" data-author-name="Bernard Nijenhuis" data-author-url="http://twitter.com/bnijenhuis">
<link rel="stylesheet alternate" href="styles/cloudy.css" title="Cloudy" data-id="cloudy" data-author-name="Sergey Leschina" data-author-url="http://twitter.com/putnik">
<link rel="stylesheet alternate" href="styles/greymatter.css" title="Grey Matter" data-id="greymatter" data-author-name="Vadim Makeev" data-author-url="http://pepelsbey.net">
<link rel="stylesheet alternate" href="styles/blue_square.css" title="Blue square" data-id="blue_square" data-author-name="Hubert Sablonnière" data-author-url="http://twitter.com/hsablonniere">
<link rel="stylesheet alternate" href="styles/tangering.css" title="Tangerine" data-id="tangerine" data-author-name="Ben Court" data-author-url="http://twitter.com/TheBenCourt">
<link rel="stylesheet alternate" href="styles/summersun.css" title="Summer Sun" data-id="summersun" data-author-name="Tanya Peasgood" data-author-url="http://twitter.com/tanya_peasgood">
<link rel="stylesheet alternate" href="styles/lessismore.css" title="Less is More" data-id="lessismore" data-author-name="Rob Balfre" data-author-url="http://twitter.com/rob_balfre">
<link rel="stylesheet alternate" href="styles/legible.css" title="Legible" data-id="legible" data-author-name="Reimund Trost" data-author-url="http://lumens.se">
<link rel="stylesheet alternate" href="styles/greenlemon.css" title="Green Lemon" data-id="greenlemon" data-author-name="Dirk Radunz" data-author-url="http://twitter.com/d_radunz">
<link rel="stylesheet alternate" href="styles/wolfr.css" title="Wolfr" data-id="wolfr" data-author-name="Johan Ronsse" data-author-url="http://twitter.com/wolfr_">
<link rel="stylesheet alternate" href="styles/fortyeight1k.css" title="fortyeight1k" data-id="fortyeight1k" data-author-name="Michael Haschke" data-author-url="http://michael.haschke.biz">
<link rel="stylesheet alternate" href="styles/columns.css" title="Columns" data-id="columns" data-author-name="Alexander Makarov" data-author-url="http://rmcreative.ru">
<link rel="stylesheet alternate" href="styles/slowpoke.css" title="slowpoke" data-id="slowpoke" data-author-name="Vadim Sikora" data-author-url="http://vxsx.ru">
<link rel="stylesheet alternate" href="styles/ribbon.css" title="ribbon" data-id="ribbon" data-author-name="David King" data-author-url="http://oodavid.com">
<link rel="stylesheet alternate" href="styles/solarized.css" title="Solarized" data-id="solarized" data-author-name="heirenton" data-author-url="http://twitter.com/heirenton">
<link rel="stylesheet alternate" href="styles/openwater.css" title="Open Water" data-id="openwater" data-author-name="Gilmore Davidson" data-author-url="https://github.com/gilmoreorless">
<link rel="stylesheet alternate" href="styles/boxes.css" title="Boxes" data-id="boxes" data-author-name="Frank Bültge" data-author-url="http://bueltge.de">
<link rel="stylesheet alternate" href="styles/html5colors.css" title="HTML5 Colors" data-id="html5colors" data-author-name="Michael Garrett Jones" data-author-url="http://www.theweblife.com">
<link rel="stylesheet alternate" href="styles/heart_css.css" title="heart css" data-id="heart_css" data-author-name="Choy Kum Jin" data-author-url="https://github.com/kjchoy">
<link rel="stylesheet alternate" href="styles/sourcy.css" title="Sourcy" data-id="sourcy" data-author-name="Roman Komarov" data-author-url="http://kizu.ru/en/">
<link rel="stylesheet alternate" href="styles/terminal.css" title="Terminal" data-id="terminal" data-author-name="Mikhail Korepanov" data-author-url="http://twitter.com/PanyaKor">
<link rel="stylesheet alternate" href="styles/goodnight_moon.css" title="Goodnight Moon" data-id="goodnight_moon" data-author-name="Dethe Elza" data-author-url="http://livingcode.org">
<link rel="stylesheet alternate" href="styles/fancy.css" title="Fancy" data-id="fancy" data-author-name="Michele Cipriani" data-author-url="http://www.trustweb.it">
<link rel="stylesheet alternate" href="styles/yelo.css" title="Yelo" data-id="yelo" data-author-name="Bart de Bruin" data-author-url="http://bartdebruin.nl">
<link rel="stylesheet alternate" href="styles/spartan.css" title="Spartan" data-id="spartan" data-author-name="Trent Mick" data-author-url="http://trentm.com">
<link rel="stylesheet alternate" href="styles/paper.css" title="paper" data-id="paper" data-author-name="Daniel Rauber" data-author-url="http://daniel-rauber.de">
<link rel="stylesheet alternate" href="styles/freshsoda.css" title="Fresh Soda" data-id="freshsoda" data-author-name="Jan Ortgies" data-author-url="http://jungundwillich.de">
<link rel="stylesheet alternate" href="styles/ev.css" title="Ev" data-id="ev" data-author-name="Mathieu Rochette" data-author-url="http://evangeneer.net">
<link rel="stylesheet alternate" href="styles/b4ya11y.css" title="B4y & A11y" data-id="b4ya11y" data-author-name="Benoit Klein" data-author-url="http://twitter.com/etBen">
<link rel="stylesheet alternate" href="styles/adaptype.css" title="Adaptype" data-id="adaptype" data-author-name="Vasilis van Gemert" data-author-url="http://vasilis.nl">
<link rel="stylesheet alternate" href="styles/simpl.css" title="Simpl" data-id="simpl" data-author-name="Neofyt" data-author-url="http://www.neofyt.com">
<link rel="stylesheet alternate" href="styles/mitchiru.css" title="Mitchiru" data-id="mitchiru" data-author-name="Michael Fritz" data-author-url="http://banquo.de">
<link rel="stylesheet alternate" href="styles/yvelious.css" title="Yvelious" data-id="yvelious" data-author-name="Stas Levyshev" data-author-url="http://yvelious.com">
<link rel="stylesheet alternate" href="styles/expandable.css" title="Expandable" data-id="expandable" data-author-name="Dennis Madvedovsky" data-author-url="http://twitter.com/curlybrace">
<link rel="stylesheet alternate" href="styles/noticeboard.css" title="Notice Board" data-id="noticeboard" data-author-name="Nihar Sawant" data-author-url="http://www.about.me/niharsawant">
<link rel="stylesheet alternate" href="styles/aapl.css" title="AAPL" data-id="aapl" data-author-name="Joffrey Jaffeux" data-author-url="http://twitter.com/joffreyjaffeux">
<link rel="stylesheet alternate" href="styles/yollaw.css" title="Yollaw" data-id="yollaw" data-author-name="Yan Ivanov" data-author-url="http://franzose.in">
<link rel="stylesheet alternate" href="styles/stretchy.css" title="Stretchy" data-id="stretchy" data-author-name="Denis Koltsov" data-author-url="http://twitter.com/mistadikay">
<link rel="stylesheet alternate" href="styles/smile.css" title="smile" data-id="smile" data-author-name="Michael Scharnagl" data-author-url="http://twitter.com/realmuecke">
<link rel="stylesheet alternate" href="styles/inrainbows.css" title="In Rainbows" data-id="inrainbows" data-author-name="Maaike de Laat" data-author-url="http://maaikedelaat.nl">
<link rel="stylesheet alternate" href="styles/therhythm.css" title="The Rhythm" data-id="therhythm" data-author-name="Roman Komarov" data-author-url="http://kizu.ru/en/">
<link rel="stylesheet alternate" href="styles/simplebox.css" title="SimpleBox" data-id="simplebox" data-author-name="Rael Max" data-author-url="http://raelmax.com">
<link rel="alternate" href="http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=css1k" type="application/rss+xml" title="CSS1K news on Twitter">
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script>
if (window.location.host === 'css1k.com') {
var _gaq=[['_setAccount','UA-8018150-3'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));
}
</script>
</head>
<body>
<header>
<h1>CSS1K</h1>
<nav>
<h2>Select a design</h2>
<ul>
<li><a href="./">Default</a>
<a href="http://twitter.com/jacobrask">Jacob Rask</a>
</ul>
</nav>
</header>
<article role="main">
<header>
<h2>The Beauty in <abbr>CSS</abbr> Design</h2>
<p>A demonstration of what can be accomplished with only 1 <abbr title="Kibibyte">K</abbr> (<dfn title="1024 bytes">Kibibyte</dfn>) of <abbr>CSS</abbr>. Select any design from the list to load it into this page.</p>
</header>
<section>
<h2>So What is This About?</h2>
<p>Back in 2003 (that's 8 years ago!) <a href="http://mezzoblue.com">Dave Shea</a> launched the <a href="http://www.csszengarden.com"><cite><abbr>CSS</abbr> Zen Garden</cite></a>. It showcased what was possible with <abbr>CSS</abbr>-based designs, leading to an explosion in the use of CSS on the web. More recently, <a href="http://qfox.nl">Peter van der Zee</a> created <a href="http://js1k.com">JS1k</a>, a competition to build cool applications with no more than 1 <abbr>K</abbr> of JavaScript.</p>
<p>At lot has happened since the Zen Garden days, and today you can do almost anything with only <abbr>CSS</abbr>. As <abbr>CSS</abbr> use is growing, so is the average <abbr>CSS</abbr> file size. Popular sites have in average <a href="http://httparchive.org/interesting.php#mostcss">27 <abbr>K</abbr> of <abbr>CSS</abbr></a>, but some use up to a megabyte of style sheets!</p>
<p>Do we need that much? <b>CSS1K</b> invites you to show that web developers are more inventive than ever, and that limitations can sparkle creativity.</p>
</section>
<section>
<h2>Participation</h2>
<ol>
<li>Submissions must consist of only <abbr>CSS</abbr>
<li>Submissions may be up to 1 <abbr title="Kibibyte">K</abbr> (1024 bytes) minified
<li>Vendor prefixes are <em>not</em> counted to the total number of bytes – submit your code unprefixed and we will add necesssary prefixes
<li>Any external resources and images, including <code>data</code> <abbr>URI</abbr>'s, <code>@font-face</code> and <code>@import</code>'s, are forbidden
<li>The page <a href="http://dowebsitesneedtolookexactlythesameineverybrowser.com">does not</a> have to look the same in every browser, but graceful degradation is encouraged
<li>The submitted code is licensed under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>
</ol>
<p>To participate, fork <a href="https://github.com/jacobrask/CSS1K/">CSS1K</a> at GitHub and send your submission as a pull request. You are free to update your style at any time by sending a new pull request. Please specify the name of the style, your own name, and an URL you want us to link to (such as your homepage). If you don't have a GitHub account, you can send in your submission via <a href="mailto:admin@css1k.com?subject=CSS1K Submission [Design name]">e-mail</a>.</p>
<p>New entries and updates will be announced by <a href="http://twitter.com/CSS1K">@CSS1K on Twitter</a>.</p>
</section>
</article>
<footer>
<p>
Licensed under the <a href="http://www.opensource.org/licenses/mit-license.php" rel="license">MIT license</a>.
Hosted and managed at <a href="https://github.com/jacobrask/CSS1K">GitHub</a>.
</p>
</footer>
<script src="js/switcher.js"></script>
</body>
</html>