Basis-Layout für veraltete Browser (IE6 & Co.) überarbeitet

diff --git a/src/main/webapp/WEB-INF/templates/html5page.jsp b/src/main/webapp/WEB-INF/templates/html5page.jsp
index 5c40bec..10ba76d 100644 (file)
--- a/src/main/webapp/WEB-INF/templates/html5page.jsp
+++ b/src/main/webapp/WEB-INF/templates/html5page.jsp
@@ -26,14 +26,15 @@
     <header id="header">
       <a href="/" title="Home" id="logo">juplo</a>
       <span id="slogan"><strong>Java</strong> bits from nerds for nerds</span>
-      <hr />
+      <hr class="h" />
     </header>
     <div id="breadcrumb">
-      <strong class="b">You are here:</strong>
+      <strong class="b title">You are here:</strong>
       <ol class="b">
         <t:insertAttribute name="breadcrumb"/>
       </ol>
       <a class="hide" href="#navigation">Jump to navigation</a>
+      <div class="b"></div>
     </div>
     <div class="content <t:getAsString name="contentclass"/> cf">
       <section id="content" class="main">
@@ -42,13 +43,16 @@
       </section>
       <div class="marginal">
         <nav id="nav">
+          <hr />
           <a id="navigation"></a>
           <t:insertAttribute name="navigation"/>
+          <hr />
         </nav>
         <t:insertAttribute name="marginalcontent" ignore="true"/>
       </div>
     </div>
     <footer id="footer">
+      <hr />
       <ul id="footerlinks">
         <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
         <li class="f"><a class="f" href="contact.html">Contact</a></li>

diff --git a/src/main/webapp/WEB-INF/wro.xml b/src/main/webapp/WEB-INF/wro.xml
index 117cc27..dfe951f 100644 (file)
--- a/src/main/webapp/WEB-INF/wro.xml
+++ b/src/main/webapp/WEB-INF/wro.xml
@@ -5,14 +5,18 @@
     <css>/less/base/fonts.less</css>
     <css>/less/base/util.less</css>
     <css>/less/base/typo.less</css>
+    <css>/less/base/head.less</css>
+    <css>/less/base/navigation.less</css>
     <css>/less/base/content.less</css>
     <css>/less/base/marginal.less</css>
+    <css>/less/base/footer.less</css>
   </group>
 
   <group name="screen">
     <css>/less/screen/layout.less</css>
     <css>/less/screen/head.less</css>
     <css>/less/screen/navigation.less</css>
+    <css>/less/screen/marginal.less</css>
     <css>/less/screen/footer.less</css>
   </group>
 

diff --git a/src/main/webapp/less/base/footer.less b/src/main/webapp/less/base/footer.less
new file mode 100644 (file)
index 0000000..0ee263a
--- /dev/null
+++ b/src/main/webapp/less/base/footer.less
@@ -0,0 +1,32 @@
+#footerlinks
+{
+  font-family: 'BPreplay', Helvetica, Arial, sans-serif;
+  font-weight: bold;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+#footerlinks li.f
+{
+  font-size: 137.5%; /** 22 px */
+  float: left;
+  margin: 0 1em 1em 0;
+}
+#footerlinks #copyright
+{
+  float: right;
+  color: @schrift;
+  margin: 0;
+}
+#footerlinks a.f
+{
+  color: @normal;
+  border-color: @normal;
+}
+#footerlinks a.f:hover
+{
+  color: @dunkler;
+  border-color: @dunkler;
+  border-style: solid;
+}

diff --git a/src/main/webapp/less/base/head.less b/src/main/webapp/less/base/head.less
new file mode 100644 (file)
index 0000000..1527e34
--- /dev/null
+++ b/src/main/webapp/less/base/head.less
@@ -0,0 +1,27 @@
+@import '../variables.less';
+
+#header
+{
+  font-family: 'BPreplay', Helvetica, Arial, sans-serif;
+  font-weight: bold;
+}
+#logo
+{
+  font-size: 400%;
+  line-height: 1.2em;
+  padding: 0 0 0 .230769231em; /* 30px */
+  color: @normal;
+  border: none;
+  position: relative;
+  left: -.3em;
+}
+#logo:hover
+{
+  color: @dunkler;
+}
+#slogan
+{
+  color: @normal;
+  white-space: nowrap;
+  padding-top: 1em;
+}

diff --git a/src/main/webapp/less/base/marginal.less b/src/main/webapp/less/base/marginal.less
index b4f7bca..1b0868d 100644 (file)
--- a/src/main/webapp/less/base/marginal.less
+++ b/src/main/webapp/less/base/marginal.less
@@ -1,12 +1,5 @@
 @import '../variables.less';
 
-.marginal h1,
-.marginal h2,
-.marginal h3,
-.marginal h4
-{
-  color: @hintergrund;
-}
 .marginal h1
 {
   font-size: 125%; /** 20 px */

diff --git a/src/main/webapp/less/base/navigation.less b/src/main/webapp/less/base/navigation.less
new file mode 100644 (file)
index 0000000..1ca1d24
--- /dev/null
+++ b/src/main/webapp/less/base/navigation.less
@@ -0,0 +1,89 @@
+h2.nav
+{
+  padding-bottom: .3em;
+  border-bottom: 1px solid @normal;
+}
+#menu,
+#submenu
+{
+  font-family: 'BPreplay', Helvetica, Arial, sans-serif;
+  font-weight: bold;
+  color: @normal;
+  margin: 1em 0 2em 0;
+}
+#menu li.m,
+#submenu li.s
+{
+  padding: .2em;
+}
+#menu li.m a.m,
+#submenu li.s a.s
+{
+  color: @normal;
+}
+#menu li.m a.m:hover,
+#submenu li.s a.s:hover
+{
+  color: @nochdunkler;
+}
+#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
+{
+  color: @dunkler;
+}
+
+#breadcrumb
+{
+  font-family: 'BPreplay', Helvetica, Arial, sans-serif;
+  font-weight: bold;
+  color: @normal;
+}
+#breadcrumb strong.b.title
+{
+  float: left;
+}
+#breadcrumb ol.b
+{
+  display: inline;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+#breadcrumb ol.b li.b
+{
+  float: left;
+  margin: 0 0 0 1em;
+  padding: 0;
+}
+#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;
+}
+#breadcrumb a.hide
+{
+  position: static;
+  float: right;
+  white-space: nowrap;
+}
+#breadcrumb div.b
+{
+  height: 1px; /** Sonst greift das "clear" nicht unter IE6 */
+  clear: both;
+}
+

diff --git a/src/main/webapp/less/base/typo.less b/src/main/webapp/less/base/typo.less
index edd8b46..431fe57 100644 (file)
--- a/src/main/webapp/less/base/typo.less
+++ b/src/main/webapp/less/base/typo.less
@@ -101,6 +101,10 @@ th, td
 }
 hr
 {
+  border: none;
+  border-top: 2px solid @normal;
+  background-color: @normal;
+  height: 1px;
   margin: 1em 0 1em 0;
 }
 a

diff --git a/src/main/webapp/less/screen/footer.less b/src/main/webapp/less/screen/footer.less
index addab87..922e92a 100644 (file)
--- a/src/main/webapp/less/screen/footer.less
+++ b/src/main/webapp/less/screen/footer.less
@@ -4,21 +4,19 @@
 {
   margin: 2em 0;
 }
+#footer > hr
+{
+  display: none;
+}
 #footerlinks
 {
-  font-family: 'BPreplay', Helvetica, Arial, sans-serif;
-  font-weight: bold;
-  position: relative;
   border-top: 1.25em solid @normal; /** 20px */
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
 }
 #footerlinks > li.f
 {
-  font-size: 137.5%; /** 22 px */
   line-height: .6666666667em; /* 20px */
   display: inline-block;
+  float: none;
   margin: .5em 1em 0 0;
   color: @normal;
   vertical-align: top;
@@ -26,6 +24,7 @@
 #footerlinks > li#copyright
 {
   position: absolute;
+  float: none;
   right: .625em;
   top: -1em; /** 30px */
   line-height: 1.4em; /* 42px */

diff --git a/src/main/webapp/less/screen/head.less b/src/main/webapp/less/screen/head.less
index 6befe52..b740935 100644 (file)
--- a/src/main/webapp/less/screen/head.less
+++ b/src/main/webapp/less/screen/head.less
@@ -2,8 +2,6 @@
 
 #header
 {
-  font-family: 'BPreplay', Helvetica, Arial, sans-serif;
-  font-weight: bold;
   margin-left: -4em;
 }
 #header > hr
@@ -15,16 +13,9 @@
   display: inline-block;
   font-size: 812.5%; /* 130px */
   line-height: 1em;
-  padding: 0 0 0 .230769231em; /* 30px */
-  color: @normal;
   text-shadow: .092307692em .046153846em 0 @hintergrund; /** 12px 6px */
-  border: none;
-  position: relative;
   z-index: 1;
-}
-#logo:hover
-{
-  color: @dunkler;
+  left: auto;
 }
 #slogan
 {

diff --git a/src/main/webapp/less/screen/layout.less b/src/main/webapp/less/screen/layout.less
index efeddf9..10d147f 100644 (file)
--- a/src/main/webapp/less/screen/layout.less
+++ b/src/main/webapp/less/screen/layout.less
@@ -27,6 +27,13 @@
   width: 20.375em;
   background-color: @heller;
 }
+.cols_2 > .content > .marginal h1,
+.cols_2 > .content > .marginal h2,
+.cols_2 > .content > .marginal h3,
+.cols_2 > .content > .marginal h4
+{
+  color: @hintergrund;
+}
 .content #nav
 {
   position: absolute;

diff --git a/src/main/webapp/less/screen/navigation.less b/src/main/webapp/less/screen/navigation.less
index 10e1572..c3760e5 100644 (file)
--- a/src/main/webapp/less/screen/navigation.less
+++ b/src/main/webapp/less/screen/navigation.less
@@ -1,5 +1,9 @@
 @import '../variables.less';
 
+#nav > hr
+{
+  display: none;
+}
 #menu
 {
   position: relative;
@@ -18,8 +22,6 @@
 }
 #menu > li.m > .m
 {
-  font-family: 'BPreplay', Helvetica, Arial, sans-serif;
-  font-weight: bold;
   font-size: 250%; /** 40px */
   color: @normal;
 }
@@ -36,6 +38,10 @@
 {
   border-style: solid;
 }
+#menu > li.m > a.m.selected
+{
+  color: @normal;
+}
 #menu > li.m > a.m:hover
 {
   color: @dunkler;
@@ -54,26 +60,16 @@
   top: 8.4em;
   left: 13.4em;
   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
 {
@@ -87,17 +83,18 @@
 }
 #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;
+}
+#breadcrumb > a.hide
+{
+  position: absolute;
 }
 
 #nav > h1.nav,
@@ -111,6 +108,7 @@
   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
 {
@@ -136,8 +134,6 @@
 
 #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;
@@ -158,7 +154,11 @@
 {
   display: none;
 }
-#submenu li.s > a.selected,
+#submenu li.s > a.s
+{
+  color: @dunkler;
+}
+#submenu li.s > a.s.selected,
 #submenu li.s > strong.s
 {
   color: @hintergrund;

diff --git a/src/main/webapp/less/variables.less b/src/main/webapp/less/variables.less
index ba55128..e2b4dcc 100644 (file)
--- a/src/main/webapp/less/variables.less
+++ b/src/main/webapp/less/variables.less
@@ -1,4 +1,4 @@
-/** Farben */
+/** Farb-Thema */
 
 @normal:      #0ACF00;
 @dunkel:      #2D9B27;
@@ -6,4 +6,6 @@
 @nochdunkler: #077600;
 @hell:        #42E73A;
 @heller:      #6EE768;
-@hintergrund: #FFFFFF;
+
+@schrift:     #000;
+@hintergrund: #FFF;