X-Git-Url: https://juplo.de/gitweb/?a=blobdiff_plain;f=src%2Fmain%2Fwebapp%2Fless%2Ftablet%2Flayout.less;h=935e7ef14d824b1b44eb37b49a71f3c1664b13c8;hb=a06a8f90ea1c87ca482ac7de085883a6d92cd213;hp=059760706da935866a4d24ebbed94f49bb451d8f;hpb=ca6df6f375793a05fdc41dd677eafa44f17b9ac9;p=website diff --git a/src/main/webapp/less/tablet/layout.less b/src/main/webapp/less/tablet/layout.less index 05976070..935e7ef1 100644 --- a/src/main/webapp/less/tablet/layout.less +++ b/src/main/webapp/less/tablet/layout.less @@ -1,60 +1,44 @@ body { - padding: 0 0 0 5em; - @media (max-width: @maxsmalltablet) - { - padding: 0 0 0 3.5em; - } - @media (max-width: @maxsmallertablet) - { - padding: 0 0 0 2.5em; - } + padding: 0; +} +#page +{ + overflow: hidden; } -.cols_1 +.nomenu .content { - padding-right: 3em; + padding-bottom: 5em; @media (max-width: @maxsmalltablet) { - padding-right: 2em; + padding-bottom: 4em; } @media (max-width: @maxsmallertablet) { - padding-right: 1em; + padding-bottom: 3.25em; } } -.cols_1 > .content -{ - padding-bottom: 5.5em; -} -.cols_2 > .content -{ - padding: 0 15em 0 0; - margin-right: -15em; - z-index: 2; -} -.cols_2 > .content.cf:before, -.cols_2 > .content.cf:after +.menu .content.cf:before, +.menu .content.cf:after { clear: none; content: none; display: inline; } -.cols_2 > .content > .main +.nomenu .content > .main, +.menu .content > .main { float: none; - margin-right: -15em; width: auto; - background-color: @hintergrund; - border-right: 3em solid @hintergrund; + padding: 0 3em 0 5em; @media (max-width: @maxsmalltablet) { - margin-top: -.5em; - border-right-width: 2em; + padding: 0 2em 0 3.5em; } @media (max-width: @maxsmallertablet) { - border-right-width: 1em; + padding: 0 1em 0 2.5em; } /** Die 1px-Rahmen triggern, dass das erste Margin den Footer aufschiebt. Bei einem Wert von 0 ragt dieses Margin dann einfach aus dem Footer @@ -62,75 +46,105 @@ body border-top: 1px solid @hintergrund; border-bottom: 1px solid @hintergrund; } -.cols_1 > .content > .marginal +.nomenu .content > .marginal { - margin: 2em -3em 0 -5em; + margin: 3em 0 -999em 0; + padding: 0 3em 999em 5em; + @media (max-width: @maxsmalltablet) + { + padding-left: 3.5em; + padding-right: 2em; + } + @media (max-width: @maxsmallertablet) + { + padding-left: 2.5em; + padding-right: 1em; + } } -.cols_1 > .content > .marginal aside.m +.nomenu .content > .marginal aside.m { - margin: -.125em 3em 0 5em; - padding: 2em 0; - background-color: @heller; - border-bottom: .125em solid @hintergrund; + margin: 3.5em -3em -999em -5em; + padding: 2em 3em 995em 5em; + border-style: none; } -.cols_2 > .content > .marginal +.menu .content > .marginal { - float: left; - margin: 0 0 0 -5em; - padding: 2em 0 5em 5em; - position: static; + margin: 3em 0 -994em -15em; + padding: 2em 0 999em 0; width: 100%; - border-top: 3em solid @hintergrund; + position: static; } -.cols_2 > .content > .marginal > aside.m +.nomenu #footer { - margin-right: -12em; + border-style: none; } -.cols_2 > .content #nav +.menu .content > .marginal > aside.m { - position: static; - width: auto; - border-right: .125em solid @hintergrund; + margin: 0 -12em 1em 17.5em; + @media (max-width: @maxsmalltablet) + { + margin-right: -13em; + } + @media (max-width: @maxsmallertablet) + { + margin-right: -14em; + } } -.cols_2 > .content #nav > #menu +.menu .content > .marginal > #nav { - position: absolute; - top: -7em; /** 112px */ - right: 3em; - margin: 0; + position: static; + border-right: .125em solid @hintergrund; + margin-left: 20em; + @media (max-width: @maxsmalltablet) + { + margin-left: 18.5em; + } + @media (max-width: @maxsmallertablet) + { + margin-left: 17.5em; + } + width: auto; } -/** Faux-Column-Hack-Eigengewächs anpassen */ -#page.cols_2 -{ - max-width: none; - border-right-width: 15em; -} -.cols_2 > #header + +/** Faux-Column-Hack-Eigengewächs zurücksetzen */ +#header { - margin-right: -15em; - border-right: 3em solid @hintergrund; + padding: 1em 3em 0 5em; @media (max-width: @maxsmalltablet) { - border-right-width: 2em; + margin-left: -1.5em; + padding: 1em 2em 0 3.5em; } @media (max-width: @maxsmallertablet) { - border-right-width: 1em; + margin-left: -1.2em; + padding: 1em 1em 0 2.5em; } } -.cols_2 > #breadcrumb + +.menu #page +{ + max-width: none; + border-right-style: none; +} +.menu #header { - right: -15em; + margin-right: 0; + border-right-style: none; } -.cols_2 > #footer +.menu .content +{ + margin: 0; + padding: 0; +} +.menu #footer { position: static; float: right; - margin-right: -15em; - padding: 0; + margin: 3em 0 -999em -15em; + padding: 0 0 999em 0; width: 15em; background-color: @heller; - border-top: 3em solid @hintergrund; }