fix navigation hierarchy, use top bar and align controls
This commit is contained in:
parent
3b80e68c54
commit
f9d0c7c910
2 changed files with 17 additions and 8 deletions
|
@ -120,6 +120,15 @@ section > header h1 {
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
.reload, .all-read, #setstarred, #setunread {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.settings, .list {
|
||||
float: left;
|
||||
}
|
||||
|
||||
section > footer {
|
||||
padding: 10px;
|
||||
position: fixed;
|
||||
|
|
16
index.html
16
index.html
|
@ -18,15 +18,15 @@
|
|||
<body>
|
||||
|
||||
<section id="list" class="active">
|
||||
<header class="bar">
|
||||
<a class="button icon settings" href="#settings">⚙</a>
|
||||
<a class="button icon reload" href="#reload">🔄</a>
|
||||
<a class="button icon all-read" href="#all-read" id="all-read">❌</a>
|
||||
<canvas width="40" height="40"></canvas>
|
||||
</header>
|
||||
<article>
|
||||
<ul></ul>
|
||||
</article>
|
||||
<footer class="bar">
|
||||
<a class="button icon" href="#reload">🔄</a>
|
||||
<a class="button icon" href="#all-read" id="all-read">❌</a>
|
||||
<a class="button icon" href="#settings">⚙</a>
|
||||
<canvas width="40" height="40"></canvas>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
<section id="settings">
|
||||
|
@ -83,9 +83,9 @@
|
|||
|
||||
<section id="full">
|
||||
<header class="bar">
|
||||
<a class="button icon" href="#list"></a>
|
||||
<a id="setunread" class="button icon" href="#unread">✓</a>
|
||||
<a class="button icon list" href="#list"></a>
|
||||
<a id="setstarred" class="button icon" href="#starred">☆</a>
|
||||
<a id="setunread" class="button icon" href="#unread">✓</a>
|
||||
<canvas width="40" height="40"></canvas>
|
||||
</header>
|
||||
<article>
|
||||
|
|
Reference in a new issue