LESS-Code aufgeräumt

diff --git a/src/main/webapp/WEB-INF/wro.xml b/src/main/webapp/WEB-INF/wro.xml
index 6ed9a54..8ab7914 100644 (file)
--- a/src/main/webapp/WEB-INF/wro.xml
+++ b/src/main/webapp/WEB-INF/wro.xml
@@ -17,39 +17,38 @@
     <css>/less/screen/typo.less</css>
     <css>/less/screen/layout.less</css>
     <css>/less/screen/head.less</css>
     <css>/less/screen/typo.less</css>
     <css>/less/screen/layout.less</css>
     <css>/less/screen/head.less</css>

-    <css>/less/screen/navigation.less</css>
-    <css>/less/screen/navigation-submenu.less</css>
+    <css>/less/screen/menu.less</css>

     <css>/less/screen/marginal.less</css>
     <css>/less/screen/footer.less</css>
     <css>/less/screen/footer-sticky.less</css>
     <css>/less/tablet/typo.less</css>
     <css>/less/tablet/layout.less</css>
     <css>/less/tablet/head.less</css>
     <css>/less/screen/marginal.less</css>
     <css>/less/screen/footer.less</css>
     <css>/less/screen/footer-sticky.less</css>
     <css>/less/tablet/typo.less</css>
     <css>/less/tablet/layout.less</css>
     <css>/less/tablet/head.less</css>

-    <css>/less/tablet/navigation.less</css>
+    <css>/less/tablet/menu.less</css>

     <css>/less/tablet/footer.less</css>
   </group>
   <group name="phone">
     <css>/less/variables.less</css>
     <css>/less/screen/head.less</css>
     <css>/less/tablet/footer.less</css>
   </group>
   <group name="phone">
     <css>/less/variables.less</css>
     <css>/less/screen/head.less</css>

-    <css>/less/screen/navigation-submenu.less</css>
+    <css>/less/screen/menu.less</css>

     <css>/less/screen/footer-sticky.less</css>
     <css>/less/tablet/head.less</css>
     <css>/less/phone/typo.less</css>
     <css>/less/phone/layout.less</css>
     <css>/less/phone/head.less</css>
     <css>/less/screen/footer-sticky.less</css>
     <css>/less/tablet/head.less</css>
     <css>/less/phone/typo.less</css>
     <css>/less/phone/layout.less</css>
     <css>/less/phone/head.less</css>

-    <css>/less/phone/navigation.less</css>
+    <css>/less/phone/menu.less</css>

     <css>/less/phone/footer.less</css>
   </group>
   <group name="tiny">
     <css>/less/variables.less</css>
     <css>/less/screen/head.less</css>
     <css>/less/phone/footer.less</css>
   </group>
   <group name="tiny">
     <css>/less/variables.less</css>
     <css>/less/screen/head.less</css>

-    <css>/less/screen/navigation-submenu.less</css>
+    <css>/less/screen/menu.less</css>

     <css>/less/screen/footer-sticky.less</css>
     <css>/less/tablet/head.less</css>
     <css>/less/phone/typo.less</css>
     <css>/less/phone/layout.less</css>
     <css>/less/phone/head.less</css>
     <css>/less/screen/footer-sticky.less</css>
     <css>/less/tablet/head.less</css>
     <css>/less/phone/typo.less</css>
     <css>/less/phone/layout.less</css>
     <css>/less/phone/head.less</css>

-    <css>/less/phone/navigation.less</css>
+    <css>/less/phone/menu.less</css>

     <css>/less/phone/footer.less</css>
     <css>/less/tiny/layout.less</css>
   </group>
     <css>/less/phone/footer.less</css>
     <css>/less/tiny/layout.less</css>
   </group>

diff --git a/src/main/webapp/less/phone/footer.less b/src/main/webapp/less/phone/footer.less
index a613c50..ca5901f 100644 (file)
--- a/src/main/webapp/less/phone/footer.less
+++ b/src/main/webapp/less/phone/footer.less
@@ -1,12 +1,3 @@
-#footer
-{
-  padding: 0 1em .5em 2.5em;
-  background-color: @heller;
-}
-#footer > hr.f
-{
-  border-color: @hintergrund;
-}

 #footer > #footerlinks
 {
   position: static;
 #footer > #footerlinks
 {
   position: static;

diff --git a/src/main/webapp/less/phone/layout.less b/src/main/webapp/less/phone/layout.less
index 4cfe104..a106ad5 100644 (file)
--- a/src/main/webapp/less/phone/layout.less
+++ b/src/main/webapp/less/phone/layout.less
@@ -1,12 +1,18 @@
+/** Seite gesamt (Abmessungen, Aussenabstände etc.) */
+
+body
+{
+  font-size: 87.5%; /** 14px */
+  padding: 0;
+}

 #page
 {
 #page
 {

+  position: relative;

   overflow: hidden;
 }
 
   overflow: hidden;
 }
 

-#header
-{
-  margin: 0 1em 0 1.25em;
-}
+
+/** Seitenaufteilung mit/ohne Menü */

 
 .content > .main
 {
 
 .content > .main
 {


@@ -17,3 +23,144 @@
   border-top-style: none;
   margin-top: -.4375em; /** -8px + 1px (für den entfernten Rahmen) -- nur damit es exakt so positioniert ist, wie im Tablet-Layout */
 }
   border-top-style: none;
   margin-top: -.4375em; /** -8px + 1px (für den entfernten Rahmen) -- nur damit es exakt so positioniert ist, wie im Tablet-Layout */
 }

+
+
+
+/** Seitenkopf positionieren */
+
+#header
+{
+  margin: .5em 1em 0 1.25em;
+}
+#header > hr.h
+{
+  display: none;
+}
+
+
+/** Bereichsauswahl positionieren und stylen */
+
+#nav > hr.n
+{
+  display: none;
+}
+#menu
+{
+  border-style: none;
+  font-size: 125%;
+  line-height: 1.5em;
+}
+#menu
+{
+  font-size: 150%;
+  border-bottom: .125em solid @hintergrund;
+  margin-top: 0;
+  padding: .25em .25em 1em 1.5em;
+}
+#menu > li.m
+{
+  float: left;
+  list-style-type: none;
+  padding: .25em 1em 0 0;
+}
+#menu > li.m > a.m
+{
+  color: @dunkel;
+}
+#menu > li.m > strong.m
+{
+  color: @hintergrund;
+  border-bottom: .0625em solid @hintergrund;
+}
+#menu > li.m > a.m:hover,
+#menu > li.m > a.m:focus,
+#menu > li.m > a.m:active
+{
+  color: @dunkler;
+  border-bottom: .0625em solid @dunkler;
+}
+#menu > li.m > a.m.selected
+{
+  color: @hintergrund;
+  border-bottom: .0625em dashed @hintergrund;
+}
+#menu > li.m > a.m.selected:hover,
+#menu > li.m > a.m.selected:focus,
+#menu > li.m > a.m.selected:active
+{
+  border-style: solid;
+}
+
+
+/** Navigations-Sprunglink reaktivieren und stylen */
+
+#breadcrumb
+{
+  position: absolute;
+  top: .8em;
+  right: 1.5em;
+}
+#breadcrumb > strong.b,
+#breadcrumb > ol.b,
+#breadcrumb > hr.b
+{
+  display: none;
+}
+#breadcrumb > a.hide
+{
+  display: block;
+  overflow: hidden;
+  width: 3.5em;
+  height: 3em;
+  line-height: 3em;
+  color: @normal;
+  border-style: none;
+}
+#breadcrumb > a.hide:before
+{
+  content: "";
+  font-family: 'symbols';
+  font-size: 378%; /** Vielfaches von 14px */
+  padding: 0 0 1em 0;
+}
+#breadcrumb > a.hide:hover,
+#breadcrumb > a.hide:focus,
+#breadcrumb > a.hide:active
+{
+  color: @dunkler;
+}
+
+
+/** Footer positionieren */
+
+#footer
+{
+  padding: 0 1em .5em 2.5em;
+  background-color: @heller;
+}
+#footer > hr.f
+{
+  border-color: @hintergrund;
+}
+
+
+/** Marginal-Inhalte anpassen... */
+
+.marginal h1,
+.marginal h2,
+.marginal h3,
+.marginal h4
+{
+  color: @hintergrund;
+}
+
+
+/** Faux-Column-Hack für Marginalinhalte */
+
+.marginal
+{
+  margin-top: 4em;
+  margin-bottom: -993em;
+  padding: 1em 1em 999em 2.5em;
+  background-color: @heller;
+}

diff --git a/src/main/webapp/less/phone/menu.less b/src/main/webapp/less/phone/menu.less
new file mode 100644 (file)
index 0000000..83bd099
--- /dev/null
+++ b/src/main/webapp/less/phone/menu.less
@@ -0,0 +1,6 @@
+#submenu
+{
+  border-style: none;
+  font-size: 125%;
+  line-height: 1.5em;
+}

diff --git a/src/main/webapp/less/phone/navigation.less b/src/main/webapp/less/phone/navigation.less
deleted file mode 100644 (file)
index 06a5833..0000000
--- a/src/main/webapp/less/phone/navigation.less
+++ /dev/null
@@ -1,106 +0,0 @@
-#page
-{
-  position: relative;
-}
-#breadcrumb
-{
-  position: absolute;
-  top: .8em;
-  right: 1.5em;
-}
-#breadcrumb > strong.b,
-#breadcrumb > ol.b,
-#breadcrumb > hr.b
-{
-  display: none;
-}
-#breadcrumb > a.hide
-{
-  display: block;
-  overflow: hidden;
-  width: 3em;
-  height: 3em;
-  line-height: 3em;
-  color: @normal;
-  border-style: none;
-}
-#breadcrumb > a.hide:before
-{
-  content: "";
-  font-family: 'symbols';
-  font-size: 300%;
-  padding: 0 0 1em 0;
-}
-#breadcrumb > a.hide:hover,
-#breadcrumb > a.hide:focus,
-#breadcrumb > a.hide:active
-{
-  color: @dunkler;
-}
-
-.marginal
-{
-  margin-top: 4em;
-  margin-bottom: -993em;
-  padding: 1em 1em 999em 2.5em;
-  background-color: @heller;
-}
-.marginal h1,
-.marginal h2,
-.marginal h3,
-.marginal h4
-{
-  color: @hintergrund;
-}
-#nav > hr.n
-{
-  display: none;
-}
-
-#menu,
-#submenu
-{
-  border-style: none;
-  font-size: 125%;
-  line-height: 1.5em;
-}
-#menu
-{
-  font-size: 150%;
-  border-bottom: .125em solid @hintergrund;
-  margin-top: 0;
-  padding: .25em .25em 1em 1.5em;
-}
-#menu > li.m
-{
-  float: left;
-  list-style-type: none;
-  padding: .25em 1em 0 0;
-}
-#menu > li.m > a.m
-{
-  color: @dunkel;
-}
-#menu > li.m > strong.m
-{
-  color: @hintergrund;
-  border-bottom: .0625em solid @hintergrund;
-}
-#menu > li.m > a.m:hover,
-#menu > li.m > a.m:focus,
-#menu > li.m > a.m:active
-{
-  color: @dunkler;
-  border-bottom: .0625em solid @dunkler;
-}
-#menu > li.m > a.m.selected
-{
-  color: @hintergrund;
-  border-bottom: .0625em dashed @hintergrund;
-}
-#menu > li.m > a.m.selected:hover,
-#menu > li.m > a.m.selected:focus,
-#menu > li.m > a.m.selected:active
-{
-  border-style: solid;
-}

diff --git a/src/main/webapp/less/phone/typo.less b/src/main/webapp/less/phone/typo.less
index b8d0e67..ba61db5 100644 (file)
--- a/src/main/webapp/less/phone/typo.less
+++ b/src/main/webapp/less/phone/typo.less
@@ -1,9 +1,3 @@
-body
-{
-  font-size: 87.5%; /** 14px */
-  padding: 0;
-}
-

 h1
 {
   font-size: 150%; /** 24 px */
 h1
 {
   font-size: 150%; /** 24 px */

diff --git a/src/main/webapp/less/screen.less b/src/main/webapp/less/screen.less
index c2c8985..1b64192 100644 (file)
--- a/src/main/webapp/less/screen.less
+++ b/src/main/webapp/less/screen.less
@@ -1,5 +1,5 @@
 @import 'screen/head.less';
 @import 'screen/head.less';

-@import 'screen/navigation-submenu.less';
+@import 'screen/menu.less';

 @import 'screen/footer-sticky.less';
 
 @media (min-width: @minscreen)
 @import 'screen/footer-sticky.less';
 
 @media (min-width: @minscreen)


@@ -7,8 +7,6 @@
   @import 'screen/typo.less';
   @import 'screen/layout.less';
   @import 'screen/head.less';
   @import 'screen/typo.less';
   @import 'screen/layout.less';
   @import 'screen/head.less';

-  @import 'screen/navigation.less';
-  @import 'screen/navigation-submenu.less';

   @import 'screen/marginal.less';
   @import 'screen/footer.less';
   @import 'screen/footer-sticky.less';
   @import 'screen/marginal.less';
   @import 'screen/footer.less';
   @import 'screen/footer-sticky.less';


@@ -16,10 +14,14 @@
   {
     @import 'tablet/typo.less';
     @import 'tablet/layout.less';
   {
     @import 'tablet/typo.less';
     @import 'tablet/layout.less';

-    @import 'tablet/navigation.less';
+    @import 'tablet/menu.less';

     @import 'tablet/footer.less';
   }
 }
     @import 'tablet/footer.less';
   }
 }

+@media (min-width: @maxtablet + 1)
+{
+  @import 'screen/faux-column.less';
+}

 
 @media (max-width: @maxtablet)
 {
 
 @media (max-width: @maxtablet)
 {


@@ -31,7 +33,7 @@
   @import 'phone/typo.less';
   @import 'phone/layout.less';
   @import 'phone/head.less';
   @import 'phone/typo.less';
   @import 'phone/layout.less';
   @import 'phone/head.less';

-  @import 'phone/navigation.less';
+  @import 'phone/menu.less';

   @import 'phone/footer.less';
 }
 
   @import 'phone/footer.less';
 }
 

diff --git a/src/main/webapp/less/screen/faux-column.less b/src/main/webapp/less/screen/faux-column.less
new file mode 100644 (file)
index 0000000..4491558
--- /dev/null
+++ b/src/main/webapp/less/screen/faux-column.less
@@ -0,0 +1,29 @@
+/** Faux-Column-Hack-Eigengewächs für die Marginalspalte */
+
+.menu #page
+{
+  max-width: 38em; /** 608px + 390px (Marginalspalte) = ca. 1000px */
+  border-right: 24.375em solid @heller;
+}
+.menu .content
+{
+  margin-right: -24.375em;
+}
+#header
+{
+  padding-top: 1em;
+}
+.menu #header
+{
+  margin-right: -24.375em;
+  background-color: @hintergrund;
+}
+.menu #breadcrumb
+{
+  right: -24.375em; /** Weil der Breadcrumb sonst an der Faux-Column umbricht! */
+}
+.menu #footer
+{
+  margin-right: -24.375em;
+  background-color: @hintergrund;
+}

diff --git a/src/main/webapp/less/screen/footer.less b/src/main/webapp/less/screen/footer.less
index 97b8b69..884cfff 100644 (file)
--- a/src/main/webapp/less/screen/footer.less
+++ b/src/main/webapp/less/screen/footer.less
@@ -1,15 +1,3 @@
-#footer
-{
-  padding: 2em 0;
-}
-.nomenu #footer
-{
-  padding-top: 0;
-}
-#footer > hr.f
-{
-  display: none;
-}

 #footerlinks
 {
   border-top: 1.25em solid @normal; /** 20px */
 #footerlinks
 {
   border-top: 1.25em solid @normal; /** 20px */

diff --git a/src/main/webapp/less/screen/head.less b/src/main/webapp/less/screen/head.less
index 9a0c6e6..414e06d 100644 (file)
--- a/src/main/webapp/less/screen/head.less
+++ b/src/main/webapp/less/screen/head.less
@@ -1,7 +1,3 @@
-#header > hr
-{
-  display: none;
-}

 #logo
 {
   display: inline-block;
 #logo
 {
   display: inline-block;

diff --git a/src/main/webapp/less/screen/layout.less b/src/main/webapp/less/screen/layout.less
index a4fd785..bd4f082 100644 (file)
--- a/src/main/webapp/less/screen/layout.less
+++ b/src/main/webapp/less/screen/layout.less
@@ -1,23 +1,22 @@
+/** Seite gesamt (Abmessungen, Aussenabstände etc.) */
+

 body
 {
   padding: 0 3em 0 5em;
 body
 {
   padding: 0 3em 0 5em;

+  overflow-y: scroll; /** Die vertikale Scroll-Leiste stets anzeigen */

 }
 }

-
-#header
+#page

 {
 {

-  margin-left: -2.125em;
+  margin: 0 auto; /** Seiteninhalte zentrieren, wenn max-width des Inhalts (s.u.) erreicht ist */

 }
 
 }
 

-.content
-{
-  position: relative;
-  height: 100%;
-  padding-bottom: 7.1875em; /** 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */
-}
+
+/** Seitenaufteilung mit Menü (Zweispaltig) */
+

 .menu .content
 {
 .menu .content
 {

-  padding-right: 27em;
-  margin-right: -24.375em;
+  position: relative;
+  padding: 0 27em 7.1875em 0; /** Unten: 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */

 }
 .menu .content > .main
 {
 }
 .menu .content > .main
 {


@@ -26,18 +25,6 @@ body
   position: relative;
   width: 100%;
 }
   position: relative;
   width: 100%;
 }

-.nomenu .content > .main
-{
-  margin-bottom: 7em;
-}
-.nomenu .content > .marginal aside.m
-{
-  margin: 3.5em 0 -999em 0;
-  padding: 2em 2em 995em 2em;
-  background-color: @heller;
-  position: relative;
-  top: -4.5em;
-}

 .menu .content > .marginal
 {
   float: left;
 .menu .content > .marginal
 {
   float: left;


@@ -47,20 +34,34 @@ body
   width: 20.375em;
   background-color: @heller;
 }
   width: 20.375em;
   background-color: @heller;
 }

-.content > .marginal h1,
-.content > .marginal h2,
-.content > .marginal h3,
-.content > .marginal h4
+
+/** Anpassungen für Seiten ohne Menü (Einspaltig) */
+
+.nomenu .content

 {
 {

-  color: @hintergrund;
+  position: relative;
+  padding: 0 0 7.1875em 0; /** 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */

 }
 }

-.content > .marginal h1:first-child,
-.content > .marginal h2:first-child,
-.content > .marginal h3:first-child,
-.content > .marginal h4:first-child
+.nomenu .content > .main

 {
 {

-  margin-top: 0;
+  margin-bottom: 7em;

 }
 }

+
+
+/** Seitenkopf positionieren */
+
+#header
+{
+  margin-left: -2.125em;
+}
+#header > hr.h
+{
+  display: none;
+}
+
+
+/** Bereichsauswahl positionieren und stylen */
+

 #nav
 {
   position: absolute;
 #nav
 {
   position: absolute;


@@ -68,6 +69,10 @@ body
   right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */
   width: 100%;
 }
   right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */
   width: 100%;
 }

+#nav > hr.n
+{
+  display: none;
+}

 .menu #nav
 {
   position: relative;
 .menu #nav
 {
   position: relative;


@@ -75,54 +80,132 @@ body
   right: auto;
   width: 22.375em; /** 358px = 326px + 32px*/
 }
   right: auto;
   width: 22.375em; /** 358px = 326px + 32px*/
 }

-.menu #menu
+#menu

 {
 {

+  position: relative;
+  width: 200%;
+  top: -7em; /** 112px */
+  right: 100%;
+  text-align: right;
+  list-style-type: none;

   margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */
   margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */

+  padding: 0;
+  border-style: none;
+}
+#menu > li.m
+{
+  display: inline-block;
+  padding: 0 0 0 4em;
+}
+#menu > li.m > .m
+{
+  font-size: 250%; /** 40px */
+  color: @normal;

 }
 }

+#menu > li.m > a.m
+{
+  border-color: @normal;
+}
+#menu > li.m > a.m:hover
+{
+  border-color: @dunkler;
+}
+#menu > li.m > a.m:hover,
+#menu > li.m > strong.m
+{
+  border-style: solid;
+}
+#menu > li.m > a.m.selected
+{
+  color: @normal;
+}
+#menu > li.m > a.m:hover
+{
+  color: @dunkler;
+}
+#menu > li.m > a.m:hover:before,
+#menu > li.m > a.m.selected:before,
+#menu > li.m > strong.m:before
+{
+  content: '> ';
+  margin-left: -.92em;
+}
+
+/** Anpassungen der Bereichsauswahl für Seiten ohne Menü */
+

 .nomenu #menu
 {
   position: absolute;
 .nomenu #menu
 {
   position: absolute;

-  top: -7em; /** 112px */

   right: 0;
   right: 0;

-  margin: 0;

 }
 
 }
 

-/** Always display vertical scroll-bars */
-body { overflow-y: scroll; }

 
 

-/** Center content, when screen is bigger than 1240 */
-#page
+/** Breadcrump positionieren */
+
+#breadcrumb
+{
+  position: absolute;
+  top: 8.375em;
+  left: 6.9em;
+  z-index: 3;
+}
+#breadcrumb > a.hide
+{
+  position: absolute;
+}
+#breadcrumb > hr.b

 {
 {

-  max-width: 62.375em; /** 608px + 390px (Marginalspalte) = ca. 1000px */
-  margin: 0 auto;
+  display: none;

 }
 
 }
 

-/** Faux-Column-Hack-Eigengewächs */
-.menu #page
+
+/** Footer positionieren */
+
+#footer

 {
 {

-  max-width: 38em; /** 608px + 390px (Marginalspalte) = ca. 1000px */
-  border-right: 24.375em solid @heller;
+  padding: 2em 0;

 }
 }

-#header
+.nomenu #footer

 {
 {

-  padding-top: 1em;
+  padding-top: 0;

 }
 }

-.menu #header
+#footer > hr.f

 {
 {

-  margin-right: -24.375em;
-  background-color: @hintergrund;
+  display: none;

 }
 }

-.menu #breadcrumb
+
+
+/** Marginal-Inhalte anpassen... */
+
+.content > .marginal h1,
+.content > .marginal h2,
+.content > .marginal h3,
+.content > .marginal h4

 {
 {

-  right: -24.375em; /** Weil der Breadcrumb sonst an der Faux-Column umbricht! */
+  color: @hintergrund;

 }
 }

-.nomenu #footer
+.content > .marginal h1:first-child,
+.content > .marginal h2:first-child,
+.content > .marginal h3:first-child,
+.content > .marginal h4:first-child

 {
 {

-  border-top: 1.5em solid @hintergrund;
-  background-color: @hintergrund;
+  margin-top: 0;
+}
+
+
+/** Faux-Column-Hack für Marginalinhalte auf Seiten ohne Menü */
+
+.nomenu .content > .marginal aside.m
+{
+  margin: 3.5em 0 -999em 0;
+  padding: 2em 2em 995em 2em;
+  background-color: @heller;
+  position: relative;
+  top: -4.5em;

 }
 }

-.menu #footer
+.nomenu #footer

 {
 {

-  margin-right: -24.375em;
+  /** Hintergrund des Faux-Column-Hack für Marginal-Inhalte überlagern */
+  border-top: 1.5em solid @hintergrund;

   background-color: @hintergrund;
 }
   background-color: @hintergrund;
 }

diff --git a/src/main/webapp/less/screen/menu.less b/src/main/webapp/less/screen/menu.less
new file mode 100644 (file)
index 0000000..36f1634
--- /dev/null
+++ b/src/main/webapp/less/screen/menu.less
@@ -0,0 +1,89 @@
+#nav > h1.nav,
+#nav > h2.nav.menu
+{
+  display: none;
+}
+#nav > h2.nav.submenu
+{
+  font-size: 125%; /** 20px */
+  line-height: 1em; /** 20px */
+  margin: 1.5em 0 .5em 0; /** 30px 0 10px 0 */
+  padding: 0 0 0 1.65em; /** 0 0 0 33px */
+  border: none;
+}
+#nav > h2.nav.submenu:before
+{
+  content: 'V ';
+  margin: 0 .75em 0 -1.7em; /** 0 15em 0 -34px */
+}
+#nav > h2.nav.submenu > span.s
+{
+  display: none;
+}
+#nav > h2.nav.submenu > a.s
+{
+  color: @hintergrund;
+  border-style: dashed;
+  border-color: @hintergrund;
+}
+#nav > h2.nav.submenu > a.s:hover,
+#nav > h2.nav.submenu > a.s:focus,
+#nav > h2.nav.submenu > a.s:active
+{
+  border-style: solid;
+}
+
+#submenu
+{
+  font-size: 125%; /** 20 px */
+  list-style-type: none;
+  margin: 1em 0 4em 0;
+  padding: 0 0 0 1.65em; /** 0 0 0 33px */
+  border-style: none;
+}
+#submenu ul.s
+{
+  margin: 1em 0 0 0; /** 16px 0 0 0 */
+  padding: 0;
+  list-style-type: none;
+}
+#submenu li.s
+{
+  margin: 0 0 .5em 0; /** 0 0 10px 0 */
+  padding: 0;
+}
+#submenu li.s.off
+{
+  display: none;
+}
+#submenu li.s > a.s
+{
+  color: @dunkler;
+}
+#submenu li.s > a.s.selected,
+#submenu li.s > strong.s
+{
+  color: @hintergrund;
+  border-color: @hintergrund;
+}
+#submenu li.s > strong.s
+{
+  border-bottom: 1px solid @hintergrund;
+}
+#submenu li.s > a.s.selected:before,
+#submenu li.s > a.s:hover:before,
+#submenu li.s > a.s:focus:before,
+#submenu li.s > a.s:active:before,
+#submenu li.s > strong.s:before
+{
+  content: '> ';
+  margin: 0 .75em 0 -1.7em; /** 0 15px 0 -34px = Warum auch immer?!? */
+}
+#submenu li.s.sub > a.s.selected:before,
+#submenu li.s.sub > a.s:hover:before,
+#submenu li.s.sub > a.s:focus:before,
+#submenu li.s.sub > a.s:active:before,
+#submenu li.s.sub > strong.s:before
+{
+  content: 'V ';
+}

diff --git a/src/main/webapp/less/screen/navigation-submenu.less b/src/main/webapp/less/screen/navigation-submenu.less
deleted file mode 100644 (file)
index 36f1634..0000000
--- a/src/main/webapp/less/screen/navigation-submenu.less
+++ /dev/null
@@ -1,89 +0,0 @@
-#nav > h1.nav,
-#nav > h2.nav.menu
-{
-  display: none;
-}
-#nav > h2.nav.submenu
-{
-  font-size: 125%; /** 20px */
-  line-height: 1em; /** 20px */
-  margin: 1.5em 0 .5em 0; /** 30px 0 10px 0 */
-  padding: 0 0 0 1.65em; /** 0 0 0 33px */
-  border: none;
-}
-#nav > h2.nav.submenu:before
-{
-  content: 'V ';
-  margin: 0 .75em 0 -1.7em; /** 0 15em 0 -34px */
-}
-#nav > h2.nav.submenu > span.s
-{
-  display: none;
-}
-#nav > h2.nav.submenu > a.s
-{
-  color: @hintergrund;
-  border-style: dashed;
-  border-color: @hintergrund;
-}
-#nav > h2.nav.submenu > a.s:hover,
-#nav > h2.nav.submenu > a.s:focus,
-#nav > h2.nav.submenu > a.s:active
-{
-  border-style: solid;
-}
-
-#submenu
-{
-  font-size: 125%; /** 20 px */
-  list-style-type: none;
-  margin: 1em 0 4em 0;
-  padding: 0 0 0 1.65em; /** 0 0 0 33px */
-  border-style: none;
-}
-#submenu ul.s
-{
-  margin: 1em 0 0 0; /** 16px 0 0 0 */
-  padding: 0;
-  list-style-type: none;
-}
-#submenu li.s
-{
-  margin: 0 0 .5em 0; /** 0 0 10px 0 */
-  padding: 0;
-}
-#submenu li.s.off
-{
-  display: none;
-}
-#submenu li.s > a.s
-{
-  color: @dunkler;
-}
-#submenu li.s > a.s.selected,
-#submenu li.s > strong.s
-{
-  color: @hintergrund;
-  border-color: @hintergrund;
-}
-#submenu li.s > strong.s
-{
-  border-bottom: 1px solid @hintergrund;
-}
-#submenu li.s > a.s.selected:before,
-#submenu li.s > a.s:hover:before,
-#submenu li.s > a.s:focus:before,
-#submenu li.s > a.s:active:before,
-#submenu li.s > strong.s:before
-{
-  content: '> ';
-  margin: 0 .75em 0 -1.7em; /** 0 15px 0 -34px = Warum auch immer?!? */
-}
-#submenu li.s.sub > a.s.selected:before,
-#submenu li.s.sub > a.s:hover:before,
-#submenu li.s.sub > a.s:focus:before,
-#submenu li.s.sub > a.s:active:before,
-#submenu li.s.sub > strong.s:before
-{
-  content: 'V ';
-}

diff --git a/src/main/webapp/less/screen/navigation.less b/src/main/webapp/less/screen/navigation.less
deleted file mode 100644 (file)
index 0e5c245..0000000
--- a/src/main/webapp/less/screen/navigation.less
+++ /dev/null
@@ -1,70 +0,0 @@
-#nav > hr.n
-{
-  display: none;
-}
-#menu
-{
-  position: relative;
-  width: 200%;
-  top: -7em;
-  right: 100%;
-  text-align: right;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  border-style: none;
-}
-#menu > li.m
-{
-  display: inline-block;
-  padding: 0 0 0 4em;
-}
-#menu > li.m > .m
-{
-  font-size: 250%; /** 40px */
-  color: @normal;
-}
-#menu > li.m > a.m
-{
-  border-color: @normal;
-}
-#menu > li.m > a.m:hover
-{
-  border-color: @dunkler;
-}
-#menu > li.m > a.m:hover,
-#menu > li.m > strong.m
-{
-  border-style: solid;
-}
-#menu > li.m > a.m.selected
-{
-  color: @normal;
-}
-#menu > li.m > a.m:hover
-{
-  color: @dunkler;
-}
-#menu > li.m > a.m:hover:before,
-#menu > li.m > a.m.selected:before,
-#menu > li.m > strong.m:before
-{
-  content: '> ';
-  margin-left: -.92em;
-}
-
-#breadcrumb
-{
-  position: absolute;
-  top: 8.375em;
-  left: 6.9em;
-  z-index: 3;
-}
-#breadcrumb > a.hide
-{
-  position: absolute;
-}
-#breadcrumb > hr.b
-{
-  display: none;
-}

diff --git a/src/main/webapp/less/tablet/footer.less b/src/main/webapp/less/tablet/footer.less
index 7e6567b..1ab926b 100644 (file)
--- a/src/main/webapp/less/tablet/footer.less
+++ b/src/main/webapp/less/tablet/footer.less
@@ -1,49 +1,3 @@
-.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;
-}
-.nomenu #footer > #footerlinks
-{
-  position: static;
-  margin: -.125em;
-  padding-top: 1.5em;
-  @media (max-width: @maxsmalltablet)
-  {
-    padding-top: 1em;
-  }
-  @media (max-width: @maxsmallertablet)
-  {
-    padding-top: .5em;
-  }
-  border-top: .125em solid @hintergrund;
-}
-.nomenu #footer > #footerlinks > li.f
-{
-  line-height: 1em;
-  margin: 0 1em 0 0;
-  padding: 0;
-}
-.nomenu #footer > #footerlinks > li.f > a.f
-{
-  color: @hintergrund;
-  border-color: @hintergrund;
-}
-.nomenu #footer > #footerlinks > li#copyright
-{
-  position: static;
-  float: right;
-  font-size: 137.5%;
-  margin: 0;
-}

 .menu #footer > #footerlinks
 {
   position: static;
 .menu #footer > #footerlinks
 {
   position: static;


@@ -90,3 +44,38 @@
   border-color: @hintergrund;
   border-style: solid;
 }
   border-color: @hintergrund;
   border-style: solid;
 }

+
+
+.nomenu #footer > #footerlinks
+{
+  position: static;
+  margin: -.125em;
+  padding-top: 1.5em;
+  @media (max-width: @maxsmalltablet)
+  {
+    padding-top: 1em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    padding-top: .5em;
+  }
+  border-top: .125em solid @hintergrund;
+}
+.nomenu #footer > #footerlinks > li.f
+{
+  line-height: 1em;
+  margin: 0 1em 0 0;
+  padding: 0;
+}
+.nomenu #footer > #footerlinks > li.f > a.f
+{
+  color: @hintergrund;
+  border-color: @hintergrund;
+}
+.nomenu #footer > #footerlinks > li#copyright
+{
+  position: static;
+  float: right;
+  font-size: 137.5%;
+  margin: 0;
+}

diff --git a/src/main/webapp/less/tablet/head.less b/src/main/webapp/less/tablet/head.less
index aa559f4..f41b9e6 100644 (file)
--- a/src/main/webapp/less/tablet/head.less
+++ b/src/main/webapp/less/tablet/head.less
@@ -1,9 +1,5 @@
 @media (max-width: @maxsmalltablet)
 {
 @media (max-width: @maxsmalltablet)
 {

-  #header
-  {
-    padding-top: .5em;
-  }

   #logo
   {
     font-size: 650%; /* 104px */
   #logo
   {
     font-size: 650%; /* 104px */

diff --git a/src/main/webapp/less/tablet/layout.less b/src/main/webapp/less/tablet/layout.less
index 935e7ef..04c51d7 100644 (file)
--- a/src/main/webapp/less/tablet/layout.less
+++ b/src/main/webapp/less/tablet/layout.less
@@ -1,3 +1,5 @@
+/** Seite gesamt (Abmessungen, Aussenabstände etc.) */
+

 body
 {
   padding: 0;
 body
 {
   padding: 0;


@@ -7,6 +9,13 @@ body
   overflow: hidden;
 }
 
   overflow: hidden;
 }
 

+
+/** Seitenaufteilung mit/ohne Menü für Tablets optimieren */
+
+.menu .content
+{
+  padding: 0;
+}

 .nomenu .content
 {
   padding-bottom: 5em;
 .nomenu .content
 {
   padding-bottom: 5em;


@@ -26,8 +35,8 @@ body
   content: none;
   display: inline;
 }
   content: none;
   display: inline;
 }

-.nomenu .content > .main,
-.menu .content > .main
+.menu .content > .main,
+.nomenu .content > .main

 {
   float: none;
   width: auto;
 {
   float: none;
   width: auto;


@@ -46,6 +55,13 @@ body
   border-top: 1px solid @hintergrund;
   border-bottom: 1px solid @hintergrund;
 }
   border-top: 1px solid @hintergrund;
   border-bottom: 1px solid @hintergrund;
 }

+.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;
 .nomenu .content > .marginal
 {
   margin: 3em 0 -999em 0;


@@ -61,35 +77,28 @@ body
     padding-right: 1em;
   }
 }
     padding-right: 1em;
   }
 }

-.nomenu .content > .marginal aside.m
-{
-  margin: 3.5em -3em -999em -5em;
-  padding: 2em 3em 995em 5em;
-  border-style: none;
-}
-.menu .content > .marginal
-{
-  margin: 3em 0 -994em -15em;
-  padding: 2em 0 999em 0;
-  width: 100%;
-  position: static;
-}
-.nomenu #footer
-{
-  border-style: none;
-}
-.menu .content > .marginal > aside.m
+
+
+/** Seitenkopf positionieren */
+
+#header

 {
 {

-  margin: 0 -12em 1em 17.5em;
+  padding: 1em 3em 0 5em;

   @media (max-width: @maxsmalltablet)
   {
   @media (max-width: @maxsmalltablet)
   {

-    margin-right: -13em;
+    margin-left: -1.5em;
+    padding: .5em 2em 0 3.5em;

   }
   @media (max-width: @maxsmallertablet)
   {
   }
   @media (max-width: @maxsmallertablet)
   {

-    margin-right: -14em;
+    margin-left: -1.2em;
+    padding: 1em 1em 0 2.5em;

   }
 }
   }
 }

+
+
+/** Bereichsauswahl positionieren */
+

 .menu .content > .marginal > #nav
 {
   position: static;
 .menu .content > .marginal > #nav
 {
   position: static;


@@ -105,39 +114,62 @@ body
   }
   width: auto;
 }
   }
   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)
   {
   @media (max-width: @maxsmalltablet)
   {

-    margin-left: -1.5em;
-    padding: 1em 2em 0 3.5em;
+    top: -5.7em;
+    right: 2em;

   }
   @media (max-width: @maxsmallertablet)
   {
   }
   @media (max-width: @maxsmallertablet)
   {

-    margin-left: -1.2em;
-    padding: 1em 1em 0 2.5em;
+    top: -4.5em;
+    right: 1em;

   }
 }
   }
 }

-
-.menu #page
+#menu > li.m

 {
 {

-  max-width: none;
-  border-right-style: none;
+  @media (max-width: @maxsmalltablet)
+  {
+    padding: 0 0 0 3em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    padding: 0 0 0 2em;
+  }

 }
 }

-.menu #header
+#menu > li.m > .m

 {
 {

-  margin-right: 0;
-  border-right-style: none;
+  @media (max-width: @maxsmalltablet)
+  {
+    font-size: 200%; /* 32px */
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    font-size: 150%; /* 24px */
+  }

 }
 }

-.menu .content
+#menu > li.m > a.m:hover:before,
+#menu > li.m > a.m.selected:before,
+#menu > li.m > strong.m:before

 {
 {

-  margin: 0;
-  padding: 0;
+  @media (max-width: @maxsmalltablet)
+  {
+    content: '> ';
+    margin-left: -.95em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+  }

 }
 }

+
+
+/** Footer positionieren */
+

 .menu #footer
 {
   position: static;
 .menu #footer
 {
   position: static;


@@ -147,4 +179,58 @@ body
   width: 15em;
   background-color: @heller;
 }
   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 */
+
+#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)
+  {
+    display: none;
+  }
+}
+
+
+/** Faux-Column-Hack für Marginalinhalte anpassen */

 
 

+.nomenu .content > .marginal aside.m
+{
+  margin: 3.5em -3em -999em -5em;
+  padding: 2em 3em 995em 5em;
+  border-style: none;
+}
+.menu .content > .marginal > aside.m
+{
+  margin: 0 -12em 1em 17.5em;
+  @media (max-width: @maxsmalltablet)
+  {
+    margin-right: -13em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    margin-right: -14em;
+  }
+}

diff --git a/src/main/webapp/less/tablet/menu.less b/src/main/webapp/less/tablet/menu.less
new file mode 100644 (file)
index 0000000..85ad92f
--- /dev/null
+++ b/src/main/webapp/less/tablet/menu.less
@@ -0,0 +1,4 @@
+#submenu
+{
+  padding-right: 1em;
+}

diff --git a/src/main/webapp/less/tablet/navigation.less b/src/main/webapp/less/tablet/navigation.less
deleted file mode 100644 (file)
index 30d30a6..0000000
--- a/src/main/webapp/less/tablet/navigation.less
+++ /dev/null
@@ -1,69 +0,0 @@
-#breadcrumb
-{
-  left: 11.9em;
-  right: 3em;
-}
-.nomenu #menu,
-.menu #menu
-{
-  position: absolute;
-  width: auto;
-  right: 3em;
-}
-#submenu
-{
-  padding-right: 1em;
-}
-
-@media (max-width: @maxsmalltablet)
-{
-  .nomenu #menu,
-  .menu #menu
-  {
-    top: -5.7em;
-    right: 2em;
-  }
-  #menu > li.m
-  {
-    padding: 0 0 0 3em;
-  }
-  #menu > li.m > .m
-  {
-    font-size: 200%; /* 32px */
-  }
-  #menu > li.m > a.m:hover:before,
-  #menu > li.m > a.m.selected:before,
-  #menu > li.m > strong.m:before
-  {
-    content: '> ';
-    margin-left: -.95em;
-  }
-  #breadcrumb
-  {
-    font-size: 87.5%; /* 14px */
-    top: 7.2em;
-    left: 10.3em;
-  }
-}
-
-@media (max-width: @maxsmallertablet)
-{
-  .nomenu #menu,
-  .menu #menu
-  {
-    top: -4.5em;
-    right: 1em;
-  }
-  #menu > li.m
-  {
-    padding: 0 0 0 2em;
-  }
-  #menu > li.m > .m
-  {
-    font-size: 150%; /* 24px */
-  }
-  #breadcrumb
-  {
-    display: none;
-  }
-}

diff --git a/src/main/webapp/less/tiny/layout.less b/src/main/webapp/less/tiny/layout.less
index ede7f87..0acb606 100644 (file)
--- a/src/main/webapp/less/tiny/layout.less
+++ b/src/main/webapp/less/tiny/layout.less
@@ -12,7 +12,7 @@ body
   #header
   {
     font-size: 75%;
   #header
   {
     font-size: 75%;

-    margin: 0 .5em 0 1em;
+    margin: .25em .5em 0 1em;

   }
   .content > .marginal
   {
   }
   .content > .marginal
   {


@@ -26,9 +26,13 @@ body
   }
   #breadcrumb
   {
   }
   #breadcrumb
   {

-    top: .3em;
+    top: .1em;

     right: .3em;
   }
     right: .3em;
   }

+  #breadcrumb > a.hide:before
+  {
+    font-size: 300%; /** Vielfaches von 12px */
+  }

 }
 @media (max-width: 150px)
 {
 }
 @media (max-width: 150px)
 {


@@ -44,4 +48,12 @@ body
   {
     display: none;
   }
   {
     display: none;
   }

+  #breadcrumb
+  {
+    top: .2em;
+  }
+  #breadcrumb > a.hide:before
+  {
+    font-size: 264%; /** Vielfaches von 12px */
+  }

 }
 }