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 89f9c87..1c6a95e 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 5d335bb..30cceac 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 4491558..fdf5ec0 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 9e96273..97d0fbb 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 d8e812d..e69de29 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 3d9787f..9e5c2df 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
 {