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