Auf lesscss umgestellt
authorKai Moritz <kai@juplo.de>
Mon, 2 Dec 2013 21:13:06 +0000 (22:13 +0100)
committerKai Moritz <kai@juplo.de>
Tue, 19 Jan 2016 16:45:35 +0000 (17:45 +0100)
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.

23 files changed:
pom.xml
src/main/webapp/css/base.css [deleted file]
src/main/webapp/css/base/browserreset.css [deleted file]
src/main/webapp/css/base/content.css [deleted file]
src/main/webapp/css/base/fonts.css [deleted file]
src/main/webapp/css/base/footer.css [deleted file]
src/main/webapp/css/base/head.css [deleted file]
src/main/webapp/css/base/layout.css [deleted file]
src/main/webapp/css/base/marginal.css [deleted file]
src/main/webapp/css/base/navigation.css [deleted file]
src/main/webapp/css/base/typo.css [deleted file]
src/main/webapp/css/base/util.css [deleted file]
src/main/webapp/less/base.less [new file with mode: 0644]
src/main/webapp/less/base/browserreset.less [new file with mode: 0644]
src/main/webapp/less/base/content.less [new file with mode: 0644]
src/main/webapp/less/base/fonts.less [new file with mode: 0644]
src/main/webapp/less/base/footer.less [new file with mode: 0644]
src/main/webapp/less/base/head.less [new file with mode: 0644]
src/main/webapp/less/base/layout.less [new file with mode: 0644]
src/main/webapp/less/base/marginal.less [new file with mode: 0644]
src/main/webapp/less/base/navigation.less [new file with mode: 0644]
src/main/webapp/less/base/typo.less [new file with mode: 0644]
src/main/webapp/less/base/util.less [new file with mode: 0644]

diff --git a/pom.xml b/pom.xml
index 8af44c8..aae2e13 100644 (file)
--- a/pom.xml
+++ b/pom.xml
             </goals>
           </execution>
         </executions>
             </goals>
           </execution>
         </executions>
+        <configuration>
+          <sourceDirectory>${project.basedir}/src/main/webapp/less</sourceDirectory>
+          <outputDirectory>${project.build.directory}/${project.build.finalName}/css</outputDirectory>
+          <compress>true</compress>
+        </configuration>
+      </plugin>
+      <plugin>
+        <artifactId>maven-war-plugin</artifactId>
+        <configuration>
+          <warSourceExcludes>less/**</warSourceExcludes>
+        </configuration>
       </plugin>
       <plugin>
         <groupId>org.apache.maven.plugins</groupId>
       </plugin>
       <plugin>
         <groupId>org.apache.maven.plugins</groupId>
diff --git a/src/main/webapp/css/base.css b/src/main/webapp/css/base.css
deleted file mode 100644 (file)
index 1b165a3..0000000
+++ /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 (file)
index 9f8fc4e..0000000
+++ /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 (file)
index e69de29..0000000
diff --git a/src/main/webapp/css/base/fonts.css b/src/main/webapp/css/base/fonts.css
deleted file mode 100644 (file)
index 8262033..0000000
+++ /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 (file)
index c4dc7c7..0000000
+++ /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 (file)
index 4ca9abe..0000000
+++ /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 (file)
index f6d4984..0000000
+++ /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 (file)
index 008c694..0000000
+++ /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 (file)
index 9b1daa3..0000000
+++ /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 (file)
index 1403333..0000000
+++ /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 (file)
index 1ab1226..0000000
+++ /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 (file)
index 0000000..1bbbe45
--- /dev/null
@@ -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 (file)
index 0000000..9f8fc4e
--- /dev/null
@@ -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 (file)
index 0000000..e69de29
diff --git a/src/main/webapp/less/base/fonts.less b/src/main/webapp/less/base/fonts.less
new file mode 100644 (file)
index 0000000..8262033
--- /dev/null
@@ -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 (file)
index 0000000..c4dc7c7
--- /dev/null
@@ -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 (file)
index 0000000..4ca9abe
--- /dev/null
@@ -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 (file)
index 0000000..f6d4984
--- /dev/null
@@ -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 (file)
index 0000000..008c694
--- /dev/null
@@ -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 (file)
index 0000000..9b1daa3
--- /dev/null
@@ -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 (file)
index 0000000..1403333
--- /dev/null
@@ -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 (file)
index 0000000..1ab1226
--- /dev/null
@@ -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;
+}
+