From: Kai Moritz <kai@juplo.de>
Date: Fri, 17 Jan 2014 09:38:27 +0000 (+0100)
Subject: Layout für Smartphones und sehr kleine Bildschirmgrößen überarbeitet
X-Git-Tag: thymeroot-2.0.0~137
X-Git-Url: https://juplo.de/gitweb/?p=website;a=commitdiff_plain;h=fd86a57c93eea4668d9c748aed9ab301a1d99082

Layout für Smartphones und sehr kleine Bildschirmgrößen überarbeitet
---

diff --git a/src/main/webapp/WEB-INF/templates/html5page.jsp b/src/main/webapp/WEB-INF/templates/html5page.jsp
index 2e5cc80a..3169c65f 100644
--- a/src/main/webapp/WEB-INF/templates/html5page.jsp
+++ b/src/main/webapp/WEB-INF/templates/html5page.jsp
@@ -23,7 +23,7 @@
         <ol class="b">
           <t:insertAttribute name="breadcrumb"/>
         </ol>
-        <a class="hide" href="#navigation">Jump to navigation</a>
+        <a class="hide" href="#navigation" title="Show navigation menu">Jump to navigation</a>
         <hr class="b" />
       </div>
       <main class="content cf">
@@ -33,16 +33,16 @@
         </article>
         <div class="marginal">
           <nav id="nav">
-            <hr />
+            <hr class="n"/>
             <a id="navigation"></a>
             <t:insertAttribute name="navigation"/>
-            <hr />
+            <hr class="n"/>
           </nav>
           <t:insertAttribute name="marginalcontent" ignore="true"/>
         </div>
       </main>
       <footer id="footer">
-        <hr />
+        <hr class="f" />
         <ul id="footerlinks">
           <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
           <li class="f"><a class="f" href="${base}contact.html">Contact</a></li>
diff --git a/src/main/webapp/WEB-INF/templates/navigation.jsp b/src/main/webapp/WEB-INF/templates/navigation.jsp
index 385d09fc..42ad581e 100644
--- a/src/main/webapp/WEB-INF/templates/navigation.jsp
+++ b/src/main/webapp/WEB-INF/templates/navigation.jsp
@@ -5,7 +5,7 @@
 <s:url var="base" value="/" />
 <h1 class="nav">Navigation</h1>
 <h2 class="nav menu">Section-Menu</h2>
-<ul id="menu">
+<ul id="menu" class="cf">
   <li class="m blog"><a href="${base}blog.html" class="m">Blog</a></li>
   <li class="m projects"><a href="${base}projects.html" class="m">Projects</a></li>
 </ul>
diff --git a/src/main/webapp/WEB-INF/templates/test/navigation.jsp b/src/main/webapp/WEB-INF/templates/test/navigation.jsp
index 453d61db..a21a3fe7 100644
--- a/src/main/webapp/WEB-INF/templates/test/navigation.jsp
+++ b/src/main/webapp/WEB-INF/templates/test/navigation.jsp
@@ -5,7 +5,7 @@
 <s:url var="base" value="/" />
 <h1 class="nav">Navigation</h1>
 <h2 class="nav menu">Section-Menu</h2>
-<ul id="menu">
+<ul id="menu" class="cf">
   <li class="m blog"><a href="${base}blog.html" class="m">Blog</a></li>
   <li class="m projects"><a href="${base}projects.html" class="m selected">Projects</a></li>
 </ul>
diff --git a/src/main/webapp/WEB-INF/views/blog.jsp b/src/main/webapp/WEB-INF/views/blog.jsp
index b0721b17..3cb963a6 100644
--- a/src/main/webapp/WEB-INF/views/blog.jsp
+++ b/src/main/webapp/WEB-INF/views/blog.jsp
@@ -13,7 +13,7 @@
   <t:putAttribute name="navigation" type="string">
     <h1 class="nav">Navigation</h1>
     <h2 class="nav menu">Section-Menu</h2>
-    <ul id="menu">
+    <ul id="menu" class="cf">
       <li class="m blog"><strong class="m">Blog</strong></li>
       <li class="m projects"><a href="${base}projects.html" class="m">Projects</a></li>
     </ul>
diff --git a/src/main/webapp/WEB-INF/views/blog/article.jsp b/src/main/webapp/WEB-INF/views/blog/article.jsp
index 96f49dc4..66927f74 100644
--- a/src/main/webapp/WEB-INF/views/blog/article.jsp
+++ b/src/main/webapp/WEB-INF/views/blog/article.jsp
@@ -13,7 +13,7 @@
   <t:putAttribute name="navigation" type="string">
     <h1 class="nav">Navigation</h1>
     <h2 class="nav menu">Section-Menu</h2>
-    <ul id="menu">
+    <ul id="menu" class="cf">
       <li class="m blog"><strong class="m">Blog</strong></li>
       <li class="m projects"><a href="${base}projects.html" class="m">Projects</a></li>
     </ul>
diff --git a/src/main/webapp/WEB-INF/views/blog/comments.jsp b/src/main/webapp/WEB-INF/views/blog/comments.jsp
index 79deaac2..aab1e618 100644
--- a/src/main/webapp/WEB-INF/views/blog/comments.jsp
+++ b/src/main/webapp/WEB-INF/views/blog/comments.jsp
@@ -13,7 +13,7 @@
   <t:putAttribute name="navigation" type="string">
     <h1 class="nav">Navigation</h1>
     <h2 class="nav menu">Section-Menu</h2>
-    <ul id="menu">
+    <ul id="menu" class="cf">
       <li class="m blog"><strong class="m">Blog</strong></li>
       <li class="m projects"><a href="${base}projects.html" class="m">Projects</a></li>
     </ul>
diff --git a/src/main/webapp/WEB-INF/views/projects.jsp b/src/main/webapp/WEB-INF/views/projects.jsp
index 2161e9d4..97244c0f 100644
--- a/src/main/webapp/WEB-INF/views/projects.jsp
+++ b/src/main/webapp/WEB-INF/views/projects.jsp
@@ -13,7 +13,7 @@
   <t:putAttribute name="navigation" type="string">
     <h1 class="nav">Navigation</h1>
     <h2 class="nav menu">Section-Menu</h2>
-    <ul id="menu" class="s active">
+    <ul id="menu" class="s active cf">
       <li class="m blog"><a href="${base}blog.html" class="m">Blog</a></li>
       <li class="m projects"><strong class="m">Projects</strong></li>
     </ul>
diff --git a/src/main/webapp/WEB-INF/views/projects/fix-swf.jsp b/src/main/webapp/WEB-INF/views/projects/fix-swf.jsp
index bcd68e89..aa1fc3c1 100644
--- a/src/main/webapp/WEB-INF/views/projects/fix-swf.jsp
+++ b/src/main/webapp/WEB-INF/views/projects/fix-swf.jsp
@@ -14,7 +14,7 @@
   <t:putAttribute name="navigation" type="string">
     <h1 class="nav">Navigation</h1>
     <h2 class="nav menu">Section-Menu</h2>
-    <ul id="menu">
+    <ul id="menu" class="cf">
       <li class="m blog"><a href="${base}blog.html" class="m">Blog</a></li>
       <li class="m projects"><a href="${base}projects.html" class="m selected">Projects</a></li>
     </ul>
diff --git a/src/main/webapp/WEB-INF/views/projects/fix-swf/getting-started.jsp b/src/main/webapp/WEB-INF/views/projects/fix-swf/getting-started.jsp
index a74f2426..c46f813d 100644
--- a/src/main/webapp/WEB-INF/views/projects/fix-swf/getting-started.jsp
+++ b/src/main/webapp/WEB-INF/views/projects/fix-swf/getting-started.jsp
@@ -15,7 +15,7 @@
   <t:putAttribute name="navigation" type="string">
     <h1 class="nav">Navigation</h1>
     <h2 class="nav menu">Section-Menu</h2>
-    <ul id="menu">
+    <ul id="menu" class="cf">
       <li class="m blog"><a href="${base}blog.html" class="m">Blog</a></li>
       <li class="m projects"><a href="${base}projects.html" class="m selected">Projects</a></li>
     </ul>
diff --git a/src/main/webapp/WEB-INF/views/projects/fix-swf/overview.jsp b/src/main/webapp/WEB-INF/views/projects/fix-swf/overview.jsp
index 84c94736..d4490e8b 100644
--- a/src/main/webapp/WEB-INF/views/projects/fix-swf/overview.jsp
+++ b/src/main/webapp/WEB-INF/views/projects/fix-swf/overview.jsp
@@ -15,7 +15,7 @@
   <t:putAttribute name="navigation" type="string">
     <h1 class="nav">Navigation</h1>
     <h2 class="nav menu">Section-Menu</h2>
-    <ul id="menu">
+    <ul id="menu" class="cf">
       <li class="m blog"><a href="${base}blog.html" class="m">Blog</a></li>
       <li class="m projects"><a href="${base}projects.html" class="m selected">Projects</a></li>
     </ul>
diff --git a/src/main/webapp/WEB-INF/views/projects/html-experimente.jsp b/src/main/webapp/WEB-INF/views/projects/html-experimente.jsp
index 0adc55d9..58d43d2e 100644
--- a/src/main/webapp/WEB-INF/views/projects/html-experimente.jsp
+++ b/src/main/webapp/WEB-INF/views/projects/html-experimente.jsp
@@ -14,7 +14,7 @@
   <t:putAttribute name="navigation" type="string">
     <h1 class="nav">Navigation</h1>
     <h2 class="nav menu">Section-Menu</h2>
-    <ul id="menu">
+    <ul id="menu" class="cf">
       <li class="m blog"><a href="${base}blog.html" class="m">Blog</a></li>
       <li class="m projects"><a href="${base}projects.html" class="m selected">Projects</a></li>
     </ul>
diff --git a/src/main/webapp/WEB-INF/views/projects/typo.jsp b/src/main/webapp/WEB-INF/views/projects/typo.jsp
index a42ff91c..b9092a6d 100644
--- a/src/main/webapp/WEB-INF/views/projects/typo.jsp
+++ b/src/main/webapp/WEB-INF/views/projects/typo.jsp
@@ -14,7 +14,7 @@
   <t:putAttribute name="navigation" type="string">
     <h1 class="nav">Navigation</h1>
     <h2 class="nav menu">Section-Menu</h2>
-    <ul id="menu">
+    <ul id="menu" class="cf">
       <li class="m blog"><a href="${base}blog.html" class="m">Blog</a></li>
       <li class="m projects"><a href="${base}projects.html" class="m selected">Projects</a></li>
     </ul>
diff --git a/src/main/webapp/WEB-INF/views/test/fast-leer-einspaltig-mit-marginalinhalt.jsp b/src/main/webapp/WEB-INF/views/test/fast-leer-einspaltig-mit-marginalinhalt.jsp
index c719c8bc..08d4d54c 100644
--- a/src/main/webapp/WEB-INF/views/test/fast-leer-einspaltig-mit-marginalinhalt.jsp
+++ b/src/main/webapp/WEB-INF/views/test/fast-leer-einspaltig-mit-marginalinhalt.jsp
@@ -10,7 +10,7 @@
   <t:putAttribute name="navigation" type="string">
     <h1 class="nav">Navigation</h1>
     <h2 class="nav menu">Section-Menu</h2>
-    <ul id="menu">
+    <ul id="menu" class="cf">
       <li class="m blog"><a href="${base}blog.html" class="m">Blog</a></li>
       <li class="m projects"><a href="${base}projects.html" class="m">Projects</a></li>
     </ul>
diff --git a/src/main/webapp/WEB-INF/views/test/fast-leer-einspaltig.jsp b/src/main/webapp/WEB-INF/views/test/fast-leer-einspaltig.jsp
index 795a29a4..ca8c2237 100644
--- a/src/main/webapp/WEB-INF/views/test/fast-leer-einspaltig.jsp
+++ b/src/main/webapp/WEB-INF/views/test/fast-leer-einspaltig.jsp
@@ -10,7 +10,7 @@
   <t:putAttribute name="navigation" type="string">
     <h1 class="nav">Navigation</h1>
     <h2 class="nav menu">Section-Menu</h2>
-    <ul id="menu">
+    <ul id="menu" class="cf">
       <li class="m blog"><a href="${base}blog.html" class="m">Blog</a></li>
       <li class="m projects"><a href="${base}projects.html" class="m">Projects</a></li>
     </ul>
diff --git a/src/main/webapp/WEB-INF/views/test/fast-leer-zweispaltig-mit-marginalinhalt.jsp b/src/main/webapp/WEB-INF/views/test/fast-leer-zweispaltig-mit-marginalinhalt.jsp
index 902f390d..8f9bd6b6 100644
--- a/src/main/webapp/WEB-INF/views/test/fast-leer-zweispaltig-mit-marginalinhalt.jsp
+++ b/src/main/webapp/WEB-INF/views/test/fast-leer-zweispaltig-mit-marginalinhalt.jsp
@@ -9,7 +9,7 @@
   <t:putAttribute name="navigation" type="string">
     <h1 class="nav">Navigation</h1>
     <h2 class="nav menu">Section-Menu</h2>
-    <ul id="menu">
+    <ul id="menu" class="cf">
       <li class="m blog"><a href="${base}blog.html" class="m">Blog</a></li>
       <li class="m projects"><a href="${base}projects.html" class="m">Projects</a></li>
     </ul>
diff --git a/src/main/webapp/WEB-INF/views/test/fast-leer-zweispaltig.jsp b/src/main/webapp/WEB-INF/views/test/fast-leer-zweispaltig.jsp
index 521b673c..83a74ded 100644
--- a/src/main/webapp/WEB-INF/views/test/fast-leer-zweispaltig.jsp
+++ b/src/main/webapp/WEB-INF/views/test/fast-leer-zweispaltig.jsp
@@ -9,7 +9,7 @@
   <t:putAttribute name="navigation" type="string">
     <h1 class="nav">Navigation</h1>
     <h2 class="nav menu">Section-Menu</h2>
-    <ul id="menu">
+    <ul id="menu" class="cf">
       <li class="m blog"><a href="${base}blog.html" class="m">Blog</a></li>
       <li class="m projects"><a href="${base}projects.html" class="m">Projects</a></li>
     </ul>
diff --git a/src/main/webapp/WEB-INF/wro.xml b/src/main/webapp/WEB-INF/wro.xml
index 46505074..e4e5f541 100644
--- a/src/main/webapp/WEB-INF/wro.xml
+++ b/src/main/webapp/WEB-INF/wro.xml
@@ -21,8 +21,11 @@
     <css>/less/screen/layout.less</css>
     <css>/less/screen/head.less</css>
     <css>/less/screen/navigation.less</css>
+    <css>/less/screen/navigation-submenu.less</css>
     <css>/less/screen/marginal.less</css>
     <css>/less/screen/footer.less</css>
+    <css>/less/screen/footer-sticky.less</css>
+    <css>/less/tablet/typo.less</css>
     <css>/less/tablet/layout.less</css>
     <css>/less/tablet/head.less</css>
     <css>/less/tablet/navigation.less</css>
@@ -30,13 +33,28 @@
   </group>
   <group name="phone">
     <css>/less/variables.less</css>
+    <css>/less/screen/head.less</css>
+    <css>/less/screen/navigation-submenu.less</css>
+    <css>/less/screen/footer-sticky.less</css>
+    <css>/less/tablet/head.less</css>
     <css>/less/phone/typo.less</css>
+    <css>/less/phone/layout.less</css>
+    <css>/less/phone/head.less</css>
     <css>/less/phone/navigation.less</css>
+    <css>/less/phone/footer.less</css>
   </group>
   <group name="tiny">
     <css>/less/variables.less</css>
-    <css>/less/tiny/typo.less</css>
-    <css>/less/tiny/navigation.less</css>
+    <css>/less/screen/head.less</css>
+    <css>/less/screen/navigation-submenu.less</css>
+    <css>/less/screen/footer-sticky.less</css>
+    <css>/less/tablet/head.less</css>
+    <css>/less/phone/typo.less</css>
+    <css>/less/phone/layout.less</css>
+    <css>/less/phone/head.less</css>
+    <css>/less/phone/navigation.less</css>
+    <css>/less/phone/footer.less</css>
+    <css>/less/tiny/layout.less</css>
   </group>
   <group name="seitenaufteilung">
     <css>/less/variables.less</css>
diff --git a/src/main/webapp/less/phone.less b/src/main/webapp/less/phone.less
index 7d4aed38..9016b7ca 100644
--- a/src/main/webapp/less/phone.less
+++ b/src/main/webapp/less/phone.less
@@ -1,5 +1,12 @@
 @media (max-width: @maxphone)
 {
+  @import 'screen/head.less';
+  @import 'screen/navigation-submenu.less';
+  @import 'screen/footer-sticky.less';
+  @import 'tablet/head.less';
   @import 'phone/typo.less';
+  @import 'phone/layout.less';
+  @import 'phone/head.less';
   @import 'phone/navigation.less';
+  @import 'phone/footer.less';
 }
diff --git a/src/main/webapp/less/phone/footer.less b/src/main/webapp/less/phone/footer.less
new file mode 100644
index 00000000..a613c507
--- /dev/null
+++ b/src/main/webapp/less/phone/footer.less
@@ -0,0 +1,40 @@
+#footer
+{
+  padding: 0 1em .5em 2.5em;
+  background-color: @heller;
+}
+#footer > hr.f
+{
+  border-color: @hintergrund;
+}
+#footer > #footerlinks
+{
+  position: static;
+  border-style: none;
+}
+#footer > #footerlinks > li.f
+{
+  line-height: 1em;
+  margin: 0 1em 0 0;
+  padding: 0 0 .5em 0;
+}
+#footer > #footerlinks > li.f > a.f
+{
+  color: @hintergrund;
+  border-color: @hintergrund;
+}
+#footer > #footerlinks > li#copyright
+{
+  position: static;
+  float: right;
+  width: auto;
+  color: @hintergrund;
+  font-size: 137.5%;
+  margin: 0;
+  @media (max-width: 250px)
+  {
+    color: @schrift;
+    flow: none;
+    width: 100%;
+  }
+}
diff --git a/src/main/webapp/less/phone/head.less b/src/main/webapp/less/phone/head.less
new file mode 100644
index 00000000..22d81010
--- /dev/null
+++ b/src/main/webapp/less/phone/head.less
@@ -0,0 +1,7 @@
+@media (max-width: 410px)
+{
+  #slogan
+  {
+    color: @normal;
+  }
+}
diff --git a/src/main/webapp/less/phone/layout.less b/src/main/webapp/less/phone/layout.less
new file mode 100644
index 00000000..026583e7
--- /dev/null
+++ b/src/main/webapp/less/phone/layout.less
@@ -0,0 +1,19 @@
+#page
+{
+  overflow: hidden;
+}
+
+#header
+{
+  margin: 0 1em 0 1.25em;
+}
+
+.content > .main
+{
+  margin: 0 1em 0 2.5em;
+}
+.cols_2 > .content > .main
+{
+  border-top-style: none;
+  margin-top: -.4375em; /** -8px + 1px (für den entfernten Rahmen) -- nur damit es exakt so positioniert ist, wie im Tablet-Layout */
+}
diff --git a/src/main/webapp/less/phone/navigation.less b/src/main/webapp/less/phone/navigation.less
index 2db2b0a0..06a5833c 100644
--- a/src/main/webapp/less/phone/navigation.less
+++ b/src/main/webapp/less/phone/navigation.less
@@ -1,4 +1,58 @@
+#page
+{
+  position: relative;
+}
 #breadcrumb
+{
+  position: absolute;
+  top: .8em;
+  right: 1.5em;
+}
+#breadcrumb > strong.b,
+#breadcrumb > ol.b,
+#breadcrumb > hr.b
+{
+  display: none;
+}
+#breadcrumb > a.hide
+{
+  display: block;
+  overflow: hidden;
+  width: 3em;
+  height: 3em;
+  line-height: 3em;
+  color: @normal;
+  border-style: none;
+}
+#breadcrumb > a.hide:before
+{
+  content: "";
+  font-family: 'symbols';
+  font-size: 300%;
+  padding: 0 0 1em 0;
+}
+#breadcrumb > a.hide:hover,
+#breadcrumb > a.hide:focus,
+#breadcrumb > a.hide:active
+{
+  color: @dunkler;
+}
+
+.marginal
+{
+  margin-top: 4em;
+  margin-bottom: -993em;
+  padding: 1em 1em 999em 2.5em;
+  background-color: @heller;
+}
+.marginal h1,
+.marginal h2,
+.marginal h3,
+.marginal h4
+{
+  color: @hintergrund;
+}
+#nav > hr.n
 {
   display: none;
 }
@@ -6,6 +60,47 @@
 #menu,
 #submenu
 {
-  font-size: 150%; /** 18px */
+  border-style: none;
+  font-size: 125%;
   line-height: 1.5em;
 }
+#menu
+{
+  font-size: 150%;
+  border-bottom: .125em solid @hintergrund;
+  margin-top: 0;
+  padding: .25em .25em 1em 1.5em;
+}
+#menu > li.m
+{
+  float: left;
+  list-style-type: none;
+  padding: .25em 1em 0 0;
+}
+#menu > li.m > a.m
+{
+  color: @dunkel;
+}
+#menu > li.m > strong.m
+{
+  color: @hintergrund;
+  border-bottom: .0625em solid @hintergrund;
+}
+#menu > li.m > a.m:hover,
+#menu > li.m > a.m:focus,
+#menu > li.m > a.m:active
+{
+  color: @dunkler;
+  border-bottom: .0625em solid @dunkler;
+}
+#menu > li.m > a.m.selected
+{
+  color: @hintergrund;
+  border-bottom: .0625em dashed @hintergrund;
+}
+#menu > li.m > a.m.selected:hover,
+#menu > li.m > a.m.selected:focus,
+#menu > li.m > a.m.selected:active
+{
+  border-style: solid;
+}
diff --git a/src/main/webapp/less/phone/typo.less b/src/main/webapp/less/phone/typo.less
index 88943c2a..b8d0e67f 100644
--- a/src/main/webapp/less/phone/typo.less
+++ b/src/main/webapp/less/phone/typo.less
@@ -1,4 +1,10 @@
 body
 {
   font-size: 87.5%; /** 14px */
+  padding: 0;
+}
+
+h1
+{
+  font-size: 150%; /** 24 px */
 }
diff --git a/src/main/webapp/less/screen.less b/src/main/webapp/less/screen.less
index da8a458f..5e0c701d 100644
--- a/src/main/webapp/less/screen.less
+++ b/src/main/webapp/less/screen.less
@@ -4,6 +4,8 @@
   @import 'screen/layout.less';
   @import 'screen/head.less';
   @import 'screen/navigation.less';
+  @import 'screen/navigation-submenu.less';
   @import 'screen/marginal.less';
   @import 'screen/footer.less';
+  @import 'screen/footer-sticky.less';
 }
diff --git a/src/main/webapp/less/screen/footer-sticky.less b/src/main/webapp/less/screen/footer-sticky.less
new file mode 100644
index 00000000..2ff65bd6
--- /dev/null
+++ b/src/main/webapp/less/screen/footer-sticky.less
@@ -0,0 +1,17 @@
+/** Make the footer sticky */
+html, body
+{
+  height: 100%;
+}
+#page
+{
+  position: relative;
+  min-height: 100%;
+}
+#footer
+{
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
diff --git a/src/main/webapp/less/screen/footer.less b/src/main/webapp/less/screen/footer.less
index a9e05771..02f72ad0 100644
--- a/src/main/webapp/less/screen/footer.less
+++ b/src/main/webapp/less/screen/footer.less
@@ -6,7 +6,7 @@
 {
   padding-top: 0;
 }
-#footer > hr
+#footer > hr.f
 {
   display: none;
 }
diff --git a/src/main/webapp/less/screen/layout.less b/src/main/webapp/less/screen/layout.less
index 16dcfb23..4e6c331f 100644
--- a/src/main/webapp/less/screen/layout.less
+++ b/src/main/webapp/less/screen/layout.less
@@ -94,24 +94,6 @@ body { overflow-y: scroll; }
   margin: 0 auto;
 }
 
-/** Make the footer sticky */
-html, body
-{
-  height: 100%;
-}
-#page
-{
-  position: relative;
-  min-height: 100%;
-}
-#footer
-{
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
 /** Faux-Column-Hack-Eigengewächs */
 #page.cols_2
 {
diff --git a/src/main/webapp/less/screen/navigation-submenu.less b/src/main/webapp/less/screen/navigation-submenu.less
new file mode 100644
index 00000000..36f1634c
--- /dev/null
+++ b/src/main/webapp/less/screen/navigation-submenu.less
@@ -0,0 +1,89 @@
+#nav > h1.nav,
+#nav > h2.nav.menu
+{
+  display: none;
+}
+#nav > h2.nav.submenu
+{
+  font-size: 125%; /** 20px */
+  line-height: 1em; /** 20px */
+  margin: 1.5em 0 .5em 0; /** 30px 0 10px 0 */
+  padding: 0 0 0 1.65em; /** 0 0 0 33px */
+  border: none;
+}
+#nav > h2.nav.submenu:before
+{
+  content: 'V ';
+  margin: 0 .75em 0 -1.7em; /** 0 15em 0 -34px */
+}
+#nav > h2.nav.submenu > span.s
+{
+  display: none;
+}
+#nav > h2.nav.submenu > a.s
+{
+  color: @hintergrund;
+  border-style: dashed;
+  border-color: @hintergrund;
+}
+#nav > h2.nav.submenu > a.s:hover,
+#nav > h2.nav.submenu > a.s:focus,
+#nav > h2.nav.submenu > a.s:active
+{
+  border-style: solid;
+}
+
+#submenu
+{
+  font-size: 125%; /** 20 px */
+  list-style-type: none;
+  margin: 1em 0 4em 0;
+  padding: 0 0 0 1.65em; /** 0 0 0 33px */
+  border-style: none;
+}
+#submenu ul.s
+{
+  margin: 1em 0 0 0; /** 16px 0 0 0 */
+  padding: 0;
+  list-style-type: none;
+}
+#submenu li.s
+{
+  margin: 0 0 .5em 0; /** 0 0 10px 0 */
+  padding: 0;
+}
+#submenu li.s.off
+{
+  display: none;
+}
+#submenu li.s > a.s
+{
+  color: @dunkler;
+}
+#submenu li.s > a.s.selected,
+#submenu li.s > strong.s
+{
+  color: @hintergrund;
+  border-color: @hintergrund;
+}
+#submenu li.s > strong.s
+{
+  border-bottom: 1px solid @hintergrund;
+}
+#submenu li.s > a.s.selected:before,
+#submenu li.s > a.s:hover:before,
+#submenu li.s > a.s:focus:before,
+#submenu li.s > a.s:active:before,
+#submenu li.s > strong.s:before
+{
+  content: '> ';
+  margin: 0 .75em 0 -1.7em; /** 0 15px 0 -34px = Warum auch immer?!? */
+}
+#submenu li.s.sub > a.s.selected:before,
+#submenu li.s.sub > a.s:hover:before,
+#submenu li.s.sub > a.s:focus:before,
+#submenu li.s.sub > a.s:active:before,
+#submenu li.s.sub > strong.s:before
+{
+  content: 'V ';
+}
diff --git a/src/main/webapp/less/screen/navigation.less b/src/main/webapp/less/screen/navigation.less
index b9704400..0e5c2452 100644
--- a/src/main/webapp/less/screen/navigation.less
+++ b/src/main/webapp/less/screen/navigation.less
@@ -1,4 +1,4 @@
-#nav > hr
+#nav > hr.n
 {
   display: none;
 }
@@ -68,93 +68,3 @@
 {
   display: none;
 }
-
-#nav > h1.nav,
-#nav > h2.nav.menu
-{
-  display: none;
-}
-#nav > h2.nav.submenu
-{
-  font-size: 125%; /** 20px */
-  line-height: 1em; /** 20px */
-  margin: 1.5em 0 .5em 0; /** 30px 0 10px 0 */
-  padding: 0 0 0 1.65em; /** 0 0 0 33px */
-  border: none;
-}
-#nav > h2.nav.submenu:before
-{
-  content: 'V ';
-  margin: 0 .75em 0 -1.7em; /** 0 15em 0 -34px */
-}
-#nav > h2.nav.submenu > span.s
-{
-  display: none;
-}
-#nav > h2.nav.submenu > a.s
-{
-  color: @hintergrund;
-  border-style: dashed;
-  border-color: @hintergrund;
-}
-#nav > h2.nav.submenu > a.s:hover,
-#nav > h2.nav.submenu > a.s:focus,
-#nav > h2.nav.submenu > a.s:active
-{
-  border-style: solid;
-}
-
-#submenu
-{
-  font-size: 125%; /** 20 px */
-  list-style-type: none;
-  margin: 1em 0 4em 0;
-  padding: 0 0 0 1.65em; /** 0 0 0 33px */
-  border-style: none;
-}
-#submenu ul.s
-{
-  margin: 1em 0 0 0; /** 16px 0 0 0 */
-  padding: 0;
-  list-style-type: none;
-}
-#submenu li.s
-{
-  margin: 0 0 .5em 0; /** 0 0 10px 0 */
-  padding: 0;
-}
-#submenu li.s.off
-{
-  display: none;
-}
-#submenu li.s > a.s
-{
-  color: @dunkler;
-}
-#submenu li.s > a.s.selected,
-#submenu li.s > strong.s
-{
-  color: @hintergrund;
-  border-color: @hintergrund;
-}
-#submenu li.s > strong.s
-{
-  border-bottom: 1px solid @hintergrund;
-}
-#submenu li.s > a.s.selected:before,
-#submenu li.s > a.s:hover:before,
-#submenu li.s > a.s:focus:before,
-#submenu li.s > a.s:active:before,
-#submenu li.s > strong.s:before
-{
-  content: '> ';
-  margin: 0 .75em 0 -1.7em; /** 0 15px 0 -34px = Warum auch immer?!? */
-}
-#submenu li.s.sub > a.s.selected:before,
-#submenu li.s.sub > a.s:hover:before,
-#submenu li.s.sub > a.s:focus:before,
-#submenu li.s.sub > a.s:active:before,
-#submenu li.s.sub > strong.s:before
-{
-  content: 'V ';
-}
diff --git a/src/main/webapp/less/tablet/layout.less b/src/main/webapp/less/tablet/layout.less
index 030cb530..47d71ba0 100644
--- a/src/main/webapp/less/tablet/layout.less
+++ b/src/main/webapp/less/tablet/layout.less
@@ -37,7 +37,15 @@ body
 }
 .cols_1 > .content
 {
-  padding-bottom: 5.5em;
+  padding-bottom: 5em;
+  @media (max-width: @maxsmalltablet)
+  {
+    padding-bottom: 4em;
+  }
+  @media (max-width: @maxsmallertablet)
+  {
+    padding-bottom: 3.25em;
+  }
 }
 .cols_2 > .content
 {
diff --git a/src/main/webapp/less/tiny.less b/src/main/webapp/less/tiny.less
index c5d3ecf2..13132b05 100644
--- a/src/main/webapp/less/tiny.less
+++ b/src/main/webapp/less/tiny.less
@@ -1,5 +1,4 @@
 @media (max-width: @maxtiny)
 {
-  @import 'tiny/typo.less';
-  @import 'tiny/navigation.less';
+  @import 'tiny/layout.less';
 }
diff --git a/src/main/webapp/less/tiny/layout.less b/src/main/webapp/less/tiny/layout.less
new file mode 100644
index 00000000..ede7f873
--- /dev/null
+++ b/src/main/webapp/less/tiny/layout.less
@@ -0,0 +1,47 @@
+body
+{
+  font-size: 75%; /** 12px */
+}
+.marginal
+{
+  margin-bottom: -991em;
+}
+
+@media (max-width: 210px)
+{
+  #header
+  {
+    font-size: 75%;
+    margin: 0 .5em 0 1em;
+  }
+  .content > .marginal
+  {
+    padding: 1em .5em 999em .5em;
+  }
+  .content > .main,
+  #footer
+  {
+    margin: 0;
+    padding: 0 .5em;
+  }
+  #breadcrumb
+  {
+    top: .3em;
+    right: .3em;
+  }
+}
+@media (max-width: 150px)
+{
+  #header
+  {
+    font-size: 50%;
+  }
+  #header > hr.h
+  {
+    display: block;
+  }
+  #slogan
+  {
+    display: none;
+  }
+}
diff --git a/src/main/webapp/less/tiny/navigation.less b/src/main/webapp/less/tiny/navigation.less
deleted file mode 100644
index 1fd01b4b..00000000
--- a/src/main/webapp/less/tiny/navigation.less
+++ /dev/null
@@ -1,6 +0,0 @@
-#menu,
-#submenu
-{
-  font-size: 150%; /** 18px */
-  line-height: 1.5em;
-}
diff --git a/src/main/webapp/less/tiny/typo.less b/src/main/webapp/less/tiny/typo.less
deleted file mode 100644
index aa0b2078..00000000
--- a/src/main/webapp/less/tiny/typo.less
+++ /dev/null
@@ -1,4 +0,0 @@
-body
-{
-  font-size: 75%; /** 12px */
-}
diff --git a/src/main/webapp/less/variables.less b/src/main/webapp/less/variables.less
index a577cf49..82038435 100644
--- a/src/main/webapp/less/variables.less
+++ b/src/main/webapp/less/variables.less
@@ -24,7 +24,8 @@
 @maxsmalltablet: 800px;
 @maxsmallertablet: 700px;
 @maxphone:       @minscreen - 1;
-@maxtiny:        399px;
+@minphone:       300px;
+@maxtiny:        @minphone - 1;
 
 
 /** Schriften */