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