First pass at redesigning content layout

i2p2www/pages/global/layout.html

@@ -49,7 +49,18 @@
     <div class="container-fluid{% if not self.content() %} well{% endif %}">
       <div id="content">
         {% block content_outer %}
-        <article class="inner">
+        <div class="title">
+          <h1>{{ self.title() }}</h1>
+        </div>
+
+        <main role="main" class="inner">
+          <aside class="sidebar">
+            {% if self.content_nav() -%}
+            <nav>
+            {% block content_nav %}{% endblock %}
+            </nav>
+            {%- endif %}
+
           {% if self.lastupdated() or self.accuratefor() -%}
           <div class="lastupdated">
             <!--
@@ -71,12 +82,12 @@
             {%- endif %}{% endif %}{% endif %}
           </div>
           {%- endif %}
+          </aside>
 
-          <div class="title">
-            <h1>{{ self.title() }}</h1>
-          </div>
+          <article class="content-inner">
           {% block content %}{% endblock %}
           </article>
+        </main>
       {% endblock %}
       </div>
       <footer id="global-footer">

i2p2www/static/styles/duck/default.css

@@ -23,6 +23,17 @@ div.hide {
     display: none
 }
 
+.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;
+    line-height:41px;
+    vertical-align:middle;
+}
+
 div#topbar {
     width: 80%;
     /*margin: 1em auto;*/
@@ -142,53 +153,61 @@ div#content .feed-icon {
     width: 28px;
 }
 
-div#content .lastupdated {
-    background-color: #ffffdd;
-    border-radius: 0 0 5px 5px;
-    padding: 2px 4px;
-    position: relative;
-    left: 8%;
-    text-align: right;
-    width: 80%;
-}
-
 /**
  * The .inner class is for the content wrapper on inner pages (as opposed to the home page)
  */
 
 div#content .inner {
+    background: rgba(0, 0, 0, 0.05);
     width: auto;
-    margin: 0 5%;
     padding: 0 5% 0.1em;
     position: relative;
-    background: rgba(171, 204, 113, 0.6);
     border-top: 2px solid #abcc71;
-    border-left: 2px solid #abcc71;
-    border-right: 2px solid #abcc71;
-    border-radius: 5px 5px 0 0;
     color: black;
     font-size: 1.2em;
     line-height: 1.4em;
 }
 
+div#content .sidebar {
+    border-bottom: 2px solid #abcc71;
+    border-left: 2px solid #abcc71;
+    border-right: 2px solid #abcc71;
+}
+
+div#content .sidebar nav {
+    background: rgba(171, 204, 113, 0.6);
+    border-bottom: 2px solid #abcc71;
+}
+
+div#content .sidebar nav ul {
+    margin: 0;
+    padding: 1.5em 1em;
+}
+
+div#content .lastupdated {
+    background-color: #ffffdd;
+    border-radius: 0 0 0 10px;
+    padding: 2px 4px;
+    position: relative;
+    text-align: right;
+}
+
+div#content .content-inner {
+    background: white;
+    border-left: 2px solid #abcc71;
+    border-right: 2px solid #abcc71;
+    padding: 1em 2em;
+}
+
 div#content .inner h1,
 div#content .inner h2,
 div#content .inner h3,
 div#content .inner h4 {
-    color: white;
-    text-shadow: 1px 1px 1px rgba(0,0,0,.3);
     margin: 1em 0 .5em;
     padding-bottom: .2em;
-    clear: both;
     line-height: 110%;
 }
 
-div#content .inner h2,
-div#content .inner h3,
-div#content .inner h4 {
-    border-bottom: 1px solid white
-}
-
 div#content .inner h1 {
     font-size: 2.2em;
     margin: 1em 0 0.5em;
@@ -197,7 +216,8 @@ div#content .inner h1 {
 }
 
 div#content .inner h2 {
-    font-size: 1.6em
+    font-size: 1.6em;
+    border-bottom: 1px solid black
 }
 
 div#content .inner h3 {

i2p2www/static/styles/duck/desktop.css

@@ -13,12 +13,6 @@ div#topbar #logo img:hover {
 }
 
 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;
@@ -241,24 +235,26 @@ div#content .aside:first-child {
     margin-left: 0%
 }
 
-div#content .lastupdated {
-    left: auto;
-    position: absolute;
-    right: 10%;
-    top: 0;
-    width: 200px;
-}
-
 /**
  * The .inner class is for the content wrapper on inner pages (as opposed to the home page)
  */
 
 div#content .inner {
-    padding: 4em 5% 2em;
+    padding:0 10%;
     font-size: 1.3em;
 }
 
-div#content .inner > .title {
+div#content .inner .sidebar {
+    border-radius: 0 0 0 10px;
+    float: left;
+    width: 200px;
+}
+
+div#content .content-inner {
+    margin-left: 202px;
+}
+
+div#content .title {
     display: none
 }
 

i2p2www/static/styles/duck/mobile.css

@@ -1,3 +1,7 @@
+.title {
+    text-align: center;
+}
+
 #topbar .title {
     display: none
 }