Seite ohne Menü doch mit Marginalspalte (nur andere Farbe)

diff --git a/src/main/webapp/WEB-INF/views/index.jsp b/src/main/webapp/WEB-INF/views/index.jsp
index 89f9c87faa6771f7d63fd9c1ad335f7e28e18af9..1c6a95ed7dc0c6b73108ddf2337731d9b2c3bcb8 100644 (file)
--- a/src/main/webapp/WEB-INF/views/index.jsp
+++ b/src/main/webapp/WEB-INF/views/index.jsp
@@ -11,78 +11,98 @@
     <li class="b"><strong class="b">Home</strong></li>
   </t:putAttribute>
   <t:putAttribute name="maincontent" type="string">
-    <p>Welcome on board!</p>
-    <hr />
-    <div class="mcontent cf">
-      <div class="mmain">
-        <h1>Projects</h1>
-        <div class="pack cf">
-          <div class="left">
-            <h2>hibernate4-maven-plugin</h2>
-            <p><strong>Lorem ipsum</strong> dolor <a href="${base}projects/typo.html">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="${base}projects/html-experimente.html">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>
-          </div>
-          <div class="right">
-            <h2>fix-swf</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.
-            </p>
-          </div>
-        </div>
-        <div class="single">
-          <h2>accelerator</h2>
-          <p>
-            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 class="pack cf">
-          <div class="right">
-            <h2>jquery.openx</h2>
-            <p>
-              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 class="left">
-            <h2>Regex-Lab</h2>
-            <p>
-              Excepteur sint occaecat cupidatat non proident, sunt in
-              culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-          </div>
-        </div>
-        <div class="pack cf">
-          <div class="left">
-            <h2>jquery.openx</h2>
-            <p>
-              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 class="right">
-            <h2>Regex-Lab</h2>
-            <p>
-              Excepteur sint occaecat cupidatat non proident, sunt in
-              culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-          </div>
-        </div>
+    <div class="pack cf">
+      <div class="left">
+        <h2>hibernate4-maven-plugin</h2>
+        <p><strong>Lorem ipsum</strong> dolor <a href="${base}projects/typo.html">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="${base}projects/html-experimente.html">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>
       </div>
-      <div class="mmarginal">
-        <h1>Recent Blog-Entries</h1>
-        <p>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 class="right">
+        <h2>fix-swf</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.
+        </p>
       </div>
     </div>
-    <h1>H2: 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>
+    <div class="single">
+      <h2>accelerator</h2>
+      <p>
+        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 class="pack cf">
+      <div class="right">
+        <h2>jquery.openx</h2>
+        <p>
+          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 class="left">
+        <h2>Regex-Lab</h2>
+        <p>
+          Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+      </div>
+    </div>
+    <div class="pack cf">
+      <div class="left">
+        <h2>jquery.openx</h2>
+        <p>
+          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 class="right">
+        <h2>Regex-Lab</h2>
+        <p>
+          Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+      </div>
+    </div>
+  </t:putAttribute>
+  <t:putAttribute name="marginalcontent" type="string">
+    <aside class="m">
+      <div class="widget widget_recent_entries">
+        <h2 class="widgettitle">Recent Posts</h2>
+        <ul>
+          <li>
+            <a href="http://localhost/combining-jetty-maven-plugin-and-wro4j-maven-plugin-for-dynamic-reloading-of-less-resources/" title="Combining jetty-maven-plugin and wro4j-maven-plugin for Dynamic Reloading of LESS-Resources">Combining jetty-maven-plugin and wro4j-maven-plugin for Dynamic Reloading of LESS-Resources</a>
+          </li>
+          <li>
+            <a href="http://localhost/hibernate4-maven-plugin-1-0-3-released/" title="hibernate4-maven-plugin 1.0.3 released!">hibernate4-maven-plugin 1.0.3 released!</a>
+          </li>
+          <li>
+            <a href="http://localhost/log-out-from-wrong-account-with-maven-appengine-plugin/" title="Log out from wrong Account with maven-appengine-plugin">Log out from wrong Account with maven-appengine-plugin</a>
+          </li>
+          <li>
+            <a href="http://localhost/bidirectional-association-with-elementcollection/" title="Bidirectional Association with @ElementCollection">Bidirectional Association with @ElementCollection</a>
+          </li>
+          <li>
+            <a href="http://localhost/hibernate4-maven-plugin-1-0-2-release/" title="hibernate4-maven-plugin 1.0.2 released!">hibernate4-maven-plugin 1.0.2 released!</a>
+          </li>
+          <li>
+            <a href="http://localhost/hibernate4-maven-plugin-1-0-1-released/" title="hibernate4-maven-plugin 1.0.1 released!">hibernate4-maven-plugin 1.0.1 released!</a>
+          </li>
+          <li>
+            <a href="http://localhost/hibernate4-maven-plugin-1-0-released/" title="hibernate4-maven-plugin 1.0 released!">hibernate4-maven-plugin 1.0 released!</a>
+          </li>
+          <li>
+            <a href="http://localhost/hibernate4-maven-plugin-a-simple-plugin-for-generating-a-database-schema-from-hibernate-4-mapping-annotations/" title="hibernate4-maven-plugin">hibernate4-maven-plugin</a>
+          </li>
+        </ul>
+      </div>
+    </aside>
   </t:putAttribute>
 </t:insertDefinition>

diff --git a/src/main/webapp/img/wip.gif b/src/main/webapp/img/wip.gif
new file mode 100644 (file)
index 0000000..13a03b1
Binary files /dev/null and b/src/main/webapp/img/wip.gif differ

diff --git a/src/main/webapp/less/base/packs.less b/src/main/webapp/less/base/packs.less
index 5d335bbce79d9ec979b85ca627932377e45272fd..30cceacd705be9a7404d897920bf177b8aa18ca6 100644 (file)
--- a/src/main/webapp/less/base/packs.less
+++ b/src/main/webapp/less/base/packs.less
@@ -1,6 +1,5 @@
 .pack
 {
-  margin: 3% 0;
   overflow: hidden;
 }
 .pack > .left,

diff --git a/src/main/webapp/less/screen/faux-column.less b/src/main/webapp/less/screen/faux-column.less
index 449155896774de4e4d3738786225d8c65b42876c..fdf5ec0243a548940d191ee40fc9a447328f94cf 100644 (file)
--- a/src/main/webapp/less/screen/faux-column.less
+++ b/src/main/webapp/less/screen/faux-column.less
@@ -1,28 +1,29 @@
 /** Faux-Column-Hack-Eigengewächs für die Marginalspalte */
 
-.menu #page
+#page
 {
   max-width: 38em; /** 608px + 390px (Marginalspalte) = ca. 1000px */
   border-right: 24.375em solid @heller;
 }
-.menu .content
+.nomenu #page
+{
+  border-right-color: @sehrhell;
+}
+.content
 {
   margin-right: -24.375em;
 }
 #header
 {
   padding-top: 1em;
-}
-.menu #header
-{
   margin-right: -24.375em;
   background-color: @hintergrund;
 }
-.menu #breadcrumb
+#breadcrumb
 {
   right: -24.375em; /** Weil der Breadcrumb sonst an der Faux-Column umbricht! */
 }
-.menu #footer
+#footer
 {
   margin-right: -24.375em;
   background-color: @hintergrund;

diff --git a/src/main/webapp/less/screen/layout.less b/src/main/webapp/less/screen/layout.less
index 9e9627355a16316d45fdf03673558d1710d6f675..97d0fbb00812aa15db768ea3eb9dab0bc26f7d68 100644 (file)
--- a/src/main/webapp/less/screen/layout.less
+++ b/src/main/webapp/less/screen/layout.less
@@ -13,23 +13,23 @@ body
 
 /** Seitenaufteilung mit Menü (Zweispaltig) */
 
-body.menu
+body
 {
   padding: 0 3em 0 5em;
 }
-.menu .content
+.content
 {
   position: relative;
   padding: 0 27em 7.1875em 0; /** Unten: 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */
 }
-.menu .content > .main
+.content > .main
 {
   float: left;
   min-height: 1em;
   position: relative;
   width: 100%;
 }
-.menu .content > .marginal
+.content > .marginal
 {
   float: left;
   margin: 0 -27em 0 2.625em;
@@ -41,20 +41,10 @@ body.menu
 
 /** Anpassungen für Seiten ohne Menü (Einspaltig) */
 
-.nomenu #page
-{
-  max-width: 62.375em;
-  padding: 0 3em 0 5em;
-  overflow: hidden;
-}
-.nomenu .content
-{
-  position: relative;
-  padding: 0 0 7.1875em 0; /** 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */
-}
-.nomenu .content > .main
+.nomenu .content > .marginal
 {
-  margin-bottom: 7em;
+  padding-top: 2em;
+  background-color: @sehrhell;
 }
 
 
@@ -72,18 +62,11 @@ body.menu
 
 /** Bereichsauswahl positionieren und stylen */
 
-#nav
-{
-  position: absolute;
-  top: 0;
-  right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */
-  width: 100%;
-}
 #nav > hr.n
 {
   display: none;
 }
-.menu #nav
+#nav
 {
   position: relative;
   top: auto;
@@ -102,6 +85,10 @@ body.menu
   padding: 0;
   border-style: none;
 }
+.nomenu #menu
+{
+  top: -9em; /** 2em mehr wegen 2em margin-top der Marginalspalte auf .nomenu-Seiten */
+}
 #menu > li.m
 {
   display: inline-block;
@@ -141,14 +128,6 @@ body.menu
   margin-left: -.92em;
 }
 
-/** Anpassungen der Bereichsauswahl für Seiten ohne Menü */
-
-.nomenu #menu
-{
-  position: absolute;
-  right: 0;
-}
-
 
 /** Breadcrump positionieren */
 
@@ -159,10 +138,6 @@ body.menu
   left: 6.9em;
   z-index: 3;
 }
-.nomenu #breadcrumb
-{
-  left: 11.9em;
-}
 #breadcrumb > a.hide
 {
   position: absolute;
@@ -179,10 +154,6 @@ body.menu
 {
   padding: 2em 0;
 }
-.nomenu #footer
-{
-  padding: 0 3em 2em 5em;
-}
 #footer > hr.f
 {
   display: none;

diff --git a/src/main/webapp/less/screen/marginal.less b/src/main/webapp/less/screen/marginal.less
index d8e812d1f92e9bcd6fba1989081da1846af7aa8e..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644 (file)
--- a/src/main/webapp/less/screen/marginal.less
+++ b/src/main/webapp/less/screen/marginal.less
@@ -1,23 +0,0 @@
-/** Faux-Column-Hack für Marginalinhalte auf Seiten ohne Menü */
-
-.nomenu .content > .marginal aside.m
-{
-  margin: 3.5em 0 -999em 0;
-  padding: 2em 2em 995em 2em;
-  background-color: @sehrhell;
-  position: relative;
-  top: -4.5em;
-}
-.nomenu .content > .marginal h1,
-.nomenu .content > .marginal h2,
-.nomenu .content > .marginal h3,
-.nomenu .content > .marginal h4
-{
-  color: @normal;
-}
-.nomenu #footer
-{
-  /** Hintergrund des Faux-Column-Hack für Marginal-Inhalte überlagern */
-  border-top: 1.5em solid @hintergrund;
-  background-color: @hintergrund;
-}

diff --git a/src/main/webapp/less/tablet/layout.less b/src/main/webapp/less/tablet/layout.less
index 3d9787fa5aa5d27c9d80fb019ae43cfff0c2bf14..9e5c2df3ce1ea1cc6135e5fe5d61fa5212bc3708 100644 (file)
--- a/src/main/webapp/less/tablet/layout.less
+++ b/src/main/webapp/less/tablet/layout.less
@@ -1,7 +1,6 @@
 /** Seite gesamt (Abmessungen, Aussenabstände etc.) */
 
-body.menu,
-body.nomenu
+body
 {
   padding: 0;
 }
@@ -23,7 +22,7 @@ body.nomenu
 }
 .nomenu .content
 {
-  padding-bottom: 5em;
+  padding: 0 0 5em 0;
   @media (max-width: @maxsmalltablet)
   {
     padding-bottom: 4em;
@@ -33,22 +32,21 @@ body.nomenu
     padding-bottom: 3.25em;
   }
 }
-.menu .content.cf:before,
-.menu .content.cf:after
+.content.cf:before,
+.content.cf:after
 {
   clear: none;
   content: none;
   display: inline;
 }
-.menu .content > .main,
-.nomenu .content > .main
+.content > .main
 {
   float: none;
   width: auto;
   padding: 0 3em 0 5em;
   @media (max-width: @maxsmalltablet)
   {
-    padding: 0 2em 0 3.5em;
+    padding: 0 2em 0 3em;
   }
   @media (max-width: @maxsmallertablet)
   {
@@ -60,27 +58,21 @@ body.nomenu
   border-top: 1px solid @hintergrund;
   border-bottom: 1px solid @hintergrund;
 }
+.content > .marginal
+{
+  position: static;
+  width: 100%;
+}
 .menu .content > .marginal
 {
   margin: 3em 0 -994em -15em;
   padding: 2em 0 999em 0;
-  width: 100%;
-  position: static;
 }
 .nomenu .content > .marginal
 {
-  margin: 3em 0 -999em 0;
-  padding: 0 3em 999em 5em;
-  @media (max-width: @maxsmalltablet)
-  {
-    padding-left: 3.5em;
-    padding-right: 2em;
-  }
-  @media (max-width: @maxsmallertablet)
-  {
-    padding-left: 2.5em;
-    padding-right: 1em;
-  }
+  margin: 3em 0 -994em 0;
+  padding: 0 0 999em 0;
+  background-color: transparent;
 }
 
 
@@ -92,7 +84,7 @@ body.nomenu
   @media (max-width: @maxsmalltablet)
   {
     margin-left: -1.5em;
-    padding: .5em 2em 0 3.5em;
+    padding: .5em 2em 0 3em;
   }
   @media (max-width: @maxsmallertablet)
   {
@@ -104,7 +96,7 @@ body.nomenu
 
 /** Bereichsauswahl positionieren */
 
-.menu .content > .marginal > #nav
+.menu #nav
 {
   position: static;
   border-right: .125em solid @hintergrund;
@@ -123,11 +115,20 @@ body.nomenu
   }
   width: auto;
 }
+.nomenu #nav
+{
+  position: absolute;
+  top: 0;
+  right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */
+  width: 100%;
+}
+
 .nomenu #menu,
 .menu #menu
 {
   position: absolute;
   width: auto;
+  top: -7em;
   right: 3em;
   @media (max-width: @maxsmalltablet)
   {
@@ -219,7 +220,7 @@ body.nomenu
   {
     font-size: 87.5%; /* 14px */
     top: 7.2em;
-    left: 10.3em;
+    left: 9.8em;
   }
   @media (max-width: @maxsmallertablet)
   {
@@ -233,11 +234,21 @@ body.nomenu
 
 .nomenu .content > .marginal aside.m
 {
-  margin: 3.5em -3em -999em -5em;
+  margin: 3.5em 0 -999em 0;
   padding: 2em 3em 995em 5em;
   background-color: @heller;
   position: relative;
   top: -4.5em;
+  @media (max-width: @maxsmalltablet)
+  {
+    padding-left: 3em;
+    padding-right: 2em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    padding-left: 2.5em;
+    padding-right: 1em;
+  }
 }
 .menu .content > .marginal > aside.m
 {