Kanonische Links über _canonical realisiert
[website] / less / screen / layout.less
1 /** Seite gesamt (Abmessungen, Aussenabstände etc.) */
2
3 body
4 {
5   padding: 0;
6   overflow-y: scroll; /** Die vertikale Scroll-Leiste stets anzeigen */
7 }
8 #page
9 {
10   margin: 0 auto; /** Seiteninhalte zentrieren, wenn max-width des Inhalts (s.u.) erreicht ist */
11 }
12
13
14 /** Seitenaufteilung mit Menü (Zweispaltig) */
15
16 body.menu
17 {
18   padding: 0 3em 0 5em;
19 }
20 .menu .content
21 {
22   position: relative;
23   padding: 0 27em 7.1875em 0; /** Unten: 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */
24 }
25 .menu .content > .main
26 {
27   float: left;
28   min-height: 1em;
29   position: relative;
30   width: 100%;
31 }
32 .menu .content > .marginal
33 {
34   float: left;
35   margin: 0 -27em 0 2.625em;
36   padding: 0 2em 1.0625em 2em;
37   position: relative;
38   width: 20.375em;
39   background-color: @heller;
40 }
41
42 /** Anpassungen für Seiten ohne Menü (Einspaltig) */
43
44 .nomenu #page
45 {
46   max-width: 62.375em;
47   padding: 0 3em 0 5em;
48   overflow: hidden;
49 }
50 .nomenu .content
51 {
52   position: relative;
53   padding: 0 0 7.1875em 0; /** 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */
54 }
55 .nomenu .content > .main
56 {
57   margin-bottom: 7em;
58 }
59
60
61 /** Seitenkopf positionieren */
62
63 #header
64 {
65   margin-left: -2.125em;
66 }
67 #header > hr.h
68 {
69   display: none;
70 }
71
72
73 /** Bereichsauswahl positionieren und stylen */
74
75 #nav
76 {
77   position: absolute;
78   top: 0;
79   right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */
80   width: 100%;
81 }
82 #nav > hr.n
83 {
84   display: none;
85 }
86 .menu #nav
87 {
88   position: relative;
89   top: auto;
90   right: auto;
91   width: 22.375em; /** 358px = 326px + 32px*/
92 }
93 #menu
94 {
95   position: relative;
96   width: 200%;
97   top: -7em; /** 112px */
98   right: 100%;
99   text-align: right;
100   list-style-type: none;
101   margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */
102   padding: 0;
103   border-style: none;
104 }
105 #menu > li.m
106 {
107   display: inline-block;
108   padding: 0 0 0 4em;
109 }
110 #menu > li.m > .m
111 {
112   font-size: 250%; /** 40px */
113   color: @normal;
114 }
115 #menu > li.m > a.m
116 {
117   border-color: @normal;
118 }
119 #menu > li.m > a.m:hover
120 {
121   border-color: @dunkler;
122 }
123 #menu > li.m > a.m:hover,
124 #menu > li.m > strong.m
125 {
126   border-style: solid;
127 }
128 #menu > li.m > a.m.selected
129 {
130   color: @normal;
131 }
132 #menu > li.m > a.m:hover
133 {
134   color: @dunkler;
135 }
136 #menu > li.m > a.m:hover:before,
137 #menu > li.m > a.m.selected:before,
138 #menu > li.m > strong.m:before
139 {
140   content: '> ';
141   margin-left: -.92em;
142 }
143
144 /** Anpassungen der Bereichsauswahl für Seiten ohne Menü */
145
146 .nomenu #menu
147 {
148   position: absolute;
149   right: 0;
150 }
151
152
153 /** Breadcrump positionieren */
154
155 #breadcrumb
156 {
157   position: absolute;
158   top: 8.375em;
159   left: 6.9em;
160   z-index: 3;
161 }
162 .nomenu #breadcrumb
163 {
164   left: 11.9em;
165 }
166 #breadcrumb > a.hide
167 {
168   position: absolute;
169 }
170 #breadcrumb > hr.b
171 {
172   display: none;
173 }
174
175
176 /** Footer positionieren */
177
178 #footer
179 {
180   padding: 2em 0;
181 }
182 .nomenu #footer
183 {
184   padding: 0 3em 2em 5em;
185 }
186 #footer > hr.f
187 {
188   display: none;
189 }
190
191
192 /** Marginal-Inhalte anpassen... */
193
194 .content > .marginal h1,
195 .content > .marginal h2,
196 .content > .marginal h3,
197 .content > .marginal h4
198 {
199   color: @hintergrund;
200 }
201 .content > .marginal h1:first-child,
202 .content > .marginal h2:first-child,
203 .content > .marginal h3:first-child,
204 .content > .marginal h4:first-child
205 {
206   margin-top: 0;
207 }