slitaz-forge view play.slitaz.me/style-tiny.css @ rev 687

Add mobile style for play.slitaz.org (testing)
author Christophe Lincoln <pankso@slitaz.org>
date Wed Mar 22 18:50:18 2017 +0100 (2017-03-22)
parents
children
line source
1 @media (max-width: 620px) {
2
3 body { font: 100% sans-serif, vernada, arial; }
4 #network { display: none !important; } /* Under header ??? */
5 .mobile { display: block !important; }
6
7 body {
8 width: auto;
9 margin: 0;
10 padding: 0;
11 }
12 img, table, td, blockquote, code, pre, textarea, input, iframe,
13 object, embed, video {
14 max-width: 100%;
15 }
16
17 header {
18 height: 90px;
19 text-align: center;
20 }
21
22 header h1 { font-size: 24px; padding: 5px 0; width: auto; margin: 0; }
23
24 #logo {
25 display: block;
26 position: relative;
27 float: none;
28 left: 0;
29 top: 10px;
30 height: 40px;
31 margin-left: auto;
32 margin-right: auto;
33 }
34
35 /* Keep images ratio */
36 img {
37 height: auto;
38 -webkit-box-sizing: border-box;
39 -moz-box-sizing: border-box;
40 box-sizing: border-box;
41 }
42 textarea, table, td, th, code, pre, samp {
43 word-wrap: break-word;
44 -webkit-hyphens: auto;
45 -moz-hyphens: auto;
46 hyphens: auto;
47 }
48 code, pre, samp { white-space: pre-wrap; }
49
50 /* Navigation */
51
52 nav {
53 min-height: 0;
54 max-height: 0;
55 padding: 0;
56 text-align: left;
57 color: #222;
58 border-bottom: 1px solid #afafaf;
59 margin-bottom: 20px;
60 top: 0;
61 display: block;
62 }
63
64 nav:before {
65 content: "Menu \25BC";
66 display: block;
67 padding: .8em;
68 background: #333;
69 color: #fff;
70 border-bottom: 4px solid #afafaf;
71 background: #222 url(images/logo.png) no-repeat right;
72 }
73 nav ul {
74 max-height: 0;
75 overflow: hidden;
76 margin: 0; padding: 0;
77 list-style: none;
78 }
79 nav a {
80 display: block;
81 padding: 0.8em;
82 background: #4A7377;
83 color: #fff;
84 text-decoration: none;
85 background-color: #000;
86 opacity: 0.95;
87 border-radius: 0px;
88 }
89 nav:not(:focus) ul {
90 max-height: 0;
91 }
92 nav:focus ul {
93 margin-bottom: 25em;
94 }
95 nav ul {
96 /* number of <li> x5 */
97 max-height: 25em;
98 -webkit-transition: max-height .4s;
99 transition: max-height .4s;
100 }
101
102 /* Content */
103
104 #content {
105 margin: 20px 0 0 0;
106 padding: 2%;
107 text-align: justify;
108 max-width: auto;
109 }
110 }
111
112 @media (max-device-width:768px) and (orientation: landscape) {
113 html {
114 -webkit-text-size-adjust: 100%;
115 }
116 }