Bildschirmbreiten für die Media-Query-Weichen als LESS-Variablen definiert

diff --git a/src/main/webapp/WEB-INF/wro.xml b/src/main/webapp/WEB-INF/wro.xml
index 8dcf19d..390b28f 100644 (file)
--- a/src/main/webapp/WEB-INF/wro.xml
+++ b/src/main/webapp/WEB-INF/wro.xml
@@ -1,11 +1,13 @@
 <groups xmlns="http://www.isdc.ro/wro">
 
   <group name="base">
+    <css>/less/variables.less</css>
     <css>/less/base.less</css>
     <js>/js/prettify.js</js>
   </group>
 
   <group name="screen">
+    <css>/less/variables.less</css>
     <css>/less/screen.less</css>
     <css>/less/tablet.less</css>
     <css>/less/phone.less</css>

diff --git a/src/main/webapp/less/base.less b/src/main/webapp/less/base.less
index c8ab1ee..f3a0585 100644 (file)
--- a/src/main/webapp/less/base.less
+++ b/src/main/webapp/less/base.less
@@ -1,4 +1,3 @@
-@import 'variables.less';
 @import 'base/browserreset.less';
 @import 'base/fonts.less';
 @import 'base/util.less';

diff --git a/src/main/webapp/less/phone.less b/src/main/webapp/less/phone.less
index 86d429b..f14a170 100644 (file)
--- a/src/main/webapp/less/phone.less
+++ b/src/main/webapp/less/phone.less
@@ -1,6 +1,5 @@
-@media screen and (max-width: 599px)
+@media screen and (max-width: @maxphone)
 {
-  @import 'variables.less';
   @import 'phone/typo.less';
   @import 'phone/navigation.less';
 }

diff --git a/src/main/webapp/less/screen.less b/src/main/webapp/less/screen.less
index 110dc86..eae175a 100644 (file)
--- a/src/main/webapp/less/screen.less
+++ b/src/main/webapp/less/screen.less
@@ -1,6 +1,5 @@
-@media screen and (min-width: 750px)
+@media screen and (min-width: @minscreen)
 {
-  @import 'variables.less';
   @import 'screen/typo.less';
   @import 'screen/layout.less';
   @import 'screen/head.less';

diff --git a/src/main/webapp/less/tablet.less b/src/main/webapp/less/tablet.less
index 60456d9..7bd3ac6 100644 (file)
--- a/src/main/webapp/less/tablet.less
+++ b/src/main/webapp/less/tablet.less
@@ -1,6 +1,5 @@
-@media screen and (min-width: 750px) and (max-width: 939px)
+@media screen and (min-width: @minscreen) and (max-width: @maxtablet)
 {
-  @import 'variables.less';
   @import 'tablet/layout.less';
   @import 'tablet/footer.less';
 }

diff --git a/src/main/webapp/less/tiny.less b/src/main/webapp/less/tiny.less
index ef1470b..3d33944 100644 (file)
--- a/src/main/webapp/less/tiny.less
+++ b/src/main/webapp/less/tiny.less
@@ -1,6 +1,5 @@
-@media screen and (max-width: 399px)
+@media screen and (max-width: @maxtiny)
 {
-  @import 'variables.less';
   @import 'tiny/typo.less';
   @import 'tiny/navigation.less';
 }

diff --git a/src/main/webapp/less/variables.less b/src/main/webapp/less/variables.less
index cdb90c7..1905831 100644 (file)
--- a/src/main/webapp/less/variables.less
+++ b/src/main/webapp/less/variables.less
@@ -17,6 +17,14 @@
 @fehlerhell:  tint(@fehler, 70%);
 
 
+/** Bildschirmbreiten für Media-Query */
+
+@minscreen:   750px;
+@maxtablet:   939px;
+@maxphone:    599px;
+@maxtiny:     399px;
+
+
 /** Schriften */
 
 .droid ()