From: Kai Moritz 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;