From 4cc74d8a9c7000af6edb8da42706a837b1501b0f Mon Sep 17 00:00:00 2001
From: Kai Moritz <kai@juplo.de>
Date: Mon, 1 Jul 2013 23:52:13 +0200
Subject: [PATCH] Content-Layout (auf zweispaltiges Layout umgestellt)

---
 src/main/webapp/css/base.css            |   4 +
 src/main/webapp/css/base/content.css    |   0
 src/main/webapp/css/base/layout.css     |  48 ++++++
 src/main/webapp/css/base/marginal.css   |  14 ++
 src/main/webapp/css/base/navigation.css |  14 +-
 src/main/webapp/css/base/util.css       |  14 ++
 src/main/webapp/index.jsp               | 219 +++++++++++++-----------
 7 files changed, 209 insertions(+), 104 deletions(-)
 create mode 100644 src/main/webapp/css/base/content.css
 create mode 100644 src/main/webapp/css/base/layout.css
 create mode 100644 src/main/webapp/css/base/marginal.css
 create mode 100644 src/main/webapp/css/base/util.css

diff --git a/src/main/webapp/css/base.css b/src/main/webapp/css/base.css
index 7b7d8b59..1b165a33 100644
--- a/src/main/webapp/css/base.css
+++ b/src/main/webapp/css/base.css
@@ -14,6 +14,10 @@
 @import 'base/browserreset.css';
 @import 'base/fonts.css';
 @import 'base/typo.css';
+@import 'base/util.css';
 @import 'base/head.css';
 @import 'base/navigation.css';
+@import 'base/layout.css';
+@import 'base/content.css';
+@import 'base/marginal.css';
 @import 'base/footer.css';
diff --git a/src/main/webapp/css/base/content.css b/src/main/webapp/css/base/content.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/main/webapp/css/base/layout.css b/src/main/webapp/css/base/layout.css
new file mode 100644
index 00000000..d6959da9
--- /dev/null
+++ b/src/main/webapp/css/base/layout.css
@@ -0,0 +1,48 @@
+.content
+{
+  position: relative;
+}
+.content.cols_2
+{
+  padding: 0 27em 0 0;
+}
+.content.cols_2 > .main
+{
+  float: left;
+  min-height: 1em;
+  position: relative;
+  width: 100%;
+}
+.content.cols_2 > .marginal
+{
+  float: left;
+  margin: 0 -27em 0 2.625em;
+  padding: 0 2em 1.0625em 2em;
+  position: relative;
+  width: 20.375em;
+  background-color: #6EE768;
+}
+.content #nav
+{
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.content.cols_2 #nav
+{
+  position: relative;
+  top: auto;
+  right: auto;
+  width: 22.375em; /** 358px = 326px + 32px*/
+}
+.content.cols_2 #nav > #menu
+{
+  margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */
+}
+.content.cols_1 #nav > #menu
+{
+  position: absolute;
+  top: -7em; /** 112px */
+  right: 0;
+  margin: 0;
+}
diff --git a/src/main/webapp/css/base/marginal.css b/src/main/webapp/css/base/marginal.css
new file mode 100644
index 00000000..008c694f
--- /dev/null
+++ b/src/main/webapp/css/base/marginal.css
@@ -0,0 +1,14 @@
+.marginal h1,
+.marginal h2,
+.marginal h3,
+.marginal h4
+{
+  color: #fff;
+}
+.marginal h1
+{
+  font-size: 125%; /** 20 px */
+  line-height: 1em; /** 20px */
+  margin: 1.5em 0 .5em 0; /** 30px 0 10px 0 */
+  padding: 0;
+}
diff --git a/src/main/webapp/css/base/navigation.css b/src/main/webapp/css/base/navigation.css
index 478d5684..604ed84f 100644
--- a/src/main/webapp/css/base/navigation.css
+++ b/src/main/webapp/css/base/navigation.css
@@ -1,7 +1,3 @@
-#nav
-{
-  margin: 0 0 -1em 0;
-}
 #menu
 {
   position: relative;
@@ -49,3 +45,13 @@
   content: '> ';
   margin-left: -.92em;
 }
+
+#nav > h1.nav,
+#nav > h2.nav.menu
+{
+  display: none;
+}
+#nav > h2.nav.submenu
+{
+  font-size: 125%; /** 20px */
+}
diff --git a/src/main/webapp/css/base/util.css b/src/main/webapp/css/base/util.css
new file mode 100644
index 00000000..6ddf6c07
--- /dev/null
+++ b/src/main/webapp/css/base/util.css
@@ -0,0 +1,14 @@
+/** Allgemein nützliche Marker-Klassen */
+
+
+/** Micro Clearfix-Hack nach http://nicolasgallagher.com/micro-clearfix-hack/ */
+
+.cf:before,
+.cf:after {
+  content: "";
+  display: table;
+}
+.cf:after {
+  clear:both;
+}
+
diff --git a/src/main/webapp/index.jsp b/src/main/webapp/index.jsp
index dc9614f4..edad243c 100644
--- a/src/main/webapp/index.jsp
+++ b/src/main/webapp/index.jsp
@@ -14,106 +14,125 @@
       <span id="slogan"><strong>Java</strong> bits from nerds for nerds</span>
       <hr />
     </header>
-    <nav id="nav">
-      <ul id="menu">
-        <li class="m blog"><a href="#blogs" class="m">Blog</a></li>
-        <li class="m projects"><a href="#projects" class="m">Projects</a></li>
-      </ul>
-    </nav>
-    <section>
-      <h1>Branding</h1>
-      <p>
-        Lorem ipsum dolor <a href="#da">sit amet</a>, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-        ad minim veniam, quis nostrud <a href="dort">exercitation</a> ullamco laboris nisi ut
-        aliquip ex ea commodo consequat. Duis aute irure dolor in
-        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-        culpa qui officia deserunt mollit anim id est laborum.
-      </p>
-      <h1>H1:ÄäÖöÜüß@€¢<a href="#link">Link</a></h1>
-      <p>
-        ÄäÖöÜüß@€¢
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-        aliquip ex ea commodo consequat. Duis aute irure dolor in
-        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-        culpa qui officia deserunt mollit anim id est laborum.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-        aliquip ex ea commodo consequat. Duis aute irure dolor in
-        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-        culpa qui officia deserunt mollit anim id est laborum.
-      </p>
-      <h2>H2: Heading</h2>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-        aliquip ex ea commodo consequat. Duis aute irure dolor in
-        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-        culpa qui officia deserunt mollit anim id est laborum.
-      </p>
-      <h1>H1: Heading</h1>
-      <h2>H2: Heading</h2>
-      <h3>H3: Heading</h3>
-      <h4>H4: Heading</h4>
-      <h1>H1: Heading</h1>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-        aliquip ex ea commodo consequat. Duis aute irure dolor in
-        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-        culpa qui officia deserunt mollit anim id est laborum.
-      </p>
-      <h2>H2: Heading</h2>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-        aliquip ex ea commodo consequat. Duis aute irure dolor in
-        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-        culpa qui officia deserunt mollit anim id est laborum.
-      </p>
-      <h3>H3: Heading</h3>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-        aliquip ex ea commodo consequat. Duis aute irure dolor in
-        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-        culpa qui officia deserunt mollit anim id est laborum.
-      </p>
-      <h4>H4: Heading</h4>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-        aliquip ex ea commodo consequat. Duis aute irure dolor in
-        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-        culpa qui officia deserunt mollit anim id est laborum.
-      </p>
-      <ul>
-        <li>normal</li>
-        <li><em>italic</em></li>
-        <li><strong>bold</strong></li>
-        <li><strong><em>bold italic</em></strong></li>
-      </ul>
-    </section>
+    <div class="content cols_2 cf">
+      <section id="content" class="main">
+        <h1>Branding</h1>
+        <p>
+          Lorem ipsum dolor <a href="#da">sit amet</a>, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+          ad minim veniam, quis nostrud <a href="dort">exercitation</a> ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <h1>H1:ÄäÖöÜüß@€¢<a href="#link">Link</a></h1>
+        <p>
+          ÄäÖöÜüß@€¢
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+          ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+          ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <h2>H2: Heading</h2>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+          ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <h1>H1: Heading</h1>
+        <h2>H2: Heading</h2>
+        <h3>H3: Heading</h3>
+        <h4>H4: Heading</h4>
+        <h1>H1: Heading</h1>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+          ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <h2>H2: Heading</h2>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+          ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <h3>H3: Heading</h3>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+          ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <h4>H4: Heading</h4>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+          ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <ul>
+          <li>normal</li>
+          <li><em>italic</em></li>
+          <li><strong>bold</strong></li>
+          <li><strong><em>bold italic</em></strong></li>
+        </ul>
+      </section>
+      <div class="marginal">
+        <nav id="nav">
+          <a id="navigation"></a>
+          <h1 class="nav">Navigation</h1>
+          <h2 class="nav menu">Section-Menu</h2>
+          <ul id="menu">
+            <li class="m blog"><a href="#blogs" class="m">Blog</a></li>
+            <li class="m projects"><strong class="m">Projects</strong></li>
+          </ul>
+        </nav>
+        <div>
+          <h1>Other nasty but marginal stuff</h1>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </p>
+        </div>
+      </div>
+    </div>
     <footer id="footer">
       <ul id="footerlinks">
         <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
-- 
2.20.1