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: http://juplo.de/gitweb/?a=commitdiff_plain;h=fd86a57c93eea4668d9c748aed9ab301a1d99082;p=website
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 */