X-Git-Url: https://juplo.de/gitweb/?a=blobdiff_plain;f=src%2Fmain%2Fwebapp%2Fless%2Ftablet%2Flayout.less;h=935e7ef14d824b1b44eb37b49a71f3c1664b13c8;hb=a06a8f90ea1c87ca482ac7de085883a6d92cd213;hp=d7d37c99757ddf879df2bb3df879395987812565;hpb=336ae665a166ad08f594c85e092ee57d7e65ba28;p=website

diff --git a/src/main/webapp/less/tablet/layout.less b/src/main/webapp/less/tablet/layout.less
index d7d37c99..935e7ef1 100644
--- a/src/main/webapp/less/tablet/layout.less
+++ b/src/main/webapp/less/tablet/layout.less
@@ -1,104 +1,150 @@
-@import '../variables.less';
-
 body
 {
-  padding: 0 0 0 5em;
-}
-
-.cols_1
-{
-  padding-right: 3em;
+  padding: 0;
 }
-.cols_1 > .content
+#page
 {
-  padding-bottom: 5.5em;
+  overflow: hidden;
 }
-.cols_2 > .content
+
+.nomenu .content
 {
-  padding: 0 15em 0 0;
-  margin-right: -15em;
+  padding-bottom: 5em;
+  @media (max-width: @maxsmalltablet)
+  {
+    padding-bottom: 4em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    padding-bottom: 3.25em;
+  }
 }
-.cols_2 > .content.cf:before,
-.cols_2 > .content.cf:after
+.menu .content.cf:before,
+.menu .content.cf:after
 {
   clear: none;
   content: none;
   display: inline;
 }
-.cols_2 > .content > .main
+.nomenu .content > .main,
+.menu .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)
+  {
+    padding: 0 2em 0 3.5em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    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
       heraus... */
   border-top: 1px solid @hintergrund;
   border-bottom: 1px solid @hintergrund;
 }
-.cols_1 > .content > .marginal
+.nomenu .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
+.nomenu .content > .marginal aside.m
 {
-  margin: -.125em 3em 0 5em;
-  padding: 2em 0;
-  background-color: @heller;
-  border-bottom: .125em solid @hintergrund;
+  margin: 3.5em -3em -999em -5em;
+  padding: 2em 3em 995em 5em;
+  border-style: none;
 }
-.cols_2 > .content > .marginal
+.menu .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;
+}
+.nomenu #footer
+{
+  border-style: none;
 }
-.cols_2 > .content > .marginal > aside.m
+.menu .content > .marginal > aside.m
 {
-  margin-right: -12em;
+  margin: 0 -12em 1em 17.5em;
+  @media (max-width: @maxsmalltablet)
+  {
+    margin-right: -13em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    margin-right: -14em;
+  }
 }
-.cols_2 > .content #nav
+.menu .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
-{
-  position: absolute;
-  top: -7em; /** 112px */
-  right: 3em;
-  margin: 0;
+
+
+/** Faux-Column-Hack-Eigengewächs zurücksetzen */
+#header
+{
+  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
+.menu #page
 {
   max-width: none;
-  border-right-width: 15em;
+  border-right-style: none;
 }
-.cols_2 > #header
+.menu #header
 {
-  margin-right: -15em;
-  border-right: 3em solid @hintergrund;
+  margin-right: 0;
+  border-right-style: none;
 }
-.cols_2 > #breadcrumb
+.menu .content
 {
-  right: -15em;
+  margin: 0;
+  padding: 0;
 }
-.cols_2 > #footer
+.menu #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;
 }