X-Git-Url: https://juplo.de/gitweb/?p=website;a=blobdiff_plain;f=src%2Fmain%2Fwebapp%2Fless%2Ftablet%2Flayout.less;h=ddaa34af4b6f6c7da485ecd3622da9611df5c435;hp=059760706da935866a4d24ebbed94f49bb451d8f;hb=cfdff348f72370732e6eb1845ba97e1399b71512;hpb=ca6df6f375793a05fdc41dd677eafa44f17b9ac9 diff --git a/src/main/webapp/less/tablet/layout.less b/src/main/webapp/less/tablet/layout.less index 05976070..ddaa34af 100644 --- a/src/main/webapp/less/tablet/layout.less +++ b/src/main/webapp/less/tablet/layout.less @@ -1,38 +1,24 @@ 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 +.cols_1 > .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 { @@ -40,21 +26,19 @@ body content: none; display: inline; } +.cols_1 > .content > .main, .cols_2 > .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 @@ -64,73 +48,98 @@ body } .cols_1 > .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 { - margin: -.125em 3em 0 5em; padding: 2em 0; - background-color: @heller; border-bottom: .125em solid @hintergrund; } .cols_2 > .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 { - margin-right: -12em; + margin: 0 -12em 0 17.5em; + @media (max-width: @maxsmalltablet) + { + margin-right: -13em; + } + @media (max-width: @maxsmallertablet) + { + margin-right: -14em; + } } -.cols_2 > .content #nav +.cols_2 > .content > .marginal > #nav { position: static; - width: auto; 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; } -.cols_2 > .content #nav > #menu + + +/** Faux-Column-Hack-Eigengewächs zurücksetzen */ +#header { - position: absolute; - top: -7em; /** 112px */ - right: 3em; - margin: 0; + padding: 1em 3em 0 5em; + @media (max-width: @maxsmalltablet) + { + margin-left: -1.5em; + padding: 1em 2em 0 3.5em; + } + @media (max-width: @maxsmallertablet) + { + margin-left: -1.2em; + padding: 1em 1em 0 2.5em; + } } -/** Faux-Column-Hack-Eigengewächs anpassen */ #page.cols_2 { max-width: none; - border-right-width: 15em; + border-right-style: none; } .cols_2 > #header { - margin-right: -15em; - border-right: 3em solid @hintergrund; - @media (max-width: @maxsmalltablet) - { - border-right-width: 2em; - } - @media (max-width: @maxsmallertablet) - { - border-right-width: 1em; - } + margin-right: 0; + border-right-style: none; } -.cols_2 > #breadcrumb +.cols_2 > .content { - right: -15em; + margin: 0; + padding: 0; } .cols_2 > #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; }