Tablet-Layout für kleinere Bildschirme überarbeitet

Eine Zwischen-Weiche blendet bei kleineren Bildschirmgrößen unnötige
Elemente des Seiten-Kopfes aus.

diff --git a/src/main/webapp/WEB-INF/wro.xml b/src/main/webapp/WEB-INF/wro.xml
index 390b28f..4650507 100644 (file)
--- a/src/main/webapp/WEB-INF/wro.xml
+++ b/src/main/webapp/WEB-INF/wro.xml
@@ -24,6 +24,8 @@
     <css>/less/screen/marginal.less</css>
     <css>/less/screen/footer.less</css>
     <css>/less/tablet/layout.less</css>
     <css>/less/screen/marginal.less</css>
     <css>/less/screen/footer.less</css>
     <css>/less/tablet/layout.less</css>

+    <css>/less/tablet/head.less</css>
+    <css>/less/tablet/navigation.less</css>

     <css>/less/tablet/footer.less</css>
   </group>
   <group name="phone">
     <css>/less/tablet/footer.less</css>
   </group>
   <group name="phone">

diff --git a/src/main/webapp/less/screen/head.less b/src/main/webapp/less/screen/head.less
index b0a20bb..c537ba0 100644 (file)
--- a/src/main/webapp/less/screen/head.less
+++ b/src/main/webapp/less/screen/head.less
@@ -29,6 +29,7 @@
   z-index: 0;
   top: -1.3em; /* 39px */
   text-align: right;
   z-index: 0;
   top: -1.3em; /* 39px */
   text-align: right;

+  overflow: hidden;

 }
 #slogan > strong{
   display: inline-block;
 }
 #slogan > strong{
   display: inline-block;

diff --git a/src/main/webapp/less/tablet.less b/src/main/webapp/less/tablet.less
index 7bd3ac6..c7e57dd 100644 (file)
--- a/src/main/webapp/less/tablet.less
+++ b/src/main/webapp/less/tablet.less
@@ -1,5 +1,8 @@
 @media screen and (min-width: @minscreen) and (max-width: @maxtablet)
 {
 @media screen and (min-width: @minscreen) and (max-width: @maxtablet)
 {

+  @import 'tablet/typo.less';

   @import 'tablet/layout.less';
   @import 'tablet/layout.less';

+  @import 'tablet/head.less';
+  @import 'tablet/navigation.less';

   @import 'tablet/footer.less';
 }
   @import 'tablet/footer.less';
 }

diff --git a/src/main/webapp/less/tablet/footer.less b/src/main/webapp/less/tablet/footer.less
index df17d2f..9f5beb5 100644 (file)
--- a/src/main/webapp/less/tablet/footer.less
+++ b/src/main/webapp/less/tablet/footer.less
@@ -1,7 +1,17 @@
 .cols_1 > #footer
 {
   margin: 0 0 0 -5em;
 .cols_1 > #footer
 {
   margin: 0 0 0 -5em;

-  padding: 2em 3em 2em 5em;
+  padding: 2em 3em 1.5em 5em;
+  @media (max-width: @maxsmalltablet)
+  {
+    margin: 0 0 0 -4em;
+    padding: 1.5em 2em 1em 4em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    margin: 0 0 0 -3em;
+    padding: 1em 1em .75em 3em;
+  }

   background-color: @heller;
 }
 .cols_1 > #footer > #footerlinks
   background-color: @heller;
 }
 .cols_1 > #footer > #footerlinks


@@ -27,9 +37,9 @@
   font-size: 137.5%;
   margin: 0;
 }
   font-size: 137.5%;
   margin: 0;
 }

-.cols_2 > #footer > #footer
+.cols_2 > #footer

 {
 {

-  padding: 0;
+  z-index: 1;

 }
 .cols_2 > #footer > #footerlinks
 {
 }
 .cols_2 > #footer > #footerlinks
 {


@@ -49,8 +59,22 @@
   line-height: 1em;
   font-size: 137.5%;
   top: auto;
   line-height: 1em;
   font-size: 137.5%;
   top: auto;

-  bottom: 1em;
-  right: -9em;
+  bottom: 0;
+  left: -3em;
+  right: -10.909090909em; /* 240px */
+  padding: 9em 2.18181818em 1.5em; /* ? 3*16px ? */
+  @media (max-width: @maxsmalltablet)
+  {
+    padding-right: 1.45454545em;
+    padding-bottom: 1em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    padding-right: .72727272em;
+    padding-bottom: .5em;
+  }
+  background-color: @heller;
+  text-align: right;

 }
 .cols_2 > #footer > #footerlinks a.f
 {
 }
 .cols_2 > #footer > #footerlinks a.f
 {

diff --git a/src/main/webapp/less/tablet/head.less b/src/main/webapp/less/tablet/head.less
new file mode 100644 (file)
index 0000000..6835588
--- /dev/null
+++ b/src/main/webapp/less/tablet/head.less
@@ -0,0 +1,33 @@
+@media (max-width: @maxsmalltablet)
+{
+  #header
+  {
+    padding-top: .5em;
+    margin-left: -3.1em;
+  }
+  #logo
+  {
+    font-size: 650%; /* 104px */
+  }
+  #slogan
+  {
+    font-size: 150%; /** 24px */
+  }
+}
+
+@media (max-width: @maxsmallertablet)
+{
+  #header
+  {
+    margin-left: -2.4em;
+  }
+  #logo
+  {
+    font-size: 487.5%; /* 78px */
+  }
+  #slogan
+  {
+    font-size: 112.5%; /** 18px */
+  }
+}
+

diff --git a/src/main/webapp/less/tablet/layout.less b/src/main/webapp/less/tablet/layout.less
index 6d97d70..0597607 100644 (file)
--- a/src/main/webapp/less/tablet/layout.less
+++ b/src/main/webapp/less/tablet/layout.less
@@ -1,11 +1,27 @@
 body
 {
   padding: 0 0 0 5em;
 body
 {
   padding: 0 0 0 5em;

+  @media (max-width: @maxsmalltablet)
+  {
+    padding: 0 0 0 3.5em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    padding: 0 0 0 2.5em;
+  }

 }
 
 .cols_1
 {
   padding-right: 3em;
 }
 
 .cols_1
 {
   padding-right: 3em;

+  @media (max-width: @maxsmalltablet)
+  {
+    padding-right: 2em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    padding-right: 1em;
+  }

 }
 .cols_1 > .content
 {
 }
 .cols_1 > .content
 {


@@ -15,6 +31,7 @@ body
 {
   padding: 0 15em 0 0;
   margin-right: -15em;
 {
   padding: 0 15em 0 0;
   margin-right: -15em;

+  z-index: 2;

 }
 .cols_2 > .content.cf:before,
 .cols_2 > .content.cf:after
 }
 .cols_2 > .content.cf:before,
 .cols_2 > .content.cf:after


@@ -30,6 +47,15 @@ body
   width: auto;
   background-color: @hintergrund;
   border-right: 3em solid @hintergrund;
   width: auto;
   background-color: @hintergrund;
   border-right: 3em solid @hintergrund;

+  @media (max-width: @maxsmalltablet)
+  {
+    margin-top: -.5em;
+    border-right-width: 2em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    border-right-width: 1em;
+  }

   /** Die 1px-Rahmen triggern, dass das erste Margin den Footer aufschiebt.
       Bei einem Wert von 0 ragt dieses Margin dann einfach aus dem Footer
       heraus... */
   /** Die 1px-Rahmen triggern, dass das erste Margin den Footer aufschiebt.
       Bei einem Wert von 0 ragt dieses Margin dann einfach aus dem Footer
       heraus... */


@@ -84,6 +110,14 @@ body
 {
   margin-right: -15em;
   border-right: 3em solid @hintergrund;
 {
   margin-right: -15em;
   border-right: 3em solid @hintergrund;

+  @media (max-width: @maxsmalltablet)
+  {
+    border-right-width: 2em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    border-right-width: 1em;
+  }

 }
 .cols_2 > #breadcrumb
 {
 }
 .cols_2 > #breadcrumb
 {

diff --git a/src/main/webapp/less/tablet/navigation.less b/src/main/webapp/less/tablet/navigation.less
new file mode 100644 (file)
index 0000000..8710368
--- /dev/null
+++ b/src/main/webapp/less/tablet/navigation.less
@@ -0,0 +1,62 @@
+@media (max-width: @maxsmalltablet)
+{
+  #menu
+  {
+    top: -5.7em;
+  }
+  .cols_2 > .content #nav > #menu
+  {
+    top: -5.2em;
+    right: 2em;
+  }
+  #menu > li.m
+  {
+    padding: 0 0 0 3em;
+  }
+  #menu > li.m > .m
+  {
+    font-size: 200%; /* 32px */
+  }
+  #menu > li.m > a.m:hover:before,
+  #menu > li.m > a.m.selected:before,
+  #menu > li.m > strong.m:before
+  {
+    content: '> ';
+    margin-left: -.95em;
+  }
+  #breadcrumb
+  {
+    font-size: 87.5%; /* 14px */
+    top: 7.2em;
+    left: 6.3em;
+  }
+}
+
+@media (max-width: @maxsmallertablet)
+{
+  #menu
+  {
+    top: -4.5em;
+  }
+  .cols_2 > .content #nav > #menu
+  {
+    top: -4em;
+    right: 1em;
+  }
+  #menu > li.m
+  {
+    padding: 0 0 0 2em;
+  }
+  #menu > li.m > .m
+  {
+    font-size: 150%; /* 24px */
+  }
+  .cols_2 > .content #nav > #menu
+  {
+    top: -4em;
+  }
+  #breadcrumb
+  {
+    display: none;
+  }
+}

diff --git a/src/main/webapp/less/tablet/typo.less b/src/main/webapp/less/tablet/typo.less
new file mode 100644 (file)
index 0000000..e254ffa
--- /dev/null
+++ b/src/main/webapp/less/tablet/typo.less
@@ -0,0 +1,8 @@
+@media (max-width: @maxsmalltablet)
+{
+  h1
+  {
+    font-size: 150%; /** 24 px */
+  }
+}
+

diff --git a/src/main/webapp/less/variables.less b/src/main/webapp/less/variables.less
index 1905831..a577cf4 100644 (file)
--- a/src/main/webapp/less/variables.less
+++ b/src/main/webapp/less/variables.less
@@ -19,10 +19,12 @@
 
 /** Bildschirmbreiten für Media-Query */
 
 
 /** Bildschirmbreiten für Media-Query */
 

-@minscreen:   750px;
-@maxtablet:   939px;
-@maxphone:    599px;
-@maxtiny:     399px;
+@minscreen:      580px;
+@maxtablet:      939px;
+@maxsmalltablet: 800px;
+@maxsmallertablet: 700px;
+@maxphone:       @minscreen - 1;
+@maxtiny:        399px;

 
 
 /** Schriften */
 
 
 /** Schriften */