Kanonische Links über _canonical realisiert
[website] / 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   }
120   width: auto;
121 }
122 .nomenu #menu,
123 .menu #menu
124 {
125   position: absolute;
126   width: auto;
127   right: 3em;
128   @media (max-width: @maxsmalltablet)
129   {
130     top: -5.7em;
131     right: 2em;
132   }
133   @media (max-width: @maxsmallertablet)
134   {
135     top: -4.5em;
136     right: 1em;
137   }
138 }
139 #menu > li.m
140 {
141   @media (max-width: @maxsmalltablet)
142   {
143     padding: 0 0 0 3em;
144   }
145   @media (max-width: @maxsmallertablet)
146   {
147     padding: 0 0 0 2em;
148   }
149 }
150 #menu > li.m > .m
151 {
152   @media (max-width: @maxsmalltablet)
153   {
154     font-size: 200%; /* 32px */
155   }
156   @media (max-width: @maxsmallertablet)
157   {
158     font-size: 150%; /* 24px */
159   }
160 }
161 #menu > li.m > a.m:hover:before,
162 #menu > li.m > a.m.selected:before,
163 #menu > li.m > strong.m:before
164 {
165   @media (max-width: @maxsmalltablet)
166   {
167     content: '> ';
168     margin-left: -.95em;
169   }
170   @media (max-width: @maxsmallertablet)
171   {
172   }
173 }
174
175
176 /** Footer positionieren */
177
178 .menu #footer
179 {
180   position: static;
181   float: right;
182   margin: 3em 0 -999em -15em;
183   padding: 0 0 999em 0;
184   width: 15em;
185   background-color: @heller;
186 }
187 .nomenu #footer
188 {
189   padding: 0 3em 1.5em 5em;
190   @media (max-width: @maxsmalltablet)
191   {
192     padding: 0 2em 1em 3em;
193   }
194   @media (max-width: @maxsmallertablet)
195   {
196     padding: 0 1em .75em 2.5em;
197   }
198   background-color: @heller;
199   border-style: none;
200 }
201
202
203 /** Breadcrump positionieren */
204
205 #breadcrumb
206 {
207   left: 11.9em;
208   right: 3em;
209   @media (max-width: @maxsmalltablet)
210   {
211     font-size: 87.5%; /* 14px */
212     top: 7.2em;
213     left: 10.3em;
214   }
215   @media (max-width: @maxsmallertablet)
216   {
217     display: none;
218   }
219 }
220
221
222 /** Faux-Column-Hack für Marginalinhalte */
223
224 .nomenu .content > .marginal aside.m
225 {
226   margin: 3.5em -3em -999em -5em;
227   padding: 2em 3em 995em 5em;
228   background-color: @heller;
229   position: relative;
230   top: -4.5em;
231 }
232 .menu .content > .marginal > aside.m
233 {
234   margin: 0 -12em 1em 17.5em;
235   @media (max-width: @maxsmalltablet)
236   {
237     margin-right: -13em;
238   }
239   @media (max-width: @maxsmallertablet)
240   {
241     margin-right: -14em;
242   }
243 }