From: Kai Moritz Date: Mon, 20 Jan 2014 19:05:48 +0000 (+0100) Subject: Tablet-Layout vereinfacht und Sticky-Footer-Hack aus Phone-Layout übernommen X-Git-Tag: thymeroot-2.0.0~135 X-Git-Url: http://juplo.de/gitweb/?a=commitdiff_plain;h=cfdff348f72370732e6eb1845ba97e1399b71512;p=website Tablet-Layout vereinfacht und Sticky-Footer-Hack aus Phone-Layout übernommen --- diff --git a/src/main/webapp/less/tablet/footer.less b/src/main/webapp/less/tablet/footer.less index 9f5beb55..ffe16955 100644 --- a/src/main/webapp/less/tablet/footer.less +++ b/src/main/webapp/less/tablet/footer.less @@ -1,16 +1,13 @@ .cols_1 > #footer { - margin: 0 0 0 -5em; padding: 2em 3em 1.5em 5em; @media (max-width: @maxsmalltablet) { - margin: 0 0 0 -4em; - padding: 1.5em 2em 1em 4em; + padding: 1.5em 2em 1em 3em; } @media (max-width: @maxsmallertablet) { - margin: 0 0 0 -3em; - padding: 1em 1em .75em 3em; + padding: 1em 1em .75em 2.5em; } background-color: @heller; } @@ -37,10 +34,6 @@ font-size: 137.5%; margin: 0; } -.cols_2 > #footer -{ - z-index: 1; -} .cols_2 > #footer > #footerlinks { position: static; @@ -51,7 +44,7 @@ { line-height: 1em; display: block; - margin: 0; + margin: 0 0 .25em 0; color: @hintergrund; } .cols_2 > #footer > #footerlinks > li#copyright @@ -60,9 +53,9 @@ font-size: 137.5%; top: auto; bottom: 0; - left: -3em; - right: -10.909090909em; /* 240px */ - padding: 9em 2.18181818em 1.5em; /* ? 3*16px ? */ + left: 0; + right: 0; + padding: 0 2.18181818em 1.5em; /* ? 3*16px ? */ @media (max-width: @maxsmalltablet) { padding-right: 1.45454545em; diff --git a/src/main/webapp/less/tablet/layout.less b/src/main/webapp/less/tablet/layout.less index 47d71ba0..ddaa34af 100644 --- a/src/main/webapp/less/tablet/layout.less +++ b/src/main/webapp/less/tablet/layout.less @@ -1,40 +1,12 @@ 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; } - -#header +#page { - @media (max-width: @maxsmalltablet) - { - margin-left: -1.5em; - } - @media (max-width: @maxsmallertablet) - { - margin-left: -1.2em; - } + overflow: hidden; } -.cols_1 -{ - padding-right: 3em; - @media (max-width: @maxsmalltablet) - { - padding-right: 2em; - } - @media (max-width: @maxsmallertablet) - { - padding-right: 1em; - } -} .cols_1 > .content { padding-bottom: 5em; @@ -47,12 +19,6 @@ body padding-bottom: 3.25em; } } -.cols_2 > .content -{ - padding: 0 15em 0 0; - margin-right: -15em; - z-index: 2; -} .cols_2 > .content.cf:before, .cols_2 > .content.cf:after { @@ -60,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 @@ -84,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; } diff --git a/src/main/webapp/less/tablet/navigation.less b/src/main/webapp/less/tablet/navigation.less index 8710368b..93cd1b28 100644 --- a/src/main/webapp/less/tablet/navigation.less +++ b/src/main/webapp/less/tablet/navigation.less @@ -1,12 +1,26 @@ +#breadcrumb +{ + left: 11.9em; + right: 3em; +} +.cols_1 > .content #nav > #menu, +.cols_2 > .content #nav > #menu +{ + position: absolute; + width: auto; + right: 3em; +} +#submenu +{ + padding-right: 1em; +} + @media (max-width: @maxsmalltablet) { - #menu - { - top: -5.7em; - } + .cols_1 > .content #nav > #menu, .cols_2 > .content #nav > #menu { - top: -5.2em; + top: -5.7em; right: 2em; } #menu > li.m @@ -28,19 +42,16 @@ { font-size: 87.5%; /* 14px */ top: 7.2em; - left: 6.3em; + left: 10.3em; } } @media (max-width: @maxsmallertablet) { - #menu - { - top: -4.5em; - } + .cols_1 > .content #nav > #menu, .cols_2 > .content #nav > #menu { - top: -4em; + top: -4.5em; right: 1em; } #menu > li.m @@ -51,10 +62,6 @@ { font-size: 150%; /* 24px */ } - .cols_2 > .content #nav > #menu - { - top: -4em; - } #breadcrumb { display: none;