-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
85 lines (85 loc) · 1.94 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
<!DOCTYPE html>
<html>
<head>
<title>todo</title>
<style>
html,
body,
.main,
.header,
.demo,
.demo iframe {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border-collapse: collapse;
}
.demo iframe {
display: block;
}
.header {
height: 0;
}
.h-spacer {
float: left;
width: 0;
height: 100px;
/* min-height is ignored if height is set */
}
label {
border-bottom: dashed 1px;
cursor: pointer;
}
#details-toggle {
display: none;
}
.intro,
.details {
padding: 0 2em;
overflow: hidden;
}
.intro {
background: #BBB;
}
.details {
background: #CCC;
}
#details-toggle:not(:checked) + .details {
display: none;
}
body {
font-family: sans-serif;
}
h1,
p {
margin: 0.5em 0;
}
</style>
</head>
<body>
<table class="main">
<!-- Yep. The good ol' bulletproof table -->
<tr>
<td class="header">
<div class="intro">
<p>A simple ToDo list in <em>250</em> bytes. <label for="details-toggle">Details</label></p>
</div>
<!-- JavaScript coders wring JavaScript is too dull. How about no JS at all on this page? -->
<input id="details-toggle" type="checkbox">
<div class="details">
<p>Inspired by GitHub <a href="https://github.com/blog/1841-nested-task-lists">task lists</a>. Write anything you want. Type “<kbd>[ ]</kbd>” or “<kbd>[x]</kbd>” anywhere to place a checkmark. These checkmarks can be toggled by clicking (right in the text field, try it!). Changes are automatically saved in localStorage.</p>
<p>Golfed by <a href="http://twitter.com/subzey">subzey</a></p>
<p><a href="https://github.com/codegolf/todo">GitHub repo</a></p>
</div>
</td>
</tr>
<tr>
<td class="demo">
<div class="h-spacer"></div>
<iframe src="golf.html" frameborder="0"></iframe>
</td>
</tr>
</table>
</body>
</html>