<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">
</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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</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>
@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';
}
--- /dev/null
+#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%;
+ }
+}
--- /dev/null
+@media (max-width: 410px)
+{
+ #slogan
+ {
+ color: @normal;
+ }
+}
--- /dev/null
+#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 */
+}
+#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;
}
#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;
+}
body
{
font-size: 87.5%; /** 14px */
+ padding: 0;
+}
+
+h1
+{
+ font-size: 150%; /** 24 px */
}
@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';
}
--- /dev/null
+/** Make the footer sticky */
+html, body
+{
+ height: 100%;
+}
+#page
+{
+ position: relative;
+ min-height: 100%;
+}
+#footer
+{
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
{
padding-top: 0;
}
-#footer > hr
+#footer > hr.f
{
display: none;
}
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
{
--- /dev/null
+#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 ';
+}
-#nav > hr
+#nav > hr.n
{
display: none;
}
{
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 ';
-}
}
.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
{
@media (max-width: @maxtiny)
{
- @import 'tiny/typo.less';
- @import 'tiny/navigation.less';
+ @import 'tiny/layout.less';
}
--- /dev/null
+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;
+ }
+}
+++ /dev/null
-#menu,
-#submenu
-{
- font-size: 150%; /** 18px */
- line-height: 1.5em;
-}
+++ /dev/null
-body
-{
- font-size: 75%; /** 12px */
-}
@maxsmalltablet: 800px;
@maxsmallertablet: 700px;
@maxphone: @minscreen - 1;
-@maxtiny: 399px;
+@minphone: 300px;
+@maxtiny: @minphone - 1;
/** Schriften */
projects / website / commitdiff