Merged template layout of topbar for duck's and danimoth's themes

2012-12-23 00:05:58 +00:00
parent c106e2fbd2
commit 1217dbe264
5 changed files with 49 additions and 32 deletions
--- a/i2p2www/pages/global/layout.html
+++ b/i2p2www/pages/global/layout.html
@@ -13,12 +13,15 @@
    {%- block headextra %}{% endblock %}
  </head>
  <body>
-{%- if g.theme != "danimoth" %}
    <div class="hide"><a href="#content" title="Skip navigation" accesskey="2">{{ _('Skip navigation') }}</a></div>
-    <div id="branding">
-      <h1 id="logo"><a href="{{ site_url() }}"><img src="{{ url_for('static', filename='images/logo_medium.png') }}" alt="I2P" /></a></h1>
-      <div class="title">{{ self.title() }}</div>
+    <div id="topbar">
+      <a id="logo" href="{{ site_url() }}"><img src="{{ url_for('static', filename='styles/' + g.theme + '/images/i2plogo.png') }}" 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>
@@ -40,19 +43,6 @@
      {% include "global/footer.html" %}
    </div>
 {%- else %}
-    <div class="topbar">
-      <div class="topbar-inner">
-        <div class="container-fluid">
-          <a class="brand" href="{{ site_url() }}"><img src="{{ url_for('static', filename='images/i2plogo.png') }}" alt="I2P Logo" title="Invisible Internet Project (I2P)" /></a>
-          <div class="pull-right">
-            <h6>{{ self.title() }}</h6>
-            {% include "global/lang.html" %}
-         </div>
-
-        </div>
-      </div>
-    </div>
-
    <div class="container-fluid">
      <div class="sidebar">
        {%- if not self.content() %}
--- a/i2p2www/static/styles/danimoth.css
+++ b/i2p2www/static/styles/danimoth.css
@@ -5,7 +5,7 @@ padding:0;

 body {
    margin: 0;
-    padding-top: 70px;
+    /*padding-top: 70px;*/
 }

 .news {
@@ -177,6 +177,7 @@ position:relative;
 min-width:940px;
 padding-left:20px;
 padding-right:20px;
+padding-top: 13px;
 zoom:1;
 }
 .container-fluid:before,.container-fluid:after {
@@ -210,8 +211,9 @@ color:#00438a;
 text-decoration:underline;
 }

-.pull-right {
-float:right;
+div#topbar .title {
+float: right;
+padding: 0 20px;
 }

 .pull-left {
@@ -1300,14 +1302,29 @@ table .headerSortUp.purple,table .headerSortDown.purple {
 background-color:#e2d5f0;
 }

-.topbar {
-height:40px;
+#topbar {
+/*height:40px;
 position:fixed;
 top:0;
 left:0;
-right:0;
+right:0;*/
 z-index:10000;
-overflow:visible;
+/*overflow:visible;*/
+overflow: hidden;
+min-width: 980px;
+background-color:#222222;
+background-repeat:repeat-x;
+background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));
+background-image:-moz-linear-gradient(top, #333333, #222222);
+background-image:-ms-linear-gradient(top, #333333, #222222);
+background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));
+background-image:-webkit-linear-gradient(top, #333333, #222222);
+background-image:-o-linear-gradient(top, #333333, #222222);
+background-image:linear-gradient(top, #333333, #222222);
+filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
+-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
 }
 .topbar a {
 color:#bfbfbf;
@@ -1325,17 +1342,24 @@ text-decoration:none;
 position:relative;
 }

-.topbar h3 a,.topbar .brand {
+#topbar a#logo {
 float:left;
 display:block;
 padding:8px 20px 12px;
-margin-left:-20px;
+/*margin-left:-20px;*/
 color:#ffffff;
 font-size:20px;
 font-weight:200;
 line-height:1;
 }

+#topbar .title h1 {
+    color: #bfbfbf;
+    font-size: 13px;
+    margin: 0;
+    text-transform: uppercase;
+}
+
 .topbar p {
 margin:0;
 line-height:40px;
@@ -1425,19 +1449,19 @@ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endCo
 box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
 }

-.topbar div>ul,.nav {
+#topbar div>ul,.nav {
 display:block;
 float:left;
 margin:0 10px 0 0;
 position:relative;
 left:0;
 }
-.topbar div>ul>li,.nav>li {
+#topbar div>ul>li,.nav>li {
 display:block;
 float:left;
 }

-.topbar div>ul a,.nav a {
+#topbar div>ul a,.nav a {
 display:block;
 float:none;
 /*padding:10px 10px 11px;*/
--- a/i2p2www/static/styles/danimoth/images/i2plogo.png
+++ b/i2p2www/static/styles/danimoth/images/i2plogo.png
--- a/i2p2www/static/styles/duck.css
+++ b/i2p2www/static/styles/duck.css
@@ -12,18 +12,21 @@ a {color:#d00e0e; text-decoration:none;}

 div.hide {display:none;}

-div#branding {width:80%; /*margin:1em auto;*/ margin: 1em auto 0; position:relative;}
-    div#branding #logo img:hover {
+div#topbar {width:80%; /*margin:1em auto;*/ margin: 1em auto 0; position:relative;}
+    div#topbar #logo img:hover {
        filter:alpha(opacity=60);
        -moz-opacity: 0.6;
        opacity: 0.6;
    }
-    div#branding .title {
+    div#topbar .title {
        font-family:"URW Gothic L", "Century Gothic", sans-serif; text-transform:uppercase; font-size:3.5em; 
        font-weight:bold; text-shadow:1px 1px 1px rgba(0,0,0,.2); color:#333333;
        position:absolute; top:0; right:0; line-height:41px; vertical-align:middle;
        max-width: 70%; text-align: right;
    }
+    div#topbar .languages {
+        display: none;
+    }

 div.navigation {position:relative;}
    ul.languages {margin: 0 2px !important;}
--- a/i2p2www/static/styles/duck/images/i2plogo.png
+++ b/i2p2www/static/styles/duck/images/i2plogo.png