Started merging navigation into a common template header

The navbar on danimoth's theme is now absolutely positioned, which
does mean that on pages without the .news div, there is an empty
space above the navbar
This commit is contained in:
str4d
2012-12-23 12:02:39 +00:00
parent e86522886b
commit 97c0cee69a
3 changed files with 53 additions and 45 deletions

View File

@@ -14,48 +14,49 @@
</head>
<body>
<div class="hide"><a href="#content" title="Skip navigation" accesskey="2">{{ _('Skip navigation') }}</a></div>
<div id="topbar">
<a id="logo" href="{{ site_url() }}"><img src="{{ url_for('static', filename=logo_url()) }}" alt="I2P Logo" title="Invisible Internet Project (I2P)" /></a>
<div class="title">
<h1>{{ self.title() }}</h1>
{% include "global/lang.html" %}
</div>
</div>
{%- if g.theme != "danimoth" %}
<div class="navigation">
{% include "global/nav.html" %}
</div>
<div id="content">
{% block content_outer %}
<div class="inner">
{%- if self.lastupdated() or self.accuratefor() -%}
<div class="lastupdated">
This page {% if self.lastupdated() %}was last updated in {% block lastupdated %}{% endblock %}{% endif -%}
{% if self.lastupdated() and self.accuratefor() %} and {% endif -%}
{% if self.accuratefor() %}is accurate for router version {% block accuratefor %}{% endblock %}{% endif %}.
<header>
<div id="topbar">
<a id="logo" href="{{ site_url() }}"><img src="{{ url_for('static', filename=logo_url()) }}" alt="I2P Logo" title="Invisible Internet Project (I2P)" /></a>
<div class="title">
<h1>{{ self.title() }}</h1>
<div class="lang">
{% include "global/lang.html" %}
</div>
</div>
{% endif %}
{% block content %}{% endblock %}
</div>
{% endblock %}
</div>
<div id="footer">
{% include "global/footer.html" %}
</div>
{%- else %}
<nav class="navigation">
{% include "global/nav.html" %}
</nav>
</header>
<div class="container-fluid">
<div class="sidebar">
{%- if not self.content() %}
{%- if not self.content() and g.theme == 'danimoth' %}
<aside>
<div class="alert-message block-message warning news">
<h2>{% trans %}News &amp; Updates{% endtrans %}</h2>
{% include "blog/latest.html" %}
</div>
</aside>
{%- endif %}
<div class="well">
{% include "global/nav.html" %}
{%- if g.theme != "danimoth" %}
<div id="content">
{% block content_outer %}
<div class="inner">
{%- if self.lastupdated() or self.accuratefor() -%}
<div class="lastupdated">
This page {% if self.lastupdated() %}was last updated in {% block lastupdated %}{% endblock %}{% endif -%}
{% if self.lastupdated() and self.accuratefor() %} and {% endif -%}
{% if self.accuratefor() %}is accurate for router version {% block accuratefor %}{% endblock %}{% endif %}.
</div>
{% endif %}
{% block content %}{% endblock %}
</div>
{% endblock %}
</div>
<footer>
{% include "global/footer.html" %}
</footer>
{%- else %}
<div class="content{% if not self.content() %} well{% endif %}">
{%- if self.content() %}
{{ self.content() }}
@@ -66,7 +67,7 @@
{% include "global/footer.html" %}
</footer>
</div>
</div>
{%- endif %}
</div>
</body>
</html>

View File

@@ -31,6 +31,13 @@ div#cssmenu .right {
display: none;
}
nav.navigation {
position: absolute;
margin: 260px 0 20px 20px;
width: 180px;
z-index: 1;
}
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td {
margin:0;
padding:0;
@@ -191,7 +198,7 @@ zoom:1;
clear:both;
}
.container-fluid>.sidebar {
.container-fluid> aside {
float:left;
width:220px;
}
@@ -2151,7 +2158,7 @@ color:#bfbfbf;
border:0;
}
.well {
.well, .navigation {
background-color:#f5f5f5;
margin-bottom:20px;
padding:19px;

View File

@@ -272,13 +272,13 @@ div#content .main {
div#content .inner p {margin:1em 0;}
div#content .inner td {padding:2px 5px;}
div#footer {width:auto; border-top:3px solid #883333; background:#552222; box-shadow:0px -4px 8px rgba(0,0,0,.3); padding:1em 10%; background:-moz-linear-gradient(#883333, #772222);}
div#footer .aside {display:inline-block; width:15%; margin-left:1%; vertical-align:top;}
div#footer .aside.first {margin-left:0;}
div#footer .aside.third, div#footer .aside.fifth {margin-left:2.5%}
div#footer .aside h1 {color:#ffdd88; font-size:1.2em; text-shadow:-1px -1px 1px rgba(0,0,0,.2); border-bottom:1px solid #ccaa66; margin:1em 0; line-height:1.3em;}
div#footer .aside ul {margin:0; padding:0;}
div#footer .aside ul li {list-style-type:none; line-height:1.5em;}
div#footer .aside ul li a {color:#ccaa66; font-weight:bold;}
div#footer .aside ul li a:hover {text-decoration:underline;}
div#footer a.button {padding:.5em 2em; background-color:#cc2222; border:1px solid #bb2222; border-radius:3px; display:inline-block; color:white; margin:1em auto; text-align:center; width:auto; font-weight:bold;}
footer {width:auto; border-top:3px solid #883333; background:#552222; box-shadow:0px -4px 8px rgba(0,0,0,.3); padding:1em 10%; background:-moz-linear-gradient(#883333, #772222);}
footer .aside {display:inline-block; width:15%; margin-left:1%; vertical-align:top;}
footer .aside.first {margin-left:0;}
footer .aside.third, div#footer .aside.fifth {margin-left:2.5%}
footer .aside h1 {color:#ffdd88; font-size:1.2em; text-shadow:-1px -1px 1px rgba(0,0,0,.2); border-bottom:1px solid #ccaa66; margin:1em 0; line-height:1.3em;}
footer .aside ul {margin:0; padding:0;}
footer .aside ul li {list-style-type:none; line-height:1.5em;}
footer .aside ul li a {color:#ccaa66; font-weight:bold;}
footer .aside ul li a:hover {text-decoration:underline;}
footer a.button {padding:.5em 2em; background-color:#cc2222; border:1px solid #bb2222; border-radius:3px; display:inline-block; color:white; margin:1em auto; text-align:center; width:auto; font-weight:bold;}