juplo - <t:getAsString name="title"/>

From: Kai Moritz Date: Sat, 7 Dec 2013 11:09:27 +0000 (+0100) Subject: Basis-Layout für veraltete Browser (IE6 & Co.) eingeführt X-Git-Tag: thymeroot-2.0.0~175 X-Git-Url: http://juplo.de/gitweb/?a=commitdiff_plain;h=4fb8c5c64593e901f24022bc5dd6d2eb0253d563;p=website Basis-Layout für veraltete Browser (IE6 & Co.) eingeführt --- diff --git a/src/main/webapp/WEB-INF/templates/html5page.jsp b/src/main/webapp/WEB-INF/templates/html5page.jsp index ba52ec5b..f38e4a37 100644 --- a/src/main/webapp/WEB-INF/templates/html5page.jsp +++ b/src/main/webapp/WEB-INF/templates/html5page.jsp @@ -7,8 +7,11 @@ juplo - <t:getAsString name="title"/> - - + + +

diff --git a/src/main/webapp/WEB-INF/wro.xml b/src/main/webapp/WEB-INF/wro.xml index 73ce6ea0..3c4da6ff 100644 --- a/src/main/webapp/WEB-INF/wro.xml +++ b/src/main/webapp/WEB-INF/wro.xml @@ -5,12 +5,15 @@ /less/base/fonts.less /less/base/util.less /less/base/typo.less - /less/base/layout.less - /less/base/head.less - /less/base/navigation.less /less/base/content.less /less/base/marginal.less - /less/base/footer.less + + + + /less/screen/layout.less + /less/screen/head.less + /less/screen/navigation.less + /less/screen/footer.less diff --git a/src/main/webapp/less/base/footer.less b/src/main/webapp/less/base/footer.less deleted file mode 100644 index addab87c..00000000 --- a/src/main/webapp/less/base/footer.less +++ /dev/null @@ -1,46 +0,0 @@ -@import '../variables.less'; - -#footer -{ - margin: 2em 0; -} -#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; - margin: .5em 1em 0 0; - color: @normal; - vertical-align: top; -} -#footerlinks > li#copyright -{ - position: absolute; - right: .625em; - top: -1em; /** 30px */ - line-height: 1.4em; /* 42px */ - color: @hintergrund; - margin: 0; - font-size: 187.5%; /** 30px */ -} -#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 deleted file mode 100644 index 6befe52e..00000000 --- a/src/main/webapp/less/base/head.less +++ /dev/null @@ -1,48 +0,0 @@ -@import '../variables.less'; - -#header -{ - font-family: 'BPreplay', Helvetica, Arial, sans-serif; - font-weight: bold; - margin-left: -4em; -} -#header > hr -{ - display: none; -} -#logo -{ - 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; -} -#slogan -{ - display: block; - color: @hintergrund; - background-color: @normal; - font-size: 187.5%; /** 30px */ - line-height: .6666666667em; /* 20px */ - height: .6em; /* 18px */ - padding: .066666667em .066666667em 0 0; /** 2px 2px 0 0 */ - margin-left: 10em; /* 300px */ - position: relative; - z-index: 0; - top: -1.3em; /* 39px */ - text-align: right; -} -#slogan > strong{ - display: inline-block; - position: relative; - top: -.2em; /* -6px */ -} diff --git a/src/main/webapp/less/base/layout.less b/src/main/webapp/less/base/layout.less deleted file mode 100644 index efeddf9e..00000000 --- a/src/main/webapp/less/base/layout.less +++ /dev/null @@ -1,56 +0,0 @@ -@import '../variables.less'; - -.content -{ - position: relative; -} -.content.cols_2 -{ - padding: 0 27em 0 0; - background-image: url('../../img/bg.gif'); - background-repeat: repeat-y; - background-position: right top; -} -.content.cols_2 > .main -{ - float: left; - min-height: 1em; - position: relative; - width: 100%; -} -.content.cols_2 > .marginal -{ - float: left; - margin: 0 -27em 0 2.625em; - padding: 0 2em 1.0625em 2em; - position: relative; - width: 20.375em; - background-color: @heller; -} -.content #nav -{ - position: absolute; - top: 0; - width: 100%; -} -.content.cols_2 #nav -{ - position: relative; - top: auto; - right: auto; - width: 22.375em; /** 358px = 326px + 32px*/ -} -.content.cols_2 #nav > #menu -{ - margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */ -} -.content.cols_1 #nav > #menu -{ - position: absolute; - top: -7em; /** 112px */ - right: 0; - margin: 0; -} - -/** Always display vertical scroll-bars */ -body { overflow-y: scroll; } diff --git a/src/main/webapp/less/base/navigation.less b/src/main/webapp/less/base/navigation.less deleted file mode 100644 index 10e1572f..00000000 --- a/src/main/webapp/less/base/navigation.less +++ /dev/null @@ -1,187 +0,0 @@ -@import '../variables.less'; - -#menu -{ - 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: @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: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.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 -{ - 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 -{ - 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; -} -#submenu li.s.off -{ - 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 '; -} diff --git a/src/main/webapp/less/screen/footer.less b/src/main/webapp/less/screen/footer.less new file mode 100644 index 00000000..addab87c --- /dev/null +++ b/src/main/webapp/less/screen/footer.less @@ -0,0 +1,46 @@ +@import '../variables.less'; + +#footer +{ + margin: 2em 0; +} +#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; + margin: .5em 1em 0 0; + color: @normal; + vertical-align: top; +} +#footerlinks > li#copyright +{ + position: absolute; + right: .625em; + top: -1em; /** 30px */ + line-height: 1.4em; /* 42px */ + color: @hintergrund; + margin: 0; + font-size: 187.5%; /** 30px */ +} +#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/screen/head.less b/src/main/webapp/less/screen/head.less new file mode 100644 index 00000000..6befe52e --- /dev/null +++ b/src/main/webapp/less/screen/head.less @@ -0,0 +1,48 @@ +@import '../variables.less'; + +#header +{ + font-family: 'BPreplay', Helvetica, Arial, sans-serif; + font-weight: bold; + margin-left: -4em; +} +#header > hr +{ + display: none; +} +#logo +{ + 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; +} +#slogan +{ + display: block; + color: @hintergrund; + background-color: @normal; + font-size: 187.5%; /** 30px */ + line-height: .6666666667em; /* 20px */ + height: .6em; /* 18px */ + padding: .066666667em .066666667em 0 0; /** 2px 2px 0 0 */ + margin-left: 10em; /* 300px */ + position: relative; + z-index: 0; + top: -1.3em; /* 39px */ + text-align: right; +} +#slogan > strong{ + display: inline-block; + position: relative; + top: -.2em; /* -6px */ +} diff --git a/src/main/webapp/less/screen/layout.less b/src/main/webapp/less/screen/layout.less new file mode 100644 index 00000000..efeddf9e --- /dev/null +++ b/src/main/webapp/less/screen/layout.less @@ -0,0 +1,56 @@ +@import '../variables.less'; + +.content +{ + position: relative; +} +.content.cols_2 +{ + padding: 0 27em 0 0; + background-image: url('../../img/bg.gif'); + background-repeat: repeat-y; + background-position: right top; +} +.content.cols_2 > .main +{ + float: left; + min-height: 1em; + position: relative; + width: 100%; +} +.content.cols_2 > .marginal +{ + float: left; + margin: 0 -27em 0 2.625em; + padding: 0 2em 1.0625em 2em; + position: relative; + width: 20.375em; + background-color: @heller; +} +.content #nav +{ + position: absolute; + top: 0; + width: 100%; +} +.content.cols_2 #nav +{ + position: relative; + top: auto; + right: auto; + width: 22.375em; /** 358px = 326px + 32px*/ +} +.content.cols_2 #nav > #menu +{ + margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */ +} +.content.cols_1 #nav > #menu +{ + position: absolute; + top: -7em; /** 112px */ + right: 0; + margin: 0; +} + +/** Always display vertical scroll-bars */ +body { overflow-y: scroll; } diff --git a/src/main/webapp/less/screen/navigation.less b/src/main/webapp/less/screen/navigation.less new file mode 100644 index 00000000..10e1572f --- /dev/null +++ b/src/main/webapp/less/screen/navigation.less @@ -0,0 +1,187 @@ +@import '../variables.less'; + +#menu +{ + 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: @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: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.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 +{ + 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 +{ + 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; +} +#submenu li.s.off +{ + 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 '; +}