From: Kai Moritz Date: Mon, 2 Dec 2013 21:13:06 +0000 (+0100) Subject: Auf lesscss umgestellt X-Git-Tag: thymeroot-2.0.0~178 X-Git-Url: http://juplo.de/gitweb/?a=commitdiff_plain;h=333d6535bf30e4811ca4b1b62b02ce8658a7b777;p=website Auf lesscss umgestellt Problem: Die übersetzten CSS-Dateien stehen erst nach einem Build zur Verfügung, so dass "mvn jett:run-war" für die Weiterentwicklung verwendet werden muss, was den Entwicklungsprozess ausbremst. --- diff --git a/pom.xml b/pom.xml index 8af44c82..aae2e137 100644 --- a/pom.xml +++ b/pom.xml @@ -146,6 +146,17 @@ + + ${project.basedir}/src/main/webapp/less + ${project.build.directory}/${project.build.finalName}/css + true + + + + maven-war-plugin + + less/** + org.apache.maven.plugins diff --git a/src/main/webapp/css/base.css b/src/main/webapp/css/base.css deleted file mode 100644 index 1b165a33..00000000 --- a/src/main/webapp/css/base.css +++ /dev/null @@ -1,23 +0,0 @@ -@charset "UTF-8"; - -/** - * Diese Datei wird nur verwendet, wenn die Webanwendung via - * "mvn jetty:run" gestartet wird (z.B. über das Shell-Skript run.sh). - * Ansonsten werden die CSS-Dateien beim ausführen des Befehls "mvn package" - * minifiziert und in der Datei /css/base.css zusammengefasst. - * - * Damit alles (auf dem Produktivserver _und_ in der Test-Umgebung) wie - * erwartet funktioniert, müssen neue CSS-Schnipsel hier und in der POM - * im Modul web eingetragen werden! - */ - -@import 'base/browserreset.css'; -@import 'base/fonts.css'; -@import 'base/typo.css'; -@import 'base/util.css'; -@import 'base/head.css'; -@import 'base/navigation.css'; -@import 'base/layout.css'; -@import 'base/content.css'; -@import 'base/marginal.css'; -@import 'base/footer.css'; diff --git a/src/main/webapp/css/base/browserreset.css b/src/main/webapp/css/base/browserreset.css deleted file mode 100644 index 9f8fc4ec..00000000 --- a/src/main/webapp/css/base/browserreset.css +++ /dev/null @@ -1,67 +0,0 @@ -/** Browser-Reset *************************************************************/ - - -/** v1.0 | 20080212, s. http://meyerweb.com/eric/tools/css/reset/ */ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, font, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td { - margin: 0; - padding: 0; - border: 0; - outline: 0; - font-size: 100%; - vertical-align: baseline; - background: transparent; -} -body { - line-height: 1; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} - -/* remember to define focus styles! */ -:focus { - outline: 0; -} - -/* remember to highlight inserts somehow! */ -ins { - text-decoration: none; -} -del { - text-decoration: line-through; -} - -/* tables still need 'cellspacing="0"' in the markup */ -table { - border-collapse: collapse; - border-spacing: 0; -} - - -/** Eigene Reset-Erweiterungen */ - -a { - color: inherit; - text-decoration: none; -} -hr { - padding: 0; - margin: 0; -} diff --git a/src/main/webapp/css/base/content.css b/src/main/webapp/css/base/content.css deleted file mode 100644 index e69de29b..00000000 diff --git a/src/main/webapp/css/base/fonts.css b/src/main/webapp/css/base/fonts.css deleted file mode 100644 index 8262033a..00000000 --- a/src/main/webapp/css/base/fonts.css +++ /dev/null @@ -1,100 +0,0 @@ -@font-face -{ - font-family: 'BPreplay'; - src: url('../../fonts/BPreplay-webfont.eot'); - src: url('../../fonts/BPreplay-webfont.eot?#iefix') format('embedded-opentype'), - url('../../fonts/BPreplay-webfont.woff') format('woff'), - url('../../fonts/BPreplay-webfont.ttf') format('truetype'), - url('../../fonts/BPreplay-webfont.svg#BPreplayRegular') format('svg'); - font-weight: normal; - font-style: normal; -} - -@font-face -{ - font-family: 'BPreplay'; - src: url('../../fonts/BPreplayItalics-webfont.eot'); - src: url('../../fonts/BPreplayItalics-webfont.eot?#iefix') format('embedded-opentype'), - url('../../fonts/BPreplayItalics-webfont.woff') format('woff'), - url('../../fonts/BPreplayItalics-webfont.ttf') format('truetype'), - url('../../fonts/BPreplayItalics-webfont.svg#BPreplayItalic') format('svg'); - font-weight: normal; - font-style: italic; -} - -@font-face -{ - font-family: 'BPreplay'; - src: url('../../fonts/BPreplayBold-webfont.eot'); - src: url('../../fonts/BPreplayBold-webfont.eot?#iefix') format('embedded-opentype'), - url('../../fonts/BPreplayBold-webfont.woff') format('woff'), - url('../../fonts/BPreplayBold-webfont.ttf') format('truetype'), - url('../../fonts/BPreplayBold-webfont.svg#BPreplayBold') format('svg'); - font-weight: bold; - font-style: normal; -} - -@font-face -{ - font-family: 'BPreplay'; - src: url('../../fonts/BPreplayBoldItalics-webfont.eot'); - src: url('../../fonts/BPreplayBoldItalics-webfont.eot?#iefix') format('embedded-opentype'), - url('../../fonts/BPreplayBoldItalics-webfont.woff') format('woff'), - url('../../fonts/BPreplayBoldItalics-webfont.ttf') format('truetype'), - url('../../fonts/BPreplayBoldItalics-webfont.svg#BPreplayBoldItalic') format('svg'); - font-weight: bold; - font-style: italic; -} - -@font-face -{ - font-family: 'DroidSerif'; - src: url('../../fonts/DroidSerif-Regular-webfont.eot'); - src: url('../../fonts/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'), - url('../../fonts/DroidSerif-Regular-webfont.woff') format('woff'), - url('../../fonts/DroidSerif-Regular-webfont.ttf') format('truetype'), - url('../../fonts/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg'); - font-weight: normal; - font-style: normal; - -} - -@font-face -{ - font-family: 'DroidSerif'; - src: url('../../fonts/DroidSerif-Italic-webfont.eot'); - src: url('../../fonts/DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'), - url('../../fonts/DroidSerif-Italic-webfont.woff') format('woff'), - url('../../fonts/DroidSerif-Italic-webfont.ttf') format('truetype'), - url('../../fonts/DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg'); - font-weight: normal; - font-style: italic; - -} - -@font-face -{ - font-family: 'DroidSerif'; - src: url('../../fonts/DroidSerif-Bold-webfont.eot'); - src: url('../../fonts/DroidSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'), - url('../../fonts/DroidSerif-Bold-webfont.woff') format('woff'), - url('../../fonts/DroidSerif-Bold-webfont.ttf') format('truetype'), - url('../../fonts/DroidSerif-Bold-webfont.svg#DroidSerifBold') format('svg'); - font-weight: bold; - font-style: normal; - -} - -@font-face -{ - font-family: 'DroidSerif'; - src: url('../../fonts/DroidSerif-BoldItalic-webfont.eot'); - src: url('../../fonts/DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), - url('../../fonts/DroidSerif-BoldItalic-webfont.woff') format('woff'), - url('../../fonts/DroidSerif-BoldItalic-webfont.ttf') format('truetype'), - url('../../fonts/DroidSerif-BoldItalic-webfont.svg#DroidSerifBoldItalic') format('svg'); - font-weight: bold; - font-style: italic; - -} - diff --git a/src/main/webapp/css/base/footer.css b/src/main/webapp/css/base/footer.css deleted file mode 100644 index c4dc7c72..00000000 --- a/src/main/webapp/css/base/footer.css +++ /dev/null @@ -1,44 +0,0 @@ -#footer -{ - margin: 2em 0; -} -#footerlinks -{ - font-family: 'BPreplay', Helvetica, Arial, sans-serif; - font-weight: bold; - position: relative; - border-top: 1.25em solid #0ACF00; /** 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: #0ACF00; - vertical-align: top; -} -#footerlinks > li#copyright -{ - position: absolute; - right: .625em; - top: -1em; /** 30px */ - line-height: 1.4em; /* 42px */ - color: #fff; - margin: 0; - font-size: 187.5%; /** 30px */ -} -#footerlinks a.f -{ - color: #0ACF00; - border-color: #0ACF00; -} -#footerlinks a.f:hover -{ - color: #078600; - border-color: #078600; - border-style: solid; -} diff --git a/src/main/webapp/css/base/head.css b/src/main/webapp/css/base/head.css deleted file mode 100644 index 4ca9abec..00000000 --- a/src/main/webapp/css/base/head.css +++ /dev/null @@ -1,46 +0,0 @@ -#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: #0ACF00; - text-shadow: .092307692em .046153846em 0 #fff; /** 12px 6px */ - border: none; - position: relative; - z-index: 1; -} -#logo:hover -{ - color: #078600; -} -#slogan -{ - display: block; - color: #fff; - background-color: #0ACF00; - 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/css/base/layout.css b/src/main/webapp/css/base/layout.css deleted file mode 100644 index f6d4984e..00000000 --- a/src/main/webapp/css/base/layout.css +++ /dev/null @@ -1,54 +0,0 @@ -.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: #6EE768; -} -.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/css/base/marginal.css b/src/main/webapp/css/base/marginal.css deleted file mode 100644 index 008c694f..00000000 --- a/src/main/webapp/css/base/marginal.css +++ /dev/null @@ -1,14 +0,0 @@ -.marginal h1, -.marginal h2, -.marginal h3, -.marginal h4 -{ - color: #fff; -} -.marginal h1 -{ - font-size: 125%; /** 20 px */ - line-height: 1em; /** 20px */ - margin: 1.5em 0 .5em 0; /** 30px 0 10px 0 */ - padding: 0; -} diff --git a/src/main/webapp/css/base/navigation.css b/src/main/webapp/css/base/navigation.css deleted file mode 100644 index 9b1daa35..00000000 --- a/src/main/webapp/css/base/navigation.css +++ /dev/null @@ -1,185 +0,0 @@ -#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: #0ACF00; -} -#menu > li.m > a.m -{ - border-color: #0ACF00; -} -#menu > li.m > a.m:hover -{ - border-color: #078600; -} -#menu > li.m > a.m:hover, -#menu > li.m > strong.m -{ - border-style: solid; -} -#menu > li.m > a.m:hover -{ - color: #078600; -} -#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: #0ACF00; -} -#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 #0ACF00; -} -#breadcrumb > ol.b > li.b > a.b -{ - color: #0ACF00; -} -#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; -} - -#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: #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; -} - -#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 '; -} diff --git a/src/main/webapp/css/base/typo.css b/src/main/webapp/css/base/typo.css deleted file mode 100644 index 1403333f..00000000 --- a/src/main/webapp/css/base/typo.css +++ /dev/null @@ -1,132 +0,0 @@ -/** Typografische Grundeinstellungen ******************************************/ - -/** Farben: - * 1: 0ACF00 Normal - * 2: 2D9B27 - * 3: 078600 Dunkler - * 4: 42E73A Heller - * 5: 6EE768 - */ - -body -{ - font-family: 'DroidSerif', 'Times New Roman', 'Palatino Linotype' , serif; - letter-spacing: 0; - line-height: 1.5em; - padding: 1em 3em 1em 5em; - background-color: #fff; -} -h1, h2, h3, h4, h5, h6 -{ - font-family: 'BPreplay', Helvetica, Arial, sans-serif; - letter-spacing: 0; - font-weight: bold; - color: #0ACF00; - margin: 1em 0 .5em 0; /** 16px 0 8px 0 */ -} -h1 -{ - font-size: 187.5%; /** 30 px */ - line-height: 1em; /** 30px */ - padding: 0 0 .4em 0; /** 0 0 12px 0 */ - margin: 1em 0 .3em 0; /** 30px 0 9px 0 */ -} -h2 -{ - font-size: 112.5%; /** 18px */ - line-height: 1.5em; /** 27px */ -} -h3 -{ - /** font-size: 16px */ - /** line-height: 24px */ -} -h4 -{ - font-size: 87.5%; /** 14px */ - line-height: 1.5em; /** 21px */ -} -h1 a, h2 a, h3 a, h4 a -{ - color: #0ACF00; - border-style: none; -} -h1 a:hover, -h2 a:hover, -h3 a:hover, -h4 a:hover -{ - color: #078600; - border-bottom: 1px solid #078600; -} -h1 a:focus, -h2 a:focus, -h3 a:focus, -h4 a:focus, -h1 a:active, -h2 a:active, -h3 a:active, -h4 a:active -{ - color: #2D9B27; - border-bottom: 1px solid #2D9B27; -} -p -{ - line-height: 1.5em; /** 21px */ - margin: .5em 0 .5em 0; -} -ul, ol -{ - margin: .25em 0 .25em 0; /** 4px 0 4px 0 */ - padding: 0 0 0 1em; /** 0 0 0 16px */ -} -ul -{ - list-style-type: square; -} -ol -{ - list-style-type: decimal; - padding-left: 1.1875em; /** 19px */ -} -li -{ - padding-bottom: .25em; /** 2px */ -} -table, th, td -{ - padding: .1em .2em; -} -th, td -{ - font-size: 87.5%; /** 14px */ - line-height: 1.5em; /** 20px */ - border: .071428571em solid #000; /** 1px */ - padding: .214285714em .5em; /** 3px 7px */ -} -hr -{ - margin: 1em 0 1em 0; -} -a -{ - color: #078600; - border-bottom: 1px dashed #078600; -} -a:hover -{ - color: #077600; - border-bottom: 1px solid #077600; -} -a:focus, -a:active -{ - color: #078600; - border-bottom: 1px solid #078600; -} -a:visited -{ - border-bottom: 1px dotted #077600; -} - diff --git a/src/main/webapp/css/base/util.css b/src/main/webapp/css/base/util.css deleted file mode 100644 index 1ab1226c..00000000 --- a/src/main/webapp/css/base/util.css +++ /dev/null @@ -1,20 +0,0 @@ -/** Allgemein nützliche Marker-Klassen */ - - -/** Micro Clearfix-Hack nach http://nicolasgallagher.com/micro-clearfix-hack/ */ - -.cf:before, -.cf:after { - content: ""; - display: table; -} -.cf:after { - clear:both; -} - -/** Hide helpful content in a way, that it is still accessible to screen-readers */ -.hide{ - position: absolute; - left: -99999999em; -} - diff --git a/src/main/webapp/less/base.less b/src/main/webapp/less/base.less new file mode 100644 index 00000000..1bbbe451 --- /dev/null +++ b/src/main/webapp/less/base.less @@ -0,0 +1,23 @@ +@charset "UTF-8"; + +/** + * Diese Datei wird nur verwendet, wenn die Webanwendung via + * "mvn jetty:run" gestartet wird (z.B. über das Shell-Skript run.sh). + * Ansonsten werden die CSS-Dateien beim ausführen des Befehls "mvn package" + * minifiziert und in der Datei /css/base.css zusammengefasst. + * + * Damit alles (auf dem Produktivserver _und_ in der Test-Umgebung) wie + * erwartet funktioniert, müssen neue CSS-Schnipsel hier und in der POM + * im Modul web eingetragen werden! + */ + +@import 'base/browserreset'; +@import 'base/fonts'; +@import 'base/typo'; +@import 'base/util'; +@import 'base/head'; +@import 'base/navigation'; +@import 'base/layout'; +@import 'base/content'; +@import 'base/marginal'; +@import 'base/footer'; diff --git a/src/main/webapp/less/base/browserreset.less b/src/main/webapp/less/base/browserreset.less new file mode 100644 index 00000000..9f8fc4ec --- /dev/null +++ b/src/main/webapp/less/base/browserreset.less @@ -0,0 +1,67 @@ +/** Browser-Reset *************************************************************/ + + +/** v1.0 | 20080212, s. http://meyerweb.com/eric/tools/css/reset/ */ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +/* remember to define focus styles! */ +:focus { + outline: 0; +} + +/* remember to highlight inserts somehow! */ +ins { + text-decoration: none; +} +del { + text-decoration: line-through; +} + +/* tables still need 'cellspacing="0"' in the markup */ +table { + border-collapse: collapse; + border-spacing: 0; +} + + +/** Eigene Reset-Erweiterungen */ + +a { + color: inherit; + text-decoration: none; +} +hr { + padding: 0; + margin: 0; +} diff --git a/src/main/webapp/less/base/content.less b/src/main/webapp/less/base/content.less new file mode 100644 index 00000000..e69de29b diff --git a/src/main/webapp/less/base/fonts.less b/src/main/webapp/less/base/fonts.less new file mode 100644 index 00000000..8262033a --- /dev/null +++ b/src/main/webapp/less/base/fonts.less @@ -0,0 +1,100 @@ +@font-face +{ + font-family: 'BPreplay'; + src: url('../../fonts/BPreplay-webfont.eot'); + src: url('../../fonts/BPreplay-webfont.eot?#iefix') format('embedded-opentype'), + url('../../fonts/BPreplay-webfont.woff') format('woff'), + url('../../fonts/BPreplay-webfont.ttf') format('truetype'), + url('../../fonts/BPreplay-webfont.svg#BPreplayRegular') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face +{ + font-family: 'BPreplay'; + src: url('../../fonts/BPreplayItalics-webfont.eot'); + src: url('../../fonts/BPreplayItalics-webfont.eot?#iefix') format('embedded-opentype'), + url('../../fonts/BPreplayItalics-webfont.woff') format('woff'), + url('../../fonts/BPreplayItalics-webfont.ttf') format('truetype'), + url('../../fonts/BPreplayItalics-webfont.svg#BPreplayItalic') format('svg'); + font-weight: normal; + font-style: italic; +} + +@font-face +{ + font-family: 'BPreplay'; + src: url('../../fonts/BPreplayBold-webfont.eot'); + src: url('../../fonts/BPreplayBold-webfont.eot?#iefix') format('embedded-opentype'), + url('../../fonts/BPreplayBold-webfont.woff') format('woff'), + url('../../fonts/BPreplayBold-webfont.ttf') format('truetype'), + url('../../fonts/BPreplayBold-webfont.svg#BPreplayBold') format('svg'); + font-weight: bold; + font-style: normal; +} + +@font-face +{ + font-family: 'BPreplay'; + src: url('../../fonts/BPreplayBoldItalics-webfont.eot'); + src: url('../../fonts/BPreplayBoldItalics-webfont.eot?#iefix') format('embedded-opentype'), + url('../../fonts/BPreplayBoldItalics-webfont.woff') format('woff'), + url('../../fonts/BPreplayBoldItalics-webfont.ttf') format('truetype'), + url('../../fonts/BPreplayBoldItalics-webfont.svg#BPreplayBoldItalic') format('svg'); + font-weight: bold; + font-style: italic; +} + +@font-face +{ + font-family: 'DroidSerif'; + src: url('../../fonts/DroidSerif-Regular-webfont.eot'); + src: url('../../fonts/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'), + url('../../fonts/DroidSerif-Regular-webfont.woff') format('woff'), + url('../../fonts/DroidSerif-Regular-webfont.ttf') format('truetype'), + url('../../fonts/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg'); + font-weight: normal; + font-style: normal; + +} + +@font-face +{ + font-family: 'DroidSerif'; + src: url('../../fonts/DroidSerif-Italic-webfont.eot'); + src: url('../../fonts/DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'), + url('../../fonts/DroidSerif-Italic-webfont.woff') format('woff'), + url('../../fonts/DroidSerif-Italic-webfont.ttf') format('truetype'), + url('../../fonts/DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg'); + font-weight: normal; + font-style: italic; + +} + +@font-face +{ + font-family: 'DroidSerif'; + src: url('../../fonts/DroidSerif-Bold-webfont.eot'); + src: url('../../fonts/DroidSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'), + url('../../fonts/DroidSerif-Bold-webfont.woff') format('woff'), + url('../../fonts/DroidSerif-Bold-webfont.ttf') format('truetype'), + url('../../fonts/DroidSerif-Bold-webfont.svg#DroidSerifBold') format('svg'); + font-weight: bold; + font-style: normal; + +} + +@font-face +{ + font-family: 'DroidSerif'; + src: url('../../fonts/DroidSerif-BoldItalic-webfont.eot'); + src: url('../../fonts/DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), + url('../../fonts/DroidSerif-BoldItalic-webfont.woff') format('woff'), + url('../../fonts/DroidSerif-BoldItalic-webfont.ttf') format('truetype'), + url('../../fonts/DroidSerif-BoldItalic-webfont.svg#DroidSerifBoldItalic') format('svg'); + font-weight: bold; + font-style: italic; + +} + diff --git a/src/main/webapp/less/base/footer.less b/src/main/webapp/less/base/footer.less new file mode 100644 index 00000000..c4dc7c72 --- /dev/null +++ b/src/main/webapp/less/base/footer.less @@ -0,0 +1,44 @@ +#footer +{ + margin: 2em 0; +} +#footerlinks +{ + font-family: 'BPreplay', Helvetica, Arial, sans-serif; + font-weight: bold; + position: relative; + border-top: 1.25em solid #0ACF00; /** 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: #0ACF00; + vertical-align: top; +} +#footerlinks > li#copyright +{ + position: absolute; + right: .625em; + top: -1em; /** 30px */ + line-height: 1.4em; /* 42px */ + color: #fff; + margin: 0; + font-size: 187.5%; /** 30px */ +} +#footerlinks a.f +{ + color: #0ACF00; + border-color: #0ACF00; +} +#footerlinks a.f:hover +{ + color: #078600; + border-color: #078600; + 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 index 00000000..4ca9abec --- /dev/null +++ b/src/main/webapp/less/base/head.less @@ -0,0 +1,46 @@ +#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: #0ACF00; + text-shadow: .092307692em .046153846em 0 #fff; /** 12px 6px */ + border: none; + position: relative; + z-index: 1; +} +#logo:hover +{ + color: #078600; +} +#slogan +{ + display: block; + color: #fff; + background-color: #0ACF00; + 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 new file mode 100644 index 00000000..f6d4984e --- /dev/null +++ b/src/main/webapp/less/base/layout.less @@ -0,0 +1,54 @@ +.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: #6EE768; +} +.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/marginal.less b/src/main/webapp/less/base/marginal.less new file mode 100644 index 00000000..008c694f --- /dev/null +++ b/src/main/webapp/less/base/marginal.less @@ -0,0 +1,14 @@ +.marginal h1, +.marginal h2, +.marginal h3, +.marginal h4 +{ + color: #fff; +} +.marginal h1 +{ + font-size: 125%; /** 20 px */ + line-height: 1em; /** 20px */ + margin: 1.5em 0 .5em 0; /** 30px 0 10px 0 */ + padding: 0; +} diff --git a/src/main/webapp/less/base/navigation.less b/src/main/webapp/less/base/navigation.less new file mode 100644 index 00000000..9b1daa35 --- /dev/null +++ b/src/main/webapp/less/base/navigation.less @@ -0,0 +1,185 @@ +#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: #0ACF00; +} +#menu > li.m > a.m +{ + border-color: #0ACF00; +} +#menu > li.m > a.m:hover +{ + border-color: #078600; +} +#menu > li.m > a.m:hover, +#menu > li.m > strong.m +{ + border-style: solid; +} +#menu > li.m > a.m:hover +{ + color: #078600; +} +#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: #0ACF00; +} +#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 #0ACF00; +} +#breadcrumb > ol.b > li.b > a.b +{ + color: #0ACF00; +} +#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; +} + +#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: #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; +} + +#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 '; +} diff --git a/src/main/webapp/less/base/typo.less b/src/main/webapp/less/base/typo.less new file mode 100644 index 00000000..1403333f --- /dev/null +++ b/src/main/webapp/less/base/typo.less @@ -0,0 +1,132 @@ +/** Typografische Grundeinstellungen ******************************************/ + +/** Farben: + * 1: 0ACF00 Normal + * 2: 2D9B27 + * 3: 078600 Dunkler + * 4: 42E73A Heller + * 5: 6EE768 + */ + +body +{ + font-family: 'DroidSerif', 'Times New Roman', 'Palatino Linotype' , serif; + letter-spacing: 0; + line-height: 1.5em; + padding: 1em 3em 1em 5em; + background-color: #fff; +} +h1, h2, h3, h4, h5, h6 +{ + font-family: 'BPreplay', Helvetica, Arial, sans-serif; + letter-spacing: 0; + font-weight: bold; + color: #0ACF00; + margin: 1em 0 .5em 0; /** 16px 0 8px 0 */ +} +h1 +{ + font-size: 187.5%; /** 30 px */ + line-height: 1em; /** 30px */ + padding: 0 0 .4em 0; /** 0 0 12px 0 */ + margin: 1em 0 .3em 0; /** 30px 0 9px 0 */ +} +h2 +{ + font-size: 112.5%; /** 18px */ + line-height: 1.5em; /** 27px */ +} +h3 +{ + /** font-size: 16px */ + /** line-height: 24px */ +} +h4 +{ + font-size: 87.5%; /** 14px */ + line-height: 1.5em; /** 21px */ +} +h1 a, h2 a, h3 a, h4 a +{ + color: #0ACF00; + border-style: none; +} +h1 a:hover, +h2 a:hover, +h3 a:hover, +h4 a:hover +{ + color: #078600; + border-bottom: 1px solid #078600; +} +h1 a:focus, +h2 a:focus, +h3 a:focus, +h4 a:focus, +h1 a:active, +h2 a:active, +h3 a:active, +h4 a:active +{ + color: #2D9B27; + border-bottom: 1px solid #2D9B27; +} +p +{ + line-height: 1.5em; /** 21px */ + margin: .5em 0 .5em 0; +} +ul, ol +{ + margin: .25em 0 .25em 0; /** 4px 0 4px 0 */ + padding: 0 0 0 1em; /** 0 0 0 16px */ +} +ul +{ + list-style-type: square; +} +ol +{ + list-style-type: decimal; + padding-left: 1.1875em; /** 19px */ +} +li +{ + padding-bottom: .25em; /** 2px */ +} +table, th, td +{ + padding: .1em .2em; +} +th, td +{ + font-size: 87.5%; /** 14px */ + line-height: 1.5em; /** 20px */ + border: .071428571em solid #000; /** 1px */ + padding: .214285714em .5em; /** 3px 7px */ +} +hr +{ + margin: 1em 0 1em 0; +} +a +{ + color: #078600; + border-bottom: 1px dashed #078600; +} +a:hover +{ + color: #077600; + border-bottom: 1px solid #077600; +} +a:focus, +a:active +{ + color: #078600; + border-bottom: 1px solid #078600; +} +a:visited +{ + border-bottom: 1px dotted #077600; +} + diff --git a/src/main/webapp/less/base/util.less b/src/main/webapp/less/base/util.less new file mode 100644 index 00000000..1ab1226c --- /dev/null +++ b/src/main/webapp/less/base/util.less @@ -0,0 +1,20 @@ +/** Allgemein nützliche Marker-Klassen */ + + +/** Micro Clearfix-Hack nach http://nicolasgallagher.com/micro-clearfix-hack/ */ + +.cf:before, +.cf:after { + content: ""; + display: table; +} +.cf:after { + clear:both; +} + +/** Hide helpful content in a way, that it is still accessible to screen-readers */ +.hide{ + position: absolute; + left: -99999999em; +} +