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