diff --git a/index.html b/index.html index 85eb46e..429acc0 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,7 @@ margin: 0; padding: 0; background-color: #fff; - color: #111; + color: #222; font-family: 'Lato', sans-serif; } @@ -40,14 +40,11 @@ letter-spacing: 6px; } - form { - margin-top: 2rem; - } - input { width: 90%; max-width: 310px; - padding: 10px 15px; + margin-top: 20px; + padding: 12px; background-color: #222; border-radius: 2px; color: #fff; @@ -64,44 +61,55 @@ aside { position: fixed; - left: -180px; + left: 0; width: 100%; - max-width: 180px; + max-width: 190px; height: 100%; - padding: 15px 25px; + padding: 15px 0 0; background-color: #fff; - box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4); - transition: transform 700ms; + box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2); + transition: 700ms; + transform: translateX(-190px); overflow: auto; z-index: 1; } aside[data-toggled='true'] { - transform: translateX(180px); + transform: translateX(0); } h1 { - margin: 0 0 15px; + margin: 0 25px 15px; line-height: 1rem; } ul { - margin: 0; + margin: 0 0 15px; padding: 0; } li { list-style: none; - line-height: 1.5em; - } - - span { - font-family: 'Courier New', monospace; } a { - color: #000; - font-size: 0.8rem; + display: block; + padding: 0 25px; + color: #222; + line-height: 1.7rem; + text-decoration: none; + } + + a:hover span:last-of-type { + text-decoration: underline; + } + + span:first-of-type { + font-family: 'Courier New', monospace; + } + + span:last-of-type { + font-size: 0.9rem; } @@ -146,36 +154,35 @@ opts.commands.forEach(function(command) { var li = document.createElement('li'); - var key = document.createElement('span'); var link = document.createElement('a'); + var key = document.createElement('span'); + var name = document.createElement('span'); key.innerHTML = command.key + ': '; + name.innerHTML = command.name; link.href = command.url; - link.innerHTML = command.name; + link.appendChild(key); + link.appendChild(name); - li.appendChild(key); li.appendChild(link); searchHelp.appendChild(li); }); - searchForm.addEventListener('keyup', function() { - var q = searchInput.value; - - if (q === '?') { - sidebar.setAttribute('data-toggled', true); - searchInput.value = ''; - } - }); - searchForm.addEventListener('submit', function(event) { event.preventDefault(); - if (searchInput.value === '') return false; + var q = searchInput.value + + if (q === '' || q === '?') { + sidebar.setAttribute('data-toggled', true); + searchInput.value = ''; + return false; + } var redirect = opts.defaultCommand + encodeURIComponent(q); - var q = searchInput.value.split(opts.delimiter); + q = q.split(opts.delimiter); opts.commands.forEach(function(command) { if (q[0] === command.key) { @@ -191,8 +198,12 @@ window.location.href = redirect; }, false); + + document.addEventListener('keydown', function(event) { + if (event.keyCode === 27) sidebar.removeAttribute('data-toggled'); + }); })({ - delimiter: ' ', + delimiter: ':', defaultCommand: 'https://www.google.com/search?q=', commands: [ { key: 'a', name: 'Amazon', url: 'https://www.amazon.com', search: '/s/?field-keywords=' },