From: Kai Moritz Date: Tue, 28 Jan 2014 09:15:00 +0000 (+0100) Subject: LESS-Code aufgeräumt X-Git-Tag: thymeroot-2.0.0~130 X-Git-Url: http://juplo.de/gitweb/?a=commitdiff_plain;h=02dfc8d7c054fa2c3f89eae7594f3262817d62f2;p=website LESS-Code aufgeräumt --- diff --git a/src/main/webapp/WEB-INF/wro.xml b/src/main/webapp/WEB-INF/wro.xml index 6ed9a544..8ab7914f 100644 --- a/src/main/webapp/WEB-INF/wro.xml +++ b/src/main/webapp/WEB-INF/wro.xml @@ -17,39 +17,38 @@ /less/screen/typo.less /less/screen/layout.less /less/screen/head.less - /less/screen/navigation.less - /less/screen/navigation-submenu.less + /less/screen/menu.less /less/screen/marginal.less /less/screen/footer.less /less/screen/footer-sticky.less /less/tablet/typo.less /less/tablet/layout.less /less/tablet/head.less - /less/tablet/navigation.less + /less/tablet/menu.less /less/tablet/footer.less /less/variables.less /less/screen/head.less - /less/screen/navigation-submenu.less + /less/screen/menu.less /less/screen/footer-sticky.less /less/tablet/head.less /less/phone/typo.less /less/phone/layout.less /less/phone/head.less - /less/phone/navigation.less + /less/phone/menu.less /less/phone/footer.less /less/variables.less /less/screen/head.less - /less/screen/navigation-submenu.less + /less/screen/menu.less /less/screen/footer-sticky.less /less/tablet/head.less /less/phone/typo.less /less/phone/layout.less /less/phone/head.less - /less/phone/navigation.less + /less/phone/menu.less /less/phone/footer.less /less/tiny/layout.less diff --git a/src/main/webapp/less/phone/footer.less b/src/main/webapp/less/phone/footer.less index a613c507..ca5901f2 100644 --- a/src/main/webapp/less/phone/footer.less +++ b/src/main/webapp/less/phone/footer.less @@ -1,12 +1,3 @@ -#footer -{ - padding: 0 1em .5em 2.5em; - background-color: @heller; -} -#footer > hr.f -{ - border-color: @hintergrund; -} #footer > #footerlinks { position: static; diff --git a/src/main/webapp/less/phone/layout.less b/src/main/webapp/less/phone/layout.less index 4cfe1042..a106ad59 100644 --- a/src/main/webapp/less/phone/layout.less +++ b/src/main/webapp/less/phone/layout.less @@ -1,12 +1,18 @@ +/** Seite gesamt (Abmessungen, Aussenabstände etc.) */ + +body +{ + font-size: 87.5%; /** 14px */ + padding: 0; +} #page { + position: relative; overflow: hidden; } -#header -{ - margin: 0 1em 0 1.25em; -} + +/** Seitenaufteilung mit/ohne Menü */ .content > .main { @@ -17,3 +23,144 @@ 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 */ } + + + +/** Seitenkopf positionieren */ + +#header +{ + margin: .5em 1em 0 1.25em; +} +#header > hr.h +{ + display: none; +} + + +/** Bereichsauswahl positionieren und stylen */ + +#nav > hr.n +{ + display: none; +} +#menu +{ + 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; +} + + +/** Navigations-Sprunglink reaktivieren und stylen */ + +#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: 3.5em; + height: 3em; + line-height: 3em; + color: @normal; + border-style: none; +} +#breadcrumb > a.hide:before +{ + content: ""; + font-family: 'symbols'; + font-size: 378%; /** Vielfaches von 14px */ + padding: 0 0 1em 0; +} +#breadcrumb > a.hide:hover, +#breadcrumb > a.hide:focus, +#breadcrumb > a.hide:active +{ + color: @dunkler; +} + + +/** Footer positionieren */ + +#footer +{ + padding: 0 1em .5em 2.5em; + background-color: @heller; +} +#footer > hr.f +{ + border-color: @hintergrund; +} + + +/** Marginal-Inhalte anpassen... */ + +.marginal h1, +.marginal h2, +.marginal h3, +.marginal h4 +{ + color: @hintergrund; +} + + +/** Faux-Column-Hack für Marginalinhalte */ + +.marginal +{ + margin-top: 4em; + margin-bottom: -993em; + padding: 1em 1em 999em 2.5em; + background-color: @heller; +} diff --git a/src/main/webapp/less/phone/menu.less b/src/main/webapp/less/phone/menu.less new file mode 100644 index 00000000..83bd0992 --- /dev/null +++ b/src/main/webapp/less/phone/menu.less @@ -0,0 +1,6 @@ +#submenu +{ + border-style: none; + font-size: 125%; + line-height: 1.5em; +} diff --git a/src/main/webapp/less/phone/navigation.less b/src/main/webapp/less/phone/navigation.less deleted file mode 100644 index 06a5833c..00000000 --- a/src/main/webapp/less/phone/navigation.less +++ /dev/null @@ -1,106 +0,0 @@ -#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 -{ - 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 b8d0e67f..ba61db5a 100644 --- a/src/main/webapp/less/phone/typo.less +++ b/src/main/webapp/less/phone/typo.less @@ -1,9 +1,3 @@ -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 c2c89852..1b641924 100644 --- a/src/main/webapp/less/screen.less +++ b/src/main/webapp/less/screen.less @@ -1,5 +1,5 @@ @import 'screen/head.less'; -@import 'screen/navigation-submenu.less'; +@import 'screen/menu.less'; @import 'screen/footer-sticky.less'; @media (min-width: @minscreen) @@ -7,8 +7,6 @@ @import 'screen/typo.less'; @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'; @@ -16,10 +14,14 @@ { @import 'tablet/typo.less'; @import 'tablet/layout.less'; - @import 'tablet/navigation.less'; + @import 'tablet/menu.less'; @import 'tablet/footer.less'; } } +@media (min-width: @maxtablet + 1) +{ + @import 'screen/faux-column.less'; +} @media (max-width: @maxtablet) { @@ -31,7 +33,7 @@ @import 'phone/typo.less'; @import 'phone/layout.less'; @import 'phone/head.less'; - @import 'phone/navigation.less'; + @import 'phone/menu.less'; @import 'phone/footer.less'; } diff --git a/src/main/webapp/less/screen/faux-column.less b/src/main/webapp/less/screen/faux-column.less new file mode 100644 index 00000000..44915589 --- /dev/null +++ b/src/main/webapp/less/screen/faux-column.less @@ -0,0 +1,29 @@ +/** Faux-Column-Hack-Eigengewächs für die Marginalspalte */ + +.menu #page +{ + max-width: 38em; /** 608px + 390px (Marginalspalte) = ca. 1000px */ + border-right: 24.375em solid @heller; +} +.menu .content +{ + margin-right: -24.375em; +} +#header +{ + padding-top: 1em; +} +.menu #header +{ + margin-right: -24.375em; + background-color: @hintergrund; +} +.menu #breadcrumb +{ + right: -24.375em; /** Weil der Breadcrumb sonst an der Faux-Column umbricht! */ +} +.menu #footer +{ + margin-right: -24.375em; + background-color: @hintergrund; +} diff --git a/src/main/webapp/less/screen/footer.less b/src/main/webapp/less/screen/footer.less index 97b8b69c..884cfffa 100644 --- a/src/main/webapp/less/screen/footer.less +++ b/src/main/webapp/less/screen/footer.less @@ -1,15 +1,3 @@ -#footer -{ - padding: 2em 0; -} -.nomenu #footer -{ - padding-top: 0; -} -#footer > hr.f -{ - display: none; -} #footerlinks { border-top: 1.25em solid @normal; /** 20px */ diff --git a/src/main/webapp/less/screen/head.less b/src/main/webapp/less/screen/head.less index 9a0c6e6d..414e06d4 100644 --- a/src/main/webapp/less/screen/head.less +++ b/src/main/webapp/less/screen/head.less @@ -1,7 +1,3 @@ -#header > hr -{ - display: none; -} #logo { display: inline-block; diff --git a/src/main/webapp/less/screen/layout.less b/src/main/webapp/less/screen/layout.less index a4fd785e..bd4f0821 100644 --- a/src/main/webapp/less/screen/layout.less +++ b/src/main/webapp/less/screen/layout.less @@ -1,23 +1,22 @@ +/** Seite gesamt (Abmessungen, Aussenabstände etc.) */ + body { padding: 0 3em 0 5em; + overflow-y: scroll; /** Die vertikale Scroll-Leiste stets anzeigen */ } - -#header +#page { - margin-left: -2.125em; + margin: 0 auto; /** Seiteninhalte zentrieren, wenn max-width des Inhalts (s.u.) erreicht ist */ } -.content -{ - position: relative; - height: 100%; - padding-bottom: 7.1875em; /** 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */ -} + +/** Seitenaufteilung mit Menü (Zweispaltig) */ + .menu .content { - padding-right: 27em; - margin-right: -24.375em; + position: relative; + padding: 0 27em 7.1875em 0; /** Unten: 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */ } .menu .content > .main { @@ -26,18 +25,6 @@ body position: relative; width: 100%; } -.nomenu .content > .main -{ - margin-bottom: 7em; -} -.nomenu .content > .marginal aside.m -{ - margin: 3.5em 0 -999em 0; - padding: 2em 2em 995em 2em; - background-color: @heller; - position: relative; - top: -4.5em; -} .menu .content > .marginal { float: left; @@ -47,20 +34,34 @@ body width: 20.375em; background-color: @heller; } -.content > .marginal h1, -.content > .marginal h2, -.content > .marginal h3, -.content > .marginal h4 + +/** Anpassungen für Seiten ohne Menü (Einspaltig) */ + +.nomenu .content { - color: @hintergrund; + position: relative; + padding: 0 0 7.1875em 0; /** 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */ } -.content > .marginal h1:first-child, -.content > .marginal h2:first-child, -.content > .marginal h3:first-child, -.content > .marginal h4:first-child +.nomenu .content > .main { - margin-top: 0; + margin-bottom: 7em; } + + +/** Seitenkopf positionieren */ + +#header +{ + margin-left: -2.125em; +} +#header > hr.h +{ + display: none; +} + + +/** Bereichsauswahl positionieren und stylen */ + #nav { position: absolute; @@ -68,6 +69,10 @@ body right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */ width: 100%; } +#nav > hr.n +{ + display: none; +} .menu #nav { position: relative; @@ -75,54 +80,132 @@ body right: auto; width: 22.375em; /** 358px = 326px + 32px*/ } -.menu #menu +#menu { + position: relative; + width: 200%; + top: -7em; /** 112px */ + right: 100%; + text-align: right; + list-style-type: none; margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */ + padding: 0; + border-style: none; +} +#menu > li.m +{ + display: inline-block; + padding: 0 0 0 4em; +} +#menu > li.m > .m +{ + font-size: 250%; /** 40px */ + color: @normal; } +#menu > li.m > a.m +{ + border-color: @normal; +} +#menu > li.m > a.m:hover +{ + border-color: @dunkler; +} +#menu > li.m > a.m:hover, +#menu > li.m > strong.m +{ + border-style: solid; +} +#menu > li.m > a.m.selected +{ + color: @normal; +} +#menu > li.m > a.m:hover +{ + color: @dunkler; +} +#menu > li.m > a.m:hover:before, +#menu > li.m > a.m.selected:before, +#menu > li.m > strong.m:before +{ + content: '> '; + margin-left: -.92em; +} + +/** Anpassungen der Bereichsauswahl für Seiten ohne Menü */ + .nomenu #menu { position: absolute; - top: -7em; /** 112px */ right: 0; - margin: 0; } -/** Always display vertical scroll-bars */ -body { overflow-y: scroll; } -/** Center content, when screen is bigger than 1240 */ -#page +/** Breadcrump positionieren */ + +#breadcrumb +{ + position: absolute; + top: 8.375em; + left: 6.9em; + z-index: 3; +} +#breadcrumb > a.hide +{ + position: absolute; +} +#breadcrumb > hr.b { - max-width: 62.375em; /** 608px + 390px (Marginalspalte) = ca. 1000px */ - margin: 0 auto; + display: none; } -/** Faux-Column-Hack-Eigengewächs */ -.menu #page + +/** Footer positionieren */ + +#footer { - max-width: 38em; /** 608px + 390px (Marginalspalte) = ca. 1000px */ - border-right: 24.375em solid @heller; + padding: 2em 0; } -#header +.nomenu #footer { - padding-top: 1em; + padding-top: 0; } -.menu #header +#footer > hr.f { - margin-right: -24.375em; - background-color: @hintergrund; + display: none; } -.menu #breadcrumb + + +/** Marginal-Inhalte anpassen... */ + +.content > .marginal h1, +.content > .marginal h2, +.content > .marginal h3, +.content > .marginal h4 { - right: -24.375em; /** Weil der Breadcrumb sonst an der Faux-Column umbricht! */ + color: @hintergrund; } -.nomenu #footer +.content > .marginal h1:first-child, +.content > .marginal h2:first-child, +.content > .marginal h3:first-child, +.content > .marginal h4:first-child { - border-top: 1.5em solid @hintergrund; - background-color: @hintergrund; + margin-top: 0; +} + + +/** Faux-Column-Hack für Marginalinhalte auf Seiten ohne Menü */ + +.nomenu .content > .marginal aside.m +{ + margin: 3.5em 0 -999em 0; + padding: 2em 2em 995em 2em; + background-color: @heller; + position: relative; + top: -4.5em; } -.menu #footer +.nomenu #footer { - margin-right: -24.375em; + /** Hintergrund des Faux-Column-Hack für Marginal-Inhalte überlagern */ + border-top: 1.5em solid @hintergrund; background-color: @hintergrund; } diff --git a/src/main/webapp/less/screen/menu.less b/src/main/webapp/less/screen/menu.less new file mode 100644 index 00000000..36f1634c --- /dev/null +++ b/src/main/webapp/less/screen/menu.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-submenu.less b/src/main/webapp/less/screen/navigation-submenu.less deleted file mode 100644 index 36f1634c..00000000 --- a/src/main/webapp/less/screen/navigation-submenu.less +++ /dev/null @@ -1,89 +0,0 @@ -#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 deleted file mode 100644 index 0e5c2452..00000000 --- a/src/main/webapp/less/screen/navigation.less +++ /dev/null @@ -1,70 +0,0 @@ -#nav > hr.n -{ - display: none; -} -#menu -{ - position: relative; - width: 200%; - top: -7em; - right: 100%; - text-align: right; - list-style-type: none; - margin: 0; - padding: 0; - border-style: none; -} -#menu > li.m -{ - display: inline-block; - padding: 0 0 0 4em; -} -#menu > li.m > .m -{ - font-size: 250%; /** 40px */ - color: @normal; -} -#menu > li.m > a.m -{ - border-color: @normal; -} -#menu > li.m > a.m:hover -{ - border-color: @dunkler; -} -#menu > li.m > a.m:hover, -#menu > li.m > strong.m -{ - border-style: solid; -} -#menu > li.m > a.m.selected -{ - color: @normal; -} -#menu > li.m > a.m:hover -{ - color: @dunkler; -} -#menu > li.m > a.m:hover:before, -#menu > li.m > a.m.selected:before, -#menu > li.m > strong.m:before -{ - content: '> '; - margin-left: -.92em; -} - -#breadcrumb -{ - position: absolute; - top: 8.375em; - left: 6.9em; - z-index: 3; -} -#breadcrumb > a.hide -{ - position: absolute; -} -#breadcrumb > hr.b -{ - display: none; -} diff --git a/src/main/webapp/less/tablet/footer.less b/src/main/webapp/less/tablet/footer.less index 7e6567b4..1ab926b5 100644 --- a/src/main/webapp/less/tablet/footer.less +++ b/src/main/webapp/less/tablet/footer.less @@ -1,49 +1,3 @@ -.nomenu #footer -{ - padding: 0 3em 1.5em 5em; - @media (max-width: @maxsmalltablet) - { - padding: 0 2em 1em 3em; - } - @media (max-width: @maxsmallertablet) - { - padding: 0 1em .75em 2.5em; - } - background-color: @heller; -} -.nomenu #footer > #footerlinks -{ - position: static; - margin: -.125em; - padding-top: 1.5em; - @media (max-width: @maxsmalltablet) - { - padding-top: 1em; - } - @media (max-width: @maxsmallertablet) - { - padding-top: .5em; - } - border-top: .125em solid @hintergrund; -} -.nomenu #footer > #footerlinks > li.f -{ - line-height: 1em; - margin: 0 1em 0 0; - padding: 0; -} -.nomenu #footer > #footerlinks > li.f > a.f -{ - color: @hintergrund; - border-color: @hintergrund; -} -.nomenu #footer > #footerlinks > li#copyright -{ - position: static; - float: right; - font-size: 137.5%; - margin: 0; -} .menu #footer > #footerlinks { position: static; @@ -90,3 +44,38 @@ border-color: @hintergrund; border-style: solid; } + + +.nomenu #footer > #footerlinks +{ + position: static; + margin: -.125em; + padding-top: 1.5em; + @media (max-width: @maxsmalltablet) + { + padding-top: 1em; + } + @media (max-width: @maxsmallertablet) + { + padding-top: .5em; + } + border-top: .125em solid @hintergrund; +} +.nomenu #footer > #footerlinks > li.f +{ + line-height: 1em; + margin: 0 1em 0 0; + padding: 0; +} +.nomenu #footer > #footerlinks > li.f > a.f +{ + color: @hintergrund; + border-color: @hintergrund; +} +.nomenu #footer > #footerlinks > li#copyright +{ + position: static; + float: right; + font-size: 137.5%; + margin: 0; +} diff --git a/src/main/webapp/less/tablet/head.less b/src/main/webapp/less/tablet/head.less index aa559f46..f41b9e65 100644 --- a/src/main/webapp/less/tablet/head.less +++ b/src/main/webapp/less/tablet/head.less @@ -1,9 +1,5 @@ @media (max-width: @maxsmalltablet) { - #header - { - padding-top: .5em; - } #logo { font-size: 650%; /* 104px */ diff --git a/src/main/webapp/less/tablet/layout.less b/src/main/webapp/less/tablet/layout.less index 935e7ef1..04c51d73 100644 --- a/src/main/webapp/less/tablet/layout.less +++ b/src/main/webapp/less/tablet/layout.less @@ -1,3 +1,5 @@ +/** Seite gesamt (Abmessungen, Aussenabstände etc.) */ + body { padding: 0; @@ -7,6 +9,13 @@ body overflow: hidden; } + +/** Seitenaufteilung mit/ohne Menü für Tablets optimieren */ + +.menu .content +{ + padding: 0; +} .nomenu .content { padding-bottom: 5em; @@ -26,8 +35,8 @@ body content: none; display: inline; } -.nomenu .content > .main, -.menu .content > .main +.menu .content > .main, +.nomenu .content > .main { float: none; width: auto; @@ -46,6 +55,13 @@ body border-top: 1px solid @hintergrund; border-bottom: 1px solid @hintergrund; } +.menu .content > .marginal +{ + margin: 3em 0 -994em -15em; + padding: 2em 0 999em 0; + width: 100%; + position: static; +} .nomenu .content > .marginal { margin: 3em 0 -999em 0; @@ -61,35 +77,28 @@ body padding-right: 1em; } } -.nomenu .content > .marginal aside.m -{ - margin: 3.5em -3em -999em -5em; - padding: 2em 3em 995em 5em; - border-style: none; -} -.menu .content > .marginal -{ - margin: 3em 0 -994em -15em; - padding: 2em 0 999em 0; - width: 100%; - position: static; -} -.nomenu #footer -{ - border-style: none; -} -.menu .content > .marginal > aside.m + + +/** Seitenkopf positionieren */ + +#header { - margin: 0 -12em 1em 17.5em; + padding: 1em 3em 0 5em; @media (max-width: @maxsmalltablet) { - margin-right: -13em; + margin-left: -1.5em; + padding: .5em 2em 0 3.5em; } @media (max-width: @maxsmallertablet) { - margin-right: -14em; + margin-left: -1.2em; + padding: 1em 1em 0 2.5em; } } + + +/** Bereichsauswahl positionieren */ + .menu .content > .marginal > #nav { position: static; @@ -105,39 +114,62 @@ body } width: auto; } - - -/** Faux-Column-Hack-Eigengewächs zurücksetzen */ -#header +.nomenu #menu, +.menu #menu { - padding: 1em 3em 0 5em; + position: absolute; + width: auto; + right: 3em; @media (max-width: @maxsmalltablet) { - margin-left: -1.5em; - padding: 1em 2em 0 3.5em; + top: -5.7em; + right: 2em; } @media (max-width: @maxsmallertablet) { - margin-left: -1.2em; - padding: 1em 1em 0 2.5em; + top: -4.5em; + right: 1em; } } - -.menu #page +#menu > li.m { - max-width: none; - border-right-style: none; + @media (max-width: @maxsmalltablet) + { + padding: 0 0 0 3em; + } + @media (max-width: @maxsmallertablet) + { + padding: 0 0 0 2em; + } } -.menu #header +#menu > li.m > .m { - margin-right: 0; - border-right-style: none; + @media (max-width: @maxsmalltablet) + { + font-size: 200%; /* 32px */ + } + @media (max-width: @maxsmallertablet) + { + font-size: 150%; /* 24px */ + } } -.menu .content +#menu > li.m > a.m:hover:before, +#menu > li.m > a.m.selected:before, +#menu > li.m > strong.m:before { - margin: 0; - padding: 0; + @media (max-width: @maxsmalltablet) + { + content: '> '; + margin-left: -.95em; + } + @media (max-width: @maxsmallertablet) + { + } } + + +/** Footer positionieren */ + .menu #footer { position: static; @@ -147,4 +179,58 @@ body width: 15em; background-color: @heller; } +.nomenu #footer +{ + padding: 0 3em 1.5em 5em; + @media (max-width: @maxsmalltablet) + { + padding: 0 2em 1em 3em; + } + @media (max-width: @maxsmallertablet) + { + padding: 0 1em .75em 2.5em; + } + background-color: @heller; + border-style: none; +} + + +/** Breadcrump positionieren */ + +#breadcrumb +{ + left: 11.9em; + right: 3em; + @media (max-width: @maxsmalltablet) + { + font-size: 87.5%; /* 14px */ + top: 7.2em; + left: 10.3em; + } + @media (max-width: @maxsmallertablet) + { + display: none; + } +} + + +/** Faux-Column-Hack für Marginalinhalte anpassen */ +.nomenu .content > .marginal aside.m +{ + margin: 3.5em -3em -999em -5em; + padding: 2em 3em 995em 5em; + border-style: none; +} +.menu .content > .marginal > aside.m +{ + margin: 0 -12em 1em 17.5em; + @media (max-width: @maxsmalltablet) + { + margin-right: -13em; + } + @media (max-width: @maxsmallertablet) + { + margin-right: -14em; + } +} diff --git a/src/main/webapp/less/tablet/menu.less b/src/main/webapp/less/tablet/menu.less new file mode 100644 index 00000000..85ad92fe --- /dev/null +++ b/src/main/webapp/less/tablet/menu.less @@ -0,0 +1,4 @@ +#submenu +{ + padding-right: 1em; +} diff --git a/src/main/webapp/less/tablet/navigation.less b/src/main/webapp/less/tablet/navigation.less deleted file mode 100644 index 30d30a6d..00000000 --- a/src/main/webapp/less/tablet/navigation.less +++ /dev/null @@ -1,69 +0,0 @@ -#breadcrumb -{ - left: 11.9em; - right: 3em; -} -.nomenu #menu, -.menu #menu -{ - position: absolute; - width: auto; - right: 3em; -} -#submenu -{ - padding-right: 1em; -} - -@media (max-width: @maxsmalltablet) -{ - .nomenu #menu, - .menu #menu - { - top: -5.7em; - 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: 10.3em; - } -} - -@media (max-width: @maxsmallertablet) -{ - .nomenu #menu, - .menu #menu - { - top: -4.5em; - right: 1em; - } - #menu > li.m - { - padding: 0 0 0 2em; - } - #menu > li.m > .m - { - font-size: 150%; /* 24px */ - } - #breadcrumb - { - display: none; - } -} diff --git a/src/main/webapp/less/tiny/layout.less b/src/main/webapp/less/tiny/layout.less index ede7f873..0acb6069 100644 --- a/src/main/webapp/less/tiny/layout.less +++ b/src/main/webapp/less/tiny/layout.less @@ -12,7 +12,7 @@ body #header { font-size: 75%; - margin: 0 .5em 0 1em; + margin: .25em .5em 0 1em; } .content > .marginal { @@ -26,9 +26,13 @@ body } #breadcrumb { - top: .3em; + top: .1em; right: .3em; } + #breadcrumb > a.hide:before + { + font-size: 300%; /** Vielfaches von 12px */ + } } @media (max-width: 150px) { @@ -44,4 +48,12 @@ body { display: none; } + #breadcrumb + { + top: .2em; + } + #breadcrumb > a.hide:before + { + font-size: 264%; /** Vielfaches von 12px */ + } }