From: Kai Moritz <kai@juplo.de>
Date: Sat, 7 Dec 2013 12:52:08 +0000 (+0100)
Subject: Das Farb-Thema werden jetzt mit Hilfe von LESS-Variablen umgesetzt
X-Git-Tag: thymeroot-2.0.0~176
X-Git-Url: http://juplo.de/gitweb/?a=commitdiff_plain;h=e4514bf0d4f1437add504129e4595f872f2d80fc;p=website

Das Farb-Thema werden jetzt mit Hilfe von LESS-Variablen umgesetzt
---

diff --git a/src/main/webapp/less/base/footer.less b/src/main/webapp/less/base/footer.less
index c4dc7c72..addab87c 100644
--- a/src/main/webapp/less/base/footer.less
+++ b/src/main/webapp/less/base/footer.less
@@ -1,3 +1,5 @@
+@import '../variables.less';
+
 #footer
 {
   margin: 2em 0;
@@ -7,7 +9,7 @@
   font-family: 'BPreplay', Helvetica, Arial, sans-serif;
   font-weight: bold;
   position: relative;
-  border-top: 1.25em solid #0ACF00; /** 20px */
+  border-top: 1.25em solid @normal; /** 20px */
   margin: 0;
   padding: 0;
   list-style-type: none;
@@ -18,7 +20,7 @@
   line-height: .6666666667em; /* 20px */
   display: inline-block;
   margin: .5em 1em 0 0;
-  color: #0ACF00;
+  color: @normal;
   vertical-align: top;
 }
 #footerlinks > li#copyright
@@ -27,18 +29,18 @@
   right: .625em;
   top: -1em; /** 30px */
   line-height: 1.4em; /* 42px */
-  color: #fff;
+  color: @hintergrund;
   margin: 0;
   font-size: 187.5%; /** 30px */
 }
 #footerlinks a.f
 {
-  color: #0ACF00;
-  border-color: #0ACF00;
+  color: @normal;
+  border-color: @normal;
 }
 #footerlinks a.f:hover
 {
-  color: #078600;
-  border-color: #078600;
+  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
index 4ca9abec..6befe52e 100644
--- a/src/main/webapp/less/base/head.less
+++ b/src/main/webapp/less/base/head.less
@@ -1,3 +1,5 @@
+@import '../variables.less';
+
 #header
 {
   font-family: 'BPreplay', Helvetica, Arial, sans-serif;
@@ -14,21 +16,21 @@
   font-size: 812.5%; /* 130px */
   line-height: 1em;
   padding: 0 0 0 .230769231em; /* 30px */
-  color: #0ACF00;
-  text-shadow: .092307692em .046153846em 0 #fff; /** 12px 6px */
+  color: @normal;
+  text-shadow: .092307692em .046153846em 0 @hintergrund; /** 12px 6px */
   border: none;
   position: relative;
   z-index: 1;
 }
 #logo:hover
 {
-  color: #078600;
+  color: @dunkler;
 }
 #slogan
 {
   display: block;
-  color: #fff;
-  background-color: #0ACF00;
+  color: @hintergrund;
+  background-color: @normal;
   font-size: 187.5%; /** 30px */
   line-height: .6666666667em; /* 20px */
   height: .6em; /* 18px */
diff --git a/src/main/webapp/less/base/layout.less b/src/main/webapp/less/base/layout.less
index f6d4984e..efeddf9e 100644
--- a/src/main/webapp/less/base/layout.less
+++ b/src/main/webapp/less/base/layout.less
@@ -1,3 +1,5 @@
+@import '../variables.less';
+
 .content
 {
   position: relative;
@@ -23,7 +25,7 @@
   padding: 0 2em 1.0625em 2em;
   position: relative;
   width: 20.375em;
-  background-color: #6EE768;
+  background-color: @heller;
 }
 .content #nav
 {
diff --git a/src/main/webapp/less/base/marginal.less b/src/main/webapp/less/base/marginal.less
index 008c694f..b4f7bcae 100644
--- a/src/main/webapp/less/base/marginal.less
+++ b/src/main/webapp/less/base/marginal.less
@@ -1,9 +1,11 @@
+@import '../variables.less';
+
 .marginal h1,
 .marginal h2,
 .marginal h3,
 .marginal h4
 {
-  color: #fff;
+  color: @hintergrund;
 }
 .marginal h1
 {
diff --git a/src/main/webapp/less/base/navigation.less b/src/main/webapp/less/base/navigation.less
index 9b1daa35..10e1572f 100644
--- a/src/main/webapp/less/base/navigation.less
+++ b/src/main/webapp/less/base/navigation.less
@@ -1,3 +1,5 @@
+@import '../variables.less';
+
 #menu
 {
   position: relative;
@@ -19,15 +21,15 @@
   font-family: 'BPreplay', Helvetica, Arial, sans-serif;
   font-weight: bold;
   font-size: 250%; /** 40px */
-  color: #0ACF00;
+  color: @normal;
 }
 #menu > li.m > a.m
 {
-  border-color: #0ACF00;
+  border-color: @normal;
 }
 #menu > li.m > a.m:hover
 {
-  border-color: #078600;
+  border-color: @dunkler;
 }
 #menu > li.m > a.m:hover,
 #menu > li.m > strong.m
@@ -36,7 +38,7 @@
 }
 #menu > li.m > a.m:hover
 {
-  color: #078600;
+  color: @dunkler;
 }
 #menu > li.m > a.m:hover:before,
 #menu > li.m > a.m.selected:before,
@@ -54,7 +56,7 @@
   z-index: 3;
   font-family: 'BPreplay', Helvetica, Arial, sans-serif;
   font-weight: bold;
-  color: #0ACF00;
+  color: @normal;
 }
 #breadcrumb > strong.b
 {
@@ -85,17 +87,17 @@
 }
 #breadcrumb > ol.b > li.b > strong.b
 {
-  border-bottom: 1px solid #0ACF00;
+  border-bottom: 1px solid @normal;
 }
 #breadcrumb > ol.b > li.b > a.b
 {
-  color: #0ACF00;
+  color: @normal;
 }
 #breadcrumb > ol.b > li.b > a.b:hover,
 #breadcrumb > ol.b > li.b > a.b:focus,
 #breadcrumb > ol.b > li.b > a.b:active
 {
-  color: #078600;
+  color: @dunkler;
 }
 
 #nav > h1.nav,
@@ -121,9 +123,9 @@
 }
 #nav > h2.nav.submenu > a.s
 {
-  color: #fff;
+  color: @hintergrund;
   border-style: dashed;
-  border-color: #fff;
+  border-color: @hintergrund;
 }
 #nav > h2.nav.submenu > a.s:hover,
 #nav > h2.nav.submenu > a.s:focus,
@@ -159,12 +161,12 @@
 #submenu li.s > a.selected,
 #submenu li.s > strong.s
 {
-  color: #fff;
-  border-color: #fff;
+  color: @hintergrund;
+  border-color: @hintergrund;
 }
 #submenu li.s > strong.s
 {
-  border-bottom: 1px solid #fff;
+  border-bottom: 1px solid @hintergrund;
 }
 #submenu li.s > a.s.selected:before,
 #submenu li.s > a.s:hover:before,
diff --git a/src/main/webapp/less/base/typo.less b/src/main/webapp/less/base/typo.less
index 1403333f..edd8b46e 100644
--- a/src/main/webapp/less/base/typo.less
+++ b/src/main/webapp/less/base/typo.less
@@ -1,12 +1,6 @@
 /** Typografische Grundeinstellungen ******************************************/
 
-/** Farben:
-  * 1: 0ACF00 Normal
-  * 2: 2D9B27 
-  * 3: 078600 Dunkler
-  * 4: 42E73A Heller
-  * 5: 6EE768
-  */
+@import '../variables.less';
 
 body
 {
@@ -14,14 +8,14 @@ body
   letter-spacing: 0;
   line-height: 1.5em;
   padding: 1em 3em 1em 5em;
-  background-color: #fff;
+  background-color: @hintergrund;
 }
 h1, h2, h3, h4, h5, h6
 {
   font-family: 'BPreplay', Helvetica, Arial, sans-serif;
   letter-spacing: 0;
   font-weight: bold;
-  color: #0ACF00;
+  color: @normal;
   margin: 1em 0 .5em 0; /** 16px 0 8px 0 */
 }
 h1
@@ -48,7 +42,7 @@ h4
 }
 h1 a, h2 a, h3 a, h4 a
 {
-  color: #0ACF00;
+  color: @normal;
   border-style: none;
 }
 h1 a:hover,
@@ -56,8 +50,8 @@ h2 a:hover,
 h3 a:hover,
 h4 a:hover
 {
-  color: #078600;
-  border-bottom: 1px solid #078600;
+  color: @dunkler;
+  border-bottom: 1px solid @dunkler;
 }
 h1 a:focus,
 h2 a:focus,
@@ -68,8 +62,8 @@ h2 a:active,
 h3 a:active,
 h4 a:active
 {
-  color: #2D9B27;
-  border-bottom: 1px solid #2D9B27;
+  color: @dunkel;
+  border-bottom: 1px solid @dunkel;
 }
 p
 {
@@ -111,22 +105,22 @@ hr
 }
 a
 {
-  color: #078600;
-  border-bottom: 1px dashed #078600;
+  color: @dunkler;
+  border-bottom: 1px dashed @dunkler;
 }
 a:hover
 {
-  color: #077600;
-  border-bottom: 1px solid #077600;
+  color: @nochdunkler;
+  border-bottom: 1px solid @nochdunkler;
 }
 a:focus,
 a:active
 {
-  color: #078600;
-  border-bottom: 1px solid #078600;
+  color: @dunkler;
+  border-bottom: 1px solid @dunkler;
 }
 a:visited
 {
-  border-bottom: 1px dotted #077600;
+  border-bottom: 1px dotted @nochdunkler;
 }
 
diff --git a/src/main/webapp/less/variables.less b/src/main/webapp/less/variables.less
new file mode 100644
index 00000000..ba55128d
--- /dev/null
+++ b/src/main/webapp/less/variables.less
@@ -0,0 +1,9 @@
+/** Farben */
+
+@normal:      #0ACF00;
+@dunkel:      #2D9B27;
+@dunkler:     #078600;
+@nochdunkler: #077600;
+@hell:        #42E73A;
+@heller:      #6EE768;
+@hintergrund: #FFFFFF;