LESS-Mixins eingeführt, um das Styling der Schriften zu vereinfachen

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

diff --git a/src/main/webapp/less/base/navigation.less b/src/main/webapp/less/base/navigation.less
index 9b1daa3..4cfdc9c 100644 (file)
--- a/src/main/webapp/less/base/navigation.less
+++ b/src/main/webapp/less/base/navigation.less
@@ -1,185 +1,97 @@
-#menu
+h2.nav
 {
-  position: relative;
-  width: 200%;
-  top: -7em;
-  right: 100%;
-  text-align: right;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
 }
-#menu > li.m
-{
-  display: inline-block;
-  padding: 0 0 0 4em;
-}
-#menu > li.m > .m
-{
-  font-family: 'BPreplay', Helvetica, Arial, sans-serif;
-  font-weight: bold;
-  font-size: 250%; /** 40px */
-  color: #0ACF00;
-}
-#menu > li.m > a.m
+#menu,
+#submenu
 {
-  border-color: #0ACF00;
+  .bpreplay;
+  color: @normal;
+  margin: .5em 0 1.5em 0;
+  padding: 0.25em 0.25em 0.25em 1.5em;
+  border: 1px solid @normal;
 }
-#menu > li.m > a.m:hover
+#menu li.m,
+#submenu li.s
 {
-  border-color: #078600;
+  padding: .2em;
 }
-#menu > li.m > a.m:hover,
-#menu > li.m > strong.m
+#menu li.m a.m,
+#submenu li.s a.s
 {
-  border-style: solid;
+  color: @normal;
 }
-#menu > li.m > a.m:hover
+#menu li.m a.m:hover,
+#submenu li.s a.s:hover
 {
-  color: #078600;
+  color: @nochdunkler;
 }
-#menu > li.m > a.m:hover:before,
-#menu > li.m > a.m.selected:before,
-#menu > li.m > strong.m:before
+#menu li.m strong.m,
+#menu li.m a.m.selected,
+#menu li.m a.m:focus,
+#menu li.m a.m:active,
+#submenu li.s strong.s,
+#submenu li.s a.s.selected,
+#submenu li.s a.s:focus,
+#submenu li.s a.s:active
 {
-  content: '> ';
-  margin-left: -.92em;
+  color: @dunkler;
 }
 
 #breadcrumb
 {
-  position: absolute;
-  top: 8.4em;
-  left: 13.4em;
-  z-index: 3;
-  font-family: 'BPreplay', Helvetica, Arial, sans-serif;
-  font-weight: bold;
-  color: #0ACF00;
+  .bpreplay;
+  color: @normal;
 }
-#breadcrumb > strong.b
+#breadcrumb strong.b.title
 {
   float: left;
+  margin: 0 0.5em .6em 0;
 }
-#breadcrumb > ol.b
+#breadcrumb ol.b
 {
   display: inline;
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
-#breadcrumb > ol.b > li.b
+#breadcrumb ol.b li.b
 {
   float: left;
-  margin: 0 .5em 0 0;
+  margin: 0 0 0.5em 0.5em;
   padding: 0;
 }
-#breadcrumb > ol.b > li.b:before
+#breadcrumb ol.b li.b:before
 {
   content: '> ';
-  margin-right: .25em;
 }
-#breadcrumb > ol.b > li.b:first-child:before
+#breadcrumb ol.b li.b:first-child:before
 {
   content: '';
-  margin: 0 0 0 1em;
 }
-#breadcrumb > ol.b > li.b > strong.b
+#breadcrumb ol.b li.b strong.b
 {
-  border-bottom: 1px solid #0ACF00;
+  border-bottom: 1px solid @normal;
 }
-#breadcrumb > ol.b > li.b > a.b
+#breadcrumb ol.b li.b a.b
 {
-  color: #0ACF00;
+  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
+#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: #078600;
+  color: @dunkler;
 }
-
-#nav > h1.nav,
-#nav > h2.nav.menu
+#breadcrumb a.hide
 {
-  display: none;
+  position: static;
+  float: right;
+  margin: 0 0 0 2em;
+  white-space: nowrap;
 }
-#nav > h2.nav.submenu
+#breadcrumb div.b
 {
-  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
-{
-  color: #fff;
-  border-style: dashed;
-  border-color: #fff;
-}
-#nav > h2.nav.submenu > a.s:hover,
-#nav > h2.nav.submenu > a.s:focus,
-#nav > h2.nav.submenu > a.s:active
-{
-  border-style: solid;
+  height: 1px; /** Sonst greift das "clear" nicht unter IE6 */
+  clear: both;
 }
 
-#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;
-}
-#submenu li.s.off
-{
-  display: none;
-}
-#submenu li.s > a.selected,
-#submenu li.s > strong.s
-{
-  color: #fff;
-  border-color: #fff;
-}
-#submenu li.s > strong.s
-{
-  border-bottom: 1px solid #fff;
-}
-#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 ';
-}