Browse Mode top bar, now with tag field (need to add autocompletion) and better icons

This commit is contained in:
Victoria Wang 2014-10-09 19:38:20 -07:00
parent 931a1f8554
commit 4681523c4c
2 changed files with 21 additions and 7 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 372 B

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -3,7 +3,7 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Neocities</title> <title>Neocities</title>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<style> <style>
* { * {
margin: 0; margin: 0;
@ -48,6 +48,18 @@
#top-bar a:hover { #top-bar a:hover {
color: #fff; color: #fff;
} }
#top-bar input {
border: 0;
background: #555;
color:white;
width: 120px;
padding: 1px 5px;
}
::-webkit-input-placeholder { font-style: italic; }
:-moz-placeholder { font-style: italic; }
::-moz-placeholder { font-style: italic; }
:-ms-input-placeholder { font-style: italic; }
#top-bar .browse-actions { #top-bar .browse-actions {
margin-left: 20px; margin-left: 20px;
} }
@ -59,6 +71,7 @@
background: url(topbar-close.png) no-repeat; background: url(topbar-close.png) no-repeat;
width: 13px; width: 13px;
height: 13px; height: 13px;
background-size: 13px;
margin-top: 1px; margin-top: 1px;
float: left; float: left;
} }
@ -72,14 +85,15 @@
<div id="top-bar"> <div id="top-bar">
<ul class="browse-actions"> <ul class="browse-actions">
<li><a href="https://neocities.org/">Neocities</a></li> <li><a href="https://neocities.org/">Neocities</a></li>
<li><a href=""><i class="fa fa-camera-retro"></i>Prev</a></li> <li><input type="text" placeholder="Browse by tag..." /></li>
<li><a href="">Next</a></li> <li><a href=""><i class="fa fa-caret-left"></i> Prev</a></li>
<li><a href="">Next <i class="fa fa-caret-right"></i></a></li>
</ul> </ul>
<ul class="site-actions"> <ul class="site-actions">
<li><a href=""><i class="icon-user"></i><strong>rik</strong></a></li> <li><a href=""><i class="fa fa-user"></i> <strong>rik</strong></a></li>
<li><a href="">Follow</a></li> <li><a href=""><i class="fa fa-plus"></i> Follow</a></li>
<li><a href="">Share</a></li> <li><a href=""><i class="fa fa-share-alt"></i> Share</a></li>
<li><a class="close" href=""></a></li> <li><a class="close" href="" alt="close" title="close"></a></li>
</ul> </ul>
</div> </div>