Kanonische Links über _canonical realisiert
[website] / less / phone / layout.less
1 /** Seite gesamt (Abmessungen, Aussenabstände etc.) */
2
3 body
4 {
5   font-size: 87.5%; /** 14px */
6   padding: 0;
7 }
8 #page
9 {
10   position: relative;
11   overflow: hidden;
12 }
13
14
15 /** Seitenaufteilung mit/ohne Menü */
16
17 .content > .main
18 {
19   margin: 0 1em 0 2.5em;
20 }
21 .menu .content > .main
22 {
23   border-top-style: none;
24   margin-top: -.4375em; /** -8px + 1px (für den entfernten Rahmen) -- nur damit es exakt so positioniert ist, wie im Tablet-Layout */
25 }
26
27
28
29 /** Seitenkopf positionieren */
30
31 #header
32 {
33   margin: .5em 1em 0 1.25em;
34 }
35 #header > hr.h
36 {
37   display: none;
38 }
39
40
41 /** Bereichsauswahl positionieren und stylen */
42
43 #nav > hr.n
44 {
45   display: none;
46 }
47 #menu
48 {
49   border-style: none;
50   font-size: 125%;
51   line-height: 1.5em;
52 }
53 #menu
54 {
55   font-size: 150%;
56   border-bottom: .125em solid @hintergrund;
57   margin-top: 0;
58   padding: .25em .25em 1em 1.5em;
59 }
60 #menu > li.m
61 {
62   float: left;
63   list-style-type: none;
64   padding: .25em 1em 0 0;
65 }
66 #menu > li.m > a.m
67 {
68   color: @dunkel;
69 }
70 #menu > li.m > strong.m
71 {
72   color: @hintergrund;
73   border-bottom: .0625em solid @hintergrund;
74 }
75 #menu > li.m > a.m:hover,
76 #menu > li.m > a.m:focus,
77 #menu > li.m > a.m:active
78 {
79   color: @dunkler;
80   border-bottom: .0625em solid @dunkler;
81 }
82 #menu > li.m > a.m.selected
83 {
84   color: @hintergrund;
85   border-bottom: .0625em dashed @hintergrund;
86 }
87 #menu > li.m > a.m.selected:hover,
88 #menu > li.m > a.m.selected:focus,
89 #menu > li.m > a.m.selected:active
90 {
91   border-style: solid;
92 }
93
94
95 /** Navigations-Sprunglink reaktivieren und stylen */
96
97 #breadcrumb
98 {
99   position: absolute;
100   top: .8em;
101   right: 1.5em;
102 }
103 #breadcrumb > strong.b,
104 #breadcrumb > ol.b,
105 #breadcrumb > hr.b
106 {
107   display: none;
108 }
109 #breadcrumb > a.hide
110 {
111   display: block;
112   overflow: hidden;
113   width: 3.5em;
114   height: 3em;
115   line-height: 3em;
116   color: @normal;
117   border-style: none;
118 }
119 #breadcrumb > a.hide:before
120 {
121   content: "";
122   font-family: 'symbols';
123   font-size: 378%; /** Vielfaches von 14px */
124   padding: 0 0 1em 0;
125 }
126 #breadcrumb > a.hide:hover,
127 #breadcrumb > a.hide:focus,
128 #breadcrumb > a.hide:active
129 {
130   color: @dunkler;
131 }
132
133
134 /** Footer positionieren */
135
136 #footer
137 {
138   padding: 0 1em .5em 2.5em;
139   background-color: @heller;
140 }
141 #footer > hr.f
142 {
143   border-color: @hintergrund;
144 }
145
146
147 /** Marginal-Inhalte anpassen... */
148
149 .marginal h1,
150 .marginal h2,
151 .marginal h3,
152 .marginal h4
153 {
154   color: @hintergrund;
155 }
156
157
158 /** Faux-Column-Hack für Marginalinhalte */
159
160 .marginal
161 {
162   margin-top: 4em;
163   margin-bottom: -993em;
164   padding: 1em 1em 999em 2.5em;
165   background-color: @heller;
166 }