X-Git-Url: https://juplo.de/gitweb/?p=website;a=blobdiff_plain;f=src%2Fmain%2Fwebapp%2Fless%2Ftablet%2Flayout.less;h=c63f92392a8810d45b1658b250b9848c083dab43;hp=44ab7d58d521b5a297bd39c904f46a767d2f20c5;hb=6edf003077fec1ebcc3dbdcf94f6ba04fa64a349;hpb=545c20e546e2c2083f66c33c9cf842951ac7db4d diff --git a/src/main/webapp/less/tablet/layout.less b/src/main/webapp/less/tablet/layout.less index 44ab7d58..c63f9239 100644 --- a/src/main/webapp/less/tablet/layout.less +++ b/src/main/webapp/less/tablet/layout.less @@ -23,11 +23,11 @@ body .nomenu .content { padding: 0 0 5em 0; - @media (max-width: @maxsmalltablet) + @media (max-width: (@maxsmalltablet)) { padding-bottom: 4em; } - @media (max-width: @maxsmallertablet) + @media (max-width: (@maxsmallertablet)) { padding-bottom: 3.25em; } @@ -39,16 +39,18 @@ body content: none; display: inline; } -.content > .main +.menu .content > .main, +.nomenu .content > .main, +.onecolumn .content > .main { float: none; width: auto; padding: 0 3em 0 5em; - @media (max-width: @maxsmalltablet) + @media (max-width: (@maxsmalltablet)) { padding: 0 2em 0 3em; } - @media (max-width: @maxsmallertablet) + @media (max-width: (@maxsmallertablet)) { padding: 0 1em 0 2.5em; } @@ -58,7 +60,9 @@ body border-top: 1px solid @hintergrund; border-bottom: 1px solid @hintergrund; } -.content > .marginal +.menu .content > .marginal, +.nomenu .content > .marginal, +.onecolumn .content > .marginal { position: static; width: 100%; @@ -74,6 +78,12 @@ body padding: 0 0 999em 0; background-color: transparent; } +.onecolumn .content > .marginal +{ + margin: 6.5em 0 -1001.175em 0; + padding: 0 0 999em 0; + background-color: transparent; +} /** Seitenkopf positionieren */ @@ -81,12 +91,12 @@ body #header { padding: 1em 3em 2em 5em; - @media (max-width: @maxsmalltablet) + @media (max-width: (@maxsmalltablet)) { margin-left: -1.5em; padding: .5em 2em 2em 3em; } - @media (max-width: @maxsmallertablet) + @media (max-width: (@maxsmallertablet)) { margin-left: -1.2em; padding: 1em 1em 2em 2.5em; @@ -101,11 +111,11 @@ body position: static; border-right: .125em solid @hintergrund; margin-left: 20em; - @media (max-width: @maxsmalltablet) + @media (max-width: (@maxsmalltablet)) { margin-left: 18.5em; } - @media (max-width: @maxsmallertablet) + @media (max-width: (@maxsmallertablet)) { margin-left: 17.5em; #menu > li.about @@ -123,19 +133,20 @@ body width: 100%; } +.menu #menu, .nomenu #menu, -.menu #menu +.onecolumn #menu { position: absolute; width: auto; top: -9em; right: 3em; - @media (max-width: @maxsmalltablet) + @media (max-width: (@maxsmalltablet)) { top: -7.7em; right: 2em; } - @media (max-width: @maxsmallertablet) + @media (max-width: (@maxsmallertablet)) { top: -6.5em; right: 1em; @@ -147,22 +158,22 @@ body } #menu > li.m { - @media (max-width: @maxsmalltablet) + @media (max-width: (@maxsmalltablet)) { padding: 0 0 0 3em; } - @media (max-width: @maxsmallertablet) + @media (max-width: (@maxsmallertablet)) { padding: 0 0 0 2em; } } #menu > li.m > .m { - @media (max-width: @maxsmalltablet) + @media (max-width: (@maxsmalltablet)) { font-size: 200%; /* 32px */ } - @media (max-width: @maxsmallertablet) + @media (max-width: (@maxsmallertablet)) { font-size: 150%; /* 24px */ } @@ -171,12 +182,12 @@ body #menu > li.m > a.m.selected:before, #menu > li.m > strong.m:before { - @media (max-width: @maxsmalltablet) + @media (max-width: (@maxsmalltablet)) { content: '> '; margin-left: -.95em; } - @media (max-width: @maxsmallertablet) + @media (max-width: (@maxsmallertablet)) { } } @@ -193,14 +204,15 @@ body width: 15em; background-color: @heller; } -.nomenu #footer +.nomenu #footer, +.onecolumn #footer { padding: 0 3em 1.5em 5em; - @media (max-width: @maxsmalltablet) + @media (max-width: (@maxsmalltablet)) { padding: 0 2em 1em 3em; } - @media (max-width: @maxsmallertablet) + @media (max-width: (@maxsmallertablet)) { padding: 0 1em .75em 2.5em; } @@ -212,17 +224,18 @@ body /** Breadcrump positionieren */ .menu #breadcrumb, -.nomenu #breadcrumb +.nomenu #breadcrumb, +.onecolumn #breadcrumb { left: 11.9em; right: 3em; - @media (max-width: @maxsmalltablet) + @media (max-width: (@maxsmalltablet)) { font-size: 87.5%; /* 14px */ top: 7.2em; left: 9.8em; } - @media (max-width: @maxsmallertablet) + @media (max-width: (@maxsmallertablet)) { top: 5.8em; left: 7em; @@ -232,19 +245,20 @@ body /** Faux-Column-Hack für Marginalinhalte */ -.nomenu .content > .marginal aside.m +.nomenu .content > .marginal aside.m, +.onecolumn .content > .marginal aside.m { margin: 3.5em 0 -999em 0; padding: 2em 3em 995em 5em; background-color: @heller; position: relative; top: -4.5em; - @media (max-width: @maxsmalltablet) + @media (max-width: (@maxsmalltablet)) { padding-left: 3em; padding-right: 2em; } - @media (max-width: @maxsmallertablet) + @media (max-width: (@maxsmallertablet)) { padding-left: 2.5em; padding-right: 1em; @@ -253,12 +267,12 @@ body .menu .content > .marginal > aside.m { margin: 0 -12em 1em 20em; - @media (max-width: @maxsmalltablet) + @media (max-width: (@maxsmalltablet)) { margin-left: 18.5em; margin-right: -13em; } - @media (max-width: @maxsmallertablet) + @media (max-width: (@maxsmallertablet)) { margin-left: 17.5em; margin-right: -14em;