Tablet-Layout vereinfacht und Sticky-Footer-Hack aus Phone-Layout übernommen

diff --git a/src/main/webapp/less/tablet/footer.less b/src/main/webapp/less/tablet/footer.less
index 9f5beb5..ffe1695 100644 (file)
--- a/src/main/webapp/less/tablet/footer.less
+++ b/src/main/webapp/less/tablet/footer.less
@@ -1,16 +1,13 @@
 .cols_1 > #footer
 {
-  margin: 0 0 0 -5em;
   padding: 2em 3em 1.5em 5em;
   @media (max-width: @maxsmalltablet)
   {
-    margin: 0 0 0 -4em;
-    padding: 1.5em 2em 1em 4em;
+    padding: 1.5em 2em 1em 3em;
   }
   @media (max-width: @maxsmallertablet)
   {
-    margin: 0 0 0 -3em;
-    padding: 1em 1em .75em 3em;
+    padding: 1em 1em .75em 2.5em;
   }
   background-color: @heller;
 }
@@ -37,10 +34,6 @@
   font-size: 137.5%;
   margin: 0;
 }
-.cols_2 > #footer
-{
-  z-index: 1;
-}
 .cols_2 > #footer > #footerlinks
 {
   position: static;
@@ -51,7 +44,7 @@
 {
   line-height: 1em;
   display: block;
-  margin: 0;
+  margin: 0 0 .25em 0;
   color: @hintergrund;
 }
 .cols_2 > #footer > #footerlinks > li#copyright
@@ -60,9 +53,9 @@
   font-size: 137.5%;
   top: auto;
   bottom: 0;
-  left: -3em;
-  right: -10.909090909em; /* 240px */
-  padding: 9em 2.18181818em 1.5em; /* ? 3*16px ? */
+  left: 0;
+  right: 0;
+  padding: 0 2.18181818em 1.5em; /* ? 3*16px ? */
   @media (max-width: @maxsmalltablet)
   {
     padding-right: 1.45454545em;

diff --git a/src/main/webapp/less/tablet/layout.less b/src/main/webapp/less/tablet/layout.less
index 47d71ba..ddaa34a 100644 (file)
--- a/src/main/webapp/less/tablet/layout.less
+++ b/src/main/webapp/less/tablet/layout.less
@@ -1,40 +1,12 @@
 body
 {
-  padding: 0 0 0 5em;
-  @media (max-width: @maxsmalltablet)
-  {
-    padding: 0 0 0 3.5em;
-  }
-  @media (max-width: @maxsmallertablet)
-  {
-    padding: 0 0 0 2.5em;
-  }
+  padding: 0;
 }
-
-#header
+#page
 {
-  @media (max-width: @maxsmalltablet)
-  {
-    margin-left: -1.5em;
-  }
-  @media (max-width: @maxsmallertablet)
-  {
-    margin-left: -1.2em;
-  }
+  overflow: hidden;
 }
 
-.cols_1
-{
-  padding-right: 3em;
-  @media (max-width: @maxsmalltablet)
-  {
-    padding-right: 2em;
-  }
-  @media (max-width: @maxsmallertablet)
-  {
-    padding-right: 1em;
-  }
-}
 .cols_1 > .content
 {
   padding-bottom: 5em;
@@ -47,12 +19,6 @@ body
     padding-bottom: 3.25em;
   }
 }
-.cols_2 > .content
-{
-  padding: 0 15em 0 0;
-  margin-right: -15em;
-  z-index: 2;
-}
 .cols_2 > .content.cf:before,
 .cols_2 > .content.cf:after
 {
@@ -60,21 +26,19 @@ body
   content: none;
   display: inline;
 }
+.cols_1 > .content > .main,
 .cols_2 > .content > .main
 {
   float: none;
-  margin-right: -15em;
   width: auto;
-  background-color: @hintergrund;
-  border-right: 3em solid @hintergrund;
+  padding: 0 3em 0 5em;
   @media (max-width: @maxsmalltablet)
   {
-    margin-top: -.5em;
-    border-right-width: 2em;
+    padding: 0 2em 0 3.5em;
   }
   @media (max-width: @maxsmallertablet)
   {
-    border-right-width: 1em;
+    padding: 0 1em 0 2.5em;
   }
   /** Die 1px-Rahmen triggern, dass das erste Margin den Footer aufschiebt.
       Bei einem Wert von 0 ragt dieses Margin dann einfach aus dem Footer
@@ -84,73 +48,98 @@ body
 }
 .cols_1 > .content > .marginal
 {
-  margin: 2em -3em 0 -5em;
+  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;
+  }
 }
 .cols_1 > .content > .marginal aside.m
 {
-  margin: -.125em 3em 0 5em;
   padding: 2em 0;
-  background-color: @heller;
   border-bottom: .125em solid @hintergrund;
 }
 .cols_2 > .content > .marginal
 {
-  float: left;
-  margin: 0 0 0 -5em;
-  padding: 2em 0 5em 5em;
-  position: static;
+  margin: 3em 0 -994em -15em;
+  padding: 2em 0 999em 0;
   width: 100%;
-  border-top: 3em solid @hintergrund;
+  position: static;
 }
 .cols_2 > .content > .marginal > aside.m
 {
-  margin-right: -12em;
+  margin: 0 -12em 0 17.5em;
+  @media (max-width: @maxsmalltablet)
+  {
+    margin-right: -13em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    margin-right: -14em;
+  }
 }
-.cols_2 > .content #nav
+.cols_2 > .content > .marginal > #nav
 {
   position: static;
-  width: auto;
   border-right: .125em solid @hintergrund;
+  margin-left: 20em;
+  @media (max-width: @maxsmalltablet)
+  {
+    margin-left: 18.5em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    margin-left: 17.5em;
+  }
+  width: auto;
 }
-.cols_2 > .content #nav > #menu
+
+
+/** Faux-Column-Hack-Eigengewächs zurücksetzen */
+#header
 {
-  position: absolute;
-  top: -7em; /** 112px */
-  right: 3em;
-  margin: 0;
+  padding: 1em 3em 0 5em;
+  @media (max-width: @maxsmalltablet)
+  {
+    margin-left: -1.5em;
+    padding: 1em 2em 0 3.5em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    margin-left: -1.2em;
+    padding: 1em 1em 0 2.5em;
+  }
 }
 
-/** Faux-Column-Hack-Eigengewächs anpassen */
 #page.cols_2
 {
   max-width: none;
-  border-right-width: 15em;
+  border-right-style: none;
 }
 .cols_2 > #header
 {
-  margin-right: -15em;
-  border-right: 3em solid @hintergrund;
-  @media (max-width: @maxsmalltablet)
-  {
-    border-right-width: 2em;
-  }
-  @media (max-width: @maxsmallertablet)
-  {
-    border-right-width: 1em;
-  }
+  margin-right: 0;
+  border-right-style: none;
 }
-.cols_2 > #breadcrumb
+.cols_2 > .content
 {
-  right: -15em;
+  margin: 0;
+  padding: 0;
 }
 .cols_2 > #footer
 {
   position: static;
   float: right;
-  margin-right: -15em;
-  padding: 0;
+  margin: 3em 0 -999em -15em;
+  padding: 0 0 999em 0;
   width: 15em;
   background-color: @heller;
-  border-top: 3em solid @hintergrund;
 }
 

diff --git a/src/main/webapp/less/tablet/navigation.less b/src/main/webapp/less/tablet/navigation.less
index 8710368..93cd1b2 100644 (file)
--- a/src/main/webapp/less/tablet/navigation.less
+++ b/src/main/webapp/less/tablet/navigation.less
@@ -1,12 +1,26 @@
+#breadcrumb
+{
+  left: 11.9em;
+  right: 3em;
+}
+.cols_1 > .content #nav > #menu,
+.cols_2 > .content #nav > #menu
+{
+  position: absolute;
+  width: auto;
+  right: 3em;
+}
+#submenu
+{
+  padding-right: 1em;
+}
+
 @media (max-width: @maxsmalltablet)
 {
-  #menu
-  {
-    top: -5.7em;
-  }
+  .cols_1 > .content #nav > #menu,
   .cols_2 > .content #nav > #menu
   {
-    top: -5.2em;
+    top: -5.7em;
     right: 2em;
   }
   #menu > li.m
@@ -28,19 +42,16 @@
   {
     font-size: 87.5%; /* 14px */
     top: 7.2em;
-    left: 6.3em;
+    left: 10.3em;
   }
 }
 
 @media (max-width: @maxsmallertablet)
 {
-  #menu
-  {
-    top: -4.5em;
-  }
+  .cols_1 > .content #nav > #menu,
   .cols_2 > .content #nav > #menu
   {
-    top: -4em;
+    top: -4.5em;
     right: 1em;
   }
   #menu > li.m
@@ -51,10 +62,6 @@
   {
     font-size: 150%; /* 24px */
   }
-  .cols_2 > .content #nav > #menu
-  {
-    top: -4em;
-  }
   #breadcrumb
   {
     display: none;