From: Kai Moritz Date: Thu, 16 Jan 2014 09:43:20 +0000 (+0100) Subject: Tablet-Layout für kleinere Bildschirme überarbeitet X-Git-Tag: thymeroot-2.0.0~141 X-Git-Url: http://juplo.de/gitweb/?a=commitdiff_plain;h=ca6df6f375793a05fdc41dd677eafa44f17b9ac9;p=website Tablet-Layout für kleinere Bildschirme überarbeitet Eine Zwischen-Weiche blendet bei kleineren Bildschirmgrößen unnötige Elemente des Seiten-Kopfes aus. --- diff --git a/src/main/webapp/WEB-INF/wro.xml b/src/main/webapp/WEB-INF/wro.xml index 390b28f1..46505074 100644 --- a/src/main/webapp/WEB-INF/wro.xml +++ b/src/main/webapp/WEB-INF/wro.xml @@ -24,6 +24,8 @@ /less/screen/marginal.less /less/screen/footer.less /less/tablet/layout.less + /less/tablet/head.less + /less/tablet/navigation.less /less/tablet/footer.less diff --git a/src/main/webapp/less/screen/head.less b/src/main/webapp/less/screen/head.less index b0a20bbe..c537ba0b 100644 --- a/src/main/webapp/less/screen/head.less +++ b/src/main/webapp/less/screen/head.less @@ -29,6 +29,7 @@ z-index: 0; top: -1.3em; /* 39px */ text-align: right; + overflow: hidden; } #slogan > strong{ display: inline-block; diff --git a/src/main/webapp/less/tablet.less b/src/main/webapp/less/tablet.less index 7bd3ac64..c7e57dd7 100644 --- a/src/main/webapp/less/tablet.less +++ b/src/main/webapp/less/tablet.less @@ -1,5 +1,8 @@ @media screen and (min-width: @minscreen) and (max-width: @maxtablet) { + @import 'tablet/typo.less'; @import 'tablet/layout.less'; + @import 'tablet/head.less'; + @import 'tablet/navigation.less'; @import 'tablet/footer.less'; } diff --git a/src/main/webapp/less/tablet/footer.less b/src/main/webapp/less/tablet/footer.less index df17d2f9..9f5beb55 100644 --- a/src/main/webapp/less/tablet/footer.less +++ b/src/main/webapp/less/tablet/footer.less @@ -1,7 +1,17 @@ .cols_1 > #footer { margin: 0 0 0 -5em; - padding: 2em 3em 2em 5em; + padding: 2em 3em 1.5em 5em; + @media (max-width: @maxsmalltablet) + { + margin: 0 0 0 -4em; + padding: 1.5em 2em 1em 4em; + } + @media (max-width: @maxsmallertablet) + { + margin: 0 0 0 -3em; + padding: 1em 1em .75em 3em; + } background-color: @heller; } .cols_1 > #footer > #footerlinks @@ -27,9 +37,9 @@ font-size: 137.5%; margin: 0; } -.cols_2 > #footer > #footer +.cols_2 > #footer { - padding: 0; + z-index: 1; } .cols_2 > #footer > #footerlinks { @@ -49,8 +59,22 @@ line-height: 1em; font-size: 137.5%; top: auto; - bottom: 1em; - right: -9em; + bottom: 0; + left: -3em; + right: -10.909090909em; /* 240px */ + padding: 9em 2.18181818em 1.5em; /* ? 3*16px ? */ + @media (max-width: @maxsmalltablet) + { + padding-right: 1.45454545em; + padding-bottom: 1em; + } + @media (max-width: @maxsmallertablet) + { + padding-right: .72727272em; + padding-bottom: .5em; + } + background-color: @heller; + text-align: right; } .cols_2 > #footer > #footerlinks a.f { diff --git a/src/main/webapp/less/tablet/head.less b/src/main/webapp/less/tablet/head.less new file mode 100644 index 00000000..6835588c --- /dev/null +++ b/src/main/webapp/less/tablet/head.less @@ -0,0 +1,33 @@ +@media (max-width: @maxsmalltablet) +{ + #header + { + padding-top: .5em; + margin-left: -3.1em; + } + #logo + { + font-size: 650%; /* 104px */ + } + #slogan + { + font-size: 150%; /** 24px */ + } +} + +@media (max-width: @maxsmallertablet) +{ + #header + { + margin-left: -2.4em; + } + #logo + { + font-size: 487.5%; /* 78px */ + } + #slogan + { + font-size: 112.5%; /** 18px */ + } +} + diff --git a/src/main/webapp/less/tablet/layout.less b/src/main/webapp/less/tablet/layout.less index 6d97d708..05976070 100644 --- a/src/main/webapp/less/tablet/layout.less +++ b/src/main/webapp/less/tablet/layout.less @@ -1,11 +1,27 @@ 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; + } } .cols_1 { padding-right: 3em; + @media (max-width: @maxsmalltablet) + { + padding-right: 2em; + } + @media (max-width: @maxsmallertablet) + { + padding-right: 1em; + } } .cols_1 > .content { @@ -15,6 +31,7 @@ body { padding: 0 15em 0 0; margin-right: -15em; + z-index: 2; } .cols_2 > .content.cf:before, .cols_2 > .content.cf:after @@ -30,6 +47,15 @@ body width: auto; background-color: @hintergrund; border-right: 3em solid @hintergrund; + @media (max-width: @maxsmalltablet) + { + margin-top: -.5em; + border-right-width: 2em; + } + @media (max-width: @maxsmallertablet) + { + border-right-width: 1em; + } /** Die 1px-Rahmen triggern, dass das erste Margin den Footer aufschiebt. Bei einem Wert von 0 ragt dieses Margin dann einfach aus dem Footer heraus... */ @@ -84,6 +110,14 @@ body { margin-right: -15em; border-right: 3em solid @hintergrund; + @media (max-width: @maxsmalltablet) + { + border-right-width: 2em; + } + @media (max-width: @maxsmallertablet) + { + border-right-width: 1em; + } } .cols_2 > #breadcrumb { diff --git a/src/main/webapp/less/tablet/navigation.less b/src/main/webapp/less/tablet/navigation.less new file mode 100644 index 00000000..8710368b --- /dev/null +++ b/src/main/webapp/less/tablet/navigation.less @@ -0,0 +1,62 @@ +@media (max-width: @maxsmalltablet) +{ + #menu + { + top: -5.7em; + } + .cols_2 > .content #nav > #menu + { + top: -5.2em; + right: 2em; + } + #menu > li.m + { + padding: 0 0 0 3em; + } + #menu > li.m > .m + { + font-size: 200%; /* 32px */ + } + #menu > li.m > a.m:hover:before, + #menu > li.m > a.m.selected:before, + #menu > li.m > strong.m:before + { + content: '> '; + margin-left: -.95em; + } + #breadcrumb + { + font-size: 87.5%; /* 14px */ + top: 7.2em; + left: 6.3em; + } +} + +@media (max-width: @maxsmallertablet) +{ + #menu + { + top: -4.5em; + } + .cols_2 > .content #nav > #menu + { + top: -4em; + right: 1em; + } + #menu > li.m + { + padding: 0 0 0 2em; + } + #menu > li.m > .m + { + font-size: 150%; /* 24px */ + } + .cols_2 > .content #nav > #menu + { + top: -4em; + } + #breadcrumb + { + display: none; + } +} diff --git a/src/main/webapp/less/tablet/typo.less b/src/main/webapp/less/tablet/typo.less new file mode 100644 index 00000000..e254ffa4 --- /dev/null +++ b/src/main/webapp/less/tablet/typo.less @@ -0,0 +1,8 @@ +@media (max-width: @maxsmalltablet) +{ + h1 + { + font-size: 150%; /** 24 px */ + } +} + diff --git a/src/main/webapp/less/variables.less b/src/main/webapp/less/variables.less index 19058314..a577cf49 100644 --- a/src/main/webapp/less/variables.less +++ b/src/main/webapp/less/variables.less @@ -19,10 +19,12 @@ /** Bildschirmbreiten für Media-Query */ -@minscreen: 750px; -@maxtablet: 939px; -@maxphone: 599px; -@maxtiny: 399px; +@minscreen: 580px; +@maxtablet: 939px; +@maxsmalltablet: 800px; +@maxsmallertablet: 700px; +@maxphone: @minscreen - 1; +@maxtiny: 399px; /** Schriften */