You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
429 lines
13 KiB
429 lines
13 KiB
<!doctype html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>Document</title> |
|
|
|
<style type="text/css"> |
|
* { |
|
box-sizing: border-box; |
|
} |
|
|
|
body { |
|
padding: 0; |
|
margin: 0; |
|
color: #666; |
|
background: #fafafa; |
|
font-family: Arial, Helvetica, sans-serif; |
|
font-size: 1em; |
|
line-height: 1.4 |
|
} |
|
|
|
header { |
|
display: block; |
|
padding: 3em 3em 2em 3em; |
|
background-color: #fff |
|
} |
|
|
|
header p { |
|
margin: 0 0 0 0; |
|
} |
|
|
|
nav { |
|
font-size: .7em; |
|
display: block; |
|
width: 100%; |
|
margin: 0 0 2em 0 |
|
} |
|
|
|
nav a { |
|
display: inline-block; |
|
text-decoration: none; |
|
margin-left: 2em; |
|
color: #0f7595; |
|
white-space: nowrap |
|
} |
|
|
|
nav a:hover { |
|
text-decoration: underline |
|
} |
|
|
|
nav a.current { |
|
font-weight: bold; |
|
text-decoration: underline; |
|
color: #666 |
|
} |
|
|
|
section { |
|
border-top: 1px solid #eee; |
|
padding: 2em 3em 0 3em |
|
} |
|
|
|
ul { |
|
margin: 0; |
|
padding: 0 |
|
} |
|
|
|
.icon-box { |
|
margin: 0; |
|
width: 100%; |
|
padding: 20px; |
|
position: relative; |
|
background: #ccc url(data:image/gif;base64,R0lGODlhDAAMAIAAAMzMzP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQjk4OTI0MUY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQjk4OTI0MkY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNCOTg5MjNGRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNCOTg5MjQwRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAAAwADAAAAhaEH6mHmmzcgzJAUG/NVGrfOZ8YLlABADs=) top left repeat; |
|
border: 1px solid #ccc; |
|
display: inline-block; |
|
vertical-align: middle; |
|
text-align: center; |
|
color: black; |
|
} |
|
|
|
.icon-box.inverted { |
|
background: black; |
|
} |
|
|
|
.icon-wrapper { |
|
width: 150px; |
|
float: left; |
|
} |
|
|
|
.icon-snippet { |
|
width: 100%; |
|
overflow-x: scroll; |
|
box-shadow: 0 0 1px grey inset; |
|
text-align: center; |
|
} |
|
|
|
pre { |
|
padding: 10px; |
|
margin: 0; |
|
} |
|
|
|
h2 { |
|
margin: 0; |
|
padding: 5px 0; |
|
font-size: 1em; |
|
font-weight: normal; |
|
white-space: nowrap; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
} |
|
|
|
h4 { |
|
margin: 0; |
|
} |
|
|
|
footer { |
|
display: block; |
|
margin: 0; |
|
padding: 0 3em 3em 3em |
|
} |
|
|
|
footer p { |
|
margin: 0; |
|
font-size: .7em |
|
} |
|
|
|
footer a { |
|
color: #0f7595; |
|
margin-left: 0 |
|
} |
|
|
|
.icons { |
|
padding: 50px 0; |
|
max-width: 90%; |
|
margin: 0 auto; |
|
} |
|
|
|
svg { |
|
display: inline-block; |
|
fill: currentColor !important; |
|
vertical-align: middle; |
|
max-width: 80%; |
|
height: 80%; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<header> |
|
<h1>Symbols</h1> |
|
<p>Example usage:</p> |
|
<pre><code><svg><use xlink:href="icons.svg#svg-logo"></use></svg></code></pre> |
|
</header> |
|
<main class="icons"> |
|
<div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-bin"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-bin</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-block"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-block</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-book"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-book</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-bug"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-bug</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-circle-delete"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-circle-delete</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-circle-minus"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-circle-minus</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-circle-ok"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-circle-ok</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-circle-pause"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-circle-pause</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-circle-play"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-circle-play</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-circle-plus"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-circle-plus</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-code"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-code</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-cog"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-cog</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-devices"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-devices</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-github"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-github</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-globe"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-globe</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-help"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-help</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-home"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-home</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-imac"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-imac</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-jh"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-jh</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-list"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-list</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-list2"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-list2</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-logo-word"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-logo-word</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-logo"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-logo</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-newtab"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-newtab</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-pen"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-pen</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-pencil"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-pencil</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-plug"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-plug</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-repeat"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-repeat</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-square-add"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-square-add</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-square-up"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-square-up</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-sync-browser"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-sync-browser</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-sync"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-sync</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-syncall"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-syncall</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-target"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-target</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-terminal"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-terminal</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-time"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-time</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-trash"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-trash</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-twitter"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-twitter</code></pre> |
|
</div> |
|
</div><div class="icon-wrapper"> |
|
<div class="icon-box"> |
|
<svg><use xlink:href="icons.svg#svg-wifi"></use></svg> |
|
</div> |
|
<div class="icon-snippet"> |
|
<pre><code>svg-wifi</code></pre> |
|
</div> |
|
</div> |
|
</main> |
|
</body> |
|
</html>
|
|
|