Impressum und AGB und About überarbeitet
[website] / src / main / webapp / less / tablet / layout.less
1 /** Seite gesamt (Abmessungen, Aussenabstände etc.) */
2
3 body.menu,
4 body.nomenu
5 {
6   padding: 0;
7 }
8 #page
9 {
10   overflow: hidden;
11 }
12 .nomenu #page
13 {
14   padding: 0;
15 }
16
17
18 /** Seitenaufteilung mit/ohne Menü für Tablets optimieren */
19
20 .menu .content
21 {
22   padding: 0;
23 }
24 .nomenu .content
25 {
26   padding-bottom: 5em;
27   @media (max-width: @maxsmalltablet)
28   {
29     padding-bottom: 4em;
30   }
31   @media (max-width: @maxsmallertablet)
32   {
33     padding-bottom: 3.25em;
34   }
35 }
36 .menu .content.cf:before,
37 .menu .content.cf:after
38 {
39   clear: none;
40   content: none;
41   display: inline;
42 }
43 .menu .content > .main,
44 .nomenu .content > .main
45 {
46   float: none;
47   width: auto;
48   padding: 0 3em 0 5em;
49   @media (max-width: @maxsmalltablet)
50   {
51     padding: 0 2em 0 3.5em;
52   }
53   @media (max-width: @maxsmallertablet)
54   {
55     padding: 0 1em 0 2.5em;
56   }
57   /** Die 1px-Rahmen triggern, dass das erste Margin den Footer aufschiebt.
58       Bei einem Wert von 0 ragt dieses Margin dann einfach aus dem Footer
59       heraus... */
60   border-top: 1px solid @hintergrund;
61   border-bottom: 1px solid @hintergrund;
62 }
63 .menu .content > .marginal
64 {
65   margin: 3em 0 -994em -15em;
66   padding: 2em 0 999em 0;
67   width: 100%;
68   position: static;
69 }
70 .nomenu .content > .marginal
71 {
72   margin: 3em 0 -999em 0;
73   padding: 0 3em 999em 5em;
74   @media (max-width: @maxsmalltablet)
75   {
76     padding-left: 3.5em;
77     padding-right: 2em;
78   }
79   @media (max-width: @maxsmallertablet)
80   {
81     padding-left: 2.5em;
82     padding-right: 1em;
83   }
84 }
85
86
87 /** Seitenkopf positionieren */
88
89 #header
90 {
91   padding: 1em 3em 0 5em;
92   @media (max-width: @maxsmalltablet)
93   {
94     margin-left: -1.5em;
95     padding: .5em 2em 0 3.5em;
96   }
97   @media (max-width: @maxsmallertablet)
98   {
99     margin-left: -1.2em;
100     padding: 1em 1em 0 2.5em;
101   }
102 }
103
104
105 /** Bereichsauswahl positionieren */
106
107 .menu .content > .marginal > #nav
108 {
109   position: static;
110   border-right: .125em solid @hintergrund;
111   margin-left: 20em;
112   @media (max-width: @maxsmalltablet)
113   {
114     margin-left: 18.5em;
115   }
116   @media (max-width: @maxsmallertablet)
117   {
118     margin-left: 17.5em;
119     #menu > li.about
120     {
121       display: inline-block;
122     }
123   }
124   width: auto;
125 }
126 .nomenu #menu,
127 .menu #menu
128 {
129   position: absolute;
130   width: auto;
131   right: 3em;
132   @media (max-width: @maxsmalltablet)
133   {
134     top: -5.7em;
135     right: 2em;
136   }
137   @media (max-width: @maxsmallertablet)
138   {
139     top: -4.5em;
140     right: 1em;
141   }
142 }
143 #menu > li.about
144 {
145   display: none;
146 }
147 #menu > li.m
148 {
149   @media (max-width: @maxsmalltablet)
150   {
151     padding: 0 0 0 3em;
152   }
153   @media (max-width: @maxsmallertablet)
154   {
155     padding: 0 0 0 2em;
156   }
157 }
158 #menu > li.m > .m
159 {
160   @media (max-width: @maxsmalltablet)
161   {
162     font-size: 200%; /* 32px */
163   }
164   @media (max-width: @maxsmallertablet)
165   {
166     font-size: 150%; /* 24px */
167   }
168 }
169 #menu > li.m > a.m:hover:before,
170 #menu > li.m > a.m.selected:before,
171 #menu > li.m > strong.m:before
172 {
173   @media (max-width: @maxsmalltablet)
174   {
175     content: '> ';
176     margin-left: -.95em;
177   }
178   @media (max-width: @maxsmallertablet)
179   {
180   }
181 }
182
183
184 /** Footer positionieren */
185
186 .menu #footer
187 {
188   position: static;
189   float: right;
190   margin: 3em 0 -999em -15em;
191   padding: 0 0 999em 0;
192   width: 15em;
193   background-color: @heller;
194 }
195 .nomenu #footer
196 {
197   padding: 0 3em 1.5em 5em;
198   @media (max-width: @maxsmalltablet)
199   {
200     padding: 0 2em 1em 3em;
201   }
202   @media (max-width: @maxsmallertablet)
203   {
204     padding: 0 1em .75em 2.5em;
205   }
206   background-color: @heller;
207   border-style: none;
208 }
209
210
211 /** Breadcrump positionieren */
212
213 .menu #breadcrumb,
214 .nomenu #breadcrumb
215 {
216   left: 11.9em;
217   right: 3em;
218   @media (max-width: @maxsmalltablet)
219   {
220     font-size: 87.5%; /* 14px */
221     top: 7.2em;
222     left: 10.3em;
223   }
224   @media (max-width: @maxsmallertablet)
225   {
226     top: 5.8em;
227     left: 7em;
228   }
229 }
230
231
232 /** Faux-Column-Hack für Marginalinhalte */
233
234 .nomenu .content > .marginal aside.m
235 {
236   margin: 3.5em -3em -999em -5em;
237   padding: 2em 3em 995em 5em;
238   background-color: @heller;
239   position: relative;
240   top: -4.5em;
241 }
242 .menu .content > .marginal > aside.m
243 {
244   margin: 0 -12em 1em 20em;
245   @media (max-width: @maxsmalltablet)
246   {
247     margin-left: 18.5em;
248     margin-right: -13em;
249   }
250   @media (max-width: @maxsmallertablet)
251   {
252     margin-left: 17.5em;
253     margin-right: -14em;
254   }
255 }