Layout für Smartphones und sehr kleine Bildschirmgrößen überarbeitet

[website] / src / main / webapp / less / screen / navigation.less

diff --git a/src/main/webapp/less/screen/navigation.less b/src/main/webapp/less/screen/navigation.less
index 10e1572..0e5c245 100644 (file)
--- a/src/main/webapp/less/screen/navigation.less
+++ b/src/main/webapp/less/screen/navigation.less
@@ -1,5 +1,7 @@
-@import '../variables.less';
-
+#nav > hr.n
+{
+  display: none;
+}
 #menu
 {
   position: relative;
@@ -10,6 +12,7 @@
   list-style-type: none;
   margin: 0;
   padding: 0;
+  border-style: none;
 }
 #menu > li.m
 {
@@ -18,8 +21,6 @@
 }
 #menu > li.m > .m
 {
-  font-family: 'BPreplay', Helvetica, Arial, sans-serif;
-  font-weight: bold;
   font-size: 250%; /** 40px */
   color: @normal;
 }
@@ -36,6 +37,10 @@
 {
   border-style: solid;
 }
+#menu > li.m > a.m.selected
+{
+  color: @normal;
+}
 #menu > li.m > a.m:hover
 {
   color: @dunkler;
@@ -51,137 +56,15 @@
 #breadcrumb
 {
   position: absolute;
-  top: 8.4em;
-  left: 13.4em;
+  top: 8.375em;
+  left: 6.9em;
   z-index: 3;
-  font-family: 'BPreplay', Helvetica, Arial, sans-serif;
-  font-weight: bold;
-  color: @normal;
-}
-#breadcrumb > strong.b
-{
-  float: left;
-}
-#breadcrumb > ol.b
-{
-  display: inline;
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-}
-#breadcrumb > ol.b > li.b
-{
-  float: left;
-  margin: 0 .5em 0 0;
-  padding: 0;
-}
-#breadcrumb > ol.b > li.b:before
-{
-  content: '> ';
-  margin-right: .25em;
-}
-#breadcrumb > ol.b > li.b:first-child:before
-{
-  content: '';
-  margin: 0 0 0 1em;
-}
-#breadcrumb > ol.b > li.b > strong.b
-{
-  border-bottom: 1px solid @normal;
-}
-#breadcrumb > ol.b > li.b > a.b
-{
-  color: @normal;
-}
-#breadcrumb > ol.b > li.b > a.b:hover,
-#breadcrumb > ol.b > li.b > a.b:focus,
-#breadcrumb > ol.b > li.b > a.b:active
-{
-  color: @dunkler;
-}
-
-#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 */
-}
-#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
+#breadcrumb > a.hide
 {
-  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-family: 'BPreplay', Helvetica, Arial, sans-serif;
-  font-weight: bold;
-  font-size: 125%; /** 20 px */
-  list-style-type: none;
-  margin: 1em 0 4em 0;
-  padding: 0 0 0 1.65em; /** 0 0 0 33px */
-}
-#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;
+  position: absolute;
 }
-#submenu li.s.off
+#breadcrumb > hr.b
 {
   display: none;
 }
-#submenu li.s > a.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 ';
-}