projects
/
website
/ commitdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
| commitdiff |
tree
raw
|
patch
|
inline
| side by side (parent:
aa23c19
)
Das Farb-Thema werden jetzt mit Hilfe von LESS-Variablen umgesetzt
author
Kai Moritz
<kai@juplo.de>
Sat, 7 Dec 2013 12:52:08 +0000
(13:52 +0100)
committer
Kai Moritz
<kai@juplo.de>
Tue, 19 Jan 2016 16:45:35 +0000
(17:45 +0100)
src/main/webapp/less/base/footer.less
patch
|
blob
|
history
src/main/webapp/less/base/head.less
patch
|
blob
|
history
src/main/webapp/less/base/layout.less
patch
|
blob
|
history
src/main/webapp/less/base/marginal.less
patch
|
blob
|
history
src/main/webapp/less/base/navigation.less
patch
|
blob
|
history
src/main/webapp/less/base/typo.less
patch
|
blob
|
history
src/main/webapp/less/variables.less
[new file with mode: 0644]
patch
|
blob
diff --git
a/src/main/webapp/less/base/footer.less
b/src/main/webapp/less/base/footer.less
index
c4dc7c7
..
addab87
100644
(file)
--- 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;
#footer
{
margin: 2em 0;
@@
-7,7
+9,7
@@
font-family: 'BPreplay', Helvetica, Arial, sans-serif;
font-weight: bold;
position: relative;
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;
margin: 0;
padding: 0;
list-style-type: none;
@@
-18,7
+20,7
@@
line-height: .6666666667em; /* 20px */
display: inline-block;
margin: .5em 1em 0 0;
line-height: .6666666667em; /* 20px */
display: inline-block;
margin: .5em 1em 0 0;
- color:
#0ACF00
;
+ color:
@normal
;
vertical-align: top;
}
#footerlinks > li#copyright
vertical-align: top;
}
#footerlinks > li#copyright
@@
-27,18
+29,18
@@
right: .625em;
top: -1em; /** 30px */
line-height: 1.4em; /* 42px */
right: .625em;
top: -1em; /** 30px */
line-height: 1.4em; /* 42px */
- color:
#fff
;
+ color:
@hintergrund
;
margin: 0;
font-size: 187.5%; /** 30px */
}
#footerlinks a.f
{
margin: 0;
font-size: 187.5%; /** 30px */
}
#footerlinks a.f
{
- color:
#0ACF00
;
- border-color:
#0ACF00
;
+ color:
@normal
;
+ border-color:
@normal
;
}
#footerlinks a.f:hover
{
}
#footerlinks a.f:hover
{
- color:
#078600
;
- border-color:
#078600
;
+ color:
@dunkler
;
+ border-color:
@dunkler
;
border-style: solid;
}
border-style: solid;
}
diff --git
a/src/main/webapp/less/base/head.less
b/src/main/webapp/less/base/head.less
index
4ca9abe
..
6befe52
100644
(file)
--- 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;
#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 */
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
{
border: none;
position: relative;
z-index: 1;
}
#logo:hover
{
- color:
#078600
;
+ color:
@dunkler
;
}
#slogan
{
display: block;
}
#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 */
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
f6d4984
..
efeddf9
100644
(file)
--- 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;
.content
{
position: relative;
@@
-23,7
+25,7
@@
padding: 0 2em 1.0625em 2em;
position: relative;
width: 20.375em;
padding: 0 2em 1.0625em 2em;
position: relative;
width: 20.375em;
- background-color:
#6EE768
;
+ background-color:
@heller
;
}
.content #nav
{
}
.content #nav
{
diff --git
a/src/main/webapp/less/base/marginal.less
b/src/main/webapp/less/base/marginal.less
index
008c694
..
b4f7bca
100644
(file)
--- 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
{
.marginal h1,
.marginal h2,
.marginal h3,
.marginal h4
{
- color:
#fff
;
+ color:
@hintergrund
;
}
.marginal h1
{
}
.marginal h1
{
diff --git
a/src/main/webapp/less/base/navigation.less
b/src/main/webapp/less/base/navigation.less
index
9b1daa3
..
10e1572
100644
(file)
--- 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;
#menu
{
position: relative;
@@
-19,15
+21,15
@@
font-family: 'BPreplay', Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 250%; /** 40px */
font-family: 'BPreplay', Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 250%; /** 40px */
- color:
#0ACF00
;
+ color:
@normal
;
}
#menu > li.m > a.m
{
}
#menu > li.m > a.m
{
- border-color:
#0ACF00
;
+ border-color:
@normal
;
}
#menu > li.m > a.m:hover
{
}
#menu > li.m > a.m:hover
{
- border-color:
#078600
;
+ border-color:
@dunkler
;
}
#menu > li.m > a.m:hover,
#menu > li.m > strong.m
}
#menu > li.m > a.m:hover,
#menu > li.m > strong.m
@@
-36,7
+38,7
@@
}
#menu > li.m > a.m:hover
{
}
#menu > li.m > a.m:hover
{
- color:
#078600
;
+ color:
@dunkler
;
}
#menu > li.m > a.m:hover:before,
#menu > li.m > a.m.selected:before,
}
#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;
z-index: 3;
font-family: 'BPreplay', Helvetica, Arial, sans-serif;
font-weight: bold;
- color:
#0ACF00
;
+ color:
@normal
;
}
#breadcrumb > strong.b
{
}
#breadcrumb > strong.b
{
@@
-85,17
+87,17
@@
}
#breadcrumb > ol.b > li.b > strong.b
{
}
#breadcrumb > ol.b > li.b > strong.b
{
- border-bottom: 1px solid
#0ACF00
;
+ border-bottom: 1px solid
@normal
;
}
#breadcrumb > ol.b > li.b > a.b
{
}
#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
{
}
#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,
}
#nav > h1.nav,
@@
-121,9
+123,9
@@
}
#nav > h2.nav.submenu > a.s
{
}
#nav > h2.nav.submenu > a.s
{
- color:
#fff
;
+ color:
@hintergrund
;
border-style: dashed;
border-style: dashed;
- border-color:
#fff
;
+ border-color:
@hintergrund
;
}
#nav > h2.nav.submenu > a.s:hover,
#nav > h2.nav.submenu > a.s:focus,
}
#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
{
#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
{
}
#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,
}
#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
1403333
..
edd8b46
100644
(file)
--- a/
src/main/webapp/less/base/typo.less
+++ b/
src/main/webapp/less/base/typo.less
@@
-1,12
+1,6
@@
/** Typografische Grundeinstellungen ******************************************/
/** Typografische Grundeinstellungen ******************************************/
-/** Farben:
- * 1: 0ACF00 Normal
- * 2: 2D9B27
- * 3: 078600 Dunkler
- * 4: 42E73A Heller
- * 5: 6EE768
- */
+@import '../variables.less';
body
{
body
{
@@
-14,14
+8,14
@@
body
letter-spacing: 0;
line-height: 1.5em;
padding: 1em 3em 1em 5em;
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;
}
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
margin: 1em 0 .5em 0; /** 16px 0 8px 0 */
}
h1
@@
-48,7
+42,7
@@
h4
}
h1 a, h2 a, h3 a, h4 a
{
}
h1 a, h2 a, h3 a, h4 a
{
- color:
#0ACF00
;
+ color:
@normal
;
border-style: none;
}
h1 a:hover,
border-style: none;
}
h1 a:hover,
@@
-56,8
+50,8
@@
h2 a:hover,
h3 a:hover,
h4 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,
}
h1 a:focus,
h2 a:focus,
@@
-68,8
+62,8
@@
h2 a:active,
h3 a:active,
h4 a:active
{
h3 a:active,
h4 a:active
{
- color:
#2D9B27
;
- border-bottom: 1px solid
#2D9B27
;
+ color:
@dunkel
;
+ border-bottom: 1px solid
@dunkel
;
}
p
{
}
p
{
@@
-111,22
+105,22
@@
hr
}
a
{
}
a
{
- color:
#078600
;
- border-bottom: 1px dashed
#078600
;
+ color:
@dunkler
;
+ border-bottom: 1px dashed
@dunkler
;
}
a:hover
{
}
a:hover
{
- color:
#077600
;
- border-bottom: 1px solid
#077600
;
+ color:
@nochdunkler
;
+ border-bottom: 1px solid
@nochdunkler
;
}
a:focus,
a:active
{
}
a:focus,
a:active
{
- color:
#078600
;
- border-bottom: 1px solid
#078600
;
+ color:
@dunkler
;
+ border-bottom: 1px solid
@dunkler
;
}
a:visited
{
}
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
(file)
index 0000000..
ba55128
--- /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;