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

diff --git a/src/main/webapp/less/tablet/layout.less b/src/main/webapp/less/tablet/layout.less
index b6f70820..3d9787fa 100644
--- a/src/main/webapp/less/tablet/layout.less
+++ b/src/main/webapp/less/tablet/layout.less
@@ -1,4 +1,7 @@
-body
+/** Seite gesamt (Abmessungen, Aussenabstände etc.) */
+
+body.menu,
+body.nomenu
 {
   padding: 0;
 }
@@ -6,8 +9,19 @@ body
 {
   overflow: hidden;
 }
+.nomenu #page
+{
+  padding: 0;
+}
 
-.cols_1 > .content
+
+/** Seitenaufteilung mit/ohne Menü für Tablets optimieren */
+
+.menu .content
+{
+  padding: 0;
+}
+.nomenu .content
 {
   padding-bottom: 5em;
   @media (max-width: @maxsmalltablet)
@@ -19,15 +33,15 @@ body
     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_1 > .content > .main,
-.cols_2 > .content > .main
+.menu .content > .main,
+.nomenu .content > .main
 {
   float: none;
   width: auto;
@@ -46,7 +60,14 @@ body
   border-top: 1px solid @hintergrund;
   border-bottom: 1px solid @hintergrund;
 }
-.cols_1 > .content > .marginal
+.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;
@@ -61,36 +82,29 @@ body
     padding-right: 1em;
   }
 }
-.cols_1 > .content > .marginal aside.m
-{
-  margin: 3.5em -3em -999em -5em;
-  padding: 2em 3em 995em 5em;
-  border-style: none;
-}
-.cols_2 > .content > .marginal
-{
-  margin: 3em 0 -994em -15em;
-  padding: 2em 0 999em 0;
-  width: 100%;
-  position: static;
-}
-.cols_1 > #footer
-{
-  border-style: none;
-}
-.cols_2 > .content > .marginal > aside.m
+
+
+/** Seitenkopf positionieren */
+
+#header
 {
-  margin: 0 -12em 1em 17.5em;
+  padding: 1em 3em 0 5em;
   @media (max-width: @maxsmalltablet)
   {
-    margin-right: -13em;
+    margin-left: -1.5em;
+    padding: .5em 2em 0 3.5em;
   }
   @media (max-width: @maxsmallertablet)
   {
-    margin-right: -14em;
+    margin-left: -1.2em;
+    padding: 1em 1em 0 2.5em;
   }
 }
-.cols_2 > .content > .marginal > #nav
+
+
+/** Bereichsauswahl positionieren */
+
+.menu .content > .marginal > #nav
 {
   position: static;
   border-right: .125em solid @hintergrund;
@@ -102,43 +116,74 @@ body
   @media (max-width: @maxsmallertablet)
   {
     margin-left: 17.5em;
+    #menu > li.about
+    {
+      display: inline-block;
+    }
   }
   width: auto;
 }
-
-
-/** Faux-Column-Hack-Eigengewächs zurücksetzen */
-#header
+.nomenu #menu,
+.menu #menu
 {
-  padding: 1em 3em 0 5em;
+  position: absolute;
+  width: auto;
+  right: 3em;
   @media (max-width: @maxsmalltablet)
   {
-    margin-left: -1.5em;
-    padding: 1em 2em 0 3.5em;
+    top: -5.7em;
+    right: 2em;
   }
   @media (max-width: @maxsmallertablet)
   {
-    margin-left: -1.2em;
-    padding: 1em 1em 0 2.5em;
+    top: -4.5em;
+    right: 1em;
   }
 }
-
-#page.cols_2
+#menu > li.about
 {
-  max-width: none;
-  border-right-style: none;
+  display: none;
 }
-.cols_2 > #header
+#menu > li.m
 {
-  margin-right: 0;
-  border-right-style: none;
+  @media (max-width: @maxsmalltablet)
+  {
+    padding: 0 0 0 3em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    padding: 0 0 0 2em;
+  }
 }
-.cols_2 > .content
+#menu > li.m > .m
 {
-  margin: 0;
-  padding: 0;
+  @media (max-width: @maxsmalltablet)
+  {
+    font-size: 200%; /* 32px */
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    font-size: 150%; /* 24px */
+  }
 }
-.cols_2 > #footer
+#menu > li.m > a.m:hover:before,
+#menu > li.m > a.m.selected:before,
+#menu > li.m > strong.m:before
+{
+  @media (max-width: @maxsmalltablet)
+  {
+    content: '> ';
+    margin-left: -.95em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+  }
+}
+
+
+/** Footer positionieren */
+
+.menu #footer
 {
   position: static;
   float: right;
@@ -147,4 +192,64 @@ body
   width: 15em;
   background-color: @heller;
 }
+.nomenu #footer
+{
+  padding: 0 3em 1.5em 5em;
+  @media (max-width: @maxsmalltablet)
+  {
+    padding: 0 2em 1em 3em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    padding: 0 1em .75em 2.5em;
+  }
+  background-color: @heller;
+  border-style: none;
+}
+
+
+/** Breadcrump positionieren */
 
+.menu #breadcrumb,
+.nomenu #breadcrumb
+{
+  left: 11.9em;
+  right: 3em;
+  @media (max-width: @maxsmalltablet)
+  {
+    font-size: 87.5%; /* 14px */
+    top: 7.2em;
+    left: 10.3em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    top: 5.8em;
+    left: 7em;
+  }
+}
+
+
+/** Faux-Column-Hack für Marginalinhalte */
+
+.nomenu .content > .marginal aside.m
+{
+  margin: 3.5em -3em -999em -5em;
+  padding: 2em 3em 995em 5em;
+  background-color: @heller;
+  position: relative;
+  top: -4.5em;
+}
+.menu .content > .marginal > aside.m
+{
+  margin: 0 -12em 1em 20em;
+  @media (max-width: @maxsmalltablet)
+  {
+    margin-left: 18.5em;
+    margin-right: -13em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    margin-left: 17.5em;
+    margin-right: -14em;
+  }
+}