Added breadcrumbs functionality and modified css colors a bit

master
kts of kettek 2015-10-11 23:41:15 -07:00
parent c26af35ac4
commit 23aead1e95
3 changed files with 58 additions and 2 deletions

View File

@ -13,9 +13,13 @@
<!--@@INC:menu@@-->
<li><a href="/">Main</a></li><li><form action="@@PAGE@@/search" method="POST"><input type="text" name="search"><input type="submit" name="submit" value="Search"></form></li>
</ul>
<ul id="crumbs">
@@CRUMBS@@
</ul>
<ul id="controls">
@@CONTROLS@@
</ul>
<div id="index">
</div>

View File

@ -420,6 +420,16 @@ qwiki.rule('', '@@CONTROLS@@', function(req, res, instance, next) {
res.write('<li><a href="'+req.url+'/edit"><img src="/edit.png">Edit</a></li><li><a href="'+req.url+'/new"><img src="/new.png">New Page</a></li>');
next();
});
qwiki.rule('', '@@CRUMBS@@', function(req, res, instance, next) {
var parts = req.url.split('/');
var path = '';
parts[0] = '>';
for (var i = 0; i < parts.length; i++) {
path += (i == 0 ? '' : parts[i])+(i == parts.length-1 ? '' : '/');
res.write('<li><a href="'+path+'">'+parts[i]+'</a></li>');
}
next();
});
qwiki.rule('', '@@FOOTER@@', function(req, res, instance, next) {
res.write('<a href="http://kettek.net/qwiki">qwiki</a> Copyright 2015 <a href="http://kettek.net">kts of kettek</a>');
next();

View File

@ -116,7 +116,7 @@ html,body {
list-style: none;
margin: 0;
padding: 0;
background-color: #6c6c87;
background-color: #fcfce2;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
@ -138,11 +138,53 @@ html,body {
text-decoration: none;
display: block;
padding: 0.25em;
color: #ececf7;
color: #0c0c27;
transition: all .10s;
box-shadow: rgba(0,0,0, 0.2) 0px 0px 4px;
-moz-box-shadow: rgba(0,0,0, 0.2) 0px 0px 4px;
-webkit-box-shadow: rgba(0,0,0, 0.2) 0px 0px 4px;
}
#controls a:hover {
background-color: #acac92;
-webkit-transition: background-color .10s linear;
-moz-transition: background-color .10s linear;
-o-transition: background-color .10s linear;
-ms-transition: background-color .10s linear;
transition: background-color .10s linear;
}
/* breadcrumbs */
#crumbs {
font-family: 'Oswald', sans-serif;
font-size: 75%;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #3c3c57;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: flex-start;
align-items: stretch;
}
#crumbs li {
text-align: left;
}
#crumbs a {
text-decoration: none;
padding: 0.25em;
display: block;
color: #ececf7;
transition: all .10s;
padding: 0.5em;
min-width: 4em;
border-right: 1px solid #2c2c47;
}
#crumbs a:hover {
background-color: #2c2c47;
-webkit-transition: background-color .10s linear;
-moz-transition: background-color .10s linear;
-o-transition: background-color .10s linear;