Layout des Seitenkopfes sauber von der Seitenaufteilung getrennt

[website] / src / main / webapp / less / tablet / layout.less

diff --git a/src/main/webapp/less/tablet/layout.less b/src/main/webapp/less/tablet/layout.less
index 4ddffb0..030cb53 100644 (file)
--- a/src/main/webapp/less/tablet/layout.less
+++ b/src/main/webapp/less/tablet/layout.less
@@ -1,13 +1,39 @@
-@import '../variables.less';
-
 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;
+  }
+}
+
+#header
+{
+  @media (max-width: @maxsmalltablet)
+  {
+    margin-left: -1.5em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    margin-left: -1.2em;
+  }
 }
 
 .cols_1
 {
   padding-right: 3em;
+  @media (max-width: @maxsmalltablet)
+  {
+    padding-right: 2em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    padding-right: 1em;
+  }
 }
 .cols_1 > .content
 {
@@ -17,6 +43,7 @@ body
 {
   padding: 0 15em 0 0;
   margin-right: -15em;
+  z-index: 2;
 }
 .cols_2 > .content.cf:before,
 .cols_2 > .content.cf:after
@@ -32,6 +59,15 @@ body
   width: auto;
   background-color: @hintergrund;
   border-right: 3em solid @hintergrund;
+  @media (max-width: @maxsmalltablet)
+  {
+    margin-top: -.5em;
+    border-right-width: 2em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    border-right-width: 1em;
+  }
   /** Die 1px-Rahmen triggern, dass das erste Margin den Footer aufschiebt.
       Bei einem Wert von 0 ragt dieses Margin dann einfach aus dem Footer
       heraus... */
@@ -42,7 +78,7 @@ body
 {
   margin: 2em -3em 0 -5em;
 }
-.cols_1 > .content > .marginal div.m
+.cols_1 > .content > .marginal aside.m
 {
   margin: -.125em 3em 0 5em;
   padding: 2em 0;
@@ -58,7 +94,7 @@ body
   width: 100%;
   border-top: 3em solid @hintergrund;
 }
-.cols_2 > .content > .marginal > div.m
+.cols_2 > .content > .marginal > aside.m
 {
   margin-right: -12em;
 }
@@ -86,6 +122,14 @@ body
 {
   margin-right: -15em;
   border-right: 3em solid @hintergrund;
+  @media (max-width: @maxsmalltablet)
+  {
+    border-right-width: 2em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    border-right-width: 1em;
+  }
 }
 .cols_2 > #breadcrumb
 {