source: t29-www/shared/css-v6/modules/31-mobile.css @ 741

Last change on this file since 741 was 741, checked in by sven, 9 years ago

Darstellung bei schmalen Bildschirmen und Mobilgeräten erheblich
verbessert (viele kleine Detailverbesserungen bei Header und
Footer sowie der Startseite). Es fehlt noch ein ordentliches
Aufklappmenü, was nur im Deutschen testweise eingebunden wurde.

Da bei schmalen Monitoren nicht das Hauptmenü und das Seitenmenü
angezeigt werden können, sollte das verbleibende Menü (=Hauptmenü)
die wichtigen Links beinhalten. Das ist derzeit nicht der Fall,
sodass man auf Mobilgeräten kaum die Seiten erreicht, die man
sehen will. Um das zu korrigieren, sollte die relationale und
hierarchische Navigation erleichtert werden, also mittels
Breadcrumbs sowie dem Anzeigen der Vor/Zurück-Buttons ganz oben.

File size: 5.3 KB
Line 
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}
Note: See TracBrowser for help on using the repository browser.
© 2008 - 2013 technikum29 • Sven Köppel • Some rights reserved
Powered by Trac
Expect where otherwise noted, content on this site is licensed under a Creative Commons 3.0 License