Browse files

Use a font icon for the hamburger

  • Loading branch information...
1 parent 413b449 commit 52fcd22e866030e7a64be06406dcc54709f3256e @NielsLeenheer committed Nov 12, 2013
View
13 css/main.css
@@ -291,13 +291,18 @@ body > div#index div#indexmenu li ul li a::before {
}
body > div#index button#indexbutton {
position: fixed;
- top: 0px;
+ top: 10px;
left: 0px;
- width: 48px;
- height: 48px;
- background-image: url('/images/hamburger.png');
+ width: 36px;
+ height: 40px;
+
+ font-family: html5test;
+ font-size: 1.4em;
+ color: #999;
+
background-color: transparent;
border: none;
+ outline: none;
z-index: 100000;
-webkit-transition: left 1s;
transition: left 1s;
View
BIN fonts/html5test.eot
Binary file not shown.
View
1 fonts/html5test.svg
@@ -46,6 +46,7 @@
<glyph unicode="&#xe604;" d="M512 960c-282.77 0-512-229.228-512-512 0-282.77 229.228-512 512-512 282.77 0 512 229.23 512 512 0 282.772-229.23 512-512 512zM704 704c35.346 0 64-42.98 64-96s-28.654-96-64-96-64 42.98-64 96 28.654 96 64 96zM352 647.938c59.646 0 102-22.332 102-57.282 0-7.398 3.812-42.994-0.17-49.594-14.828 24.576-54.81 42.188-101.83 42.188s-87.002-17.612-101.83-42.188c-3.982 6.6-0.17 42.196-0.17 49.594 0 34.95 42.354 57.282 102 57.282zM500.344 128c-119.242 0-223.858 64.28-282.892 160.952 70.41-55.060 194.534-65.81 325.288-39.978 140.248 27.706 249.11 91.542 288.454 176.594-21.654-167.96-161.518-297.568-330.85-297.568z" />
<glyph unicode="&#xe605;" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM704 704c35.346 0 64-28.654 64-64s-28.654-64-64-64-64 28.654-64 64 28.654 64 64 64zM256 640c0 35.346 28.654 64 64 64s64-28.654 64-64-28.654-64-64-64-64 28.654-64 64zM331.244 153.614l-22.488 76.774 437 128 22.488-76.774-437-128z" />
<glyph unicode="&#xe606;" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM704 704c35.346 0 64-28.654 64-64s-28.654-64-64-64-64 28.654-64 64 28.654 64 64 64zM320 704c35.346 0 64-28.654 64-64s-28.654-64-64-64-64 28.654-64 64 28.654 64 64 64zM704.098 179.26c-39.174 65.148-110.544 108.74-192.098 108.74-81.556 0-152.924-43.592-192.098-108.74l-82.328 49.396c55.96 93.070 157.916 155.344 274.426 155.344 116.508 0 218.464-62.274 274.426-155.344l-82.328-49.396z" />
+<glyph unicode="&#xe607;" d="M819.2 512h-614.4c-28.262 0-51.2-22.938-51.2-51.2s22.938-51.2 51.2-51.2h614.4c28.314 0 51.2 22.938 51.2 51.2s-22.886 51.2-51.2 51.2zM204.8 614.4h614.4c28.314 0 51.2 22.938 51.2 51.2s-22.886 51.2-51.2 51.2h-614.4c-28.262 0-51.2-22.938-51.2-51.2s22.938-51.2 51.2-51.2zM819.2 307.2h-614.4c-28.262 0-51.2-22.886-51.2-51.2s22.938-51.2 51.2-51.2h614.4c28.314 0 51.2 22.886 51.2 51.2s-22.886 51.2-51.2 51.2z" />
<glyph unicode="&#xf000;" d="M0 972.8l1024-1024h-1024z" />
<glyph unicode="&#xf002;" d="M992 256h-96v64h96q13.001 0 22.501-9.499t9.499-22.501-9.499-22.501-22.501-9.499zM992 384h-96v64h96q13.001 0 22.501-9.499t9.499-22.501-9.499-22.501-22.501-9.499zM992 512h-96v64h96q13.001 0 22.501-9.499t9.499-22.501-9.499-22.501-22.501-9.499zM992 640h-96v64h96q13.001 0 22.501-9.499t9.499-22.501-9.499-22.501-22.501-9.499zM800-64q-13.001 0-22.501 9.499t-9.499 22.501v96h64v-96q0-13.001-9.499-22.501t-22.501-9.499zM768 128h-448q-26 0-45.001 19.001t-19.001 45.001v448q0 26 19.001 45.001t45.001 19.001h448q27.001 0 45.499-18.501t18.501-45.499v-448q0-27.001-18.501-45.499t-45.499-18.501zM768 864q0 13.001 9.499 22.501t22.501 9.499 22.501-9.499 9.499-22.501v-96h-64v96zM640 864q0 13.001 9.499 22.501t22.501 9.499 22.501-9.499 9.499-22.501v-96h-64v96zM512 864q0 13.001 9.499 22.501t22.501 9.499 22.501-9.499 9.499-22.501v-96h-64v96zM384 864q0 13.001 9.499 22.501t22.501 9.499 22.501-9.499 9.499-22.501v-96h-64v96zM256 864q0 13.001 9.499 22.501t22.501 9.499 22.501-9.499 9.499-22.501v-96h-64v96zM64 160q0 13.001 9.499 22.501t22.501 9.499h96v-64h-96q-13.001 0-22.501 9.499t-9.499 22.501zM64 288q0 13.001 9.499 22.501t22.501 9.499h96v-64h-96q-13.001 0-22.501 9.499t-9.499 22.501zM64 416q0 13.001 9.499 22.501t22.501 9.499h96v-64h-96q-13.001 0-22.501 9.499t-9.499 22.501zM64 544q0 13.001 9.499 22.501t22.501 9.499h96v-64h-96q-13.001 0-22.501 9.499t-9.499 22.501zM64 672q0 13.001 9.499 22.501t22.501 9.499h96v-64h-96q-13.001 0-22.501 9.499t-9.499 22.501zM320-32q0-13.001-9.499-22.501t-22.501-9.499-22.501 9.499-9.499 22.501v96h64v-96zM448-32q0-13.001-9.499-22.501t-22.501-9.499-22.501 9.499-9.499 22.501v96h64v-96zM576-32q0-13.001-9.499-22.501t-22.501-9.499-22.501 9.499-9.499 22.501v96h64v-96zM704-32q0-13.001-9.499-22.501t-22.501-9.499-22.501 9.499-9.499 22.501v96h64v-96zM1024 160q0-13.001-9.499-22.501t-22.501-9.499h-96v64h96q13.001 0 22.501-9.499t9.499-22.501z" />
<glyph unicode="&#xf012;" d="M146.286 137.143v-109.714q0-8-5.143-13.143t-13.143-5.143h-109.714q-8 0-13.143 5.143t-5.143 13.143v109.714q0 8 5.143 13.143t13.143 5.143h109.714q8 0 13.143-5.143t5.143-13.143zM365.714 210.286v-182.857q0-8-5.143-13.143t-13.143-5.143h-109.714q-8 0-13.143 5.143t-5.143 13.143v182.857q0 8 5.143 13.143t13.143 5.143h109.714q8 0 13.143-5.143t5.143-13.143zM585.143 356.571v-329.143q0-8-5.143-13.143t-13.143-5.143h-109.714q-8 0-13.143 5.143t-5.143 13.143v329.143q0 8 5.143 13.143t13.143 5.143h109.714q8 0 13.143-5.143t5.143-13.143zM804.571 576v-548.571q0-8-5.143-13.143t-13.143-5.143h-109.714q-8 0-13.143 5.143t-5.143 13.143v548.571q0 8 5.143 13.143t13.143 5.143h109.714q8 0 13.143-5.143t5.143-13.143zM1024 868.571v-841.143q0-8-5.143-13.143t-13.143-5.143h-109.714q-8 0-13.143 5.143t-5.143 13.143v841.143q0 8 5.143 13.143t13.143 5.143h109.714q8 0 13.143-5.143t5.143-13.143z" />
View
BIN fonts/html5test.ttf
Binary file not shown.
View
BIN fonts/html5test.woff
Binary file not shown.
View
2 index.html
@@ -194,7 +194,7 @@ <h1 data-i18n><span>HTML<strong>5</strong>test</span> <em>how well does your bro
</script>
</ul>
</div>
- <button onclick='javascript:toggleIndex()' id='indexbutton'></button>
+ <button onclick='javascript:toggleIndex()' id='indexbutton'></button>
</div>
<script>

0 comments on commit 52fcd22

Please sign in to comment.