1 | /** |
---|
2 | * Media Queries for responsive webdesign |
---|
3 | * Fuer kleine Browserfenster sowie mobile Endgeraete. |
---|
4 | **/ |
---|
5 | |
---|
6 | /** |
---|
7 | * Schmaler als die "Blattmetapher" 1200px: Blattmetapher aufgeben und Ueberbleibsel |
---|
8 | * des Seitenhintergrundes ausblenden. Zur Ladezeitoptimierung braucht der auch gar |
---|
9 | * nicht mehr geladen werden. |
---|
10 | * Experimentell den Footer auch nicht mit der dunkeln Hintergrundfarbe machen, weil |
---|
11 | * er sonst sehr aufdringlich ist. |
---|
12 | * |
---|
13 | **/ |
---|
14 | @media all and (max-width: 1250px) { /* was: 1199px */ |
---|
15 | body { |
---|
16 | background: #F4F4F4; /* BG von footer.attached */ |
---|
17 | } |
---|
18 | |
---|
19 | #container { |
---|
20 | margin-top: 0; |
---|
21 | box-shadow: none; |
---|
22 | } |
---|
23 | |
---|
24 | footer.in-sheet.empty-footer { |
---|
25 | height: 2px; /* Nur Linie anzeigen, keine weisse Flaeche */ |
---|
26 | } |
---|
27 | |
---|
28 | /* If we have a Javascript capable browser, display the cloned footer as the |
---|
29 | in-sheet footer looks ugly. */ |
---|
30 | html.js footer.in-sheet div.bigfooter { |
---|
31 | display: none; |
---|
32 | } |
---|
33 | html.js footer.attached.for-mobile { |
---|
34 | display: block; |
---|
35 | } |
---|
36 | |
---|
37 | /* mache Eintraege schmaler. Das hier sollte eigentlich gemeinsam bei footer.css stehen... */ |
---|
38 | footer div.bigfooter li.haus { |
---|
39 | width: 300px; |
---|
40 | } |
---|
41 | footer div.bigfooter li.copy { |
---|
42 | width: 290px; |
---|
43 | } |
---|
44 | footer div.bigfooter li.logo { |
---|
45 | width: 240px; |
---|
46 | } |
---|
47 | |
---|
48 | footer div.bigfooter li.haus img { |
---|
49 | width: 100px; |
---|
50 | } |
---|
51 | footer div.bigfooter li.haus span.p { |
---|
52 | margin-left: 118px; |
---|
53 | } |
---|
54 | } |
---|
55 | |
---|
56 | /** |
---|
57 | * Schmaler als 940px: Tablet-Design. Menue unten darstellen, keine Menuescrollfunktionen, |
---|
58 | * Menuepunkte nebeneinander (sieht huebsch aus). |
---|
59 | * |
---|
60 | **/ |
---|
61 | @media all and (max-width: 940px) { |
---|
62 | /* menue unten darstellen, Menuescrollfunktionen deaktivieren */ |
---|
63 | #container { |
---|
64 | width: 940px; |
---|
65 | } |
---|
66 | |
---|
67 | /* Header-Navigation */ |
---|
68 | header.banner { |
---|
69 | height: auto; |
---|
70 | background: none; |
---|
71 | text-align: left; |
---|
72 | } |
---|
73 | |
---|
74 | nav.horizontal { |
---|
75 | position: relative; |
---|
76 | top: auto; bottom: auto; |
---|
77 | margin: 105px 0 0 0; |
---|
78 | text-align: center; |
---|
79 | |
---|
80 | /* testweise: */ |
---|
81 | background-color: #f1f1f1; |
---|
82 | border-bottom: 2px solid #d2d2d2; |
---|
83 | border-top: 2px solid #d2d2d2; |
---|
84 | } |
---|
85 | nav.horizontal .u1 > li > a { |
---|
86 | margin-bottom: 0; /* kein Abstand zu nav.horizontal */ |
---|
87 | padding: 9px; /* groessere Klickflaechen */ |
---|
88 | } |
---|
89 | |
---|
90 | li.small-screen-only { |
---|
91 | display: inline-block !important; |
---|
92 | } |
---|
93 | |
---|
94 | #background-color-container, #content, section.sidebar { |
---|
95 | float: none; |
---|
96 | left: auto; |
---|
97 | background-color: transparent; |
---|
98 | } |
---|
99 | |
---|
100 | section.sidebar { |
---|
101 | width: 100%; |
---|
102 | background-color: #dfeaf0; |
---|
103 | } |
---|
104 | section.sidebar nav.side .u1 > li > a { |
---|
105 | /* u1-Trenner abschalten */ |
---|
106 | border-top: none; |
---|
107 | padding-top: 0; |
---|
108 | } |
---|
109 | |
---|
110 | /* clearfix */ |
---|
111 | #content:after, section.sidebar:after { content: ""; display: table; clear: both; } |
---|
112 | |
---|
113 | nav.side { /* Quick and dirty */ |
---|
114 | padding-bottom: 15px !important; |
---|
115 | } |
---|
116 | |
---|
117 | .button { display: none !important; } /* Quick and dirty */ |
---|
118 | |
---|
119 | /* Spalten */ |
---|
120 | section.sidebar ul.u1 > li { |
---|
121 | float: left; |
---|
122 | padding: 24px; |
---|
123 | width: 250px; |
---|
124 | } |
---|
125 | |
---|
126 | /* ist nicht mehr empty wg bigfooter */ |
---|
127 | /* footer.in-sheet.empty-footer { display: none; } */ |
---|
128 | } |
---|
129 | |
---|
130 | /** |
---|
131 | * Schmaller als 600px: Handy-Design, alles einspaltig! |
---|
132 | * |
---|
133 | **/ |
---|
134 | @media all and (max-width: 600px) { |
---|
135 | #container { |
---|
136 | padding-top: 240px; /* wg grossem Header, to be fixed */ |
---|
137 | } |
---|
138 | #container, #content, section.sidebar, #background-color-container { |
---|
139 | width: inherit; |
---|
140 | } |
---|
141 | #content { |
---|
142 | padding: 1.5em 1em; |
---|
143 | } |
---|
144 | |
---|
145 | #container h1 { |
---|
146 | display: block; |
---|
147 | position: absolute; |
---|
148 | top: 0; left: 0; width: 100%; |
---|
149 | } |
---|
150 | |
---|
151 | #container h1 a { |
---|
152 | /* Banner in der Mitte anzeigen */ |
---|
153 | display: block; |
---|
154 | position: relative; top: 0; left: 0; |
---|
155 | width: 80%; max-width: 310px; |
---|
156 | background-repeat: no-repeat; |
---|
157 | background-position: center center; |
---|
158 | background-size: 100% auto; |
---|
159 | margin: 0 auto; |
---|
160 | } |
---|
161 | |
---|
162 | nav.horizontal { |
---|
163 | /* Less distance to logo */ |
---|
164 | margin: 90px 0 0 0; |
---|
165 | border-bottom: none; |
---|
166 | } |
---|
167 | |
---|
168 | nav.top { |
---|
169 | position: relative; |
---|
170 | margin: 0; padding: .5em 0; |
---|
171 | border-bottom: 2px solid #d2d2d2; |
---|
172 | background-color: #ebebeb; |
---|
173 | text-align: center; |
---|
174 | } |
---|
175 | |
---|
176 | nav.rel { |
---|
177 | width: 100%; |
---|
178 | margin: 26px 0 0; |
---|
179 | text-align: center; |
---|
180 | } |
---|
181 | nav.rel li { |
---|
182 | position: relative; |
---|
183 | } |
---|
184 | |
---|
185 | footer.in-sheet { |
---|
186 | height: auto; |
---|
187 | min-height: 100px; /* wenn Vorherige/Nächste umbricht */ |
---|
188 | } |
---|
189 | |
---|
190 | footer.attached div.bigfooter ul, |
---|
191 | footer div.bigfooter li { |
---|
192 | padding: 0; |
---|
193 | width: 100% !important; |
---|
194 | } |
---|
195 | |
---|
196 | footer.in-sheet div.bigfooter { |
---|
197 | padding-left: .4em; |
---|
198 | } |
---|
199 | |
---|
200 | |
---|
201 | /* Mehrspaltige Contents. Overwrite dank #container */ |
---|
202 | #container div.startseiten-boxen, |
---|
203 | #container div.startseiten-boxen .cols, |
---|
204 | #container div.startseiten-boxen .leftcol, |
---|
205 | #container div.startseiten-boxen .rightcol, |
---|
206 | #content div.cols, |
---|
207 | #content div.cols .leftcol, |
---|
208 | #content div.cols .rightcol, |
---|
209 | #content div.desc-left, |
---|
210 | #content div.desc-right { |
---|
211 | float: none; |
---|
212 | width: inherit; |
---|
213 | padding: 0 !important; |
---|
214 | } |
---|
215 | |
---|
216 | /* Box-System einspaltig machen, aber NUR wo |
---|
217 | nicht "mobile-keep" steht! */ |
---|
218 | #content .auto-bildbreite:not(.mobile) img, |
---|
219 | #content .center:not(.mobile) img, |
---|
220 | #content .left:not(.mobile) img, |
---|
221 | #content .right:not(.mobile) img, |
---|
222 | #content div.desc-left:not(.mobile) img, |
---|
223 | #content div.desc-right:not(.mobile) img { |
---|
224 | float: none; |
---|
225 | display: block; margin: 0 auto; /* for small images */ |
---|
226 | max-width: 100%; |
---|
227 | height: auto; |
---|
228 | } |
---|
229 | |
---|
230 | #content div.desc-left, |
---|
231 | #content div.desc-right, |
---|
232 | #content .auto-bildbreite { |
---|
233 | width: 100% !important; |
---|
234 | margin: 1em 0; |
---|
235 | } |
---|
236 | |
---|
237 | } |
---|