From 928f4b9c3ff50511391502d61524da9433a65c2e Mon Sep 17 00:00:00 2001
From: Astro <astro@spaceboyz.net>
Date: Sat, 27 Nov 2010 19:00:25 +0100
Subject: [PATCH] style overhaul (fixed-width navigation & side bars)

---
 content/static/style/default.css | 41 +++++++++---------
 xsl/common.xsl                   |  8 ++--
 xsl/footer.xsl                   | 71 +++++++++++++++-----------------
 xsl/xhtml5.xsl                   | 69 ++++++++++++++++---------------
 4 files changed, 95 insertions(+), 94 deletions(-)

diff --git a/content/static/style/default.css b/content/static/style/default.css
index b3dc9f61f..1bc47b788 100644
--- a/content/static/style/default.css
+++ b/content/static/style/default.css
@@ -42,13 +42,14 @@ pre {
   background-image: url(../images/logo.png);
   background-repeat: no-repeat;
   height: 0px !important;
-  height /**/:65px;
 }
 
 /* -- Body -- */
 #body {
   display: block;
-  float: left;
+  /*float: left;*/
+  background-color: white;
+  margin: 0 2em 0 2em;
 }
 
 /* -- Navigation -- */
@@ -56,9 +57,9 @@ pre {
 #navigation {
   float: left;
   text-align: left; 
-  width: 12%;
-  margin-left: 2em; 
-  padding: 1em;
+  width: 12em;
+  margin: 0;
+  padding: 1em 0;
   padding-top: 100px;
   background: url(../images/ck.png) top center no-repeat;
 }
@@ -99,13 +100,12 @@ pre {
 /* -- Content -- */
 #content {
   text-align: left;
-  float: left;
-  width: 50%;
   border-left: #ccc 1.1px dashed; 
   border-right: #ccc 1.1px dashed; 
   line-height: 1.3em;
   padding: 2em;
-  min-height: 200px;
+  min-height: 300px;
+  margin: 0 20em 0 12em;
 }
 
 #content p {
@@ -210,17 +210,21 @@ pre {
   padding-right: 4px;
 }
 
+/* -- Sidebar right -- */
+#rsidebar {
+  width: 20em;
+  float: right;
+  margin: 0;
+  padding: 0;
+  font-size: small;
+  text-align: left;
+}
+
 /* -- News -- */
 #news {
-  text-align: left;
-  float: right;
-  margin-right: 1em;
-  margin-left: -5%;
-  width: 19%;
   background: url(../images/pesthoernchen.png) top center no-repeat;
   padding: 2em;
   padding-top: 90px;
-  font-size: small;
 }
 
 #news h2 {
@@ -254,13 +258,7 @@ pre {
 
 /* -- Upcoming -- */
 #upcoming {
-  text-align: left;
-  float: right;
-  margin-right: 1em;
-  margin-left: -5%;
-  width: 19%;
   padding: 2em;
-  font-size: small;
 }
 
 #upcoming h2 {
@@ -302,6 +300,7 @@ pre {
 
 /* -- footer -- */
 #footer {
+  clear: both;
   margin: 0 2em 2em 2em;
   text-align: center;
   font-size: small;
@@ -768,6 +767,8 @@ p.blockquote {
         background-color: #fafafa;
 }
 
+/* -- Flattr button -- */
+
 a.flattr {
     content: url(../images/flattrthis.png);
     opacity: 0.8;
diff --git a/xsl/common.xsl b/xsl/common.xsl
index d3ef9fc2d..b64261532 100644
--- a/xsl/common.xsl
+++ b/xsl/common.xsl
@@ -161,7 +161,7 @@
 
   <xsl:template name="chaosupdates">
     <xsl:param name="limit" select="5"/>
-    <div id="news"><aside>
+    <div id="news">
       <h2>
         <a href="{document('../chaosupdates.xml')/atom:feed/atom:link[not(@rel = 'self')]/@href}">
           <xsl:value-of select="document('../chaosupdates.xml')/atom:feed/atom:title"/>
@@ -176,13 +176,13 @@
           </li>
         </xsl:for-each>
       </ul>
-    </aside></div> <!-- id="news" -->
+    </div> <!-- id="news" -->
   </xsl:template>
 
   <xsl:template name="calendar-events">
     <xsl:param name="limit" select="5"/>
     <xsl:if test="document('../calendar-summary.xml')/page/calendar-summary/event[date:seconds(end) &gt;= date:seconds(date:date())]">
-      <div id="upcoming"><aside>
+      <div id="upcoming">
         <h2>
           <a href="{$baseurl}calendar.html">Kalender</a>
         </h2>
@@ -214,7 +214,7 @@
             </xsl:if>
           </xsl:for-each>
         </ul>
-      </aside></div>
+      </div>
     </xsl:if>
   </xsl:template>
 
diff --git a/xsl/footer.xsl b/xsl/footer.xsl
index cdd2550c2..ddf9070d2 100644
--- a/xsl/footer.xsl
+++ b/xsl/footer.xsl
@@ -8,55 +8,52 @@
 
   <xsl:template name="footer">
     <footer>
-        <!-- ### Footer ### -->
-          <xsl:comment>
-            <xsl:text> ### Footer ### </xsl:text>
-          </xsl:comment>
-          <div id="footer">
-
-  <ul>
-    <li><a href="{$baseurl}impressum.html">Impressum</a></li>
-    <li>
-    <!-- Creative Commons License -->
+      <!-- ### Footer ### -->
       <xsl:comment>
-        <xsl:text> Creative Commons License </xsl:text>
+	<xsl:text> ### Footer ### </xsl:text>
       </xsl:comment>
-      <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/de/deed.de">
-        <img alt="Creative Commons License" src="{$baseurl}images/footer/cc-somerights20.png" title="Creative Commons Attribution-ShareAlike 2.0 Germany License" />
-      </a>
-      <xsl:comment>
-        <xsl:text>
-          &lt;rdf:RDF xmlns="http://web.resource.org/cc/"
-            xmlns:dc="http://purl.org/dc/elements/1.1/"
-            xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"&gt;
-            &lt;Work rdf:about=""&gt;
+      <ul>
+	<li><a href="{$baseurl}impressum.html">Impressum</a></li>
+	<li>
+	  <!-- Creative Commons License -->
+	  <xsl:comment>
+	    <xsl:text> Creative Commons License </xsl:text>
+	  </xsl:comment>
+	  <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/de/deed.de">
+	    <img alt="Creative Commons License" src="{$baseurl}images/footer/cc-somerights20.png" title="Creative Commons Attribution-ShareAlike 2.0 Germany License" />
+	  </a>
+	  <xsl:comment>
+	    <xsl:text>
+	      &lt;rdf:RDF xmlns="http://web.resource.org/cc/"
+	      xmlns:dc="http://purl.org/dc/elements/1.1/"
+	      xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"&gt;
+	      &lt;Work rdf:about=""&gt;
               &lt;dc:type rdf:resource="http://purl.org/dc/dcmitype/Interactive" /&gt;
               &lt;license rdf:resource="http://creativecommons.org/licenses/by-sa/2.0/de/" /&gt;
-            &lt;/Work&gt;
+	      &lt;/Work&gt;
 
-            &lt;License rdf:about="http://creativecommons.org/licenses/by-sa/2.0/de/"&gt;
+	      &lt;License rdf:about="http://creativecommons.org/licenses/by-sa/2.0/de/"&gt;
               &lt;permits rdf:resource="http://web.resource.org/cc/Reproduction" /&gt;
               &lt;permits rdf:resource="http://web.resource.org/cc/Distribution" /&gt;
               &lt;requires rdf:resource="http://web.resource.org/cc/Notice" /&gt;
               &lt;requires rdf:resource="http://web.resource.org/cc/Attribution" /&gt;
               &lt;permits rdf:resource="http://web.resource.org/cc/DerivativeWorks" /&gt;
               &lt;requires rdf:resource="http://web.resource.org/cc/ShareAlike" /&gt;
-            &lt;/License&gt;
-          &lt;/rdf:RDF&gt;
-        </xsl:text>
-      </xsl:comment>
-    </li>
-    <li>
-      <a href="http://validator.w3.org/check?uri=referer">
-        <img src="{$baseurl}images/footer/valid-xhtml10.png" alt="Valid XHTML 1.0 Strict" />
-      </a>
-    </li>
-  </ul>
+	      &lt;/License&gt;
+	      &lt;/rdf:RDF&gt;
+	    </xsl:text>
+	  </xsl:comment>
+	</li>
+	<li>
+	  <a href="http://validator.w3.org/check?uri=referer">
+	    <img src="{$baseurl}images/footer/valid-xhtml10.png" alt="Valid XHTML 1.0 Strict" />
+	  </a>
+	</li>
+      </ul>
 
-          </div> <!-- id="footer" -->
-          <small class="hidden">
-            Cover, Concealment, Camouflage, Denial and Deception
-          </small>
+      <small class="hidden">
+	Cover, Concealment, Camouflage, Denial and Deception
+      </small>
     </footer>
   </xsl:template>
 
diff --git a/xsl/xhtml5.xsl b/xsl/xhtml5.xsl
index 9d8cbd7f5..45f67be62 100644
--- a/xsl/xhtml5.xsl
+++ b/xsl/xhtml5.xsl
@@ -80,30 +80,42 @@
 
           <div id="body">
 
-          <!-- ### Navigation ### -->
-          <xsl:comment>
-            <xsl:text> ### Navigation ### </xsl:text>
-          </xsl:comment>
-          <div id="navigation"><nav>
+	    <!-- ### Navigation ### -->
+	    <xsl:comment>
+	      <xsl:text> ### Navigation ### </xsl:text>
+	    </xsl:comment>
+	    <nav id="navigation">
 
-          <xsl:if test="not($issearchpage)">
-            <!-- ### Search ### -->
-            <xsl:comment>
-              <xsl:text> ### Search ### </xsl:text>
-            </xsl:comment>
+	      <xsl:if test="not($issearchpage)">
+		<!-- ### Search ### -->
+		<xsl:comment>
+		  <xsl:text> ### Search ### </xsl:text>
+		</xsl:comment>
 
-            <form action="/cgi-bin/estseek.cgi" method="get">
-              <p>
-                <input type="text" name="phrase" size="20" value="c3d2" />
-                <input type="submit" name="submit" value="Suchen!" />
-                <a href="{$baseurl}cgi-bin/estseek.cgi"><small>Hilfe</small></a>
-              </p>
-            </form>
-          </xsl:if>
+		<form action="/cgi-bin/estseek.cgi" method="get">
+		  <p>
+		    <input type="text" name="phrase" size="20" value="c3d2" />
+		    <input type="submit" name="submit" value="Suchen!" />
+		    <a href="{$baseurl}cgi-bin/estseek.cgi"><small>Hilfe</small></a>
+		  </p>
+		</form>
+	      </xsl:if>
 
-          <xsl:call-template name="navitems" />
+	      <xsl:call-template name="navitems" />
 
-	  </nav></div> <!-- id="navigation" -->
+	    </nav>
+
+
+	    <!-- ### News ### -->
+	    <xsl:comment>
+	      <xsl:text> ### News ### </xsl:text>
+	    </xsl:comment>
+
+	    <aside id="rsidebar">
+	      <xsl:call-template name="calendar-events" />
+
+	      <xsl:call-template name="chaosupdates" />
+	    </aside>
 
           <!-- ### Content ### -->
           <xsl:comment>
@@ -112,15 +124,15 @@
 
           <xsl:choose>
             <xsl:when test="$issearchpage">
-              <div id="content" class="search">
+              <section id="content" class="search">
                 <h2>Suche</h2>
                 <xsl:comment>ESTFORM</xsl:comment>
                 <xsl:comment>ESTRESULT</xsl:comment>
                 <xsl:comment>ESTINFO</xsl:comment>
-              </div> <!-- id="search" -->
+              </section> <!-- class="search" -->
             </xsl:when>
             <xsl:otherwise> <!-- normale Seite -->
-              <div id="content">
+              <section id="content">
                 <xsl:if test="event">
                   <xsl:attribute name="class">vevent</xsl:attribute>
                 </xsl:if>
@@ -145,16 +157,7 @@
                 <xsl:call-template name="include-resources">
                   <xsl:with-param name="include-hidden">yes</xsl:with-param>
                 </xsl:call-template>
-              </div> <!-- id="content" -->
-
-              <!-- ### News ### -->
-              <xsl:comment>
-                <xsl:text> ### News ### </xsl:text>
-              </xsl:comment>
-
-              <xsl:call-template name="calendar-events" />
-
-              <xsl:call-template name="chaosupdates" />
+              </section> <!-- id="content" -->
 
             </xsl:otherwise>
           </xsl:choose>