X-Git-Url: https://juplo.de/gitweb/?p=website;a=blobdiff_plain;f=src%2Fmain%2Fwebapp%2Fless%2Ftablet%2Flayout.less;h=c63f92392a8810d45b1658b250b9848c083dab43;hp=9e5c2df3ce1ea1cc6135e5fe5d61fa5212bc3708;hb=6edf003077fec1ebcc3dbdcf94f6ba04fa64a349;hpb=742e9e70700208183bd2bf94cc639b288e5e05c9 diff --git a/src/main/webapp/less/tablet/layout.less b/src/main/webapp/less/tablet/layout.less index 9e5c2df3..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,22 +78,28 @@ 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 */ #header { - padding: 1em 3em 0 5em; - @media (max-width: @maxsmalltablet) + padding: 1em 3em 2em 5em; + @media (max-width: (@maxsmalltablet)) { margin-left: -1.5em; - padding: .5em 2em 0 3em; + padding: .5em 2em 2em 3em; } - @media (max-width: @maxsmallertablet) + @media (max-width: (@maxsmallertablet)) { margin-left: -1.2em; - padding: 1em 1em 0 2.5em; + 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,21 +133,22 @@ body width: 100%; } +.menu #menu, .nomenu #menu, -.menu #menu +.onecolumn #menu { position: absolute; width: auto; - top: -7em; + top: -9em; right: 3em; - @media (max-width: @maxsmalltablet) + @media (max-width: (@maxsmalltablet)) { - top: -5.7em; + top: -7.7em; right: 2em; } - @media (max-width: @maxsmallertablet) + @media (max-width: (@maxsmallertablet)) { - top: -4.5em; + 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;