diff options
| author | Ben Burwell <bburwell1@gmail.com> | 2014-10-22 08:32:36 -0400 |
|---|---|---|
| committer | Ben Burwell <bburwell1@gmail.com> | 2014-10-22 08:32:36 -0400 |
| commit | 08382353aefdeed581d6b0482d5e6c366bd56a8b (patch) | |
| tree | 9e673341fe967ea76f269f6928bd069662c92a03 | |
| parent | 2be4051f03ff4ae34d06aaaf4a5090a174aedb88 (diff) | |
Add dashes
| -rw-r--r-- | dashes/index.html | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/dashes/index.html b/dashes/index.html new file mode 100644 index 0000000..3eab393 --- /dev/null +++ b/dashes/index.html @@ -0,0 +1,128 @@ +<html> + <head> + <title>Dashes — EM dash, EN dash, hyphen, minus</title> + <meta charset="UTF-8"> + <style type="text/css"> + * { + padding: 0; + margin: 0; + } + + body { + background-color: #142429; + font-family: 'Futura'; + text-align: center; + } + + h1 { + color: #B65C2D; + font-size: 50px; + padding-top: 1.5em; + } + + p.sentence { + color: #999; + font-size: 22px; + padding: 0.5em; + } + + p.example { + color: #999; + font-size: 72px; + line-height: 70px; + } + + p.how-to { + color: #666; + font-family: 'Courier'; + font-size: 14px; + padding-bottom: 1em; + } + + p.buttons { + margin: 10px; + } + + p.buttons a { + padding: 8px; + color: #ccc; + text-decoration: none; + } + + p.buttons a:hover, p.buttons a.current { + text-shadow: 0 -1px 2px #000; + color: #B65C2D; + } + + span.use-on { + display: none; + } + + span.entity { + display: inline; + } + </style> + <script type="text/javascript"> + var showOnly = function(class_name) { + var es = document.getElementsByClassName('use-on'); + var i = es.length; + + while (i--) { + es[i].style.display = 'none'; + } + + var es = document.getElementsByClassName(class_name); + var i = es.length; + + while (i--) { + es[i].style.display = 'inline'; + } + } + + </script> + </head> + <body> + + <p class="buttons"> + <a id="select-entity" href="javascript:showOnly('entity');return false;" onclick="showOnly('entity');">HTML</a> + <a id="select-osx" href="javascript:showOnly('osx');return false;" onclick="showOnly('osx');">OS X</a> + <a id="select-latex" href="javascript:showOnly('latex');return false;" onclick="showOnly('latex');">LaTeX</a> + </p> + + <h1>EM Dash</h1> + <p class="example">—</p> + <p class="sentence">I believe I shall—no, I’m going to do it.</p> + <p class="how-to"> + <span class="use-on entity">&#8212;</span> + <span class="use-on osx" title="shift option hyphen">⇧⌥‐</span> + <span class="use-on latex">‐‐‐</span> + </p> + + <h1>EN Dash</h1> + <p class="example">–</p> + <p class="sentence">It will take 15–20 minutes.</p> + <p class="how-to"> + <span class="use-on entity">&#8212;</span> + <span class="use-on osx" title="option hyphen">⌥‐</span> + <span class="use-on latex">‐‐</span> + </p> + + <h1>Hyphen</h1> + <p class="example">‐</p> + <p class="sentence">Only use upper-case letters.</p> + <p class="how-to"> + <span class="use-on entity">&#8212;</span> + <span class="use-on osx" title="hyphen">‐</span> + <span class="use-on latex">‐</span> + </p> + + <h1>Minus</h1> + <p class="example">−</p> + <p class="sentence">12 − 3 = 9</p> + <p class="how-to"> + <span class="use-on entity">&#8212;</span> + <span class="use-on osx">no shortcut</span> + <span class="use-on latex">$‐$</span> + </p> + </body> +</html> |