X-Git-Url: https://juplo.de/gitweb/?p=website;a=blobdiff_plain;f=src%2Fmain%2Fwebapp%2Fless%2Fscreen%2Flayout.less;h=9771f834a8e4bdc19eaa04779a8ba91a607c798a;hp=bd4f0821d6bc745062d535d67006daf744b10be7;hb=40f9a579c5324f56a938e262fe8c708228cf6c83;hpb=02dfc8d7c054fa2c3f89eae7594f3262817d62f2 diff --git a/src/main/webapp/less/screen/layout.less b/src/main/webapp/less/screen/layout.less index bd4f0821..9771f834 100644 --- a/src/main/webapp/less/screen/layout.less +++ b/src/main/webapp/less/screen/layout.less @@ -2,57 +2,77 @@ body { - padding: 0 3em 0 5em; + padding: 0; overflow-y: scroll; /** Die vertikale Scroll-Leiste stets anzeigen */ } #page { margin: 0 auto; /** Seiteninhalte zentrieren, wenn max-width des Inhalts (s.u.) erreicht ist */ + max-width: 62.375em; /** 608px + 390px (Marginalspalte) = ca. 1000px (muss zu Wergen in faux-columns.less passen!!) */ } - /** Seitenaufteilung mit Menü (Zweispaltig) */ -.menu .content +body +{ + padding: 0 3em 0 5em; +} +.content { position: relative; - padding: 0 27em 7.1875em 0; /** Unten: 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */ + padding: 0 0 7.1875em 0; /** Unten: 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */ } -.menu .content > .main +.menu .content, +.nomenu .content +{ + padding-right: 27em; +} +.content > .main { - float: left; min-height: 1em; position: relative; width: 100%; } -.menu .content > .marginal +.menu .content > .main, +.nomenu .content > .main +{ + float: left; +} +.content > .marginal +{ + position: relative; + background-color: @heller; +} +.menu .content > .marginal, +.nomenu .content > .marginal { float: left; margin: 0 -27em 0 2.625em; padding: 0 2em 1.0625em 2em; - position: relative; width: 20.375em; - background-color: @heller; } -/** Anpassungen für Seiten ohne Menü (Einspaltig) */ +/** Anpassungen für Seiten ohne Menü */ -.nomenu .content +.nomenu .content > .marginal { - position: relative; - padding: 0 0 7.1875em 0; /** 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */ + background-color: @sehrhell; } -.nomenu .content > .main + +/** Anpassungen für einspaltige Seiten */ + +.onecolumn .content > .marginal { - margin-bottom: 7em; + margin-top: 4em; + background-color: transparent; } - /** Seitenkopf positionieren */ #header { margin-left: -2.125em; + padding: 1em 0; } #header > hr.h { @@ -62,18 +82,19 @@ body /** Bereichsauswahl positionieren und stylen */ -#nav +.onecolumn #nav { position: absolute; top: 0; right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */ width: 100%; } + #nav > hr.n { display: none; } -.menu #nav +#nav { position: relative; top: auto; @@ -84,7 +105,7 @@ body { position: relative; width: 200%; - top: -7em; /** 112px */ + top: -8em; /** 136px */ right: 100%; text-align: right; list-style-type: none; @@ -92,6 +113,10 @@ body padding: 0; border-style: none; } +.onecolumn #menu +{ + top: -15.5625em; /** -249px -- warum auch immer... */ +} #menu > li.m { display: inline-block; @@ -131,14 +156,6 @@ body margin-left: -.92em; } -/** Anpassungen der Bereichsauswahl für Seiten ohne Menü */ - -.nomenu #menu -{ - position: absolute; - right: 0; -} - /** Breadcrump positionieren */ @@ -165,47 +182,11 @@ body { padding: 2em 0; } -.nomenu #footer +.onecolumn #footer { - padding-top: 0; + background-color: @hintergrund; } #footer > hr.f { display: none; } - - -/** Marginal-Inhalte anpassen... */ - -.content > .marginal h1, -.content > .marginal h2, -.content > .marginal h3, -.content > .marginal h4 -{ - color: @hintergrund; -} -.content > .marginal h1:first-child, -.content > .marginal h2:first-child, -.content > .marginal h3:first-child, -.content > .marginal h4:first-child -{ - 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; -} -.nomenu #footer -{ - /** Hintergrund des Faux-Column-Hack für Marginal-Inhalte überlagern */ - border-top: 1.5em solid @hintergrund; - background-color: @hintergrund; -}