slitaz-forge diff scn/style-tiny.css @ rev 534
General Codex improvment
author | Christophe Lincoln <pankso@slitaz.org> |
---|---|
date | Thu May 01 03:39:29 2014 +0200 (2014-05-01) |
parents | |
children |
line diff
1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 1.2 +++ b/scn/style-tiny.css Thu May 01 03:39:29 2014 +0200 1.3 @@ -0,0 +1,107 @@ 1.4 +/* Tiny/Mobile screens CSS style for SliTaz */ 1.5 + 1.6 +@media (max-width: 680px) { 1.7 + 1.8 + body { font: 100% sans-serif, vernada, arial; } 1.9 + #header, #logo, nav p { display: none !important; } 1.10 + #user { top: 65px; background-color: #ddd; } 1.11 + #user a { color: #444; } #user a:hover { color: #000; } 1.12 + #account-info { width: auto; height: 120px; float: none; } 1.13 + #login { width: auto; float: none; height: 120px; margin-top: 20px; } 1.14 + .mobile { display: block !important; } 1.15 + .mobile span { display: inline !important; } 1.16 + 1.17 + body { 1.18 + width: auto; 1.19 + margin: 0; 1.20 + padding: 0; 1.21 + } 1.22 + img, table, td, blockquote, code, pre, textarea, input, iframe, 1.23 + object, embed, video { 1.24 + max-width: 100%; 1.25 + } 1.26 + 1.27 + /* Keep images ratio */ 1.28 + img { 1.29 + height: auto; 1.30 + -webkit-box-sizing: border-box; 1.31 + -moz-box-sizing: border-box; 1.32 + box-sizing: border-box; 1.33 + } 1.34 + textarea, table, td, th, code, pre, samp { 1.35 + word-wrap: break-word; 1.36 + -webkit-hyphens: auto; 1.37 + -moz-hyphens: auto; 1.38 + hyphens: auto; 1.39 + } 1.40 + code, pre, samp { white-space: pre-wrap; } 1.41 + 1.42 + /* Navigation */ 1.43 + 1.44 + nav { 1.45 + min-height: 0; 1.46 + max-height: 0; 1.47 + font-size: 116%; 1.48 + padding: 0; 1.49 + text-align: left; 1.50 + color: #222; 1.51 + border-bottom: 1px solid #afafaf; 1.52 + margin-bottom: 20px; 1.53 + top: 0; 1.54 + display: block; 1.55 + } 1.56 + 1.57 + nav:before { 1.58 + content: "Menu \25BC"; 1.59 + display: block; 1.60 + padding: .8em; 1.61 + background: #333; 1.62 + color: #fff; 1.63 + border-bottom: 4px solid #afafaf; 1.64 + background: #222 url(images/logo.png) no-repeat right; 1.65 + } 1.66 + nav ul { 1.67 + max-height: 0; 1.68 + overflow: hidden; 1.69 + margin: 0; padding: 0; 1.70 + list-style: none; 1.71 + } 1.72 + nav a { 1.73 + display: block; 1.74 + padding: 0.8em; 1.75 + background: #4A7377; 1.76 + color: #fff; 1.77 + text-decoration: none; 1.78 + background-color: #000; 1.79 + opacity: 0.95; 1.80 + border-radius: 0px; 1.81 + } 1.82 + nav:not(:focus) ul { 1.83 + max-height: 0; 1.84 + } 1.85 + nav:focus ul { 1.86 + margin-bottom: 25em; 1.87 + } 1.88 + nav ul { 1.89 + /* number of <li> x5 */ 1.90 + max-height: 25em; 1.91 + -webkit-transition: max-height .4s; 1.92 + transition: max-height .4s; 1.93 + } 1.94 + 1.95 + /* Content */ 1.96 + 1.97 + #content { 1.98 + margin: 65px 0 0 0; 1.99 + padding: 2%; 1.100 + text-align: justify; 1.101 + max-width: auto; 1.102 + } 1.103 + pre, .box-dl, .box-rpi { overflow: hidden; } 1.104 +} 1.105 + 1.106 +@media (max-device-width:768px) and (orientation: landscape) { 1.107 + html { 1.108 + -webkit-text-size-adjust: 100%; 1.109 + } 1.110 +}