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

Last change on this file since 659 was 659, checked in by sven, 10 years ago

Mobil-Ansicht verbessert (auch sichtbar bei schmal eingestelltem
Bildschirm).

File size: 4.0 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        /*
29        footer.attached {
30                background: #F4F4F4;
31                color: #777;
32        }
33       
34        footer.attached a:link, footer.attached a:visited {
35                color: #777;
36        }
37        */
38}
39
40/**
41 * Schmaler als 940px: Tablet-Design. Menue unten darstellen, keine Menuescrollfunktionen,
42 * Menuepunkte nebeneinander (sieht huebsch aus).
43 *
44 **/
45@media all and (max-width: 940px) {
46        /* menue unten darstellen, Menuescrollfunktionen deaktivieren */
47        #container {
48                width: 940px;
49        }
50
51        /* Header-Navigation */
52        header.banner {
53                height: auto;
54                background: none;
55        }
56
57        nav.horizontal {
58                position: relative;
59                top: auto; bottom: auto;
60                margin: 108px 0 0 0;
61                text-align: center;
62
63                /* testweise: */
64                background-color: #f1f1f1;
65                border-bottom: 2px solid #d2d2d2;
66                border-top: 2px solid #d2d2d2;
67        }
68        nav.horizontal .u1 > li > a {
69                margin-bottom: 0; /* kein Abstand zu nav.horizontal */
70                padding: 9px; /* groessere Klickflaechen */
71        }
72
73        li.small-screen-only {
74                display: inline-block !important;
75        }
76       
77        #background-color-container, #content, section.sidebar {
78                float: none;
79                left: auto;
80                background-color: transparent;
81        }
82
83        section.sidebar {
84                width: 100%;
85                background-color: #dfeaf0;
86        }
87        section.sidebar nav.side .u1 > li > a {
88                /* u1-Trenner abschalten */
89                border-top: none;
90                padding-top: 0;
91        }
92       
93        /* clearfix */
94        #content:after, section.sidebar:after { content: ""; display: table; clear: both; }
95       
96        nav.side { /* Quick and dirty */
97                padding-bottom: 15px !important;
98        }
99       
100        .button { display: none !important; } /* Quick and dirty */
101       
102        /* Spalten */
103        section.sidebar ul.u1 > li {
104                float: left;
105                padding: 24px;
106                width: 250px;
107        }
108       
109        footer.in-sheet.empty-footer { display: none; }
110}
111
112/**
113 * Schmaller als 600px: Handy-Design, alles einspaltig!
114 *
115 **/
116@media all and (max-width: 600px) {
117        #container {
118                padding-top: 240px; /* wg grossem Header, to be fixed */
119        }
120        #container, #content, section.sidebar, #background-color-container {
121                width: inherit;
122        }
123        #content {
124                padding: 1.5em 1em;
125        }
126
127        #container h1 a {
128                /* Banner in der Mitte anzeigen */
129                left: 0; width: 100%;
130                background-repeat: no-repeat;
131                background-position: center center;
132        }
133
134        nav.rel {
135                width: 100%;
136                margin: 26px 0 0;
137                text-align: center;
138        }
139        nav.rel li {
140                position: relative;
141        }
142
143        footer.attached div.bigfooter ul,
144        footer div.bigfooter li {
145                padding: 0;
146                width: 100% !important;
147        }
148
149        /* Mehrspaltige Contents. Overwrite dank #container */
150        #container div.startseiten-boxen,
151        #container div.startseiten-boxen .cols,
152        #container div.startseiten-boxen .leftcol, 
153        #container div.startseiten-boxen .rightcol,
154        #content div.cols,
155        #content div.cols .leftcol,
156        #content div.cols .rightcol,
157        #content div.desc-left,
158        #content div.desc-right  {
159                float: none;
160                width: inherit;
161                padding: 0 !important;
162        }
163
164        /* Box-System einspaltig machen */
165        #content .auto-bildbreite img,
166        #content .center img,
167        #content .left img,
168        #content .right img,
169        #content div.desc-left img,
170        #content div.desc-right img {
171                float: none;
172                display: block; margin: 0 auto; /* for small images */
173                max-width: 100%;
174                height: auto;
175        }
176
177        #content div.desc-left,
178        #content div.desc-right,
179        #content .auto-bildbreite {
180                width: 100% !important;
181                margin: 1em 0;
182        }
183
184}
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