X-Git-Url: https://juplo.de/gitweb/?a=blobdiff_plain;f=src%2Fmain%2Fwebapp%2Fless%2Ftablet%2Flayout.less;h=a5959e576756e2a5fe0d03649f63cb95da8597ee;hb=5f04e60da58d3f37fbb2ad983ec7415ad54ff562;hp=3d9787fa5aa5d27c9d80fb019ae43cfff0c2bf14;hpb=6482c022bf5777165d20d1cfe58f3668f8699dba;p=website

diff --git a/src/main/webapp/less/tablet/layout.less b/src/main/webapp/less/tablet/layout.less
index 3d9787fa..a5959e57 100644
--- 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,34 +22,33 @@ body.nomenu
 }
 .nomenu .content
 {
-  padding-bottom: 5em;
-  @media (max-width: @maxsmalltablet)
+  padding: 0 0 5em 0;
+  @media (max-width: (@maxsmalltablet))
   {
     padding-bottom: 4em;
   }
-  @media (max-width: @maxsmallertablet)
+  @media (max-width: (@maxsmallertablet))
   {
     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)
+  @media (max-width: (@maxsmalltablet))
   {
-    padding: 0 2em 0 3.5em;
+    padding: 0 2em 0 3em;
   }
-  @media (max-width: @maxsmallertablet)
+  @media (max-width: (@maxsmallertablet))
   {
     padding: 0 1em 0 2.5em;
   }
@@ -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;
 }
 
 
@@ -88,32 +80,32 @@ body.nomenu
 
 #header
 {
-  padding: 1em 3em 0 5em;
-  @media (max-width: @maxsmalltablet)
+  padding: 1em 3em 2em 5em;
+  @media (max-width: (@maxsmalltablet))
   {
     margin-left: -1.5em;
-    padding: .5em 2em 0 3.5em;
+    padding: .5em 2em 2em 3em;
   }
-  @media (max-width: @maxsmallertablet)
+  @media (max-width: (@maxsmallertablet))
   {
     margin-left: -1.2em;
-    padding: 1em 1em 0 2.5em;
+    padding: 1em 1em 2em 2.5em;
   }
 }
 
 
 /** Bereichsauswahl positionieren */
 
-.menu .content > .marginal > #nav
+.menu #nav
 {
   position: static;
   border-right: .125em solid @hintergrund;
   margin-left: 20em;
-  @media (max-width: @maxsmalltablet)
+  @media (max-width: (@maxsmalltablet))
   {
     margin-left: 18.5em;
   }
-  @media (max-width: @maxsmallertablet)
+  @media (max-width: (@maxsmallertablet))
   {
     margin-left: 17.5em;
     #menu > li.about
@@ -123,20 +115,29 @@ 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: -9em;
   right: 3em;
-  @media (max-width: @maxsmalltablet)
+  @media (max-width: (@maxsmalltablet))
   {
-    top: -5.7em;
+    top: -7.7em;
     right: 2em;
   }
-  @media (max-width: @maxsmallertablet)
+  @media (max-width: (@maxsmallertablet))
   {
-    top: -4.5em;
+    top: -6.5em;
     right: 1em;
   }
 }
@@ -146,22 +147,22 @@ body.nomenu
 }
 #menu > li.m
 {
-  @media (max-width: @maxsmalltablet)
+  @media (max-width: (@maxsmalltablet))
   {
     padding: 0 0 0 3em;
   }
-  @media (max-width: @maxsmallertablet)
+  @media (max-width: (@maxsmallertablet))
   {
     padding: 0 0 0 2em;
   }
 }
 #menu > li.m > .m
 {
-  @media (max-width: @maxsmalltablet)
+  @media (max-width: (@maxsmalltablet))
   {
     font-size: 200%; /* 32px */
   }
-  @media (max-width: @maxsmallertablet)
+  @media (max-width: (@maxsmallertablet))
   {
     font-size: 150%; /* 24px */
   }
@@ -170,12 +171,12 @@ body.nomenu
 #menu > li.m > a.m.selected:before,
 #menu > li.m > strong.m:before
 {
-  @media (max-width: @maxsmalltablet)
+  @media (max-width: (@maxsmalltablet))
   {
     content: '> ';
     margin-left: -.95em;
   }
-  @media (max-width: @maxsmallertablet)
+  @media (max-width: (@maxsmallertablet))
   {
   }
 }
@@ -195,11 +196,11 @@ body.nomenu
 .nomenu #footer
 {
   padding: 0 3em 1.5em 5em;
-  @media (max-width: @maxsmalltablet)
+  @media (max-width: (@maxsmalltablet))
   {
     padding: 0 2em 1em 3em;
   }
-  @media (max-width: @maxsmallertablet)
+  @media (max-width: (@maxsmallertablet))
   {
     padding: 0 1em .75em 2.5em;
   }
@@ -215,13 +216,13 @@ body.nomenu
 {
   left: 11.9em;
   right: 3em;
-  @media (max-width: @maxsmalltablet)
+  @media (max-width: (@maxsmalltablet))
   {
     font-size: 87.5%; /* 14px */
     top: 7.2em;
-    left: 10.3em;
+    left: 9.8em;
   }
-  @media (max-width: @maxsmallertablet)
+  @media (max-width: (@maxsmallertablet))
   {
     top: 5.8em;
     left: 7em;
@@ -233,21 +234,31 @@ 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
 {
   margin: 0 -12em 1em 20em;
-  @media (max-width: @maxsmalltablet)
+  @media (max-width: (@maxsmalltablet))
   {
     margin-left: 18.5em;
     margin-right: -13em;
   }
-  @media (max-width: @maxsmallertablet)
+  @media (max-width: (@maxsmallertablet))
   {
     margin-left: 17.5em;
     margin-right: -14em;