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   max-width: 62.375em; /** 608px + 390px (Marginalspalte) = ca. 1000px (muss zu Wergen in faux-columns.less passen!!) */
12 }
13
14 /** Seitenaufteilung mit Menü (Zweispaltig) */
15
16 body
17 {
18   padding: 0 3em 0 5em;
19 }
20 .content
21 {
22   position: relative;
23   padding: 0 0 7.1875em 0; /** Unten: 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */
24 }
25 .menu .content,
26 .nomenu .content
27 {
28   padding-right: 27em;
29 }
30 .content > .main
31 {
32   min-height: 1em;
33   position: relative;
34   width: 100%;
35 }
36 .menu .content > .main,
37 .nomenu .content > .main
38 {
39   float: left;
40 }
41 .content > .marginal
42 {
43   position: relative;
44   background-color: @heller;
45 }
46 .menu .content > .marginal,
47 .nomenu .content > .marginal
48 {
49   float: left;
50   margin: 0 -27em 0 2.625em;
51   padding: 0 2em 1.0625em 2em;
52   width: 20.375em;
53 }
54
55 /** Anpassungen für Seiten ohne Menü */
56
57 .nomenu .content > .marginal
58 {
59   background-color: @sehrhell;
60 }
61
62 /** Anpassungen für einspaltige Seiten */
63
64 .onecolumn .content > .marginal
65 {
66   margin-top: 4em;
67   background-color: transparent;
68 }
69
70 /** Seitenkopf positionieren */
71
72 #header
73 {
74   margin-left: -2.125em;
75   padding: .125em 0 1em 0;
76 }
77 #header > hr.h
78 {
79   display: none;
80 }
81
82
83 /** Bereichsauswahl positionieren und stylen */
84
85 .onecolumn #nav
86 {
87   position: absolute;
88   top: 0;
89   right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */
90   width: 100%;
91 }
92
93 #nav > hr.n
94 {
95   display: none;
96 }
97 #nav
98 {
99   position: relative;
100   top: auto;
101   right: auto;
102   width: 22.375em; /** 358px = 326px + 32px*/
103 }
104 #menu
105 {
106   position: relative;
107   width: 200%;
108   top: -8em; /** 136px */
109   right: 100%;
110   text-align: right;
111   list-style-type: none;
112   margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */
113   padding: 0;
114   border-style: none;
115 }
116 .onecolumn #menu
117 {
118   top: -15.5625em; /** -249px -- warum auch immer... */
119 }
120 #menu > li.m
121 {
122   display: inline-block;
123   padding: 0 0 0 4em;
124 }
125 #menu > li.m > .m
126 {
127   font-size: 250%; /** 40px */
128   color: @normal;
129 }
130 #menu > li.m > a.m
131 {
132   border-color: @normal;
133 }
134 #menu > li.m > a.m:hover
135 {
136   border-color: @dunkler;
137 }
138 #menu > li.m > a.m:hover,
139 #menu > li.m > strong.m
140 {
141   border-style: solid;
142 }
143 #menu > li.m > a.m.selected
144 {
145   color: @normal;
146 }
147 #menu > li.m > a.m:hover
148 {
149   color: @dunkler;
150 }
151 #menu > li.m > a.m:hover:before,
152 #menu > li.m > a.m.selected:before,
153 #menu > li.m > strong.m:before
154 {
155   content: '> ';
156   margin-left: -.92em;
157 }
158
159
160 /** Breadcrump positionieren */
161
162 #breadcrumb
163 {
164   position: absolute;
165   top: 7.875em; /* 126px */
166   left: 10em;
167   z-index: 3;
168 }
169 #breadcrumb > a.hide
170 {
171   position: absolute;
172 }
173 #breadcrumb > hr.b
174 {
175   display: none;
176 }
177 #breadcrumb > strong.b.title,
178 #breadcrumb > ol.b > li.b:first-child
179 {
180   text-indent: -999em;
181   width: 0;
182   margin: 0;
183 }
184
185 /** Footer positionieren */
186
187 #footer
188 {
189   padding: 2em 0;
190 }
191 .onecolumn #footer
192 {
193   background-color: @hintergrund;
194 }
195 #footer > hr.f
196 {
197   display: none;
198 }